Colors — FORK Design Language

Backgrounds

Base

systemBackground

secondary

tertiary

Elevated

systemBackground

secondary

tertiary

Grouped

systemGroupedBackground

secondary

tertiary

Grouped Elevated

systemGroupedBackground

secondary

tertiary

When to use

Base/Main app canvas, full-screen views, navigation bars
Elevated/Sheets, popovers, modals, cards floating above content
Grouped/Settings-style lists, forms, screens with inset sections
Grouped Elevated/Sheets or modals that contain grouped content inside
secondary/Content area within a parent surface (cell inside a table)
tertiary/Nested content within secondary (element inside a cell)

Platform notes

iOS UIKit auto-resolves light/dark via trait collection. Elevated variants are automatic in sheets/popovers.
Android Use ColorStateList or Compose Color with these exact hex values. Dark theme resolves via isSystemInDarkTheme() in Compose or AppCompatDelegate.MODE_NIGHT_* in Views. Override colorSurface in your theme — do not rely on Material 3 defaults.
Web Use CSS custom properties with [data-theme="dark"] override or @media (prefers-color-scheme: dark). No auto-elevation — manually select Elevated tokens for modals/dialogs.
Web Grouped variants map to page-level backgrounds. Use --systemGroupedBackground on body, --secondarySystemGroupedBackground on cards within.

Labels

Primary Label label

Secondary Label secondaryLabel

Tertiary Label tertiaryLabel

Quaternary Label quaternaryLabel

When to use

label/Titles, body text, primary content — highest contrast
secondaryLabel/Subtitles, timestamps, captions, supplementary info
tertiaryLabel/Placeholder text, disabled states, footnotes
quaternaryLabel/Watermarks, decorative text, barely visible annotations

Platform notes

iOS Maps to UIColor.label, .secondaryLabel, .tertiaryLabel, .quaternaryLabel. Auto-resolves for light/dark via trait collection.
Android Use FORK token hex values directly. Material 3 dynamic color must be disabled — override colorOnSurface, colorOnSurfaceVariant in your theme to match FORK label hierarchy.
Web Use var(--label) etc. Always set color explicitly — browsers default to black, not the warm neutral.

Fills

Base

systemFill

secondary

tertiary

quaternary

Elevated

systemFill

secondary

tertiary

quaternary

Grouped

systemFill

secondary

tertiary

quaternary

Grouped Elevated

systemFill

secondary

tertiary

quaternary

When to use

systemFill/Text field backgrounds, search bars, segmented controls
secondarySystemFill/Pressed/highlighted button states, active toggles
tertiarySystemFill/Slider tracks, progress bar backgrounds
quaternarySystemFill/Hover states, very subtle tints, inactive surfaces

Platform notes

iOS Maps to UIColor.systemFill through .quaternarySystemFill. Alpha-based — always place on a solid background to avoid compounding.
Android Alpha-based fills use Color(0x__RRGGBB) format with alpha in the top byte. Same stacking caveat — place on a solid background only.
Web Use var(--systemFill) etc. Never stack two alpha fills — the compound opacity creates darker-than-intended surfaces.

Separators

separator

opaqueSeparator

When to use

separator/Between table rows, list items — thin, with alpha to soften on any background
opaqueSeparator/Navigation bar borders, toolbar edges, hard dividers — always crisp

Platform notes

iOS UIColor.separator (alpha) vs UIColor.opaqueSeparator. Table view separators use separator; toolbar borders use opaqueSeparator.
Android Use MaterialDivider or Compose HorizontalDivider with FORK token colors. Override Material 3 colorOutlineVariant to match --separator.
Web border-color: var(--separator) for list dividers. var(--opaqueSeparator) for nav/toolbar borders where alpha blending looks muddy.

System Colors / Tint

Red

Orange

Yellow

Green

Blue

Pink

Tint

When to use

Red/Destructive actions, errors, delete buttons, critical alerts
Orange/Warnings, attention-needed states, pending actions
Yellow/Highlights, starred/favorited, rating indicators
Green/Success states, online/active status, confirmations
Blue/Links, informational, selections, secondary actions
Pink/Badges, reactions, special markers
Tint/Primary brand action, CTA buttons, active tabs, key highlights

