GFS Design System — Visual Design Token Explorer

01Color TokensPrimary / Neutral / Semantic — Click to Copy

Primary Blues

Midnight

#051B3A

--midnight

Cobalt

#092F64

--cobalt

Navy

#1A5799

--navy

Tufts

#468BE6

--tufts

Jordy

#93BFEF

--jordy

Alice

#E9F5FF

--alice

Ice

#F4F9FF

--ice

Neutrals

Black

#1F1F1F

--black

Charcoal

#2D2D2D

--charcoal

Graphite

#4B5F7A

--graphite

Slate

#6B7280

--slate

Steel

#9CA3AF

--steel

Silver

#D9E1EA

--silver

Fog

#F0F2F5

--fog

White

#FFFFFF

--white

Semantic

Success

#0F766E

--success

Success BG

#F0FDF4

--success-bg

Warning

#B45309

--warning

Warning BG

#FFFBEB

--warning-bg

Error

#DC2626

--error

Error BG

#FEF2F2

--error-bg

Semantic Layer (shadcn-inspired)

--primary

var(--cobalt)

--background

var(--white)

--foreground

var(--black)

--muted

var(--fog)

--accent

var(--alice)

--border

var(--silver)

Click any swatch to copy. Hex value is copied to clipboard. All colors must be referenced via CSS variable, not hardcoded hex.

02Spacing Tokens8px Grid System — Visualized at Actual Size

--sp-1

4px

--sp-2

8px

--sp-3

12px

--sp-4

16px

Default padding

--sp-5

20px

--sp-6

24px

Section gaps

--sp-8

32px

Major breaks

--sp-10

40px

--sp-12

48px

--sp-16

64px

--sp-20

80px

--sp-24

96px

Spacing in Context

4px

8px

12px

16px

24px

32px

48px

64px

96px

Click any bar to copy the token. All spacing follows the 8px base grid with 4px half-step.

03Typography TokensType Scale / Rendered at Actual Size

Token

Size

Weight

Preview

--text-7xl

96px

900

Aa

--text-6xl

72px

900

Aa

--text-5xl

56px

800

Intelligence

--text-4xl

40px

800

Intelligence

--text-3xl

32px

700

Intelligence in the chain

--text-2xl

24px

700

Intelligence in every link of the chain

--text-xl

20px

600

Intelligence in every link of the chain

--text-lg

17px

400

Intelligence in every link of the chain.

--text-base

15px

400

Intelligence in every link of the chain.

--text-sm

13px

500

Intelligence in every link of the chain.

--text-xs

11px

400

SKU-2026-0419 | 38.2F | LOT#B-7721 | EDGEWOOD, NY

Click any row to copy the token. Inter for display/body, IBM Plex Mono for data/labels.

04Border Radius TokensMaximum: 8px — Flat, Technical Aesthetic

--radius-sm

2px

--radius-md

4px (default)

--radius-lg

8px (maximum)

Prohibited

16px+ never used

      Rule: Never use border-radius above 8px. The GFS aesthetic is flat, precise, and technical. Rounded corners signal casualness that conflicts with the brand.
    

05Shadow TokensDefined but Restricted — Why We Don't Use Shadows

--shadow-sm

Subtle lift

--shadow-md

Moderate depth

--shadow-lg

High elevation

--shadow-xl

Modal/overlay

Why we avoid shadows

Shadow tokens are defined for completeness but are not used on standard cards or containers. The GFS design language uses 1px solid borders (--border / --silver) instead. Shadows are reserved exclusively for: (1) focus rings on interactive elements, (2) modal/dialog overlays, (3) floating tooltips. Flat borders reinforce the precise, technical, no-nonsense aesthetic.

Shadows defined for edge cases only. Standard containers use 1px borders. No shadows on cards.

06Easing & Duration TokensAnimation Curves — Click to Play

Easing Curves

--ease-out

cubic-bezier(0.16, 1, 0.3, 1)

Click to play

--ease-in-out

cubic-bezier(0.65, 0, 0.35, 1)

Click to play

--spring

cubic-bezier(0.34, 1.56, 0.64, 1)

Click to play

Duration Tokens

--dur-fast

120ms

--dur-base

200ms

--dur-slow

400ms

--dur-slower

600ms

Click easing cards to see the animation in action. Click duration bars to visualize timing. All animations use these tokens for consistency.

07Breakpoint TokensResponsive Grid Breakpoints

MOBILE
0 - 600px

TAB
768

LAPTOP
1024

DESKTOP
1440

1 col grid
2-3 col
3-4 col
4-6 col

max-width: 600px

All grids collapse to single column. Page padding reduces to 16px. Hero title reduces to --text-5xl. Scroll nav hidden.

max-width: 768px

2-col and 3-col grids become single column. Hero section stacks vertically.

max-width: 1024px

4-6 column grids reduce to 3 columns. Page max-width remains 1440px.

max-width: 1440px

Maximum page container width. Content is centered with 32px padding on both sides.

      Current viewport: 
    

08Dark Mode Token MappingLight to Dark Transformation for Every Token

TOKEN

LIGHT

DARK

DARK HEX

--cobalt

→

#93BFEF

--navy

→

#468BE6

--tufts

→

#6BA3ED

--jordy

→

#1A5799

--alice

→

#0A1929

--black

→

#F0F2F5

--white

→

#111111

--silver

→

#2D2D2D

--fog

→

#1A1A1A

--success

→

#34D399

--warning

→

#FBBF24

--error

→

#F87171

      Dark mode strategy: Blues invert luminance (dark cobalt becomes light jordy). Neutrals fully reverse. Semantic colors shift to their lighter variants for readability on dark backgrounds. Toggle dark mode with the button in the topbar to see all tokens transform in real time.
    

Dark mode is native, not bolted on. Every token has a dark equivalent defined in [data-theme="dark"].

09Token Dependency GraphWhich Tokens Derive From Which

Semantic Layer Dependencies

--cobalt #092F64

→

--primary

→

btn-primary bg

--white #FFFFFF

→

--background

→

body / page bg

--black #1F1F1F

→

--foreground

→

body text color

--fog #F0F2F5

→

--muted

→

--secondary

--silver #D9E1EA

→

--border

→

--input

--alice #E9F5FF

→

--accent

→

hover / selected bg

--tufts #468BE6

→

--ring

→

focus outline

--slate #6B7280

→

--muted-foreground

→

placeholder / label text

Chart Token Dependencies

--chart-1 = --cobalt

--chart-2 = --navy

--chart-3 = --tufts

--chart-4 = --jordy

--chart-5 = --alice

      Architecture: Primitive tokens (hex values) feed semantic tokens (var references) which feed component tokens. In dark mode, only the primitive layer changes -- the semantic and component layers adapt automatically through CSS custom property inheritance.
    

Single source of truth: change a primitive token, all dependents update. This is how the system scales.