Design System

Living style guide for the new Family to Children website. This page collects the current typography, buttons, surfaces, cards, forms, spacing, and layout patterns used as a visual source of truth for future Elementor assembly.

Typography

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

Body text uses the canonical global typography and comfortable reading rhythm. Inline links keep the site color system and remain visible inside long paragraphs.

Small text example for captions, helper notes, and compact metadata.

Emphasized text example inside regular body copy.

Unordered list item
Second list item

Ordered list item
Second ordered item

Quote example for editorial pages, stories, and highlighted excerpts.

Buttons

Canonical action variants using the existing runtime button foundation.

Colors And Surfaces

White Surface

Default white surface with standard text contrast.

Muted Surface

Soft section surface for quieter content areas.

Accent Surface

Accent actions use the donation color through the button foundation.

Dark Surface

Dark surface checks reverse text contrast.

Cards

News Card

Editorial preview with title, short excerpt, metadata, and a clear read-more action.

Project Card

Project summary for program pages with compact description and secondary action.

Volunteer / Donation Card

High-priority support card with donation-colored action and warm copy.

Forms

Spacing System

8px

Spacing token sample.

16px

Spacing token sample.

24px

Spacing token sample.

40px

Spacing token sample.

64px

Spacing token sample.

96px

Spacing token sample.

Layout Patterns

Hero Section

Large opening section with direct value statement and primary action.

Two-column CTA

Copy column for short campaign or program message.

Action Column

Feature One

Reusable feature card with short explanation.

Feature Two

Second feature card for balanced sections.

Feature Three

Third feature card for scanning patterns.

12+

Stats row item for short numerical proof.

300+

Stats row item for archive or activity scale.

24/7

Stats row item for support availability.

Simple Content Section

A plain content block for articles, about pages, and service information where typography and spacing carry the layout.