Brand Color Palette and Typography Selection: Corporate Identity Guide

When someone encounters a brand for the first time, the majority of their judgement is shaped by visual cues — and the two most powerful components of those cues are colour and typography. The right colour palette positions a brand within its sector, builds trust and reinforces memorability across repeated touchpoints. Typography then fills the emotional foundation that colour lays — it carries voice and personality. When neither is defined as a disciplined system, every new design output looks slightly different from the last. Brand identity loses its coherence. This guide explains how to build a brand colour system and typography in the right layers, and how to integrate both into Figma.

Why Is a Colour Palette the Core of Brand Identity?

Colour is the fastest-recognised visual element of a brand, right after the logo itself. Research consistently documents that consumers rely heavily on visual appearance — with colour leading the way — when forming first impressions and making purchase decisions. Colour accessibility has also become a design requirement in its own right, codified in W3C's Web Content Accessibility Guidelines (WCAG). Consistent colour use ensures a brand evokes the same emotional associations across contexts — web, print, social media; colour inconsistency, by contrast, severs the visual thread that holds a corporate identity together.

Colour selection is strategic, not intuitive. Sector positioning, target audience psychology, competitive palette analysis and accessibility requirements all feed into colour decisions. An intuitively chosen colour may look beautiful, but if it matches a competitor's palette too closely, or fails the WCAG AA threshold due to low contrast, the strategic foundation is compromised before the design process has even begun.

Primary, Secondary, Accent: The Three-Layer Colour System

Professional brand colour systems are structured in three core layers. This architecture is the widely adopted standard in Adobe's design documentation, Google Material Design and corporate brand guideline literature.

• Primary colour: The brand's strongest and most frequently used colour. It appears on logos, headings, buttons and primary surfaces. The goal is for this colour to be the first one consumers associate with the brand.
• Secondary colour: Supports, complements or contrasts the primary. Used in sub-headings, card backgrounds, iconography and secondary buttons. Prevents the primary from feeling monotonous in isolation.
• Accent colour: Reserved for high-attention, limited-area applications — CTA buttons, notifications, labels. Adds energy to the palette; overuse erodes its effect.
• Neutral group: Whites, blacks and greys for backgrounds, body text and borders. Not technically 'colours' but an essential fourth component of any system; omitting them leaves the palette without coherence.

How Many Colours in a Palette? The Case for Discipline

Examining well-constructed brand guidelines across industries, you find that successful palettes typically contain between three and five core colours. Exceeding this creates an illusion of creative richness for the designer while generating confusion for the brand. Too many colours — each used with different frequencies — dilute brand association and leave new designers uncertain about which colour belongs where.

The practical rule: start lean, expand deliberately. At launch, a primary + secondary + accent + two to three neutral tones is sufficient. As the brand matures and product or service range grows, an extended palette can be defined — but that extension must build on the core system, not override it.

HEX, RGB, CMYK, Pantone: Which Format Goes Where?

A single HEX code in a brand guideline is never enough. Every output environment uses a different colour space, and these colour spaces do not translate to one another with perfect fidelity. Every colour in the guideline should be documented in all four formats.

