Skip to content
ggui

Design Tokens

ggui uses the DTCG (Design Tokens Community Group) specification for its theming system. All primitives consume tokens via CSS custom properties with hardcoded fallbacks.

/* Example usage in a component */
color: var(--ggui-color-primary-600, #0284c7);
padding: var(--ggui-spacing-md, 16px);
border-radius: var(--ggui-radius-md, 8px);

Colors

Section titled “Colors”

Color Palettes

Section titled “Color Palettes”

Primary (Sky Blue)

50
#f0f9ff --ggui-color-primary-50
100
#e0f2fe --ggui-color-primary-100
200
#bae6fd --ggui-color-primary-200
300
#7dd3fc --ggui-color-primary-300
400
#38bdf8 --ggui-color-primary-400
500
#0ea5e9 --ggui-color-primary-500
600
#0284c7 --ggui-color-primary-600
700
#0369a1 --ggui-color-primary-700
800
#075985 --ggui-color-primary-800
900
#0c4a6e --ggui-color-primary-900

Gray

50
#f9fafb --ggui-color-neutral-50
100
#f3f4f6 --ggui-color-neutral-100
200
#e5e7eb --ggui-color-neutral-200
300
#d1d5db --ggui-color-neutral-300
400
#9ca3af --ggui-color-neutral-400
500
#6b7280 --ggui-color-neutral-500
600
#4b5563 --ggui-color-neutral-600
700
#374151 --ggui-color-neutral-700
800
#1f2937 --ggui-color-neutral-800
900
#111827 --ggui-color-neutral-900

Success

50
#f0fdf4 --ggui-color-success-50
100
#dcfce7 --ggui-color-success-100
200
#bbf7d0 --ggui-color-success-200
500
#22c55e --ggui-color-success-500
600
#16a34a --ggui-color-success-600
700
#15803d --ggui-color-success-700
800
#166534 --ggui-color-success-800

Warning

50
#fffbeb --ggui-color-warning-50
100
#fef3c7 --ggui-color-warning-100
200
#fde68a --ggui-color-warning-200
500
#f59e0b --ggui-color-warning-500
600
#d97706 --ggui-color-warning-600
700
#b45309 --ggui-color-warning-700
800
#92400e --ggui-color-warning-800

Error

50
#fef2f2 --ggui-color-error-50
100
#fee2e2 --ggui-color-error-100
200
#fecaca --ggui-color-error-200
500
#ef4444 --ggui-color-error-500
600
#dc2626 --ggui-color-error-600
700
#b91c1c --ggui-color-error-700
800
#991b1b --ggui-color-error-800

Info

50
#ecfeff --ggui-color-info-50
100
#cffafe --ggui-color-info-100
200
#a5f3fc --ggui-color-info-200
500
#06b6d4 --ggui-color-info-500
600
#0891b2 --ggui-color-info-600
700
#0e7490 --ggui-color-info-700
800
#155e75 --ggui-color-info-800

Semantic Colors

Section titled “Semantic Colors”

These tokens map to specific UI roles and adapt between light and dark themes.

Background#ffffff--ggui-color-neutral-50
Surface#ffffff--ggui-color-neutral-50
Text Primary#111827--ggui-color-neutral-900
Text Secondary#6b7280--ggui-color-neutral-500
Text Disabled#d1d5db--ggui-color-neutral-300

Spacing

Section titled “Spacing”

A consistent spacing scale ensures visual rhythm across all components.

xs 4px
--ggui-spacing-1
sm 8px
--ggui-spacing-2
md 16px
--ggui-spacing-4
lg 24px
--ggui-spacing-6
xl 32px
--ggui-spacing-8
2xl 48px
--ggui-spacing-12
3xl 64px
--ggui-spacing-3xl

Typography

Section titled “Typography”

Font Families

The quick brown fox jumps over the lazy dog
Sans --ggui-font-family-sans
The quick brown fox jumps over the lazy dog
Mono --ggui-font-family-mono

Font Sizes

xs 12px
The quick brown fox --ggui-font-size-xs
sm 14px
The quick brown fox --ggui-font-size-sm
base 16px
The quick brown fox --ggui-font-size-base
lg 18px
The quick brown fox --ggui-font-size-lg
xl 20px
The quick brown fox --ggui-font-size-xl
2xl 24px
The quick brown fox --ggui-font-size-2xl
3xl 30px
The quick brown fox --ggui-font-size-3xl
4xl 36px
The quick brown fox --ggui-font-size-4xl

Font Weights

Normal The quick brown fox jumps over the lazy dog 400
Medium The quick brown fox jumps over the lazy dog 500
Semibold The quick brown fox jumps over the lazy dog 600
Bold The quick brown fox jumps over the lazy dog 700

Line Heights

Tight
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1.25
Normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1.5
Relaxed
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1.75

Border Radius

Section titled “Border Radius”
none0
--ggui-shape-radius-none
sm4px
--ggui-shape-radius-sm
md8px
--ggui-shape-radius-md
lg12px
--ggui-shape-radius-lg
xl16px
--ggui-shape-radius-xl
2xl24px
--ggui-shape-radius-2xl
full9999px
--ggui-shape-radius-full

Shadows

Section titled “Shadows”
sm 0 1px 2px 0 rgba(0, 0, 0, 0.05) --ggui-shape-shadow-sm
md 0 4px 6px -1px rgba(0, 0, 0, 0.1) --ggui-shape-shadow-md
lg 0 10px 15px -3px rgba(0, 0, 0, 0.1) --ggui-shape-shadow-lg
xl 0 20px 25px -5px rgba(0, 0, 0, 0.1) --ggui-shape-shadow-xl
2xl 0 25px 50px -12px rgba(0, 0, 0, 0.25) --ggui-shape-shadow-2xl

Using Tokens

Section titled “Using Tokens”

In React Components

Section titled “In React Components”

All @ggui-ai/design primitives use CSS variables with fallbacks:

import { Button, Card, Input } from '@ggui-ai/design';


// Primitives automatically use design tokens
<Card>
  <Input placeholder="Enter your name" />
  <Button variant="primary">Submit</Button>
</Card>

Custom Components

Section titled “Custom Components”

Reference tokens directly in your CSS:

.my-component {
  background: var(--ggui-color-surface, #ffffff);
  padding: var(--ggui-spacing-md, 16px);
  border-radius: var(--ggui-radius-lg, 12px);
  box-shadow: var(--ggui-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
  font-family: var(--ggui-font-family-sans, Inter, system-ui, sans-serif);
  font-size: var(--ggui-font-size-sm, 14px);
  color: var(--ggui-color-text-primary, #111827);
}

Theming

Section titled “Theming”

Override tokens at the root level to apply a custom theme:

:root {
  --ggui-color-primary-600: #7c3aed; /* Purple instead of sky blue */
  --ggui-color-background: #fefce8;  /* Warm background */
  --ggui-radius-md: 16px;            /* More rounded corners */
}

See the Custom Theming cookbook for a complete guide.