Design system

The SchoolsFirst style guide.

Color, type, components and voice — the shared kit every page in this demo is built from.

Style guide

The system every variation shares.

Slate, Steel and Goldenrod are the brand trio, drawn straight from the live site; Ochre is the action color. Everything below — type, lists, buttons, forms — is the shared kit each new page is built from.

01 — Color palette

Primary
Slate#2D4452
Secondary
Steel#3B6E8F
Highlight
Goldenrod#B8860B
Hi · on dark
Goldenrod Soft#F0B566
Action
Ochre#AF5607
New
Sage#5E8B7E
New
Clay#C7714B
New
Sand#EFE3CF
Neutral
Mist#E9EFF4
Neutral
Warm#FBF6EE
Func
Green#00884B
Func
Red#A61C23
Slate, Steel & Goldenrod are the trio. Slate #2D4452 is primary — structure, headers, dark sections. Steel #3B6E8F is the secondary blue. Goldenrod #B8860B is the alt / highlight — eyebrows, labels, emphasis — with the soft #F0B566 tint for the same role on dark slate. Ochre #AF5607 is the dedicated action color for buttons & CTAs, kept separate so actions never blend into highlights. The new Sage, Clay and Sand extend the range for illustration, tags, and variation theming. Keep CTAs on Ochre, highlights on Goldenrod.

02 — Type scale

Fraunces (display serif) for H1–H4 · Inter for H5–H6, UI & body

DisplayFraunces 600
clamp 2.4–3.2rem
Banking that puts Members first.
H1Fraunces 600
2.35rem / 1.1
World-Class Personal Service
H2Fraunces 600
1.95rem / 1.12
Built for educators, since 1934
H3Fraunces 600
1.55rem / 1.15
We understand the school year
H4Fraunces 600
1.25rem / 1.2
Summer-smart savings
H5Inter 700
1.02rem
Today’s Member rates
H6 / OverlineInter 700
.8rem · .06em caps
News & alerts
EyebrowInter 700
.74rem · .14em caps · Goldenrod
For the people who teach

03 — Body copy & inline

A lead paragraph sets up a section in Fraunces — warm and editorial, never longer than a couple of lines.

Body text runs in Inter at 1rem with generous line height. It stays plainspoken and human: short sentences, contractions, and a focus on real Member life. Links use the Ochre action color, while strong text and emphasis add weight without shouting. Inline code and highlighted phrases are available when a detail needs to stand out.

Small / caption text handles disclosures, “as low as” rate notes, and photo credits — #8C9194 at .82rem.

04 — Lists

Unordered

  • Free checking & high-yield savings
  • Member-first loan rates
    • Auto & personal
    • Home & equity
  • On-site financial workshops

Ordered

  1. Open your account online
  2. Set up direct deposit
  3. Start earning Member rates

Checklist

  • Summer-smart savings for 10-month pay
  • Classroom & supply support
  • Retirement tuned to CalSTRS & CalPERS

05 — Blockquote

“They helped me buy my first home on a teacher’s salary. No one else even tried.”
Priya R. · 3rd-grade teacher · Member since 2011

06 — Buttons

Variants
Open an Account See Rates Learn More Disabled
Sizes
Large CTA Default Small

07 — Tags & badges

Pills · supporting tones
Educator Branch Featured Member-owned
Badges · status
New Newsroom Live Alert

08 — Form controls

09 — Table

ProductTermRate
New Auto Loan36 mo.4.99% APR
Share Certificate12 mo.4.50% APY
Home Equity (HELOC)intro6.75% APR

Rates illustrative · “as low as”

10 — Card

Featured

Summer Saver

Smooth out your 10-month paycheck with automatic summer savings.

Explore →

11 — Callouts

Heads up. Branches are closed July 4 for the holiday.
You’re covered. Federally insured by NCUA.
Note. Rates shown are “as low as” and subject to change.

12 — Voice

Brand Voice & Tone Guide“Members” always capital · World-Class Personal Service · people helping people →