Skip to content
sysout.dev

Little Bloomers - Visual Design and Theme Architecture

Material 3 colour, typography, and component-role contract for Little Bloomers.

This document turns the source palettes in the brand guidelines into an accessible Material 3 system. It is deliberately separate from screen-layout work: a candidate must be selected and physically reviewed before it becomes the fixed visual direction.

Status

Two complete theme candidates implemented for device review

Last reviewed

August 2026

Scope

This contract covers:

  • Complete light and dark Material 3 colour schemes for each candidate.

  • The semantic meaning of primary, secondary, tertiary, error, surface, and outline roles.

  • Baloo 2 across Material typography and Comfortaa for the literal wordmark.

  • Contrast verification using the HCT fidelity palette generator.

It does not select a winner, finalize an icon, or prescribe every screen’s layout. Those follow the active device review.

Theme candidates

Garden Glow

Garden Glow is the warmer, nature-led option. Teal is primary, the original sunny yellow is secondary, and pink is tertiary. Its source swatches stay visibly present in containers and fixed roles rather than being softened into a pastel-only system.

Material family Light role Meaning

Primary

#006768 / #058284 container

Teal. Principal actions, selected navigation, and active planning controls.

Secondary

#745B00 / #FED24F container

Sunny yellow. Tips and supporting actions.

Tertiary

#B40065 / #DA227F container

Pink. Positive highlights and child-profile emphasis.

Sunlit Sky

Sunlit Sky is the calmer blue-led option. Indigo is primary, golden yellow is secondary, and sky blue is tertiary. The palette’s pale sky reference is echoed by its sky-blue fixed and container roles.

Material family Light role Meaning

Primary

#3A468D / #525EA7 container

Indigo. Principal actions, selected navigation, and active planning controls.

Secondary

#7C5800 / #FEC248 container

Golden yellow. Tips and supporting actions.

Tertiary

#00526E / #006B8F container

Sky blue. Informational highlights and child-profile emphasis.

Role rules

  • primary / onPrimary are strong actions; primaryContainer / onPrimaryContainer are selected destinations and grouped action regions.

  • secondary is for supporting actions and tip status; it is not a substitute for warning or error semantics.

  • tertiaryContainer marks a distinct, positive information group such as a child profile. It is not an arbitrary alternate card background.

  • surface and the surfaceContainer* ladder express hierarchy. They remain neutral enough for long reading and form entry.

  • outline is an accessible non-text boundary; outlineVariant is a quiet divider. Neither is body text.

  • Error is a dedicated red family derived from #EC1515, never a reused pink or yellow brand role.

Typography contract

Every Material typography role uses Baloo 2. The existing app scale remains the starting point: prominent display/headline roles carry hierarchy, titles organize sections, body roles carry caregiver-facing information, and labels identify compact controls. Comfortaa is applied only to the literal Little Bloomers wordmark in the navigation drawer and future brand lockups.

Generation and accessibility

generate_material_scheme.py produces both candidates with the HCT FIDELITY variant:

python generate_material_scheme.py garden-glow
python generate_material_scheme.py sunlit-sky

The generated role values are the source of truth implemented in LittleBloomersColorSchemes.kt and SunlitSkyColorSchemes.kt. Both candidates meet WCAG AA for their semantic text pairs. The closest tested pair is 4.54:1, still above the 4.5:1 normal-text minimum. Raw swatches are not substituted where doing so would make text unreadable.

Review flow

The Settings > Theme control persists the candidate choice locally and applies it immediately. Review both on a physical device before freezing the selected palette in the brand guidelines and removing the comparison control.

Open decisions

  • Select the final palette after device review.

  • Define the final launcher mark and wordmark lockup.

  • Review the Material type scale on realistic child names, allergies, meal-slot labels, and longer recipe text.