Platform notes

iOS Maps to UIColor.systemRed through .systemPink. These shift slightly between light/dark for perceptual consistency.
Android System colors map to FORK tokens, not Material 3 defaults. Override colorPrimary, colorError, etc. in your theme. Values shift per theme — use separate light/dark resource qualifiers or Compose darkColorScheme()/lightColorScheme().
Web CSS tokens shift values via [data-theme="dark"]. The hex values differ per theme — never hardcode a light-mode hex in dark-mode contexts.

Tint Alternatives

Orange (default)

Coral

Indigo

Teal

Amber

Cobalt

When to use

Orange/Default brand tint — TE-inspired warm orange. Primary actions, CTAs, active state
Coral/Warm red — social features, personal content, reactions, approachable actions
Indigo/Deep violet — productivity, deep work, professional contexts, focus states
Teal/Blue-green — health, environment, calm states, secondary brand moments
Amber/Warm gold — premium features, achievements, reward systems, Braun-inspired warmth
Cobalt/True blue — data, navigation, trust signals, technical contexts, engineering tools

Platform notes

All Tint is user-selectable. Always reference var(--tint), never a specific hex. The active tint is set at runtime via JS (Web), app config (iOS), or theme overlay (Android).
Android Apply tint via a runtime theme overlay or Compose CompositionLocal. Disable Material 3 dynamic color — dynamicColor = false in MaterialTheme. FORK tint must override colorPrimary.
Web Tint picker updates --tint and --selection via root.style.setProperty(). This overrides [data-theme] specificity — don't rely on theme selectors for tint-affected tokens.

System Grays

GrayGray 2Gray 3Gray 4Gray 5Gray 6

When to use

Gray/Secondary icons, inactive tab bar items
Gray 2/Disabled controls, inactive switches
Gray 3–4/Borders, outlines, input field strokes
Gray 5–6/Subtle backgrounds, skeleton loaders, divider zones

Platform notes

iOS UIColor.systemGray through .systemGray6. Warm-shifted — not pure gray. Used for inactive states, borders, and subtle backgrounds.
Android Use FORK gray hex values directly — warm-shifted, not Material gray. Override colorOutline and colorSurfaceVariant in your theme. Gray scale inverts direction in dark mode, same as iOS.
Web All grays use warm undertone (#1A1A18 base, not #808080). Check resolved values in both themes — gray scale inverts direction in dark mode.

Semantic Tokens

link

destructive

success

warning

disabled

disabledLabel

selection

badge

skeleton

When to use

link/Tappable inline text, URLs, "see more" actions
destructive/Delete buttons, destructive alerts, swipe-to-delete
success/Confirmation banners, completed states, checkmarks
warning/Caution alerts, expiring states, limit-approaching indicators
disabled / disabledLabel/Inactive controls (fill) and their text/icon color
selection/Text selection highlight, selected row/cell background
badge/Notification badges, unread counts
skeleton/Loading placeholders, shimmer effect base

Platform notes

iOS Map to app-level color assets. --destructive = asset "destructive", --link = tintColor on interactive elements.
Android Map to FORK theme attributes. --destructive overrides colorError, --link overrides colorPrimary. Use semantic FORK tokens — not Material 3 semantic colors which may diverge.
Web Use semantic tokens for meaning, not system colors. var(--destructive) for delete buttons — not var(--systemRed). Semantic tokens may diverge from system colors in future.
Web --selection is alpha-based and tint-derived. It updates when the user switches tint preset.

On-Colors (text on filled backgrounds)

onLight on Tint

onLight on Red

onLight on Blue

onLight on Green

onDark on Yellow

onDark on Gray6

When to use

onLight/White text on saturated backgrounds: Red, Orange, Green, Blue, Pink, Tint
onDark/Dark text on pale backgrounds: Yellow, light grays, warning badges

Platform notes

All onDark is invariant (#1A1A18) across both themes — always dark text for light-background fills (Yellow, Gray6, Amber). onLight is invariant (#FFFFFF) across both themes.