• HEX (#1A2B3C): The standard for web and digital design. Used natively in CSS, Figma, Webflow and Canva. This is the reference value for all screen environments.
• RGB (R:26 G:43 B:60): Operates in the same colour space as HEX for screen output; however, some design tools and video production software require RGB values directly.
• CMYK (C:57 M:28 Y:0 K:76): For print. Determines ink mix ratios in offset and digital printing. Does not map exactly onto screen colour; colour proofing before print runs is mandatory.
• Pantone (PMS): For physical production — packaging, textiles, business card printing, signage. A Pantone code guarantees the same colour regardless of which facility produces the item. Pantone licensing is purchased separately.

Small businesses can start with HEX and CMYK. Once product packaging, textiles or global manufacturing come into play, maintaining consistent colour without Pantone codes becomes increasingly difficult across suppliers.

Colour Contrast and Accessibility: The WCAG AA Standard

A brand colour can be visually beautiful while remaining illegible to users in a web context. This is why the contrast ratios defined in W3C's Web Content Accessibility Guidelines (WCAG 2.1 and 2.2) must be integrated into colour decisions at the design stage. Both WebAIM.org and the W3C WCAG 2.2 specification document these thresholds explicitly.

• Normal body text (below 18pt, or below 14pt bold): Minimum contrast ratio of 4.5:1 between background and text — WCAG AA level.
• Large text (18pt and above, or 14pt bold and above): Minimum 3:1 contrast ratio.
• UI components (button borders, form fields, icons): Minimum 3:1.
• AAA level (enhanced accessibility): 7:1 for normal text, 4.5:1 for large text.

The WebAIM Million report documents that low contrast text is the single most common accessibility error found on websites across the web. In practice this means: once you have defined your primary colour, immediately test it against both white and black text using the Colour Contrast Analyser (Paciello Group, free) or the WebAIM Contrast Checker. A primary colour that fails the 4.5:1 threshold must either be darkened slightly or have its paired text colour adjusted to achieve compliance. Logos are explicitly exempt from WCAG contrast requirements — but legibility remains a practical consideration regardless.

Competitive Colour Palette Analysis and Differentiation

The strategic dimension of colour selection starts with a single question: what colours are your competitors using? If a dominant hue exists in your sector — deep blues in finance, green-and-white combinations in healthcare — using it makes you familiar but not distinctive. Deliberately avoiding it is one of the fastest visual routes to standing out in a crowded category.

The process is straightforward: gather the logos and home pages of five to ten sector competitors, note the dominant hue for each, and build a frequency map. Which colour groups are underrepresented or entirely absent? This analysis matters not only for differentiation but also for legal risk management — a colour palette that is identical to, or deceptively similar to, an established competitor's can create serious trademark complications.

How Does Typography Carry Brand Character?

Font selection is as strategic a decision as colour. A serif typeface — Playfair Display, Georgia, Cormorant Garamond — evokes trust, tradition and expertise. A sans-serif typeface — Inter, Helvetica, Manrope, DM Sans — communicates modernity, clarity and a technology orientation. These associations are not fixed rules, but they are reinforced when they align with sector norms. Typography also creates hierarchy: when a user scans a page, they instinctively understand what is a heading, what is supporting text, what is a CTA — all communicated through font weight, size and family before a single word is read.

Serif or Sans-Serif? A Sector Framework

There is no single correct answer for every category, but sector patterns and user perception research offer useful starting frameworks. These are starting points, not fixed rules.

• Legal, financial, consulting, luxury: Serif fonts reinforce trust and authority perception. Examples: Playfair Display, Georgia, Cormorant Garamond.
• Technology, SaaS, e-commerce, startups: Sans-serif fonts communicate cleanliness, speed and modernity. Examples: Inter, Manrope, Plus Jakarta Sans, DM Sans.
• Creative agencies, fashion, beauty: Display typefaces — geometric sans or custom typography — can be used for personality and differentiation; readability must be preserved.
• Healthcare, education, NGOs: High readability is the priority; neutral sans-serif is preferred. Accessible font families with a wide x-height and open numerals are important.
• Script or handwritten fonts: For logo, heading or decorative use only. They dramatically reduce readability in body copy — never use in running text.

Primary and Secondary Font: The Two-Layer System

For most brands, two font families are sufficient — and recommended. More creates visual noise; each additional font family is a language that must be learned, and makes design consistency harder to maintain.

• Primary font: Headings (H1–H3), hero sections, cover materials. The brand's voice is carried through this font. It should have a distinctive character while scaling well across weight and size variations.
• Secondary font: Body text, sub-headings (H4–H6), captions, form fields. High readability is the priority. In most projects, a bold or display primary paired with a regular or light secondary creates a strong and legible combination.
• Weight scale: Define the specific weights to be used within each font family upfront — for example, Regular 400, Medium 500, Semibold 600, Bold 700. Using all available weights interchangeably destroys typographic hierarchy.

Google Fonts vs. Licensed Fonts: Cost and Legal Considerations

This decision affects both budget and legal risk. The majority of fonts in the Google Fonts library are licensed under the SIL Open Font License (OFL) or Apache 2.0. According to the Google Fonts official documentation (developers.google.com/fonts/faq), these fonts can be used in commercial projects and client work without cost and without attribution requirements. The only restriction is selling the font file itself as a standalone product.

The advantage of licensed (commercial) fonts is uniqueness. Widely used Google Fonts such as Inter or Montserrat appear on tens of thousands of websites — their contribution to brand differentiation can be limited. A proprietary or little-used commercial typeface widens the visual distance from competitors. However, two points require attention with licensed fonts: the web font licence (often tiered by monthly page views) and the desktop licence (a separate purchase for designer workstations). When a font is used for a client project, the agreement should clarify whether the licence covers the client or only the agency.

Web, Print and Social Media: Typography Application Differences

The same font at the same point size can look dramatically different on a web page, in print and in a social media graphic. Anticipating these differences and documenting them in the brand guideline ensures consistent output across platforms.

• Web: Pixel grid hinting matters. Body text below 16px creates readability problems. Variable fonts improve performance by delivering all weights in a single file.
• Print: Point (pt) units and a minimum of 9pt for body text. Thin or light weights at small sizes can bleed in lower-quality paper printing — use Regular as the minimum weight.
• Social media graphics: Display fonts work well for large, few-word headlines. Small text in social graphics is unreadable — avoid anything below 24px equivalent in graphic exports.
• Presentations (Keynote/PowerPoint): System fonts (San Francisco, Segoe UI) are the safe choice because they are pre-installed on all devices. If a custom font is used, the font package must be distributed with the file.

Colour and Typography Harmony Rules

The two systems — colour and typography — cannot be defined in isolation from each other. Each decision in one affects the other. The following rules provide a practical framework for running both systems in harmony.

• Primary font colour: Using brand colours for body text reduces readability. A neutral dark tone — black or dark grey such as #1A1A1A or #333 — should be the text default. The primary brand colour in text should be used sparingly, for emphasis only.
• Background-to-text equation: Every background/text colour combination must be WCAG AA tested (4.5:1). When white text is placed on a primary or secondary colour background, contrast can deteriorate rapidly.
• Weight and colour combinations: A thin or light weight at small size over a low-contrast colour creates a double penalty — both weight and contrast fall short. Explicitly prohibit this combination in the brand guideline.
• Accent colour and font: If a CTA button with an accent colour background does not provide sufficient contrast against white text — common with bright yellows or light oranges — switch to dark text. The contrast requirement does not yield to brand preference.

Brand Guideline Integration: Colour and Typography Systems in Figma

Once colour and typography decisions are made, those decisions need to be made accessible and updateable for the design team. Figma is the de facto standard for this today. A few key steps make the system operational.

• Colour Styles: Create named styles in Figma for every colour — brand/primary, brand/secondary, brand/accent, neutral/text, neutral/bg and so on. Designs that reference the style name rather than a raw HEX value update automatically when the colour changes.
• Text Styles: Save every heading level (H1–H6), body text, caption and label as a Figma text style — combining font family, size, weight and line height. Designers no longer need to select these manually each time.
• Design Tokens (advanced): Using Figma Variables or a separate token management tool (Style Dictionary, Tokens Studio), colour and typography values can be synchronised directly with the codebase and deployed as CSS custom properties — a single update propagates across all platforms.
• Access and version control: When the guideline file is shared as a team library, all project files draw from the same styles. When an update is made, Figma notifies linked files of the library change — designers review and accept the update with one click.

In the corporate identity work carried out for Archidecors, the colour system was documented using Figma Color Styles and the typographic hierarchy was encoded in Text Styles. Both were shared as a team library used across web and print design. This approach ensured that materials produced by different designers maintained consistent brand language throughout the project.

Define Your Colour and Typography With Professional Guidance

Building your colour and typography system on a solid foundation accelerates every subsequent design decision and guarantees brand consistency at scale. ADWEBX works with brands on colour system definition, typography selection and Figma guideline integration as a unified engagement. To take the first step, request a free brand analysis via WhatsApp at 905322477388 or reach out through our contact page.

Frequently Asked Questions

How many colours should a brand palette contain?

A system comprising primary, secondary, accent and two to three neutral tones — five to seven values in total — is sufficient for launch. More colours make consistency harder to maintain; designers become uncertain about which colour belongs where. An extended palette can be defined as the brand matures, but the core system must remain intact.

Why does WCAG AA colour contrast matter for brands?

WCAG AA (W3C WCAG 2.1/2.2) sets a minimum contrast ratio of 4.5:1 for normal text against its background. Low contrast makes content unreadable for users with low vision or colour blindness, and violates legal accessibility requirements in many jurisdictions. It also impairs readability for all users in bright ambient light or on low-brightness screens.

Can Google Fonts be used in commercial brand projects?

Yes. The majority of fonts in Google Fonts are licensed under the SIL Open Font License (OFL) or Apache 2.0. The Google Fonts official documentation explicitly states that these fonts may be used in commercial projects and client work, without cost and without attribution requirements. The sole restriction is selling the font file itself as a standalone product.

How do I choose between serif and sans-serif for my brand?

The decision should be informed by sector norms, target audience expectations and brand personality. Legal, financial and luxury brands use serif fonts to convey trust and authority; technology, SaaS and startup brands use sans-serif to signal modernity and clarity. Reviewing the competitive landscape is valuable — whatever is dominant in your sector is worth questioning as a differentiator.

Is a Pantone colour code necessary for every brand?

Not for every brand. For a brand operating exclusively in digital channels, HEX and RGB values are sufficient. Pantone codes become essential when physical production is involved — packaging, textiles, signage, printed materials. If production takes place across multiple facilities or countries, Pantone is the standard that guarantees colour consistency across suppliers. In that case, building Pantone into the system at the start is more efficient than retrofitting it later.