Page Header
Just a placeholder for the page header
Design System
A live reference for all design tokens. Hover over the buttons to test transitions.
Buttons
Arrow is CSS-generated — no inner markup required.
.btn--primary
Orange pill expands on hover → white text. Use on light/white backgrounds.
.btn--secondary
White pill expands on hover → orange text. Use on orange backgrounds.
.btn--secondary--green
White pill expands on hover → green text. Use on green backgrounds.
.btn--secondary--blue
White pill expands on hover → blue text. Use on blue backgrounds.
.btn--secondary--purple
White pill expands on hover → purple text. Use on purple backgrounds.
Typography
Live Sample
Rendered using the global element styles — no overrides. What you see here is what you get in content.
We Help People Navigate Complex Legal Challenges
Experienced Attorneys Committed to Your Success
At Otten Johnson, we combine decades of legal expertise with a deep understanding of our clients' needs. Our team is dedicated to delivering clear, strategic counsel across a broad range of practice areas.
Whether you're facing a real estate transaction, a business dispute, or a land use matter, we provide the focused attention your situation demands.
- Real estate law and transactions
- Land use, zoning, and entitlements
- Business and commercial litigation
- Construction and development disputes
Headings
Resize the browser window to see mobile ↔ desktop sizes switch at 768px. H5 uses Work Sans Bold; all others use Orpheus Pro Bold. H6 is underlined by convention.
--size-heading-h1-main
Mobile: --size-8 / 36px / lh 1.2
Desktop: --size-10 / 48px / lh 1.1
Font: --font-primary
H1 — The Quick Brown Fox
--size-heading-h2-main
Mobile: --size-6 / 28px / lh 1.2
Desktop: --size-7 / 30px / lh 1.2
Font: --font-primary
H2 — The Quick Brown Fox
--size-heading-h3-main
Mobile: --size-5 / 24px / lh 1.2
Desktop: --size-4 / 22px / lh 1.0
Font: --font-primary
H3 — The Quick Brown Fox
--size-heading-h4-main
Mobile: --size-2 / 16px / lh 1.1
Desktop: --size-3 / 20px / lh 1.4
Font: --font-primary
H4 — The Quick Brown Fox
--size-heading-h5-main
Mobile: --size-2 / 16px / lh 1.0
Desktop: --size-3 / 20px / lh 1.0
Font: --font-secondary (--font-heading-h5-main)
H5 — Work Sans Bold — The Quick Brown Fox
--size-heading-h6-main
Mobile: --size-5 / 24px / lh 1.0
Desktop: --size-7 / 30px / lh 1.0
Font: --font-primary
H6 — Underlined — The Quick Brown Fox
Font Families
Orpheus Pro — The quick brown fox jumps over the lazy dog
--font-primary / serif
Work Sans — The quick brown fox jumps over the lazy dog
--font-secondary / --font-tertiary / sans-serif
Font Sizes
--size-0 / 14px
Aa
--size-1 / 15px
Aa
--size-2 / 16px
Aa
--size-3 / 20px
Aa
--size-4 / 22px
Aa
--size-5 / 24px
Aa
--size-6 / 28px
Aa
--size-7 / 30px
Aa
--size-8 / 36px
Aa
--size-9 / 40px
Aa
--size-10 / 48px
Aa
--size-11 / 56px
Aa
--size-12 / 72px
Aa
Font Weights — Orpheus Pro
--weight-light / 300
The quick brown fox jumps over the lazy dog
--weight-regular / 400
The quick brown fox jumps over the lazy dog
--weight-medium / 500
The quick brown fox jumps over the lazy dog
--weight-semibold / 600
The quick brown fox jumps over the lazy dog
--weight-bold / 700
The quick brown fox jumps over the lazy dog
--weight-extrabold / 800
The quick brown fox jumps over the lazy dog
Font Weights — Work Sans
--weight-light / 300
The quick brown fox jumps over the lazy dog
--weight-regular / 400
The quick brown fox jumps over the lazy dog
--weight-medium / 500
The quick brown fox jumps over the lazy dog
--weight-semibold / 600
The quick brown fox jumps over the lazy dog
--weight-bold / 700
The quick brown fox jumps over the lazy dog
--weight-extrabold / 800
The quick brown fox jumps over the lazy dog
Line Heights
--line-tighter / 1
The quick brown fox jumps over the lazy dog. Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind.
--line-tight / 1.2
The quick brown fox jumps over the lazy dog. Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind.
--line-normal / 1.4
The quick brown fox jumps over the lazy dog. Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind.
--line-loose / 1.65
The quick brown fox jumps over the lazy dog. Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind.
--line-looser / 1.8
The quick brown fox jumps over the lazy dog. Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind.
Color Primitives
Primary Scale
--color-primary-lighter#c6dff3
--color-primary-light#83b1d6
--color-primary#4a81ad
--color-primary-dark#2a5e87
--color-primary-darker#143754
Secondary
--color-secondary#c55002
Brand Colors
--color-brand-1#548054
--color-brand-2#484167
--color-brand-3#072237
--color-brand-4#f8f7f2
--color-brand-5#0563c1
--color-brand-6#3f834b
UI Colors
--color-accent#10b981
--color-warning#f59e08
--color-error#ef4444
Greys + White + Black
--grey-0#f8f7f2
--grey-1#e0e0e0
--grey-2#888888
--grey-3#777777
--grey-4#666666
--grey-5#555555
--grey-6#444444
--grey-7#333333
--grey-8#222222
--grey-9#111111
--white#ffffff
--black#000000
Semantic Color Tokens
Backgrounds & Borders
--color-background-pagewhite
--color-background-page-contentgrey-0 / bone
--color-background-is-style-eyebrowgrey-0 / bone
--color-border-is-style-eyebrowgrey-1
Text Colors
--color-text-body-primary
Body primary — Aa Bb Cc 123
--color-text-body-secondary
Body secondary — Aa Bb Cc 123
--color-text-body-invert
Body invert — Aa Bb Cc 123
--color-text-active-invert
Active invert — Aa Bb Cc 123
--color-text-heading-primary
Heading primary — Aa Bb Cc 123
--color-text-heading
Heading — Aa Bb Cc 123
--color-text-subtle
Subtle — Aa Bb Cc 123
--color-text-link
Link — Aa Bb Cc 123
--color-text-link-inline
Link inline — Aa Bb Cc 123
--color-text-summary
Summary — Aa Bb Cc 123
--color-text-blockquote
Blockquote — Aa Bb Cc 123
Icon Colors
--icon-primaryorange
--icon-secondarydark blue
--icon-disabledgrey-3
Spacing Scale
--spacing-1 / 4px
--spacing-2 / 8px
--spacing-3 / 12px
--spacing-4 / 16px
--spacing-5 / 20px
--spacing-6 / 24px
--spacing-7 / 30px
--spacing-8 / 40px
--spacing-9 / 48px
--spacing-10 / 60px
--spacing-11 / 64px
--spacing-12 / 80px
--spacing-13 / 96px
--spacing-13-5 / 140px
--spacing-14 / 200px
Constrain Widths & Gutters
Bars are capped at the current container (constrain-l / 1100px). The xxl bar would extend further on a wider viewport.
--constrain-s / 480px
--constrain-m / 768px
--constrain-l / 1100px
Gutter: --gutter-s (12px)
--constrain-xl / 1280px
Gutter: --gutter-m (24px)
--constrain-xxl / 1440px
Gutter: --gutter-l (60px)
Border Radius
Scale
--radius-small
3px
--radius-default
6px
--radius-large
12px
--radius-extralarge
999px (pill)
Directional (uses --radius-default)
--radius-top
top corners
--radius-right
right corners
--radius-bottom
bottom corners
--radius-left
left corners
Gutters in Action
--gutter-s → --spacing-3 / 12px
--gutter-m → --spacing-6 / 24px
--gutter-l → --spacing-10 / 60px