Background
--background
#f5f5ef
Base page canvas
Design System
Home Page Design Guide
This page documents the visual language used on the home page so future sections and features stay consistent in style, spacing, and interaction behavior.
Color Tokens
Foreground
--foreground
#16212a
Primary text
Primary
--primary
#0f4c5c
Main CTA and links
Secondary
--secondary
#dde8ea
Subtle backgrounds
Accent
--accent
#d8893f
Highlights and emphasis
Muted
--muted
#e9eeef
Quiet surfaces
Border
--border
#d4dcdf
Soft separators
Typography
Font Families
Manrope
Body copy, buttons, navigation, and general UI content.
--font-manropefont-sansWeights: 400, 500, 600
Playfair Display
Hero and section headings for premium editorial tone.
--font-playfairfont-displayWeights: 600
JetBrains Mono
Technical labels, token names, and metadata.
--font-jetbrainsfont-monoWeights: 500, 600
Font Properties
Hero Heading
Size: 64px / 48px / 36pxWeight: 600Line Height: 1.08Tracking: -0.02emUtility: font-display
Section Title
Size: 42px / 36px / 30pxWeight: 600Line Height: 1.15Tracking: -0.02emUtility: section-title
Body Copy
Size: 18px / 16pxWeight: 400Line Height: 1.6Tracking: normalUtility: section-copy
Eyebrow Label
Size: 12pxWeight: 600Line Height: 1Tracking: 0.18em uppercaseUtility: eyebrow
Interaction
CTA hierarchy follows two styles: a filled primary action and an outline secondary action. Pill badges provide quick capability scanning.
Integrating AIReact + Next.jsData PlatformsFull-Stack Delivery
Component Patterns
Service Card Pattern
Use this pattern for capability blocks with icon, concise title, and business-focused description.
Section Container Pattern
Pair `section-shell` with `container` and max-width constraints to keep rhythm and visual breathing room.
Header Identity Pattern
Monogram mark, floating navigation shell, and compact uppercase actions communicate a clean professional brand.
Layout Tokens
section-shell
Top-level spacing block used across every major section.
soft-card
Primary container style for cards and content groups.
eyebrow
Compact category label for section context.
grid-pattern
Subtle texture layer for hero and feature backgrounds.
Motion Tokens
animate-rise
Page-load reveal for copy and callouts.
animate-float
Gentle movement on decorative background elements.
animate-pulse-soft
Low-intensity emphasis around focal cards.