Agentic Design System

Foundation tokens extracted from Figma — v1.1

Font Families

Headings — New York LargeThe quick brown fox jumps over the lazy dogWeights: Regular (400), Medium (500), Bold (700)
Body — GeistThe quick brown fox jumps over the lazy dogWeight: Regular (400)
Labels / Links — Departure MonoThe quick brown fox jumps over the lazy dogWeights: Regular (400), Medium (500), Semibold (600)
Code — JetBrains Monoconst agent = new Agent("agentic");Weight: Regular (400)

Typography Primitives

Font Size Scale
--text-super-tiny10pxAg
--text-button12pxAg
--text-tiny13pxAg
--text-small14pxAg
--text-regular16pxAg
--text-medium18pxAg
--text-large20pxAg
--text-huge32pxAg
Line Height Scale
--leading-buttons11px
--leading-tiny15px
--leading-small18px
--leading-regular24px
--leading-huge40px
Letter Spacing
--tracking-tight-0.3pxABCDEFGHIJ
--tracking-normal0ABCDEFGHIJ
--tracking-spacious0.3pxABCDEFGHIJ
Font Weights
--weight-regular400 (Regular)The quick brown fox
--weight-medium500 (Medium)The quick brown fox
--weight-semibold600 (Semibold)The quick brown fox

Typography System

Heading / H1ContactsNew York Large · 32/40 · Regular · tracking: -0.3px
Heading / H2Enable AlertsNew York Large · 20/24 · Medium · tracking: 0
Heading / H3Parse Result SummaryNew York Large · 18/24 · Medium · tracking: 0
Body / MDOne place to manage your contacts and keep everything organized.Geist · 16/24 · Regular · tracking: 0
Body / SMSummary of scenario status. Comprehensive Monday morning review.Geist · 14/18 · Regular · tracking: 0
Body / XSReal-time notification on threshold triggers.Geist · 13/15 · Regular · tracking: 0
Label / MDLenderDeparture Mono · 12/18 · Medium · tracking: 0.3px · uppercase
Button Label / SM+ New ChatDeparture Mono · 10/11 · Semibold · tracking: 0 · uppercase
Code / MDconst gulp = require('gulp');JetBrains Mono · 12/18 · Regular · tracking: 0

Colors

Background
Primary#FFFFFF
--color-bg-primary
Secondary#F7F7F7
--color-bg-secondary
Tertiary#E0E0E0
--color-bg-tertiary
Content
Primary#191919
--color-content-primary
Secondary#616161
--color-content-secondary
Icon#8F8F8F
--color-content-icon
Disabled#E0E0E0
--color-content-disabled
Border
Subtle#E5E5E5
--color-border-subtle
Badge
Label Gray#363636
--color-badge-label-gray
Button
Disabled#F7F7F7
--color-button-disabled
Switch
BG Active#000000
--color-switch-bg-active
BG Inactive#E0E0E0
--color-switch-bg-inactive
Knob Active#FFFFFF
--color-switch-knob-active
Knob Inactive#FFFFFF
--color-switch-knob-inactive
Knob Icon#000000
--color-switch-knob-icon

Spacing

--space-none0px
--space-22px
--space-44px
--space-88px
--space-1010px
--space-1212px
--space-1616px
--space-2020px
--space-2424px
--space-128128px

Icon Sizes

12px
--icon-12
13px
--icon-13
16px
--icon-16
20px
--icon-20
24px
--icon-24
32px
--icon-32
40px
--icon-40

Border Radius

sm
0.5rem
default
1rem
full
9999px

Shadows

elevation-2
elevation-4
switch-toggle

Components

Nav
Navigation