Style Guide
A structure of our design system, typography, and component patterns. Ensuring consistency across every touchpoint of the brand.
Typography
System Type Specifications
Lora
Our primary heading font. A contemporary serif with roots in calligraphy, Lora provides a sophisticated and trustworthy voice for our brand titles and headers.
Hind
Our primary body and UI font. Hind is a clean, open sans-serif designed for maximum legibility on screen. It ensures our content remains approachable and clear.
DM Mono
Our primary monospace font. Used for technical data, code snippets, and specific UI elements requiring high precision and character distinction.
Heading 1
Lora | 48px | Weight: 400-700 | 1.3em
Heading 2
Lora | 36px | Weight: 400-700 | 1.3em
Heading 3
Lora | 30px | Weight: 400-700 | 1.3em
Heading 4
Lora | 24px | Weight: 400-700 | 1.3em
Heading 5
Lora | 20px | 400 | 1.2em
Heading 6
Lora | 18px | 300 | 1.2em
Body Large — This is a paragraph style for larger intro text sections and introductory content. It uses a slightly larger font size for emphasis.
Hind | 18px | 1.6em
Body Regular — This is the primary body text that will constitute the bulk of the content for comfortable reading. It follows standard accessibility guidelines.
Hind | 16px | 1.5em
Body Caption — Used for small notes, labels, and supplementary information. Not intended for long blocks of text.
Hind | 12px | 1.4em
Color Palette
Hex Codes & CSS Variable Mapping
Primary
var(--color-primary)
Secondary
var(--color-secondary)
Accent
var(--color-accent)
Accent 2
var(--color-accent-secondary)
Text
var(--text-color)
Background
var(--bg-color)
Card BG
var(--card-bg)
Border
var(--border-color)
Interactive Components
Dynamic User Transitions
Border Radius
Component Corner Radii
Small
4px (radius - 4px)
Medium
6px (radius - 2px)
Large
8px (Base Radius)
Button / Pill
999px (Pill Shape)
12px (--radius-brand) 9999px (--radius-button) Global Effects
Standard Shadows
Shadow Small
Shadow Base
Shadow Large
Interaction Delays
Fast
150ms
Normal
300ms
Slow
500ms
Very Slow
1000ms
SEO & Brand Assets
Meta Information
🌐 Core Branding Values
Default Browser Title
Meta Description
Canonical URL
Google Analytics ID
🔍 Social Media (OG / X)
OG Image (1200x630)
Twitter Card
OG Type
Brand Visuals
Logo / Light Version (On Dark BG)
Logo / Dark Version (On Light BG)
App Icon
Favicon