Task 01 · visual checkpoint

Style tile

Proposed tokens, type, controls, artwork and states. These are the spec's initial values for review, not approved branding. Press Tab to see live focus states.

Colour

  • Paper
    --paper #FFF8E8
    Page surface
  • Card
    --card #FFFFFF
    Reading and forms
  • Ink
    --ink #242433
    Text, borders, focus
  • Text secondary
    --text-secondary #535361
    Supporting text
  • Link
    --link #A33A0E
    Links in content (6.3:1)
  • Orange
    --orange #FF963F
    Primary actions
  • Coral
    --coral #F87870
    Community accent
  • Pink
    --pink #EE8CB6
    Secondary highlight
  • Yellow
    --yellow #FFE16B
    Welcome, labels, focus highlight
  • Mint
    --mint #BDE5C6
    Resources, helpful states
  • Sky
    --sky #BFDDF0
    Education, learning
  • Lavender
    --lavender #D9CEF1
    Secondary category

All text pairings used pass WCAG AA (most AAA). Orange is never used for text on paper. Status and category always use words as well as colour.

Typography

Headings: Baloo 2

Bayabaya

A heading for a section

Body and interface: M PLUS Rounded 1c

Body text is 16–18px with a 1.7 line height, set in a 65–75 character column so long discussions stay comfortable to read. Links in content are underlined.

Small supporting text for dates and metadata.

Controls

Shown publicly next to your posts. Use a first name or pseudonym.

Badges and categories

PinnedLockedAwaiting reviewAnsweredNo replies yetDemo sample

Forum category badges are shown in demo mode only.

Artwork family

Paper-cut shapes, one ink outline weight, palette colours only. Decorative and hidden from screen readers. No people, puzzle pieces or clinical imagery.

List states (discussion list)

Loaded

The loaded example uses demo discussions, so it is shown in demo mode only.

Loading

Loading discussions…

Shows a calm placeholder. With reduced motion, the pulse is turned off.

Empty

No discussions yet

This category is new. You could be the first to start a conversation.

Error

Home with no content yet

How the home sections behave in real mode before anything is published: core sections show a humane empty state, and the optional Small joys and Making a difference sections are hidden.

Where would you like to start?

Latest from our journey

The first stories are on their way

New posts about our family's journey will appear here. In the meantime, you can read how Bayabaya began.

Community noticeboard

Recent discussions from parents and caregivers.

The noticeboard is quiet for now

The community is just getting started, so there are no discussions yet. Introduce yourself or ask a question, and it will be pinned up here once it is approved.

Start the first discussion

Resource shelf

Useful guides and links, with their source and when they were last checked.

The shelf is being stocked

Guides and links are checked before they go up, so this shelf fills slowly. Please check back soon.