Color tokens

Foundation palette extracted from the existing brand: ocean cyan + deep navy + coral accent + warm cream. Contrast ratios verified against white surfaces; text use requires the listed ratio meeting WCAG 2.1 AA (4.5:1 normal text, 3:1 large text and graphical UI elements).

ocean-300

#40d9f1

bg + lg-text · Foundation cyan — logo fill, link/CTA on dark surfaces

ocean-500

#038cd9

4.6:1 · Secondary action, hover on cyan links

ocean-700

#0058a6

8.1:1 · Primary link color on light surfaces

ocean-900

#112337

14.2:1 · Header background, primary heading + body text

coral-300

#ff8e6c

decorative · CTA hover state

coral-400

#ff6b47

lg-text · Primary CTA background ("Donate", "Sign in")

coral-500

#ea6485

4.5:1 · Section eyebrows, accent labels

cream-50

#f7f4ee

bg-only · Soft panel background, alternate section fill

ink-700

#494949

7.9:1 · Body text

ink-500

#686e77

4.7:1 · Captions, muted UI text

Typography

Poppins for display headings and the Foundation wordmark; Lato for body text and UI labels. The type scale is fluid via responsive Tailwind utilities so headings shrink gracefully on phones without rebuilding the layout.

Display H1 — Poppins 48–72px

Display H2 — Poppins 36–48px

Display H3 — Poppins 24–32px

Body large — Lato 18px. The quick brown fox jumps over the lazy ocean.

Body — Lato 16px. The quick brown fox jumps over the lazy ocean.

Body small / muted — Lato 14px.

Eyebrow caps — Lato 12px, 0.18em tracked

Buttons

Coral-pill is the conversion CTA used on Donate, Sign in, Subscribe, Add to cart. Ocean-outline is the secondary action. Cream-on-navy ships on dark hero ribbons. Ghost link is the inline "Learn more →" treatment.

Tiles & cards

Three card variants ship across the Pilot: image-led tiles for blog/news/sanctuary/shop indexes; tier cards for membership + donor recognition; compact info cards for sidebars and metric callouts.

Sanctuary

Image tile · sanctuary, blog, news

Learn more →

Sanctuary Steward

$25 /mo

Tiered benefits list
Free Impact Report
Member RSVP access

Badges & pills

Pills handle category labels, tier markers, content-type tags, and inventory status. Two color families: cyan (informational, neutral) and coral (priority, attention).

Sanctuary News Blog Florida Keys Hudson Canyon Members only Apparel Sold out

Accordions

Native <details>/<summary> for no-JS accessibility. Used on sanctuary "Things to do" sections when item lists are long, and on FAQ-style content blocks.

How does my donation get attributed?

Every gift on the Pilot writes to Salesforce with UTM, on-site pathway, and campaign attribution preserved through the Fundraise Up webhook + reconciliation process.

What's included at the Sanctuary Steward tier?

Sanctuary Stewards get the printable Impact Report free of charge, members-only briefing replays, early-access event RSVPs, and recognition in the annual donor honor roll.

How do you handle accessibility?

Build-time axe-core scans block any code change that introduces a new WCAG violation. Visitors can adjust text size and motion via the floating accessibility widget in the bottom-right.

Tabs

Pill-style tabs used on the Events index view-switcher and search-results section facets. Active tab gets the navy fill; inactive tabs sit in cream with ink-700 labels.

Section header pattern

Every long-form section starts with a coral tracked eyebrow, an H2 in Poppins, and an optional supporting paragraph. Used on the homepage, sanctuary detail, support index, get-involved, and the Strategic Plan/Impact Report pages.

Eyebrow caps

The section title goes here

A one- or two-sentence framing paragraph that orients the reader before the content blocks below begin.

Media display

Two media patterns: a 16:9 video embed wrapper (used on sanctuary detail and the Hudson Canyon briefing replay) and a photo-with-caption block.

Video embed — 16:9 with cream-on-coral play affordance.

Photo with caption — gradient stand-in for production photography.

Calls to action

Three CTA ribbon variants: dark-navy NextStepRibbon (program pages, blog detail), coral-on-navy hero CTA (donate + take action), and inline link rail (back to index navigation).

What's next?

Help protect America's marine sanctuaries

Your gift funds protection, science, and education across all 18 National Marine Sanctuaries.

Donate Take action

← Back to all sanctuaries

Inline back-link pattern

Event card

Event detail uses a "key facts" strip (When / Where / Cost) above the fold and an event-card pattern on the events index and Related events rail.

When

June 9, 2026

7:00–8:30 PM ET

Where

Online — Zoom webinar

Captioned live

Cost

Free

218 of 300 seats remaining

Forms

Form inputs use rounded-md borders, ocean-500 focus rings, and 2.5 grid-units of vertical padding. Required-field treatment relies on native HTML required attribute + native browser validation. Used on contact, volunteer signup, event registration, advocacy actions, and the magic- link sign-in.

Alert & callout banners

Four callout variants: ocean info (Pilot demo disclaimers, accessibility notices), coral attention (multisite-collapse banners), error/warning (form validation), success (confirmation states).

Info / accessibility note

Live captioning available throughout. ASL interpretation can be requested with at least 7 days notice.

That sign-in link expired or was already used. Request a new one below.

Thanks — your vote was added to the Foundation's priority survey.

Header & footer

Global site header is dark-navy with the Foundation logo, primary nav, search, Account/Sign-in, and the Donate CTA. Footer is dark-navy with a newsletter signup ribbon at top, a 5-column site map, social icon row, and credibility/legal row at the bottom.

Header and footer render on every page on the Pilot — scroll to the top of any page to inspect the live component.

Accessibility scaffolding

Site-wide accessibility primitives that every page inherits.

Skip-to-content link — first focusable element on every page, jumps the keyboard user past the global nav to the page <main>
Floating accessibility widget — adjustable text size, link-underlining, motion preference, and high-contrast toggle
Semantic landmarks — every page has one <h1>, ordered heading hierarchy, and proper <nav> / <main> / <aside> / <footer> landmarks
Focus rings — 2px ocean-500 outline on every interactive element, visible on keyboard nav
Reduced motion — every transition respects prefers-reduced-motion
Form labels + autocomplete — every input has a visible <label> and the right autocomplete attribute for password-managers and mobile keyboards
Image alt text — required at the data layer; missing alt text fails the build
Color contrast — every text/background pair in the palette is documented above with its WCAG ratio

Governance

How this design system evolves once the production engagement begins.

The Foundation has read access to the Figma library; Simple Spark holds edit access during the six-week engagement
Tokens (color, type, spacing, motion, breakpoints) live in Tailwind theme + CSS variables — single source of truth
This page is the live design-system reference; engineers and designers read it before adding any new template or component
New blocks emerging from discovery (e.g., a SmartSimple grants directory variant) are added to this library, not built one-off

Search

Design system