Switchboard Design System

Bold (700) with bottom margin. Applied to h-tags on cards, service pages, hub pages, and staff sections. Has custom CSS in Oxygen — check for additional overrides.

Larger introductory body text (~1.25rem) with bottom margin. Used for the first paragraph under a hero heading. Scales down on mobile.

Large display text (~3.5rem). Hero headlines. Shrinks on mobile. Pair with .headline for bold weight.

Mid-size text (~1.25rem). Section subheadings and lead copy.

Set to 1.2rem. Used for card descriptions and metadata.

References the same Oxygen variable as .hero_paragraph (~1rem). Use for body-scale text that needs to be slightly smaller than the default.

Smallest text size (~0.75rem). References Oxygen's xs spacing variable. Use for legal copy, fine print, and metadata labels.

In-between size (~0.9375rem). Use for secondary body copy that sits between .text-size-sm and the base size.

Forces font-weight 700 on any element. Also has a border property set in Oxygen — verify this is intentional.

Colour overrides for text. .text-color-meski-black sets text to #190825 (the updated near-black with a slight purple tint). .text-color-white has additional custom CSS. Use to reverse text on dark backgrounds or apply accent colour.

Custom CSS classes that override anchor colour within a container. Apply to the wrapper element, not the link itself. Note: the global links colour now references salmon via the Oxygen palette variable.

White background with border-radius (10px) and padding. Used for card containers on coloured backgrounds and the navigation wrapper.

