San Francisco Unified Lions Club

The living style guide

Neighbors serving neighbors across San Francisco. This is the single source of truth for how the SFULC brand looks, reads, and behaves on the web.

Every token, type style, color, and component below maps 1:1 to the Webflow Variables and Client First v2 classes the site is built from. Change it here, it changes everywhere.

System Finsweet Client First v2
Type Overpass + Overpass Mono
Phase 1 — Style guide

01 — Color

A calm navy system, warmed by Lions gold

Navy carries the brand; gold is reserved for calls to action only; sky-blue is an accent for highlights and small UI. Green, amber, and red exist only for feedback states — never as brand color. Every text pairing below is checked against WCAG AA (4.5:1 for body text).

Tonal ramps

Seven families, each 50 (lightest) → 900 (darkest). The 500 step is the anchor sampled from the brand; lighter steps are tints for surfaces and subtle fills, darker steps are text-safe shades. Success / warning / error are feedback-only — never brand or decorative.

Navy — primary brand Headlines, brand surfaces, structure. 500 is the anchor.
50#F2F3F7
100#E0E4ED
200#BCC5D8
300#8F9EBE
400#596F9E
500#1F3D7C
600#1C366D
700#1A305F
800#182A52
900#162444
Gold — Lions gold (CTAs only) Reserve 500 for primary CTA fills; 600/700 are hover/active. Tints for subtle accents only.
50#FFFCF2
100#FFF7E0
200#FEEFBC
300#FEE48F
400#FED759
500#FDC91E
600#D7AC1E
700#B6921D
800#94781D
900#735F1D
Sky — accent Highlights, small UI, info feedback. 700+ is text-safe on white.
50#F2FAFD
100#E1F4FB
200#BFE6F7
300#94D6F1
400#61C2EA
500#29ADE3
600#2594C3
700#217FA7
800#1E698B
900#1A5370
Neutral — navy-tinted greys Text, borders, surfaces, disabled states. 500+ is text-safe on white.
50#F5F6F7
100#E8EAED
200#CED1D8
300#AEB3BE
400#868E9F
500#5C667D
600#50596D
700#454D60
800#3A4152
900#2F3545
Success — green Positive feedback only — never brand or decorative.
50#F2F9F6
100#E2F1EA
200#C0E2D3
300#97CFB5
400#64B791
500#2E9E6B
600#29885E
700#257453
800#206048
900#1C4D3D
Warning — amber Caution feedback. Distinct from gold CTA — never used for actions.
50#FDF8F0
100#FBEFDB
200#F6DCB3
300#F0C580
400#E8A842
500#E08A00
600#BF7704
700#A16608
800#84550C
900#674410
Error — red Destructive/error feedback ONLY. Never brand, never decorative.
50#FDF4F4
100#F9E5E5
200#F3C7C7
300#EBA2A2
400#E17575
500#D64545
600#B63D3E
700#9A3639
800#7E2F33
900#63272D

Anchor & system colors

The curated set with usage notes and verified AA ratios. These are the steps reached for most often.

--color-navy #1F3D7C Primary brand. Headlines on light, brand surfaces. White text 10.4:1 · AA
--color-navy-dark #1A305F Hover state, deep sections. White text 12.9:1 · AA
--color-navy-darker #162444 Footer, inverse surfaces. White text 15.3:1 · AA
--color-gold #FDC91E Lions Gold. CTA backgrounds only — never gold text. Navy text 6.7:1 · AA
--color-gold-dark #D7AC1E Gold hover. Also AA-safe gold icon tint on white. Decor / hover
--color-sky #29ADE3 Accent. Highlights, decorative fills, small UI — not text on white. Decor only (2.6:1)
--color-sky-dark #1E698B AA-safe accent. Links, accent text, accent icons on white. On white 6.09:1 · AA
--color-sky-pale #F2FAFD Accent callout background. Pairs with sky-dark text. sky-dark text 5.76:1 · AA
--color-ink #14213D Headings and primary text (navy-tinted). On white 16.0:1 · AA
--color-slate #454D60 Body text. Calm navy-slate. On white 8.5:1 · AA
--color-muted #5C667D Captions, eyebrows, helper text on light. On white 5.8:1 · AA
--color-bg-tint #F5F6F7 Cool light section background. Surface
--color-border #CED1D8 Default borders and dividers. Border
--color-border-strong #868E9F Stronger dividers, input borders. UI 3.29:1 · AA
--color-white #FFFFFF Primary surface, text on brand. Surface

