Design System
Style Guide
A comprehensive reference for all design tokens, typography, colors, spacing, and component patterns used across the André Anozie digital experience.
Typography
Font System
Two-font pairing for editorial clarity and professional legibility.
Display / Headlines
Instrument Serif
Italic variant
Used for H1–H6, hero text, and editorial emphasis. Weights: Regular & Italic.
Aa Bb Cc
The quick brown fox
jumps over the lazy dog.
Body / UI
DM Sans
Light to Bold (300–700)
Used for body copy, labels, navigation, buttons, and all UI elements.
Light 300 — The quick brown fox
Regular 400 — The quick brown fox
Medium 500 — The quick brown fox
Semibold 600 — The quick brown fox
Bold 700 — The quick brown fox
Heading Scale
H1 — text-4xl md:text-6xl (regular weight)
Heading One
H2 — text-3xl md:text-4xl lg:text-5xl (regular weight)
Heading Two
H3 — text-2xl md:text-3xl (regular weight)
Heading Three
H4 — text-xl (regular weight)
Heading Four
Note: Display headings use Instrument Serif at regular weight across the site — never bold/semibold. The italic variant is reserved for accent words.
Colors
Color Palette
Dark forest green, white, and light green — a modern corporate palette.
--primary (Forest)
160 30% 12%
Nav, footer, buttons, dark backgrounds
--foreground
160 25% 10%
Primary text color
--accent (Green)
152 60% 38%
Highlights, links, CTAs, decorative elements
--background
0 0% 100%
Page background (white)
--secondary
140 15% 96%
Card backgrounds, hover states
--muted
140 10% 94%
Muted backgrounds
--muted-foreground
160 10% 45%
Secondary text, captions
--green-light
145 40% 88%
Subtle green tints, tag backgrounds
--border
140 12% 90%
Dividers, card borders
--forest-light
152 25% 22%
Lighter forest shade
--green-accent
152 60% 38%
Same as accent, alias for clarity
--destructive
0 84.2% 60.2%
Error states, destructive actions
Primary Surface
Used for nav, footer, and dark section backgrounds.
Accent Surface
Used for highlights, active states, and CTAs.
Secondary Surface
Used for card backgrounds and subtle contrast areas.
Spacing
Layout & Spacing
Consistent spacing tokens for predictable, elegant layouts.
Section Padding
px-6 md:px-12 lg:px-24 xl:px-32Horizontal section padding, responsive
Section Vertical (sm)
py-16Standard vertical section spacing
Section Vertical (lg)
py-24 md:py-32Hero / large section spacing
Border Radius
rounded (0.25rem)Subtle, corporate radius
Components
UI Components
Core interactive elements following the design system.
Buttons
Cards
Card Title
A brief description of the card content and purpose.
Card body content goes here with supporting details.
Accent Card
With accent border highlighting.
Used for featured or highlighted content blocks.
Dark Card
On primary background.
Used for CTA sections and featured blocks.
Labels & Tags
Decorative Elements
Green Line Accent
Dot Separator
Motion
Animation Patterns
Framer Motion-driven animations for polished interactions.
Fade Up (Scroll)
y: 30 → 0, opacity: 0 → 1
Used for section headings and content blocks on scroll into view.
Staggered Reveal
delay: index * 0.1s
Used for lists, grids, and sequential card reveals.
Marquee Scroll
translateX: 0 → -50%, 30s linear infinite
Used for the skills/tools ticker on the homepage.
Theming
Dark Mode
Fully supported with inverted forest palette for low-light contexts.
Dark Mode Preview
Background: 160 30% 6% · Foreground: 140 15% 92% · Accent: 152 60% 45%