Beestera Design System @beestera/tokens v0.11.0
Tokens / Color

Color

Rendered from the built @beestera/tokens output. Source: packages/tokens/src/tokens.json.

Swatches

--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: #ffbb00
--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: #3d3d3d
--color-neutral-800: #27272a
--color-neutral-900: #181818
--color-neutral-950: #09090b
--color-ink: #181818
--color-muted: #3d3d3d
--color-subtle: #71717a
--color-surface: #ffffff
--color-surface-alt: #fafafa
--color-border: #e4e4e7
--color-success: #178640
--color-danger: #dc2626
--color-warning: #a26807
--color-info: #1a6df4

Contrast (WCAG AA)

Resolved contrast on the semantic text-on-surface pairs. AA text requires ≥ 4.5:1; AA large-text ≥ 3:1. Computed live from the built values.

Pair Sample Ratio AA text AA large
--color-ink on --color-surface Aa Beestera 17.76:1 pass pass
--color-muted on --color-surface Aa Beestera 10.86:1 pass pass
--color-danger on --color-surface Aa Beestera 4.83:1 pass pass
--color-success on --color-surface Aa Beestera 4.65:1 pass pass
--color-warning on --color-surface Aa Beestera 4.65:1 pass pass
--color-info on --color-surface Aa Beestera 4.63:1 pass pass