Semantic tokens

Named by purpose, not hue. These are what you apply in the build; they re-theme the whole site from one place.

Background

--background-color-primarywhiteDefault page surface.
--background-color-secondary#F5F6F7Alternating calm section.
--background-color-tertiary#F2FAFDAccent / highlight section.
--background-color-brandnavyBrand surface, hero.
--background-color-brand-dark#1A305FDeep brand section.
--background-color-inverse#162444Footer / inverse.

Text

--text-color-primaryinkHeadings, primary copy.16.0:1 · AA
--text-color-secondaryslateBody copy.8.5:1 · AA
--text-color-mutedmutedCaptions, eyebrows, helper text.5.8:1 · AA
--text-color-on-brandwhiteText on navy/inverse.10.4:1 on navy · AA
--text-color-brandnavyBrand-colored text, on gold.10.4:1 · AA
--text-color-accent#1E698BLinks, accent text.6.09:1 · AA

Border

--border-color-primary#CED1D8Default borders.
--border-color-strong#868E9FStronger dividers, input borders.UI 3.29:1 · AA
--border-color-brandnavyBrand borders, ghost buttons.
--border-color-accentsky-600Accent borders, info alert boundary.UI 3.44:1 · AA
--border-color-successsuccess-600Success alert border.UI 4.40:1 · AA
--border-color-warningwarning-600Warning alert border.UI 3.59:1 · AA
--border-color-errorerror-600Error alert / invalid input border.UI 5.64:1 · AA

Accent & brand-subtle backgrounds

--background-color-brand-subtlenavy-50Brand-tinted surface, card media.ink 14.4:1 · AA
--background-color-brand-darknavy-700Deep brand section, active state.white 12.9:1 · AA
--background-color-accentsky-500Accent fills, progress bars.Decor / large only
--background-color-disabledneutral-100Disabled inputs and buttons.Surface

Feedback — subtle backgrounds

--background-color-accent-subtlesky-50Info alert / callout surface.sky-900 text 7.9:1 · AA
--background-color-success-subtlesuccess-50Success alert surface.success-800 6.95:1 · AA
--background-color-warning-subtlewarning-50Warning alert surface.warning-900 8.24:1 · AA
--background-color-error-subtleerror-50Error alert surface.error-700 6.56:1 · AA

Feedback — text

--text-color-successsuccess-700Success message text.on white 5.7:1 · AA
--text-color-warningwarning-800Warning message text.on white 6.4:1 · AA
--text-color-errorerror-600Error / validation text.on white 5.6:1 · AA
--text-color-disabledneutral-400Disabled labels.Exempt (disabled)

Interactive-state tokens

Hover, active, focus, and disabled values, pulled from the ramps so every component shares one set of states. The focus ring is a shadow token applied via :focus-visible.

brand-hovernavy-600 #1C366D
brand-activenavy-700 #1A305F
primary-button-hovergold-600 #D7AC1E
primary-button-activegold-600 #D7AC1E · navy 4.86:1
ring-focuswhite + navy-500 (≥3:1)
disabled-buttonneutral-100 #E8EAED

02 — Typography

One type system: Overpass

Overpass for everything on screen; Overpass Mono for eyebrows and code-like labels. Calm sizing, tight-but-not-cramped leading, with a slight negative tracking on h1 and h2 only.

Aa Bb Cc 0123

Overpass

