clearAMS

clearAMS / Design system

Design system.

The site speaks the app's language. Every color, typeface, radius and easing curve below comes from the clearAMS app itself, set on the dark field the app uses for its own landing page.

Principles

The app is the sourceTokens are copied from the app's stylesheet, not reinvented. When the app changes, the site follows.
Dark field, warm lightNear-black navy with one hot accent, orange, used sparingly for action and emphasis.
Mono for structureGeist Mono carries headlines, labels and numbers. Geist carries reading. Fraunces italic adds one human word.
Show the productIllustrate with real app UI on white, exactly as users see it, rather than stock imagery.
Motion that means somethingDots gather, headings decode, rules draw. Everything settles, and all of it switches off for reduced motion.

Color

Brand anchors and the dark field come from the app's landing page. Status colors are the app's, each with its soft background pair.

Brand

Navy--navy · #0B2545
App mark, primary buttons
Navy 2--navy-2 · #13315C
Primary hover
Ink--ink · #0B1B33
Text on light
Orange--orange · #FF7A1A
Signature accent
Orange 2--orange-2 · #F5A623
Warm highlight
Orange deep--orange-deep · #C2410C
Accent on light

Dark field

Field gradient--field-gradient
App .landing-root
Field 0#02080F
Page ground
Field 1#071830
Panels
Field 2#0B1F3C
Raised, navy pool
On field 2#C9D8EC
Body copy on dark
On field muted#8497B3
Secondary copy

Status

Blue#1D4ED8 / #EEF2FF
Submitted, info
Green#15803D / #ECFDF5
Compliance checked, OK
Amber#B45309 / #FFFBEB
Revisions, warnings
Red#B91C1C / #FEF2F2
Blocked, over limit
Lines#B8C8DC / #D0DCEC
Hairlines on light
Muted#64748B
Secondary text on light

Type

The app's three families: Geist for reading, Geist Mono for figures and structure, Fraunces italic for the one expressive word.

Display · Mono 700
--fs-display, uppercase, -0.05em
Clear plans
Display 2 · Mono 700
--fs-display-2
See it live
H2 · Mono 500
--fs-h2, -0.035em

From draft to formalized

Lead · Mono 500
--fs-lead

The rules run while you plan.

H3 · Mono 600
--fs-h3, 22px

Allowability screening

Body · Geist 400
--fs-body, 20px
ss01 ss02 cv11

clearAMS puts the program's rules inside the workflow, so problems are caught while a plan is being written instead of after it's submitted.

Small · Geist 400
--fs-small, 18px

Secondary prose, card body and table cells.

Eyebrow · Mono 600
--fs-micro, 16px
0.09em, uppercase

Running total

Accent eyebrow

Floor · 16px = 12pt
--fs-micro

Nothing on this site is set below 16px. Every label, tag, legend, table head and footnote uses --fs-micro or larger — use the tokens rather than raw px so the floor can't be undercut.

Serif accent · Fraunces italic
School Site Councils
Figures · Mono, tnum
$120,000 · 80% · FY 2026–27

Shape, space & motion

Radius

6 · sm
8 · btn
10 · card
14 · panel
999 · pill
Easecubic-bezier(.22, 1, .36, 1), the app's fadeUp curve
Durations.18s hover · .45s UI · .8s reveals
Gutterclamp(16px, 4vw, 48px), max width 1320px
Section rhythmclamp(72px, 11vh, 140px)
Hairlines#B8C8DC at 16% on dark, 34% for emphasis
Grid unit28px, the app's grid background

Components

Buttons

Primary → Secondary Light →

Plan status badges

DraftSubmittedRevisions requestedCompliance checkedFormalizedOver 20%

Covers

Feature cards styled as book covers. Seven variants: ink, paper, orange, navy, sky, green, amber.

cAc-ink
Guided
plan
Dark on dark with an orange chip.
cAc-paper
80/20
rule
Warm paper, navy chip.
cAc-orange
Allow­able?
The accent, used once per row.
cAc-sky
SSC
deck
Light gradient.

Tile

Roles you control

Decide who builds, who reviews and who only views.

Step with line art

02

Review with a decision

App window

Product UI shown on white, using the app's own card, line, meter and badge styles.

yourdistrict.clearams.app

Running total

Sample school
Compliance checked
Arts staffSupplies & services

Effects

All effects live in assets/js/site.js and are opt-in by markup.

canvas.dot-field · data-gap, data-bias, data-accent, data-flip
Dot-matrix fieldSquare dots, dense toward one corner, carried by a slow wave and swelling under the pointer. A few burn orange.
Scramble headingsAdd data-scramble to any heading. It decodes left to right from random glyphs when it scrolls into view.
Nav to pillThe full nav fades once the first screen scrolls away and a floating, blurred pill takes its place.
Reveals & count-ups.reveal rises into place; data-count counts up; .draw strokes trace themselves.