Brand Source
All colours and design elements are derived from the official Department of Agriculture, Land Reform and Rural Development (DALRRD) branding.
Extracted from:
- National Coat of Arms (gold elements)
- Department name (forest green)
- Building facade (copper/terracotta)
Colour Palette
Primary Green
#1B5E20Headers, navigation, primary buttons, sidebar
var(--primary)Primary Dark
#0D3D12Hover states, footer, emphasis areas
var(--primary-dark)Primary Light
#2E7D32Secondary actions, success states
var(--primary-light)Accent Gold
#D4A843CTAs, highlights, badges, accent elements
var(--accent)Accent Light
#E4C878Hover states for gold elements
var(--accent-light)Tertiary Copper
#B87333Special highlights, building imagery accents
var(--tertiary)Background
#FFFFFFPage backgrounds, cards
var(--background)Muted
#F5F5F5Section backgrounds, disabled states
var(--muted)Foreground
#1A1A1ABody text, headings
var(--foreground)Typography Scale
Display
Inter / 700 (Bold)
56px / 3.5rem
Usage
Hero headings
Sample
South African Spatial Data Infrastructure
Heading 1
Inter / 700 (Bold)
40px / 2.5rem
Usage
Page titles
Sample
About SASDI
Heading 2
Inter / 600 (Semibold)
28px / 1.75rem
Usage
Section headings
Sample
What is SASDI?
Heading 3
Inter / 600 (Semibold)
20px / 1.25rem
Usage
Card titles, subsections
Sample
Spatial Data Framework
Body Large
Inter / 400 (Regular)
18px / 1.125rem
Usage
Lead paragraphs, introductions
Sample
The national framework for geospatial information.
Body
Inter / 400 (Regular)
16px / 1rem
Usage
Standard body text
Sample
SASDI provides the technical and institutional framework.
Small
Inter / 500 (Medium)
14px / 0.875rem
Usage
Labels, metadata, captions
Sample
Last updated: April 2026
Overline
Inter / 600 (Semibold)
12px / 0.75rem
Usage
Eyebrow text, badges
Sample
REPUBLIC OF SOUTH AFRICA
Spacing & Radius
Spacing Scale
p-1p-2p-4p-6p-8p-12p-16Border Radius
sm
4px
md
6px
lg
8px
xl
12px
Accessibility
Colour Contrast
All colour combinations meet WCAG 2.1 AA standards for contrast ratios.
Focus States
All interactive elements have visible focus indicators using the primary green colour with 2px offset.
Screen Readers
All icons have aria-labels, images have alt text, and decorative elements are hidden from screen readers.