Global Typography System
Fluid Scale
System
Fluid Scale (Responsive · CSS Clamp)
Max
base 18px · 1.33rem
Min
base 15px · scale 1.250
Steps
8 (4xl · 3xl · 2xl · xl · l · m · s · xs)
Variable
Role
Size
Sample
text-4xl
Heading 1
clamp(1.802rem, calc(0.047399 * (100vw - 360px) + 28.8325px), 4.7348rem)
Min: ~27px · Max: ~55px
Lorem ipsum dolor sit amet, consectetur adipiscing elit
text-3xl
Heading 2
clamp(1.6018rem, calc(0.031518 * (100vw - 360px) + 25.6289px), 3.552rem)
Min: ~24px · Max: ~44px
Lorem ipsum dolor sit amet, consectetur adipiscing elit
text-2xl
Heading 3 · Blockquote
clamp(1.4238rem, calc(0.020054 * (100vw - 360px) + 22.7813px), 2.6647rem)
Min: ~21px · Max: ~35px
Lorem ipsum dolor sit amet, consectetur adipiscing elit
text-xl
Heading 4 · Subheading
clamp(1.2656rem, calc(0.011853 * (100vw - 360px) + 20.25px), 1.999rem)
Min: ~19px · Max: ~28px
Lorem ipsum dolor sit amet, consectetur adipiscing elit
text-l
Heading 5 · Body Large
clamp(1.125rem, calc(0.006055 * (100vw - 360px) + 18px), 1.4996rem)
Min: ~17px · Max: ~23px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis lobortis diam.
text-m
Body
clamp(1rem, calc(0.00202 * (100vw - 360px) + 16px), 1.125rem)
Min: ~15px · Max: ~18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis lobortis diam.
text-s
Body Small · Eyebrow · Fields
clamp(0.8889rem, calc(14.2222px - 0.000726 * (100vw - 360px)), 0.844rem)
Min: ~13.3px · Max: ~14.4px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis lobortis diam.
text-xs
Heading 6 · Caption · Button
clamp(0.7901rem, calc(12.642px - 0.002537 * (100vw - 360px)), 0.6331rem)
Min: ~11.5px · Max: ~11.85px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis lobortis diam.
Typography Presets
Headings
Heading 1
text-4xl:clamp(1.802rem, calc(0.047399 * (100vw - 360px) + 28.8325px), 4.7348rem)
Playfair Display • Regular • Lineheight:1.25em • Letter Spacing:-.03em
Quiet houses that hold the Marin Light
Subheading
text-xl:clamp(1.2656rem, calc(0.011853 * (100vw - 360px) + 20.25px), 1.999rem)
Playfair Display • Regular Italic • Lineheight:1.25em • Letter Spacing:-.03em
A studio shaping homes with the landscape — coastal light, redwood, stone.
Heading 2
text-3xl:clamp(1.6018rem, calc(0.031518 * (100vw - 360px) + 25.6289px), 3.552rem)
Playfair Display • Regular • Lineheight:1.25em • Letter Spacing:-.03em
A studio built for fewer, deeper projects.
Heading 3
text-2xl:clamp(1.4238rem, calc(0.020054 * (100vw - 360px) + 22.7813px), 2.6647rem)
Playfair Display • Regular • Lineheight:1.25em • Letter Spacing:-.03em
Homes that reward slow attention.
Heading 4
text-xl:clamp(1.2656rem, calc(0.011853 * (100vw - 360px) + 20.25px), 1.999rem)
Inter • Regular • Lineheight:1.25em
Ten families a year, a decade in.
Heading 5
text-l:clamp(1.125rem, calc(0.006055 * (100vw - 360px) + 18px), 1.4996rem)
Inter • Regular • Lineheight:1.25em
Materials, craft, and the long view
Heading 6
text-xs:clamp(0.7901rem, calc(12.642px - 0.002537 * (100vw - 360px)), 0.6331rem)
Inter • Regular • All Caps • Lineheight:1.65em • Letter Spacing:.12em
Selected work · 2014 — 2024
Body Text & UI Elements
Body
text-m:clamp(1rem, calc(0.00202 * (100vw - 360px) + 16px), 1.125rem)
Inter • Regular • All Caps • Lineheight:1.65em • Letter Spacing:.12em
Divi began as two friends working on a single barn in Bolinas. Ten years on, we design homes up and down the coast — but the shape of the work hasn't changed.
Body Small
text-s:clamp(0.8889rem, calc(14.2222px - 0.000726 * (100vw - 360px)), 0.844rem)
Inter • Regular • All Caps • Lineheight:1.65em • Letter Spacing:.12em
We keep the studio small. We visit the site in every season. We sketch by hand, and then we build a model. A Divi project takes two to four years — that length isn't an inefficiency, it's the point.
Body Large
text-l:clamp(1.125rem, calc(0.006055 * (100vw - 360px) + 18px), 1.4996rem)
Inter • Regular • All Caps • Lineheight:1.65em • Letter Spacing:.12em
A house needs time to answer the site, and we want to be there through every season of it. The studio is led by Asha Okafor and Jonas Pellegrini.
Blockquote
text-2xl:clamp(1.4238rem, calc(0.020054 * (100vw - 360px) + 22.7813px), 2.6647rem)
Playfair Display • Regular • Lineheight:1.25em • Letter Spacing:-.03em
"A Divi house feels like it has always been there, and will outlast us all."
Eyebrow
text-s:clamp(0.8889rem, calc(14.2222px - 0.000726 * (100vw - 360px)), 0.844rem)
Inter • Regular • All Caps • Lineheight:1.65em • Letter Spacing:.12em
Divi Interiors · Residential · Est. 2014
Caption
text-xs:clamp(0.7901rem, calc(12.642px - 0.002537 * (100vw - 360px)), 0.6331rem)
Inter • Regular • All Caps • Lineheight:1.65em • Letter Spacing:.12em
Western elevation at dusk, October 2023. Photography by Mariko Reed. The Long House, Stinson Beach.
Button
text-xs:clamp(0.7901rem, calc(12.642px - 0.002537 * (100vw - 360px)), 0.6331rem)
Inter • Regular • All Caps • Lineheight:1.65em • Letter Spacing:.12em
Fields
Min: ~13.3px · Max: ~14.4px
text-s:clamp(0.8889rem, calc(14.2222px - 0.000726 * (100vw - 360px)), 0.844rem)
Inter • Regular • All Caps • Lineheight:1.65em • Letter Spacing:.12em
Color Variables
Brand
Primary
Secondary
Semantic
Heading Text
Body Text
Link
Borders
Foundation
white
black
gray-050
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
gray-950
Example
Example
Example
Example
Example
Example
Example
Example
Example
Example
Example
Example
Divi Interiors · Est. 2014
Quiet houses that hold the Marin light.
A Bay Area studio shaping homes with the landscape — coastal light, redwood, stone, and the patience of long work.
We design fewer houses on purpose. A house needs time to answer the site, and we want to be there through every season of it.
The Long House · Stinson Beach
Current project
Location
Marin County, CA
Program
New construction
Completion
Spring 2025
Location
Marin County, CA
Established
2014
Projects / Yr.
Ten, by invitation
availability