Foundations

Everything the WorldStreet components are made of. Change a token and the whole system follows, in both themes.

Colour

Stone black, white and one gold family. The semantic layer swaps per theme, and every text colour clears WCAG AA. Money moves in emerald and red, always with a sign.

Gold#EAB308 · primary

Gold bright#FACC15 · accents

Gold pale#FDE68A · focus

Gold deep#A16207 · gold text on light

bg--cx-bg

elevated--cx-elevated

text--cx-text

text-muted--cx-text-muted

gain--cx-gain

loss--cx-loss

warning--cx-warning

ember-text--cx-ember-text

Type

Manrope for everything. Headings get weight from size, never bold. H1 and H2 fade to half-white. Numbers are tabular.

`Balance · 56 / 300`	₦1,284,500.00
`H1 · 64 / 400 · −2.5`	Move money like light
`H2 · 52 / 400`	Every asset in one view
`H3 · 32 / 500`	Instant settlement
`Lead · 20`	A calm line that sets up the section.
`Body · 16`	Default paragraph text and nav links.
`Small · 14`	Card descriptions and meta.

Space

4px base. The site's 24 (card padding), 30 (gutter) and 100 (section) sit on the scale. Container 1320px. Breakpoints 768 and 1200.

1·4

2·8

3·12

4·16

5·20

6·24

7·32

8·40

9·48

10·64

Shape

20px card corners, pill controls. Cards separate by wash and a corner-lit hairline. Shadows are only for things that float.

Card · 20px · corner-lit

Overlay · 16px · shadow-lg

Pill · 100px

Motion

Things decelerate into place and never bounce. Everything stops under reduced-motion.

`--cx-ease`	`cubic-bezier(.22, 1, .36, 1)`	Default ease-out
`--cx-dur-fast · dur · dur-slow`	`140 · 240 · 600ms`	Hover · state · reveal
`aurora`	`19s + 26s alternate`	Two clocks, so it never visibly loops
`beam · shine · marquee`	`5s · 7s · 40s linear`	Continuous, one per view