Brand Guide

Guidelines for using the X-Apps brand across digital, product, and communications.

Download assets See guidelines

Culture

Practices and habits that shape the X-Apps way of working.

Learn about our Silicon Valley culture

People

People-first mindset, collaboration, and ownership.

Technology

Tools and practices to improve quality and speed up delivery.

Quick navigation

Foundations Construction Services Logo Logo usage Colors Typography & elements Audiovisual direction Imagery & applications Components & patterns Tokens Checklist Downloads

Brand foundations

X-Apps is a technology team that blends product culture with on-demand software execution, focused on design, agility, and efficiency.

We build apps and systems for companies and startups. We help clients thrive with products, services, and platforms that improve the user experience.

Mission

Build software in an agile, lean way, always aligned with our clients' business goals.

Vision

Drive business progress and automation through technology.

Values

Ownership mindset
Collaboration
Ethics and respect
People first
Always improving

Logo construction

The X is the base module (1x) used to build the entire brand system.

The primary symbol is derived from this module, occupying a strict 13x by 13x grid and keeping consistent proportions across all variations.

13x

13x13 grid

Visual accent

1x proportion

•

The x•apps wordmark is composed using proportional modules.

Delivery model

Agile projects

Turn your software idea into a product

DevOps operation

Ship updates with continuous support

Skilled teams on demand

Embed our professionals into your team

How we work

High performance
Dedicated teams
Operational efficiency

Visual identity

Primary version

Variations

Horizontal: use for institutional materials and digital applications.
Vertical: use when the available area is narrow.
Symbol: use for avatars, favicons, app icons, and compact spaces.

Usage rules (do's & don'ts)

Keep the logo proportions (do not stretch).
Do not apply shadows, outlines, or effects.
Do not change the official colors.
Do not rotate or skew the logo.
Ensure strong contrast on clean, solid backgrounds.

Logo usage

Clear space

Keep at least 4x of clear space around the mark.

Minimum size

Digital (height): horizontal 30 px, vertical 50 px, symbol 20 px.
Print (width): horizontal 30 mm, vertical 23 mm, symbol 8 mm.

Practical rule

If the mark feels cramped or becomes unreadable, choose a simpler variation and increase the available space.

Minimum spacing

Keep at least 4x between the logo and any other element.

Color system

Digital palette (primary)

Primary blue

#003468

primary

White

#FFFFFF

white

Medium gray

#858585

mediumGray

Symbol signature gradient

#E86D30 -> #DB4653

Print reference

Pantone 158 C (orange), Pantone 198 C (magenta), and Pantone Cool Gray 8 C.
HEX reference for print: #F27C36 → #ED485F.

Typography & elements

Primary digital type: Nunito (fallback: Arial, Helvetica, sans-serif).
Supporting type (when needed): Avenir (headings) and Open Sans (body).
Cards and surfaces with subtle rounded corners.
Buttons and chips with pill shape.

Heading signature

For H2/H3 headings, the period can receive the gradient via CSS (::after) to reinforce the brand signature.

X-Apps heading example

Audiovisual direction

Video identity

Audiovisual reference for the X-Apps brand to guide language, rhythm, and visual expression.

Imagery direction

Prioritize imagery that reinforces collaboration, trust, and team execution.
Blue should be dominant; use secondary colors as supporting accents.
Use product mockups with light perspective, soft shadow, and organic supporting shapes (blobs).

UI patterns

Institutional navigation bar with primary-blue background, logo on the left, centered menu, and CTAs on the right.

Institutional hero section with strong headline and paired CTA (outline + filled).

White cards with soft shadow, small radius, and clear text hierarchy.

Standard CTA bar before footer: 'Accelerate your business with X-Apps'.

Design tokens

Core tokens

font-family: Nunito, Arial, Helvetica, sans-serif;
primary: #003468;
white: #FFFFFF;
mediumGray: #858585;
accentGradient: linear-gradient(90deg, #E86D30 0%, #DB4653 100%);
chipsButtons: pill shape;
cards: small radius + soft shadow;

Quality checklist

Structure based on primary blue and white.

Warm accent used sparingly for CTAs and signature elements.

Pill-shaped CTAs, preferably in an outline + filled pair.

Consistent spacing between sections and blocks.

Headings with a gradient-period signature when applicable.

Cards with soft shadow and rounded corners.

Great readability on desktop and mobile.

Brand files

Logo files (SVG/PNG)Favicon pack

Questions about brand usage: comercial@x-apps.com.br