Style Guide
A structure of our design system, typography, and component patterns. Ensuring consistency across every touchpoint of the brand.
Typography
System Type Specifications
Lexend Deca
Our primary heading font. Used for titles, callouts, and prominent typographic elements. It brings a modern, bold personality to the brand.
Red Hat Display
Our primary body and UI font. Optimized for legibility and accessibility across all screen sizes. Used for paragraphs, UI labels, and long-form content.
DM Mono
Our primary monospace font. Used for technical data, code snippets, and specific UI elements requiring high precision and character distinction.
Heading 1
Lexend Deca | 48px | Lite: 500 / Dark: 400 | 1.3em
Heading 2
Lexend Deca | 36px | Lite: 500 / Dark: 400 | 1.3em
Heading 3
Lexend Deca | 30px | Lite: 500 / Dark: 400 | 1.3em
Heading 4
Lexend Deca | 24px | Lite: 500 / Dark: 400 | 1.3em
Heading 5
Lexend Deca | 20px | 400 | 1.4em
Heading 6
Lexend Deca | 18px | 300 | 1.5em
Body Large — This is a paragraph style for larger intro text sections and introductory content. It uses a slightly larger font size for emphasis.
Red Hat Display | 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.
Red Hat Display | 16px | 1.5em
Body Caption — Used for small notes, labels, and supplementary information. Not intended for long blocks of text.
Red Hat Display | 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
Logo / Dark Version
App Icon
Favicon