---
name: KROW Design System Token Reference
description: Verified token values from actual source files in apps/mobile/packages/design_system/lib/src/
type: reference
---

## Source Files (verified 2026-03-18)

- `ui_colors.dart` — all color tokens
- `ui_typography.dart` — all text styles (primary font: Instrument Sans, secondary: Space Grotesk)
- `ui_constants.dart` — spacing, radius, icon sizes
- `ui_icons.dart` — icon aliases over LucideIcons (primary) + FontAwesomeIcons (secondary)

## Key Color Tokens (hex values confirmed)

| Token | Hex | Use |
|-------|-----|-----|
| `UiColors.background` | `#FAFBFC` | Page background |
| `UiColors.cardViewBackground` | `#FFFFFF` | Card surface |
| `UiColors.bgSecondary` | `#F1F3F5` | Toggle/section headers |
| `UiColors.bgThird` | `#EDF0F2` | — |
| `UiColors.primary` | `#0A39DF` | Brand blue |
| `UiColors.textPrimary` | `#121826` | Main text |
| `UiColors.textSecondary` | `#6A7382` | Secondary/muted text |
| `UiColors.textInactive` | `#9CA3AF` | Disabled/placeholder |
| `UiColors.textSuccess` | `#0A8159` | Green text (darker than success icon) |
| `UiColors.textError` | `#F04444` | Red text |
| `UiColors.textWarning` | `#D97706` | Amber text |
| `UiColors.success` | `#10B981` | Green brand color |
| `UiColors.destructive` | `#F04444` | Red brand color |
| `UiColors.border` | `#D1D5DB` | Default border |
| `UiColors.separatorSecondary` | `#F1F5F9` | Light dividers |
| `UiColors.tagActive` | `#DCFCE7` | Active status badge bg |
| `UiColors.tagPending` | `#FEF3C7` | Pending badge bg |
| `UiColors.tagError` | `#FEE2E2` | Error banner bg |
| `UiColors.tagFreeze` | `#F3F4F6` | Ended/frozen badge bg |
| `UiColors.tagInProgress` | `#DBEAFE` | In-progress badge bg |
| `UiColors.iconDisabled` | `#D1D5DB` | Disabled icon color |
| `UiColors.muted` | `#F1F3F5` | Shimmer base color |

## Key Spacing Constants

| Token | Value |
|-------|-------|
| `space1` | 4dp |
| `space2` | 8dp |
| `space3` | 12dp |
| `space4` | 16dp |
| `space5` | 20dp |
| `space6` | 24dp |
| `space8` | 32dp |
| `space10` | 40dp |
| `space12` | 48dp |

## Key Radius Constants

| Token | Value |
|-------|-------|
| `radiusSm` | 4dp |
| `radiusMd` (radiusMdValue) | 6dp |
| `radiusBase` | 12dp |
| `radiusLg` | 12dp (BorderRadius.circular(12)) |
| `radiusXl` | 16dp |
| `radius2xl` | 24dp |
| `radiusFull` | 999dp |

NOTE: `radiusBase` is a `double` (12.0), `radiusLg` is a `BorderRadius`. Use `BorderRadius.circular(UiConstants.radiusBase)` when a double is needed.

## Icon Sizes

| Token | Value |
|-------|-------|
| `iconXs` | 12dp |
| `iconSm` | 16dp |
| `iconMd` | 20dp |
| `iconLg` | 24dp |
| `iconXl` | 32dp |

## Key Typography Styles (Instrument Sans)

| Token | Size | Weight | Notes |
|-------|------|--------|-------|
| `display1b` | 26px | 600 | letterSpacing: -1 |
| `title1b` | 18px | 600 | height: 1.5 |
| `title1m` | 18px | 500 | height: 1.5 |
| `title2b` | 16px | 600 | height: 1.1 |
| `body1m` | 16px | 600 | letterSpacing: -0.025 |
| `body1r` | 16px | 400 | letterSpacing: -0.05 |
| `body2b` | 14px | 700 | height: 1.5 |
| `body2m` | 14px | 500 | height: 1.5 |
| `body2r` | 14px | 400 | letterSpacing: 0.1 |
| `body3r` | 12px | 400 | height: 1.5 |
| `body3m` | 12px | 500 | letterSpacing: -0.1 |
| `footnote1r` | 12px | 400 | letterSpacing: 0.05 |
| `footnote1m` | 12px | 500 | — |
| `footnote2b` | 10px | 700 | — |
| `footnote2r` | 10px | 400 | — |
| `titleUppercase3m` | 12px | 500 | letterSpacing: 0.7 — use for ALL-CAPS section labels |

## Typography Color Extension

`UiTypography` styles have a `.textSecondary`, `.textSuccess`, `.textError`, `.textWarning`, `.primary`, `.white` extension defined in `TypographyColors`. Use these instead of `.copyWith(color: ...)` where possible for brevity.