Section 01
Typography
Type scale, font pairing, two typographic modes, the streamer treatment, and component specs.
→ View spec
Section 02
Social Media
Instagram grid, post templates, story formats, and grid composition rules.
→ View templates
Section 03
Copy & Voice
Voice characteristics, word choices, sentence structure, headline rules, and key phrases.
→ View guidelines
Section 04
Video
Motion guidelines, intro/outro templates, caption styling, and editing rhythm.
Fase 2
Design principles
Specific, not generic
Every choice has a reason. If you can swap the brand name and the text still works, it is not specific enough.
Uppercase holds structure
ALL CAPS creates tension and marks the skeleton. Sentence case is where information lives. Both must be present.
Pink, never white
The background is always #FFE0DB. White exists only as text on dark surfaces. The pink is the brand.
The border is the system
1px DC Blue borders divide everything. No shadows. No rounded corners. Structure is visible.
Color system
Denim Dark Blue
--dark
#101A38
Diap backgrounds
Electric Blue
--primary
#0000A5
Text, borders, structure
AMS Red
--accent
#FF2B2B
Location identifier
DC Pink
--bg
#FFE0DB
Page background — always
White
--white
#FFFFFF
Inverse text on dark only
DC Surface
--surface
#F5D0CB
Hover states, elevated
Localised — AMS pink background
Denim
City AMS
Denim
Next
Institutional — dark blue background
Denim
City AMS
Denim
Next
Page background
Always DC Pink (#FFE0DB). Never white as page background.
AMS Red
Location identifier only. AMS in wordmark, active nav states, maximum one emphasis per content block.
Dark navy diap
Institutional contrast. White wordmark, AMS Red location. Text is always white — never blue on dark.
White
Inverse text on dark surfaces only. Never as page background or on pink.
Spacing system — base 8px
--sp-1
8px
Icon gaps, inline padding, tag padding
--sp-2
16px
Between related text elements
--sp-3
24px
Between components within a block
--sp-4
32px
Card and cell internal padding
--sp-5
48px
Between content blocks
--sp-6
64px
Between sections
--sp-7
96px
Major section breaks, hero padding
--sp-8
128px
Page-level top padding