Donate now
01949 860303

Internal — not indexed

Style guide

This page documents tokens and patterns aligned with the homepage so new sections stay visually consistent. It is excluded from search via noindex, nofollow in BaseLayout (/style-guide/).

Brand colors

Defined in src/styles/global.css on :root. Prefer CSS variables, not one-off hex, except where a component bakes a specific value (e.g. hero buttons).

text-primary

#10233c

--text-primary Default body and headings

golden-yellow

#fedc06

--color-golden-yellow

lavender

#ebeef5

--color-lavender

alice-blue

#eaf1fb

--color-alice-blue

old-lace

#fffbe6

--color-old-lace

ghost-white

#f5f9ff

--color-ghost-white

white

#ffffff

--color-white

teal

#1d508d

--color-teal

steel-blue

#2751a0

--color-steel-blue

steel-blue-1

#1d65b2

--color-steel-blue-1

steel-blue-2

#2c6eb4

--color-steel-blue-2

dark-orchid

#6b3fa0

--color-dark-orchid

dark-slate-gray

#2e7d4f

--color-dark-slate-gray

fire-brick

#c05e1a

--color-fire-brick

Typography & title hierarchy

Font family sitewide: Montserrat (see global.css). Homepage section titles and hero copy use the tokens below; long headings use title case in content (major words capitalised, small words like “and” lowercased in the middle), matching the homepage JSON style.

Level map

  • Hero (H1) — --type-hero-title, weight 700, tight letter-spacing (-0.03em in HeroSection.astro).
  • Page / section (H2) — --type-section-title, for primary section titles on coloured or white bands.
  • Card / block (H3) — --type-card-title or the care-card clamp in CareServicesSection.astro.
  • Eyebrow / kicker — --type-micro, uppercase, wide letter-spacing (0.1em–0.12em), often steel-blue, as on the shops section.

Supporting our community

Our Local Charity Shops

Intro and lede: --type-body-large, line-height ~1.55–1.6, colour around #364861 / #495d78 for secondary text.

Border radius

No single global token: components pick radii for purpose. Pills and tags use 999px; cards and panels cluster at 12–16px.

Radius Typical use
6px Default `.btn` corners
8px Swatch chips, small UI
10px Inline samples, type rows
12px Motion demo, soft cards
14px Style guide panels
16px Homepage service cards
999px Pills, tags, primary CTAs, hero row buttons

Surfaces, borders & depth

Common patterns from the homepage and inner pages.

  • Section background — --color-lavender for alternating bands; white for contrast sections (e.g. shops).
  • Card border — 1px solid e.g. #d9e3f0, #dce5f2, or #e5ebf5.
  • Card shadow (service cards) — 0 6px 16px rgba(19, 47, 82, 0.08).
Lavender section
White panel with border + shadow (see cards)

Layout & container

Homepage sections use a centred container width: min(1200px, 95%) with margin: 0 auto. Some inner pages (e.g. contact) add horizontal padding: clamp(1.125rem, 4.2vw, 1.5rem) on the same max-width shell.

This guide uses the same min(1200px, 95%) pattern.

Service tags (care cards)

Pill tags on the homepage care grid (CareServicesSection.astro).

Tue–Thu | 10am–3pm Mondays | 10am–1pm Dementia Support Counselling

Title case helper (optional)

For a few pages, headings are normalised with toTitleCase in src/lib/titleCase.ts (AP-style, small words mid-phrase). Use only for short labels and headings, not for body copy.

we'd love to hear from you → We'd Love to Hear from You

Typography scale (tokens)

Sample line in each size.

--type-hero-title

The quick brown fox jumps over the lazy dog.

--type-section-title

The quick brown fox jumps over the lazy dog.

--type-card-title

The quick brown fox jumps over the lazy dog.

--type-subtitle

The quick brown fox jumps over the lazy dog.

--type-body-large

The quick brown fox jumps over the lazy dog.

--type-body

The quick brown fox jumps over the lazy dog.

--type-body-small

The quick brown fox jumps over the lazy dog.

--type-micro

The quick brown fox jumps over the lazy dog.

--type-nav

The quick brown fox jumps over the lazy dog.

--type-button

The quick brown fox jumps over the lazy dog.

--type-button-small

The quick brown fox jumps over the lazy dog.

Buttons

Base .btn uses border-radius: 6px in src/styles/_buttons.css. Reserve .btn-shine for main donation-style CTAs.

Brand note: homepage Day Care cards use simple text-style buttons with a yellow underline (see .card-link / .card-link-text pattern below).

Homepage care cards (CareServicesSection.astro) use a text-style CTA: bold --color-steel-blue, with a yellow bar on the label only (::after on .card-link-text), and the arrow outside that underline. The bar animates in on :hover and :focus-visible.

Day Care

Expert nursing support in a home-from-home environment, matching real card copy length.

Find Out More

Copy the same structure: class="card-link" on the <a>, class="card-link-text" on the text span, then the arrow in a second span so the yellow rule never sits under the arrow.

Spacing rhythm (reference steps)

8
12
16
24
32
48

Use as a common scale, not hard tokens — pair with section padding (e.g. clamp(3.75rem, 9vw, 6rem) on homepage sections).

Motion & animation

Motion is calm and supportive: short fades with a soft ease-out, modest vertical travel, and no autoplaying distractions. Always respect prefers-reduced-motion (handled in CSS and in the scroll script).

Design tokens

Defined on :root in src/styles/global.css. Use these when adding new animations so timing stays consistent.

Token Role
--motion-ease-out Primary easing for entrances (cubic-bezier)
--motion-duration-reveal Section scroll reveal (opacity + transform)
--motion-duration-stagger Card / grid item fade-up after section is visible
--motion-duration-hero Hero headline / body / CTA row (HeroSection.astro)
--motion-duration-video Video embed emphasis when its section appears
--motion-distance Vertical shift for scroll reveals and motion-fade-up
--motion-distance-hero Hero line stagger distance
--motion-stagger-step Delay step between grid columns (multiples used for nth-child)

Scroll reveal (site-wide)

  1. Wrap the page content that should participate in motion with class="motion-scope" (the homepage also uses page-home for any legacy hooks).
  2. Use normal <section> blocks. These are excluded from scroll reveal so the hero can use its own treatment: .hero-section, .contact-hero, .donate-hero, .shop-hero, .hospice-svc-hero, .archive-hero.
  3. Import and call initMotionScrollReveal() from src/scripts/motion-scroll-reveal.ts (optional selector; default ".motion-scope").
  4. Use the same grid class names as the homepage for staggered children: .cards-grid, .impact-grid, .featured-grid, plus .reach-grid > .main-card and .side-stack > .side-card, and .video-frame for video blocks. 
<div class="motion-scope">
  <HeroSection /> <!-- .hero-section: not observed -->
  <section>…</section>
</div>
<script>
  import { initMotionScrollReveal } from "../scripts/motion-scroll-reveal.ts";
  initMotionScrollReveal();
</script>

Hero stagger

Apply class="hero-animate" to the hero title, supporting copy, and CTA row in HeroSection.astro. Keyframes use --motion-duration-hero, --motion-ease-out, and --motion-distance-hero.

Live example (scroll reveal)

Scroll this panel: sections below use the same classes as the homepage. A second section includes a .cards-grid to show stagger.

Sample section A

This block uses reveal-on-scroll and is-visible once it enters the viewport.

Sample section B (grid stagger)

Card one
Card two
Card three