System
A working component library.
The building blocks used across every Golden surface — from a proposal deck to the next product we ship.
Buttons
Actions.
Variants
Cards
Content containers.
Standard card
Clean, bordered, minimal.
Used for repeating content, lists, and dashboards.
Emphasis card
Inverted for hierarchy.
Reserve for calls-to-action and hero moments.
Signature card
Gradient — used sparingly.
One per screen, maximum. Never behind body copy.
Forms
Inputs.
Form fields
Feedback
Alerts & badges.
Style tip
Callouts sit at the same weight as body copy — never louder than the content around them.
Default
Secondary
Outline
New
Navigation
Tabs & accordions.
Tabs
Tabs group parallel content. Use sentence case labels and keep them short.
Accordion
A single source of truth for how Golden looks, sounds, and moves.
Data
Table.
Standard table
| Token | Value | Use |
|---|---|---|
| --color-primary | #000000 | Primary type & UI |
| --brand-blue | #2D6CDF | Links & interactive |
| --brand-orange | #FA8D14 | Highlights |
| --brand-cyan | #00CFEB | Data & digital |
Spacing
Grid & spacing.
4 / 8 pt system
All spacing values scale in multiples of 4. Component padding uses 8, 12, 16, 24, 32, 48.
4
8
12
16
24
32
48
Radius & elevation
Radii: 6 / 8 / 12 / 16. Shadows are soft and low — never dramatic drops.
6px
8px
12px
16px