400 Regular · 600 SemiBold · 700 Bold · 800 ExtraBold

Aa Bb Cc 0123

Overpass Mono

500 Medium · eyebrows, labels, token names

Stronger together for SF
heading-style-h13.5rem / 56px · 800 · lh 1.08
Neighbors serving neighbors
heading-style-h22.5rem / 40px · 700 · lh 1.15
Programs across the city
heading-style-h31.875rem / 30px · 700 · lh 1.2
How to get involved
heading-style-h41.5rem / 24px · 600 · lh 1.3
Membership in brief
heading-style-h51.25rem / 20px · 600 · lh 1.35
A small note heading
heading-style-h61.125rem / 18px · 600 · lh 1.4
Large lede copy that opens a section with a calm, readable line length and generous leading.
text-size-large1.25rem / 20px · 400 · lh 1.6
Medium body copy for emphasis paragraphs and intros that need a touch more presence than the base.
text-size-medium1.125rem / 18px · 400 · lh 1.6
Regular body copy — the default for paragraphs across the site. Comfortable for long reads with 1.65 line-height.
text-size-regular1rem / 16px · 400 · lh 1.65
Small copy for secondary details, meta rows, and supporting text under cards.
text-size-small0.875rem / 14px · 400 · lh 1.5
Tiny copy for footnotes and the smallest legal / caption lines.
text-size-tiny0.75rem / 12px · 400 · lh 1.5
Get Involved · Eyebrow Label
text-style-eyebrow0.8125rem / 13px · Mono 500 · uppercase · ls 0.1em

The type system in context

How the scale reads as real article prose — eyebrow, heading, lead, body, list, inline link, and a pull quote, all on the same vertical rhythm.

Our impact

A year of neighbors showing up for each other

In 2025 the San Francisco Unified Lions Club ran 42 service projects across all eleven districts — from vision screenings to park clean-ups to a winter coat drive that reached 1,300 families.

Most of that work happens quietly. A member spends a Saturday morning sorting donations; a volunteer drives an elderly neighbor to a clinic; a local business quietly covers the cost of 200 pairs of reading glasses. None of it makes the news, and all of it adds up to a city that looks after its own.

Where the year went

Our four focus areas stayed steady, and two new programs found their footing:

  • Vision & hearing screenings for under-served schools
  • Food security — weekly pantry support and holiday meals
  • Youth scholarships for graduating high-school seniors
  • Disaster readiness kits for at-risk households

Want the full breakdown? Read the 2025 impact report or come to an open meeting — every second Tuesday, all are welcome.

“I joined to give a few hours a month. Two years later it’s the part of my week I look forward to most.”— Dana R., member since 2023

03 — Spacing

The Client First size scale

One scale drives spacers, margins, padding, section rhythm, and containers. Generous whitespace is the primary calm lever — bias toward the larger steps.

--space-tiny0.25rem · 4px
--space-xxsmall0.5rem · 8px
--space-xsmall0.75rem · 12px
--space-small1rem · 16px
--space-medium1.5rem · 24px
--space-large2rem · 32px
--space-xlarge3rem · 48px
--space-xxlarge4rem · 64px
--space-huge6rem · 96px
--space-xhuge8rem · 128px
--space-xxhuge12rem · 192px

Section padding & containers

--padding-section-small3rem
--padding-section-medium5rem
--padding-section-large7rem
--container-small48rem
--container-medium64rem
--container-large80rem

The scale at work

A small stack built only from scale tokens — gap --space-medium between rows, padding --space-small / --space-medium inside boxes, gap --space-small between inline items. Change a token, the whole rhythm shifts.

Row gap uses --space-medium (1.5rem)

Item

Item

Item gap --space-small

04 — Shape & elevation

Minimal radius, calm shadows

Straight and modern: a 4px floor on radius, lifting to 8px on large surfaces. Shadows are navy-tinted and used sparingly to keep the system calm.

Radius

