Design Catalog

Design tokens

Brand colors

Primary navy

--clr-primary

#003b74

Accent blue

--clr-accent

#3691ff

Accent mid

--clr-accent-mid

#7daaff

Primary tint

--clr-primary-tint

#e7f3ff

Pale blue

--clr-pale-blue

#e9ebf8

Neutral 50

--clr-neutral-50

#eef1f5

Neutral 400

--clr-neutral-400

#8e98a8

Body text

--clr-body

#131927

Type scale

Token	Value	Use
`--fs-display`	6rem / 96px	H1
`--fs-h2`	4rem / 64px	H2
`--fs-h3`	3rem / 48px	H3
`--fs-h4`	2rem / 32px	H4
`--fs-subtitle`	1.75rem / 28px	Subtitle, large body
`--fs-lead`	1.375rem / 22px	Strong paragraph, nav
`--fs-body`	1.125rem / 18px	Body
`--fs-body-sm`	1rem / 16px	Small body
`--fs-caption`	0.875rem / 14px	Captions, labels

Radius & shadow

--radius-btn (42px pill)

--radius-card (24px)

--radius-pill (9999px)

--shadow-card

Typography

Atkinson Hyperlegible—primary body & heading font

Used for all body copy, headings, nav links, and buttons.

Display

h1 / clamp(2.5rem → 6rem) · --fw-bold · ls -0.02em

Heading 2

h2 / clamp(1.875rem → 4rem) · --fw-bold · lh 1

Heading 3

h3 / clamp(1.625rem → 3rem) · --fw-bold · lh 1.1

Heading 4

h4 / clamp(1.375rem → 2rem) · --fw-bold · lh 1.1

Subtitle—large intro copy that sets context before the detail.

.text-subtitle / 1.75rem / lh 1.4

Lead—strong paragraph or call-to-action text.

.text-lead / 1.375rem / lh 1.3

Body—default paragraph text at 1.125rem / 18px. Atkinson Hyperlegible was designed for low-vision readers; its use here is a product commitment, not an aesthetic choice.

body / --fs-body / lh 1.6

Body small—used for form labels, secondary copy, partner names, and legal text.

--fs-body-sm / 1rem / 16px

Caption—Montserrat, uppercase, letter-spaced. Used for badges, dates, and overline labels.

.text-caption / --font-caption (Montserrat) / --fs-caption / 14px

Montserrat—caption & label font

Used for badge text, dates, stat numbers, and overline labels. Bold only.

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

--font-caption · Montserrat 700

Buttons

Primary Outline Ghost

.btn-primary · .btn-outline-primary · .btn-ghost

Primary sm Outline sm

.btn-sm · min-height 44px touch target

Primary on dark Outline on dark

Buttons on .section--dark backgrounds

disabled attribute

Section backgrounds

Default (white)

Standard section background. Used for most content sections.

Call to action

default / background: --clr-white

Tint

Light blue tint. Used for partners bar, hero bg, works-everywhere section.

Call to action

.section--tint / background: --clr-primary-tint

Dark (navy)

Dark navy. Used for CTAs, stats, visitor sections, and the footer.

Primary Outline

.section--dark / background: --clr-primary

Cards

Feature card—text panel

Used on the homepage to introduce a key benefit alongside a photo.

See how it works

.feature-card · .feature-card__text · .feature-card__image

Feature split—accent-mid panel

Right-side content

Used for feature pair where the heading lives in the colored panel.

.feature-split-left (--clr-accent-mid bg)

About card

Used on the About page to present values, traits, or mission points with consistent padding and shadow.

Link card—Capption vs. something

American Swedish Institute

Highlight card—used on the News and Partners pages for featured partner moments.

.about-card · .link-card · .highlight-card

Weisman Art Museum Visit ↗

Email

hello@capption.com

Contact method card—used on the Contact page.

The verdict

Verdict banner—used on VS pages to deliver the comparison conclusion in a navy box.

.partner-card · .contact-method · .vs-verdict

At a glance

Capption

VS glance card—Capption variant. Navy background, white text. Paired with the competitor card.

At a glance

The Competitor

VS glance card—competitor variant. Neutral-50 background, body text color.

