Documentation

Golden
Design System

A unified visual language for building consistent, accessible, and beautiful products — from components to tokens.

5
Color Scales
9
Type Styles
4+
Components
∞
Possibilities
🎨

Color System

Brand, Designer, Success, Warning, and Neutral scales — all with alpha variants.

✦

Typography

Poppins type scale from Display to Caption. Weights, sizes, and usage guidance.

⚡

Playground

Tweak component props interactively and copy the code you need.

Foundations

Colors

Every color in the Golden system is tokenized with semantic names. Update your Figma hex values in the CSS variables at the top of the file.

Brand

The core gold palette. Used for primary actions, highlights, and brand moments.

100
--brand-100
200
--brand-200
300
--brand-300
400
--brand-400
500
--brand-500
600
--brand-600
700
--brand-700
800
--brand-800
900
--brand-900

Designer

A complementary blue-violet accent scale for UI elements and interactions.

100
--designer-100
200
--designer-200
300
--designer-300
400
--designer-400
500
--designer-500
600
--designer-600
700
--designer-700
800
--designer-800
900
--designer-900

Semantic Colors

Success, Warning, and Neutral — use these for status, feedback, and UI grays.

Success
100
--success-100
200
--success-200
300
--success-300
400
--success-400
500
--success-500
600
--success-600
700
--success-700
800
--success-800
900
--success-900
Warning
100
--warning-100
200
--warning-200
300
--warning-300
400
--warning-400
500
--warning-500
600
--warning-600
700
--warning-700
800
--warning-800
900
--warning-900
Neutral
100
--neutral-100
200
--neutral-200
300
--neutral-300
400
--neutral-400
500
--neutral-500
600
--neutral-600
700
--neutral-700
800
--neutral-800
900
--neutral-900
Foundations

Typography

Poppins across all weights and sizes. Every style maps directly to a CSS variable and Figma text style.

Type Scale

A consistent scale from Display to Caption. Use semantically — don't pick sizes based on aesthetics alone.

Display
48px / 700
Golden
H1
36px / 700
Heading One
H2
28px / 600
Heading Two
H3
22px / 600
Heading Three
H4
18px / 600
Heading Four
Body LG
16px / 400
The quick brown fox jumps over the lazy dog.
Body MD
14px / 400
The quick brown fox jumps over the lazy dog.
Body SM
13px / 400
The quick brown fox jumps over the lazy dog.
Caption
11px / 500
CAPTION LABEL TEXT

Font Weights

Poppins ships with a full weight range. Use these intentionally.

Light
300
Golden Design System
Regular
400
Golden Design System
Medium
500
Golden Design System
SemiBold
600
Golden Design System
Bold
700
Golden Design System
ExtraBold
800
Golden Design System
Foundations

Spacing

An 8-point base grid. All spacing values are multiples of 4px for consistency.

Spacing Scale

Use these tokens everywhere — padding, margin, gap. Never use arbitrary values.

TokenValueVisualUsage
--space-14px
Icon gap, tight padding
--space-28px
Internal component padding
--space-312px
Small gaps
--space-416px
Base unit — card padding, form fields
--space-624px
Section gaps, card padding LG
--space-832px
Section spacing
--space-1248px
Page padding, hero padding
--space-1664px
Large section breaks

Border Radius

From tight UI elements to fully rounded pills.

sm — 4px
md — 8px
lg — 12px
xl — 16px
full
Components

Buttons

5 variants × 5 sizes. Use Primary for one key action per screen. Secondary and Ghost for supporting actions.

Variants

Choose the variant based on hierarchy — not aesthetics.

<button class="ds-btn ds-btn-primary ds-btn-md">Primary</button> <button class="ds-btn ds-btn-secondary ds-btn-md">Secondary</button> <button class="ds-btn ds-btn-ghost ds-btn-md">Ghost</button>

Sizes

From xs to xl. md is the default for most interfaces.

<button class="ds-btn ds-btn-primary ds-btn-xs">XSmall</button> <button class="ds-btn ds-btn-primary ds-btn-lg">Large</button> <button class="ds-btn ds-btn-primary ds-btn-xl">XLarge</button>
Components

Badges

Use badges for status labels, tags, and short categorical labels. Never use for actions.

Variants

Each badge variant maps to a semantic color scale.

Brand Designer Success Warning Neutral
<span class="ds-badge ds-badge-md ds-badge-brand">Brand</span> <span class="ds-badge ds-badge-md ds-badge-success">Success</span> <span class="ds-badge ds-badge-md ds-badge-warning">Warning</span>

Sizes

Small Medium Large
Components

Inputs

Form inputs in multiple sizes and states. Always pair with a label and a helper hint.

Sizes

<div class="ds-input-wrap"> <label class="ds-input-label">Label</label> <input class="ds-input ds-input-md" placeholder="Placeholder…"/> <span class="ds-input-hint">Helper text</span> </div>

States

Helper text goes here
This field is required
Components

Cards

Flexible container for grouped content. Use for lists, dashboards, and content previews.

Default Card

✦
Card Title
A short description that gives context about what this card contains.
Brand
<div class="ds-card"> <div class="ds-card-img">…</div> <div class="ds-card-body"> <div class="ds-card-title">Title</div> <div class="ds-card-desc">Description</div> </div> </div>
Interactive

Component Playground

Tweak props in real time. Select a component, adjust its properties, and copy the code.

Button Interactive
Label
Variant
Size
Radius
Generated Code
<button class="ds-btn ds-btn-primary ds-btn-md">Click me</button>