--radius-small4px · buttons, inputs, tags
--radius-medium6px · cards
--radius-large8px · large surfaces, images

Elevation

Five steps, navy-tinted and low-opacity. Reach for the smallest that reads — most of the system lives in xs–sm.

--shadow-xs0 1px 2px · hairline lift, inputs
--shadow-sm0 2px 6px · cards at rest
--shadow-md0 6px 16px · popovers, raised cards
--shadow-lg0 16px 40px · modals, hero cards
--shadow-xl0 28px 64px · full overlays

One shadow scale — --shadow-xs / -sm / -md / -lg / -xl. No legacy aliases; every component references this single scale.

05 — Buttons

Gold leads the action

Gold is reserved for the primary call to action — one per view. Navy carries secondary actions, a ghost variant handles tertiary, and links use the AA-safe sky accent. Hover states shown alongside default.

Primary — button

Gold background, navy text (6.7:1). CTAs only.

Secondary — button is-secondary

Navy background, white text (10.4:1).

Tertiary — button is-tertiary

Transparent, 1px navy border, navy text.

Link — link-style

sky-dark #1E698B (6.09:1), underline on hover.

State matrix — variant × state

Default, hover, focus, active, and disabled across all four variants. Focus rings render via :focus-visible live; shown here statically with is-focus.

Variant Default Hover Focus Active Disabled Primary Donate Donate Donate Donate DonateSecondary Join Join Join Join JoinTertiary Learn Learn Learn Learn LearnLink Read more Read more Read more Read more Read more

Sizes

With icon, icon-only & full-width

06 — Icons

Thin Lucide line icons

Lucide outline icons at ~1.75px stroke, inline as SVG. Default tint is navy; gold and sky-dark accent tints are used sparingly. Three sizes track the type scale.

Sizes

icon-small · 1.25rem
icon-medium · 1.5rem
icon-large · 2rem

Tints

navy · default
gold-dark · accent
sky-dark · accent

Representative set

users
heart
calendar
map-pin
file-text
send
mail
phone
check
arrow-right
layers
award

07 — Components

A library built from the tokens

Real, on-brand UI — forms, cards, feedback, navigation, and data display — themed for the club. Every piece reuses the same radius, shadow, spacing, and color tokens, so the whole library re-themes from one place.

Form controls

Full name *
Maria Gonzalez
As you’d like it on your member badge.
Why you want to volunteer
A sentence or two is plenty…
Optional — helps us match you to a program.
Program interest
Vision & hearing screenings
Pick one — you can change it later.
Email (error state)
maria@@example
That email doesn’t look right.
Focused input
Showing the focus ring
Focus uses --ring-focus + accent border.
Disabled input
Membership ID (locked)
Read-only until your application is approved.
Choices & switches
Add me to the monthly newsletter
Text me about urgent volunteer needs
Weekday availability
Weekend availability
I agree to the volunteer code of conduct *
Please accept the code of conduct to continue.
Public profile on
Public profile off

Assembled — volunteer sign-up

Volunteer sign-up

Takes about a minute. We’ll follow up within a week.

We’ll only email about volunteering.
I’m 18 or older
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Cards

Program

Food security

Weekly pantry support and holiday meals for families across the city.

1,300 families reached in the winter coat drive
42 service projects across 11 districts
MG Maria Gonzalez Club President
Jul14

Community pantry day

Mission District · 9am

Feedback

Heads upNext member orientation is the second Tuesday of the month.
Application receivedThanks — we’ll be in touch within a week.
Almost fullOnly 3 spots left for Saturday’s pantry shift.
Payment failedYour card was declined — please try another.

Inline validation

Email *
not-an-email
Enter a valid email address.

No upcoming events

There’s nothing on the calendar right now. Check back soon, or host one yourself.

Navigation

Breadcrumbs, tabs & pagination

The food security program runs weekly pantry support out of three neighborhood sites, plus holiday meal distribution every November and December.

Footer

