Section 8

Design Tokens

Platform-agnostic design properties for consistent implementation across all platforms.

Design tokens are the single source of truth for design decisions. They store design properties (colors, spacing, typography, etc.) in a platform-agnostic format that can be transformed into CSS, Swift, Kotlin, or any other format required by your platform.

JSON Design Tokens

{
  "color": {
    "brand": {
      "primary": { "value": "#862633" },
      "secondary": { "value": "#9A8555" },
      "logistics": { "value": "#046A38" },
      "industrial": { "value": "#151F6D" }
    },
    "neutral": {
      "900": { "value": "#231F20" },
      "700": { "value": "#5C5A5B" },
      "500": { "value": "#A1A1A1" },
      "300": { "value": "#E0E0E0" },
      "100": { "value": "#F5F5F5" },
      "0": { "value": "#FFFFFF" }
    }
  },
  "space": {
    "1": { "value": "8px" },
    "2": { "value": "16px" },
    "3": { "value": "24px" },
    "4": { "value": "32px" },
    "5": { "value": "40px" },
    "6": { "value": "48px" },
    "8": { "value": "64px" }
  },
  "font": {
    "family": {
      "primary": { "value": "Myriad Pro, sans-serif" },
      "primary-ar": { "value": "GE Thameen, sans-serif" }
    },
    "size": {
      "xs": { "value": "12px" },
      "sm": { "value": "14px" },
      "base": { "value": "16px" },
      "lg": { "value": "18px" },
      "xl": { "value": "20px" },
      "2xl": { "value": "24px" },
      "3xl": { "value": "28px" },
      "4xl": { "value": "36px" },
      "5xl": { "value": "48px" }
    },
    "weight": {
      "regular": { "value": "400" },
      "medium": { "value": "500" },
      "semibold": { "value": "600" },
      "bold": { "value": "700" }
    },
    "lineHeight": {
      "tight": { "value": "1.2" },
      "snug": { "value": "1.3" },
      "normal": { "value": "1.5" },
      "relaxed": { "value": "1.6" }
    }
  },
  "radius": {
    "none": { "value": "0" },
    "sm": { "value": "4px" },
    "md": { "value": "8px" },
    "lg": { "value": "12px" },
    "full": { "value": "9999px" }
  },
  "shadow": {
    "level1": { "value": "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)" },
    "level2": { "value": "0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)" },
    "level3": { "value": "0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)" }
  }
}

Token Categories

Color Tokens

• Brand colors (primary, secondary)
• Sub-brand colors (zones)
• Neutral palette
• Semantic colors (success, error, warning)

Spacing Tokens

• 8px base unit scale
• Margin and padding values
• Gap and gutter values
• Component-specific spacing

Typography Tokens

• Font families
• Font sizes
• Font weights
• Line heights

Border Tokens

• Border radius values
• Border widths
• Border colors

Shadow Tokens

• Elevation levels (1-3)
• Focus ring styles
• Inset shadows

Animation Tokens

• Duration values
• Easing functions
• Transition properties

Usage Guidelines

Always use tokens, never hardcode values

Use var(--color-brand-primary) instead of #862633

Use semantic token names when available

Prefer --color-text-primary over --color-neutral-900

Transform tokens for each platform

Use tools like Style Dictionary to generate platform-specific outputs from the JSON source.