Beestera Design System @beestera/tokens v0.1.0
@beestera/tokens

Design tokens

Rendered directly from the built package — what you see here is what ships. Source: packages/tokens/src/tokens.json.

Colors

--color-brand-50: #fffbeb
--color-brand-100: #fff4c2
--color-brand-200: #ffea8f
--color-brand-300: #ffe05c
--color-brand-400: #ffde33
--color-brand-500: #ffd700
--color-brand-600: #ffbb00
--color-brand-700: #fca000
--color-brand-800: #c27c00
--color-brand-900: #8f5b00
--color-brand: #ffd700
--color-brand-strong: #fca000
--color-neutral-0: #ffffff
--color-neutral-50: #fafafa
--color-neutral-100: #f4f4f5
--color-neutral-200: #e4e4e7
--color-neutral-300: #d4d4d8
--color-neutral-400: #a1a1aa
--color-neutral-500: #71717a
--color-neutral-600: #52525b
--color-neutral-700: #3f3f46
--color-neutral-800: #27272a
--color-neutral-900: #18181b
--color-neutral-950: #09090b
--color-ink: #18181b
--color-muted: #52525b
--color-subtle: #a1a1aa
--color-surface: #ffffff
--color-surface-alt: #fafafa
--color-border: #e4e4e7
--color-success: #22c55e
--color-danger: #dc2626
--color-warning: #f59e0b
--color-info: #3b82f6

Gradients

--gradient-brand: linear-gradient(180deg, var(--color-brand-600) 0%, var(--color-brand-500) 100%)

Fonts

Aa Beestera 123
--font-sans: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
Aa Beestera 123
--font-accent: "Sweet Sans Pro Heavy", var(--font-sans)

Type scale

Aa Beestera
--text-display: 3.5rem
Aa Beestera
--text-h1: 2.5rem
Aa Beestera
--text-h2: 2rem
Aa Beestera
--text-h3: 1.5rem
Aa Beestera
--text-h4: 1.25rem
Aa Beestera
--text-body-medium: 1.125rem
Aa Beestera
--text-body: 1rem
Aa Beestera
--text-small: 0.875rem
Aa Beestera
--text-xs: 0.625rem
Aa Beestera
--text-label: 0.8125rem

Tracking

--tracking-caps: 0.06em
--tracking-display: -0.01em

Spacing

--spacing: 0.25rem
--spacing-section-sm: 1rem
--spacing-section: 1.5rem
--spacing-section-lg: 3rem
--spacing-section-xl: 5rem
--spacing-content-max: 82.5rem
--spacing-touch-min: 2.75rem

Radius

--radius-sm: 0.375rem
--radius-md: 0.5rem
--radius-card: 0.75rem
--radius-lg: 1rem
--radius-pill: 9999px

Shadows

--shadow-card-default: 0 1px 2px rgba(24, 24, 27, 0.06), 0 1px 3px rgba(24, 24, 27, 0.1)
--shadow-card-hover: 0 4px 6px rgba(24, 24, 27, 0.08), 0 2px 4px rgba(24, 24, 27, 0.12)
--shadow-overlay: 0 10px 15px rgba(24, 24, 27, 0.12), 0 4px 6px rgba(24, 24, 27, 0.1)
--shadow-toast: 0 8px 24px rgba(24, 24, 27, 0.16)
--shadow-glow: 0 0 0 4px rgba(255, 215, 0, 0.3), 0 8px 22px -6px rgba(255, 189, 0, 0.55)

Breakpoints

--breakpoint-sm: 30rem
--breakpoint-md: 48rem
--breakpoint-lg: 64rem
--breakpoint-xl: 80rem
--breakpoint-2xl: 90rem