Warm cream (#FBE7C1) with 5% vertical padding. Used for the homepage news section.

Semi-transparent white (23% opacity) with backdrop-blur and shadow. Used for cards over image or gradient backgrounds. Requires isolation: isolate on parent to work correctly in Safari.

Multi-layer background: the brand gradient (brand purple → salmon, 163°) with a grainy texture blended via multiply. Has isolation: isolate in custom CSS to fix Safari blend mode bug. Background is cleared at tablet-portrait breakpoint — re-apply per page if needed. Also cleared at tablet-landscape and phone-landscape.

Fixed-position decorative SVG ellipses (pink/salmon and brown tones). Z-index -1 so they sit behind content. Used as layered page background accents.

Sets background-size: cover and background-position: center via custom CSS. Apply alongside Oxygen's background image setting or an inline style.

Currently empty. Either define styles or remove in favour of .news-section exclusively.

Base card container with min-height. Combine with .bg-white .card-padding .shadow-s .borders-rounded-s for a complete card.

Internal padding (--m) for card content. Kept separate so it can be applied or overridden independently.

Fixed 220px height, object-fit: cover, full width, rounded corners, bottom margin. Apply to img tags inside cards.

Flex row for heading + optional icon. Centres items with xs gap and bottom margin.

Flex container for the link or button at the bottom of a card.

2-column grid used inside a card for side-by-side text + image or text + icon layouts.

Salmon pill label with white text. Used for news categories (Jobs, Training, News etc.).

box-shadow: 0 2px 12px rgba(0,0,0,0.1). Used on cards and Gravity Forms input fields instead of borders.

Wrapper for staff member cards. Currently a placeholder — add border-radius, padding, and white background here to control all staff cards globally.

Circular image (border-radius: 50%) with object-fit: cover. Apply to the staff photo img tag — constrain width via parent.

Flex row for staff name and optional pronoun badge. Aligns items centrally with xs gap.

2-column CSS grid with --m gap. The core layout class — used across hero sections, service split layouts, and CTA blocks.

4-column grid. Used for icon/feature rows and partner logo grids.

2-column grid with a tighter 14px gap (vs --m). Used for the hub cards on the homepage.

3-column grid for news card listings.

280px fixed sidebar + fluid content column. Used across all RWP subpages. Now also collapses at phone-landscape.

Flex container for Oxygen's news post loop.

3-column grid loop layout.

Generic grid container with margin. Use when no specific column-count class is needed.

Basic flex container.

Full viewport height hero with horizontal padding. Has the most responsive overrides of any class — sizing and padding adjust at all four breakpoints.

Shorter hero (~40vh) for inner pages that don't need a full-screen treatment.

Now set to display: block at base (updated from flex). Contains the hero content and CTA. Responsive overrides adjust layout at tablet and below.

Placeholder wrapper for hero text content. Add padding or alignment styles here to control the hero layout globally.

Wrapper for the hero CTA button(s). Now has a responsive rule — hidden at tablet-landscape. Previously empty at base; check Oxygen for base styles.

Right column of the service hero. Oldlace background with centred content — displays the referral form. Hidden on mobile.

.section-what-we-do sets vertical margin. .we_do-wrapper is an inner positioning context — currently empty.

Three-layer CTA: .cta-section = outer flex wrapper; .cta_content-wrapper = 2-column rounded card (min-height 20rem); .cta_copy-wrapper = left column grid for stacked copy.

Sticky top nav bar. White background, flex layout, border-radius, position: sticky, z-index: 100, shadow.

Outer header block wrapper. display: block + custom CSS.

Main content margin wrapper for page templates. Sets 5% horizontal margin.

Wide margin container for pitch/intro copy sections. Sets horizontal margin to 5%.

Left sidebar navigation for RWP subpages. Links to all sub-sections: LGBTQ+ Resources, Recovery Resources, 1:1 Coaching, Group Coaching, Blocking & Exclusions, Affected Others, Research Overview, Our Partners. Define visual styles here.

Right content column on RWP subpages. Displays the resource accordion and page body. Add padding here.

Wrapper for the resource accordion. Has custom CSS — see the accordion stylesheet (.rwp-accordion-item / .rwp-accordion-trigger / .rwp-accordion-body). Pulls Post Title + Post Content from RWP Resource CPT via Oxygen repeater + PHP code block with setup_postdata($post). Query fed by ACF relationship field using WP_Query array with wp_list_pluck.

.global_padding = --m vertical + 5% horizontal. .section-padding = --xl vertical + 5% horizontal. Use on outer section wrappers needing consistent gutters.

Removes top padding. Use to butt a section directly against the one above it.

Sets both top and bottom padding to 10%. Use on full-width sections that need generous vertical breathing room relative to the viewport — particularly hero-adjacent sections.

Both set display: flex with both axes centred. Apply either — they are functionally identical. .utility_content-center also has a phone-landscape breakpoint override.

Alignment utilities for flex containers. Right-aligns, top-aligns, or left-aligns flex content respectively. .utility_content-align-top is currently empty — add align-items: flex-start before use.

Intended for flex-direction: column. Add the property before use.

Applies border-radius: 10px (--radius). Use on any element needing rounded corners not inherited from a component class.

Size utilities. .full-height = 100vh. .utility_50vh/.utility_50vw = split panels. .utility_min-height-20rem = prevents sections collapsing when content is sparse.

mix-blend-mode: multiply at 60% opacity. Used to blend decorative elements and grain textures into coloured backgrounds.

Placeholder for a horizontal scrolling layout. Define before use.

margin-bottom: --xs (0.5rem). Tight stacking.

margin-bottom: --l (2rem). Standard breathing room between groups.

margin-top: --s (1rem). Light top spacing.

margin-top: --xxl (4rem). Large offset — used after full-height hero sections.

1.5rem × 1.5rem. Small decorative icons next to card headings.

2rem × 2rem. Social media icons and navigation icon buttons.

Non-square icon (~3rem × 2rem). For wider-format partner logos or feature icons.

Auto-width, ~3rem height. Partner/funder logos on service pages.

Salmon-coloured icon with padding, size, and border-radius. Applied to social SVG icons in the footer.

Full-width, 220px fixed-height news card image with object-fit: cover.

Full-width image with object-fit: cover. Currently set to display: none in Oxygen — verify this is intentional or a work-in-progress.

position: relative. Used to position an image element within a relative stacking context.

Flex row (font-weight 600) for the post metadata row. Contains tag + date + author. Also has border-radius and margin.

Flex row with xs gap for grouping meta elements.

Flex row for author name and avatar thumbnail.

Flex row for social icon links with xs gap and bottom margin.

Outer footer wrapper. The background (brand purple + grainy texture blend) is now applied directly in Oxygen on the element rather than via this class — the class itself is currently empty in selectors.json. Padding and layout are still set here via Oxygen.

Flex row for navigation link groups (Services, Company, Legal, Partners, Follow us).

Padding container for individual footer link column groups.

Flex container for footer logo, charity number, and company reg. Bottom padding separates it from the links row.

Large decorative typographic element at very low opacity. White, relative position. Scales down significantly across breakpoints.

Reserved for the CTA section headline. Add font-size, colour, and weight to control it globally. Has a tablet-portrait breakpoint override — add base styles to match.

Placeholder for a repeating circle pattern. Define or remove.

Placeholder for a text-shadow effect. Define or remove.

Mobile hamburger menu toggle. Empty at base — has a phone-landscape override. Check Oxygen for what's applied at that breakpoint.

Structural placeholder classes. Styles are currently applied inline in Oxygen on individual elements. Define CSS here to manage these globally, or remove unused ones to keep the selector library tidy.