KingBuy design system
Royal Power on a dark ground: deep black carries the surface, gold carries every action, ember carries urgency. Internal reference — not indexed.
Colour
Warm neutrals only; a cold gray next to #F5B301 reads dirty.
ink-950
#0B0B0B
Page ground
ink-900
#121212
Alternating section
ink-850
#171717
Card surface
ink-800
#1A1A1A
Brand black, input
ink-700
#242424
Hover surface
ink-600
#2F2F2F
Border
gold-500
#F5B301
Brand, every primary action
gold-400
#FFC72C
Hover, numbers on dark
gold-700
#A37400
Button lip
ember-500
#E85D04
Energy, in-progress
cream-50
#FFFFFF
Primary text
mist-300
#B8B0A1
Secondary text — 8.3:1 on card
mist-400
#918A7C
Caption — 5.2:1 on card
Order states
Colour never carries the meaning alone — every badge names its state.
Type
Fredoka for display (the logo's lettering), Manrope for text and money.
One parcel.
Section heading · 30px
Card heading · 20px
Body large · 18px — used for section intros. Measure stays between 54 and 68 characters so a line never outruns the eye.
Body · 15px — the workhorse size for descriptions and list items.
US$ 18.76 · ¥129.00 · 1.24 kg · 32 × 24 × 12 cm
Caption · 12px — notes, disclaimers, synthetic-data labels.
Buttons
The 2px lip under the gold button is the logo's extrusion; it collapses on press.
Chips and marks
Warehouse illustration
Authored placeholder in the brand's grammar — replaced by real QC photography at launch.
Receipt geometry
The receipt is the brand's signature object, so it does not share the generic panel. Its scalloped edge is drawn with gradients — a CSS mask would clip the gold hairline along with the fill — and a perforation replaces the rule above the total.
Charged now
- Item
- $17.87
- Service fee (5%)
- $0.89
- Total
- $18.76
Surfaces
Panels use a 14% gold hairline; shadows always carry offset and blur.
panel
Card surface with gold hairline.
quiet card
Neutral border, no gold.
placeholder
Dashed = content still missing.