Data display

Badges & tags

DraftMember New ActivePending Closed Pill

Avatars

MG JL RK TP MG JL RK +12

Table

MemberRoleJoinedStatus
Maria GonzalezPresident2019Active
James LeeTreasurer2021Active
Rosa KimVolunteer lead2023On leave
Tom ParkNew member2026Pending

Tooltip

A 501(c)(3) means your donation is tax-deductible. Tax-deductible

Goal / progress

Winter coat drive $7,200 / $10,000
72% of goal · 9 days left
Volunteer hours logged 1,800 / 2,000
90% — almost at the annual target

08 — Utilities

Client First utilities, as shipped

We adopt the standard utility library: text color, text align, max-width, and visibility. No custom utilities at the style-guide stage.

Text color — text-color-*

text-color-primary — ink

text-color-secondary — slate

text-color-muted — muted (AA on light)

text-color-brand — navy

text-color-accent — sky-dark

Text align — text-align-*

text-align-left

text-align-center

text-align-right

Max width — max-width-*

max-width-small · 20rem
max-width-medium · 35rem
max-width-large · 48rem

Background color — background-color-*

secondarytertiarybrand

Visibility utilities — hide / hide-tablet / hide-mobile — control responsive display.

Fuller CF utility matrix

222 classes across 12 families. Visual samples below; the registry element carries every class for Webflow import.

Text style — text-style-*

text-style-muted

text-style-italic

text-style-allcaps

text-style-strikethrough

text-style-nowrap (no-break)

text-style-quote — accent border left

Text weight (new) · Text color (new)

text-weight-light (300)

text-weight-medium (500)

text-color-success (5.67:1)

text-color-warning (6.39:1)

text-color-error (5.64:1)

text-color-on-dark (on inverse bg)

Background color (new) · Max width (new)

background-color-inversebackground-color-accentbackground-color-brand-subtle
max-width-xsmall · 16rem
max-width-xlarge · 60rem
max-width-xxlarge · 80rem

Spacing — padding-* / margin-* / gap-* / spacer-*

168 padding + margin classes (7 dirs × 12 sizes each). Sample — all-sides padding:

padding-tinypadding-xsmallpadding-smallpadding-mediumpadding-large

Gap sample (flex):

gap-largeitemitem

Full matrix (all dirs + all sizes) in the registry below.

Grid autofit · Aspect ratio · Overflow · Visibility

Grid autofit (xsmall / small / medium / large min):

grid-autofit-xsmallgrid-span-full

Aspect ratio (class applied, visual controlled by registry):

aspect-ratio-squareaspect-ratio-portraitaspect-ratio-landscapeaspect-ratio-widescreen

Overflow: overflow-hidden overflow-auto

hide-mobile-portrait hides at ≤479px. All classes are in the registry below.

09 — Governance

How to use this system

A few rules keep the system clean as the site grows and changes hands.

Tokens are the source of truth

Every color, size, and radius is a named token in :root that maps 1:1 to a Webflow Variable. Never hardcode a hex. Change a value once here and it cascades everywhere.

Gold is for CTAs only

One primary gold action per view. Navy carries secondary actions; sky-dark carries links. Never gold text on white — it fails contrast. No red anywhere; it is out of brand.

Apply semantic, not primitive

Build with purpose-named tokens (text-color-secondary, background-color-brand), not raw primitives. This is what makes a rebrand a one-place change.

Respect Client First structure

Every section follows padding-global > container > padding-section. Decouple heading style from tag. Don't deep-stack utilities — collapse repeated stacks into one custom class.

Check contrast before shipping

Every text/background pairing must hit WCAG AA (4.5:1 body, 3:1 large). Muted now passes AA on all surfaces; sky-dark for accent text. Sky #29ADE3 is decorative; use #1E698B for accent text.

This page leads the build

The style guide syncs into Webflow first — Variables and global classes — before any page is imported. Pages then reference these globals, never redefine them.