Color #

The aFP Design System is built on CSS custom properties, ensuring consistent color usage throughout your project.

Colors are grouped into three main categories:

• Base Colors – structured palettes with a full range of tints (e.g., Base, Shade)
• Brand Colors – semantic colors that convey meaning and state (e.g., Neutral, Error, Success)
• Foundational Colors – role-based tokens used directly in themes (e.g., Text, Link)
• Semantic Colors – additional colors for specific use cases (e.g., Data Visualization)

Each palette (such as base, red, or accent) is defined by a hue and saturation. From these values, lightness steps are generated from 50 (lightest) to 900 (darkest).

The naming convention follows:

--afp-color-{name}-{tint}

Base Colors #

Base colors provide a full spectrum of tints within each palette. They form the foundation of the design system and are applied to backgrounds, borders, and typography to establish hierarchy and maintain accessible contrast.

Brand Colors #

Brand colors are semantic tokens used to communicate meaning and context in the UI. They highlight states, actions, and feedback, helping users quickly interpret importance and intent.

Foundational Colors #

Foundational colors are role-based tokens that provide structure and readability across your theme.

Body #

Body colors define the primary surface and background of your application.
They ensure consistent contrast and readability for all other visual elements placed on top.

Surfaces #

Surface colors define the visual layers of your interface.
They help establish depth and hierarchy by differentiating between background levels such as base, elevated, or lowered areas.

Text #

Text colors are used for standard text elements.

Overlay #

Overlays provide a backdrop to isolate content, often allowing background context to show through.

Shadow #

aFP Design System uses a single color for all shadows.
This is used alongside other shadow tokens to construct your theme's shadows.

Focus #

aFP Design System uses a single color for predictable keyboard navigation on all non-input elements.
Input elements use --afp-color-focus-input alongside other focus tokens to construct your theme’s focus styling.

Border #

Borders use a single color to ensure consistency across components.
This is used alongside other border tokens to construct your theme's borders.

Hover and Active #

In the brand palette, hover states are derived by mixing the base value (40) with a lighter step (30).
This approach keeps states harmonized across components while reducing the need for custom overrides.

Semantic Colors #

Semantic colors reinforce specific messages, intended usage, or expected results through familiar, meaningful hues. Each color is identified by its semantic group, role, and attention level using the format:

--afp-color-{group}-{role}-{attention}

Group #

The semantic color system is organized into the following color groups:

• brand – emphasizes your brand identity and primary actions.
• neutral – represents ordinary or inactive content, backgrounds, or secondary UI elements.
• accent – highlights important elements without being part of the core brand palette.
• success – indicates successful actions, positive feedback, or validation.
• warning – signals caution, potential risks, or intermediate alerts.
• error – communicates errors, problems, or destructive actions.
• info – used for very subtle UI elements, disabled states, or low-priority content.

Role #

Each semantic color is defined for a specific role in the UI:

• fill – used for background colors, large areas, or surfaces.
• border – used for borders, dividers, or other stroke-width elements.
• text – used for text, icons, or any content displayed on a fill.

This separation ensures that contrast and accessibility are predictable and consistent across the UI.

Attention #

Colors are further categorized by the level of attention they draw:

• subtle – slightly more attention than quiet, often used for hover states or low-priority highlights.
• quiet – draws the least attention, ideal for subtle backgrounds, inactive states, or secondary borders.
• normal – standard attention level, suitable for primary content and borders.
• loud – draws the most attention, ideal for critical surfaces, strong borders, or high-emphasis text.

Examples #

All custom properties in this table actually use the prefix --afp-. For example, --afp-color-brand-fill-quiet corresponds to the brand-fill-quiet cell in the table. The prefix is omitted in the table column for readability.

CSS Classes #

Colors can also be applied using utility-style CSS classes. These classes map directly to the underlying color tokens and are generated at build time.

The syntax follows a simple pattern: afp-{context}:{color}

Example #

<div 
  class="
    afp-padding:space-m
    afp-border-s
    afp-border:surface-border
    afp-text:text
    afp-background:surface-elevated
  "
>
  Example
</div>

<div 
  class="
    afp-padding:space-m
    afp-border-s
    afp-border:surface-border
    afp-text:text
    afp-background:surface-elevated
  "
>
  Example
</div>

<div 
  class="
    afp-padding:space-m
    afp-border-s
    afp-border:surface-border
    afp-text:text
    afp-background:surface-elevated
  "
>
  Example
</div>

<div 
  class="
    afp-padding:space-m
    afp-border-s
    afp-border:surface-border
    afp-text:text
    afp-background:surface-elevated
  "
>
  Example
</div>

In this example:

• the border uses --afp-color-surface-border
• the background uses --afp-color-surface-elevated
• the text uses --afp-color-text

Contexts #