British Pine
#013220
Tokenbackground
HSL
hsl(158 96% 10%)Primary canvas. Use for page backgrounds and full bleed sections.
Brand
The Kingdom Capital style guide
A single reference for the shield mark, palette, and typography that define every Kingdom Capital surface, from the investor centre to printed reports.
01, Mark
The shield
The shield is our primary identifier. Keep its proportions consistent and give it clear space on every page and printed document.
- • Always render on British Pine or Emerald grounds.
- • Maintain clear space equal to the shield's inner notch on all sides.
- • Never recolor, outline, or apply shadows to the mark.
- • Minimum size: 36px tall (mobile nav). Below that, use the favicon glyph.
Large, hero / cover
Kingdom CapitalAfricaMedium, navbarKingdom CapitalAfricaSmall, footer02, Palette
Colors
Reference colors through semantic tokens, never raw hex. Tokens live in src/index.css and are exposed as Tailwind utilities in tailwind.config.ts.
Kingdom Gold
#C8A96A
Tokengold / primary
HSL
hsl(38 55% 58%)Accent for CTAs, hairlines, eyebrows, and the shield mark glow.
Emerald
#046307
Tokensurface elevated
HSL
hsl(124 92% 20%)Hero gradients on flagship pages; signals heritage and trust.
Soft White
#F5F1E8
Tokencard
HSL
hsl(42 45% 94%)Notice panels and quotes on dark grounds. Never as full page bg.
Surface
#07402B
Tokensurface
HSL
hsl(158 80% 14%)Card and panel fills, one step lifted from the background.
Hairline
#224F3F
Tokenborder
HSL
hsl(158 40% 22%)1px dividers, table borders, and outlined buttons.
03, Typography
Typography
Cormorant Garamond gives headings an editorial character. Inter keeps paragraphs, navigation and forms clear and readable.
AaDisplay
Capital, patiently deployed.
Family
Cormorant Garamond → Georgia → serif
Weights
400 · 500
Use
H1, H4, hero statements, pull quotes.
Class
Display typography
AaInterface
Kingdom Capital partners with institutional allocators across Africa and the Gulf, underwriting infrastructure that compounds over decades, not quarters.
Family
Inter → system ui → sans serif
Weights
400 · 500 · 600
Use
Body, navigation, forms, tables, captions.
Class
Body typography
Scale
Display 7xl
Display · Extra large
Heading 5xl
Display · Large
Subhead 3xl
Display · Medium
Lead paragraph with comfortable line spacing.
Body · Large
Body, base size for paragraphs and most interface copy.
Body · Standard
Eyebrow, section labels
.eyebrow utility