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
primary-tint-1
primary-tint-2
primary-tint-3
primary-tint-4
primary-shade-1
primary-shade-2
primary-shade-3
primary-shade-4
secondary-tint-1
secondary-tint-2
secondary-tint-3
secondary-tint-4
secondary-shade-1
secondary-shade-2
secondary-shade-3
secondary-shade-4
Buttons
Badges
Badge primary
Secondary badge
Neutral badge
Light badge
White badge
Badge with icon
Badge with icon
Badge with icon
Blurbs
Primary colored icon
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Primary background
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Secondary color icon
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Secondary background
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Icon center on the left of text
Your content goes here. Edit or remove this text inline or in the module Content settings.
Icon top on the left of text
Your content goes here. Edit or remove this text inline or in the module Content settings.
Cards
White card
Beskrivende tekst der forklarer indholdet i kortet på en præcis måde.
Primary border
Beskrivende tekst der forklarer indholdet i kortet på en præcis måde.
Neutral light
Beskrivende tekst der forklarer indholdet i kortet på en præcis måde.
Primary card
Beskrivende tekst der forklarer indholdet i kortet på en præcis måde.
Secondary card
Beskrivende tekst der forklarer indholdet i kortet på en præcis måde.
Neutral card
Beskrivende tekst der forklarer indholdet i kortet på en præcis måde.
Borders
Border S
Beskrivende tekst der forklarer indholdet i kortet på en præcis måde.
Border M
Beskrivende tekst der forklarer indholdet i kortet på en præcis måde.
Border L
Beskrivende tekst der forklarer indholdet i kortet på en præcis måde.
Border XL
Beskrivende tekst der forklarer indholdet i kortet på en præcis måde.
Spacing
Spacing S
Spacing M
Spacing L
Spacing XL
Spacing 2XL
Spacing 3XL
Padding
Padding XS
Padding S
Padding M
Padding L
Padding XL
Padding 2XL
Padding 3XL
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