.vs-glance-card--capption · .vs-glance-card--competitor

01

Key differentiator

VS diff card—used to enumerate Capption advantages in comparison pages. White card, numbered accent label, bold title.

Pricing card

Used on the How it Works page to present pricing in a contained white card against a dark section.

Institution name

Exhibit title

Demo exhibit—see full widget below.

.vs-diff-card · .pricing-card · .demo-exhibit (preview)

Badges & pills

.audience-pill (always on .section--dark / dark bg)

First Last Don't miss Insight

.news-event__badge--first · --last · --miss · --insight

Comparison Step 01

.vs-badge · .hiw-step__badge · .social-link-pill .coming-soon-banner · .coming-soon-banner__badge

Forms

Form controls

Email * .form-label · .required-star · .form-control

Invalid state Please enter a valid email address. .form-control.is-invalid · .form-error-msg

Select .form-select

Textarea textarea.form-control · resize: vertical

Form wrap (on dark section)

First name

Organization

.cta-form__form-wrap · white card floating on .section--dark

Navigation patterns

Nav pills (places section)

.places-section .nav-pills—pill tabs with active state

Accordion (HIW)

Accordion body text. Used on the How it Works page for integration steps and FAQ content.

Second panel content.

.hiw-accordion .accordion

List patterns

Why steps (auto-numbered)

First step—numbered badge auto-generated via CSS counter.
Second step—used to walk through workflows or processes.
Third step—badge color is --clr-accent on --clr-primary-tint.

.why-steps

Why feature list

01 Bold benefit title. Supporting description that explains the feature in plain terms for a museum director.
02 Second benefit. Continues the pattern with numbered accent labels in Montserrat.

.why-feature-list · .why-feature-num · .why-feature-body

News event list

First

Event description—institution, venue, and brief detail.

Don't miss

Another event with a different badge variant.

.news-event · .news-event__badge

News item list (dark)

Apr 2026

Recent news copy—used in the dark section of the News page.

Mar 2026

Older news item with date column and white-tinted text.

.news-item · .news-item__date · .news-item__text

Callouts & stats

Pull quote—a key statement set apart with an accent-blue left border. Used on the About page.

.pull-quote

"Why quote—a tinted blockquote with accent left border used in research article pages."

— Source or institution

.why-quote · .why-quote__text · .why-quote__attribution

70%

of visitors have challenges that inhibit exhibit access

.stat-callout · .stat-callout__number · .stat-callout__label (on .section--dark)

136 languages supported

6× faster than alternatives

1hr typical install time

.why-stat-grid · .why-stat-card · .why-stat-card__number · .why-stat-card__label

Tester outcomes

Result one. Supporting detail about what testers experienced during the evaluation.

Result two. Another outcome, presented in the same bordered row pattern.

.why-results · .why-results__title · .why-result-item · .why-result-icon

"I could finally read the labels without asking for help."

"Bigger text and higher contrast let our students stay engaged longer."

"Translating the label made the exhibit click for my parents."

.why-tester-quotes · .why-tester-quote

Exhibit widget

The .demo-exhibit card is used on demo.html to present each live exhibit. It combines a banner image, institution label, heading, descriptive copy, hint text, and the Capption icon trigger.

American Swedish Institute

Visby Window

The American Swedish Institute is a cultural mainstay in the Twin Cities. As you ascend the Turnblad Mansion's historic staircase, this glorious stained glass comes into view. Tap or click the Capption icon to learn about the Visby Window with Capption.

This is a standard Capption experience—great for first-timers.

Tap or click the icon

.demo-exhibit · .demo-exhibit__banner · .demo-exhibit__body · .demo-exhibit__institution · .demo-exhibit__hint · .demo-indicator-btn

Utility classes

Color—text

.text-primary-brand—#003b74

.text-accent—#3691ff

.text-muted-brand—#8e98a8

Color—background

.bg-primary-brand

.bg-accent

.bg-tint

.bg-pale

.bg-neutral-50

VS check / X / partial indicators

✓ ✗ ~ .vs-check · .vs-x · .vs-partial

VS breadcrumb

.vs-breadcrumb · .vs-breadcrumb__sep