OGCR Design System
Login

OGCR Design System

Live reference of the tokens defined in src/ogcr-theme.css. Mirrors OGCR Design System (Figma) and the verbatim copy in src/ogcr-design-system-reference.css.

Brand

Brand blue 300
#3f88c6 · --brand-blue-300
Brand blue 800
#1c3d59 · --brand-blue-800
Brand green 500
#6db087 · --brand-green-500

Typography

text-h1 — The quick brown fox
text-h2 — The quick brown fox
text-h3 — The quick brown fox
text-h4 — The quick brown fox
text-body — The quick brown fox jumps over the lazy dog.
text-body-s — The quick brown fox jumps over the lazy dog.
text-label-button
text-label-input

Font sizes

Aa --font-size-xs · 14px
Aa --font-size-s · 16px
Aa --font-size-m · 18px
Aa --font-size-l · 20px
Aa --font-size-xl · 24px
Aa --font-size-2xl · 32px
Aa --font-size-3xl · 40px
Aa --font-size-4xl · 48px
Aa --font-size-5xl · 64px

Colour scales (Skeleton)

These are the scales available via Tailwind/Skeleton classes (bg-primary-500, text-surface-700, …). Anchored to the design system tokens.

Primary (OGCR Blue)
50
100
200
300
400
500
600
700
800
900
950
Secondary (OGCR Green)
50
100
200
300
400
500
600
700
800
900
950
Tertiary (Dark Teal)
50
100
200
300
400
500
600
700
800
900
950
Success
50
100
200
300
400
500
600
700
800
900
950
Warning
50
100
200
300
400
500
600
700
800
900
950
Error
50
100
200
300
400
500
600
700
800
900
950
Surface (warm grays)
50
100
200
300
400
500
600
700
800
900
950

Named tokens

Text

Sample text
--text-primary · #0f3655
Sample text
--text-secondary · #6a8196
Sample text
--text-neutral · #334155
Sample text
--text-positive · #416c51
Sample text
--text-negative · #b91c1c
Sample text
--text-warning · #c2410c

Surface

--surface-page
#f8f3ef
--surface-light
#ffffff
--surface-neutral
#f5f5f4
--surface-strong
#0f3655
--surface-inverted
#443321
--surface-positive
#e2efe6
--surface-warning
#ffedd5
--surface-negative
#fee2e2

Border

--border-light
#e7e5e4
--border-medium
#d6d3d1
--border-strong
#a8a29e
--border-default
#01012e14
--border-high-contrast
#443321
--border-positive-light
#c5dfce
--border-warning-light
#fed7aa
--border-negative-light
#fecaca
--border-negative-strong
#dc2626

Interaction

--interaction-primary-default
#4f8263
--interaction-primary-hover
#416c51
--interaction-primary-active
#416c51
--interaction-primary-focus
#e2efe6
--interaction-secondary-focus
#e2d0bf
--focus-ring-error
#fecaca

Spacing

--space-2xs
4px
--space-xs
8px
--space-s
12px
--space-m
16px
--space-l
24px
--space-xl
32px
--space-3xl
64px

Radius

--radius-xs
2px
--radius-s
4px
--radius-m
8px
--radius-l
12px
--radius-xl
16px
--radius-full
999px

Elevation

Elevation L
--elevation-l
No elevation
(border only)

Buttons (Skeleton)

Form elements

Cards

Default card

Surface 50, light border, radius L.

Positive

surface-positive + border-positive-light.

Warning

surface-warning + border-warning-light.

Negative

surface-negative + border-negative-light.

Strong

surface-strong (used for hero panels).

Inverted

surface-inverted (warm dark).

Pills / badges

Primary Secondary Tertiary Success Warning Error

Motion

--motion-fast
150ms ease-out
--motion-base
200ms cubic-bezier(0.2, 0, 0, 1)