DESIGN SYSTEM
Typography
The code::core typography system uses three carefully curated typefaces to establish a clear visual hierarchy and professional aesthetic.
Each font has been selected for readability, elegance, and technical character. Use these fonts consistently across all brand communications.
Font Families
Cormorant Garamond
Display text, headings, titles - conveys elegance and sophistication
Available Weights
300 Light
400 Regular
600 Semi Bold
700 Bold
Typical Sizes
display: 38–52px
heading: 22–32px
Jost
Body text, UI elements, labels - clean and geometric
Available Weights
300 Light
400 Regular
500 Medium
600 Semi Bold
700 Bold
Typical Sizes
body: 15px
small: 13px
label: 11px
JetBrains Mono
Code, technical content, wordmark - precise and technical
Available Weights
400 Regular
500 Medium
600 Semi Bold
700 Bold
Typical Sizes
code: 14px
meta: 11–13px
Type Specimens
Display Heading
Sophisticated Design System
font-family: 'Cormorant Garamond', serif;
font-size: 50px;
font-weight: 600;
font-size: 50px;
font-weight: 600;
Section Heading
Build Beautiful Experiences
font-family: 'Cormorant Garamond', serif;
font-size: 28px;
font-weight: 600;
font-size: 28px;
font-weight: 600;
Body Text
This is the primary body text style used throughout the code::core brand. It combines perfect readability with modern geometric proportions. Line height of 1.85 ensures comfortable reading across all screen sizes.
font-family: 'Jost', sans-serif;
font-size: 15px;
font-weight: 300;
line-height: 1.85;
font-size: 15px;
font-weight: 300;
line-height: 1.85;
Labels & UI
DESIGN SYSTEM
font-family: 'Jost', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.15em;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.15em;
Code & Technical
const brandColors = { navy: '#0D2340', gold: '#B8922A' }
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
font-weight: 500;
font-size: 14px;
font-weight: 500;
STRUCTURE
Typographic Hierarchy
Display
50px / 600
Cormorant
Large section titles, hero text
Heading 1
38px / 600
Cormorant
Page titles, section headers
Heading 2
28px / 600
Cormorant
Subsection headings
Heading 3
20px / 600
Cormorant
Card titles, feature names
Body
15px / 300
Jost
Primary body text
Body Small
13px / 300
Jost
Secondary text
Label
11px / 600
Jost
UI labels, badges
Code
14px / 500
JetBrains
Code blocks, technical
REFERENCE
Recommended Sizes
| Use Case | Font Size | Line Height |
|---|---|---|
| Page Title | 38px | 1.1 |
| Section Heading | 28px | 1.1 |
| Subheading | 20px | 1.2 |
| Body Text | 15px | 1.85 |
| Small Text | 13px | 1.7 |
| UI Label | 11px | 1.5 |