EdCity · Palette study · Option B · Connected Path

Clear Field, Bright Signal

A clear, cool field for a platform that respects professional judgement. Care shows as clarity: a steady blue held for decisions, cool neutrals that keep dense work calm and readable, a sea green to find the way, and a single coral point where an opportunity opens. Blue and green are the brand’s two constants: blue for what you decide, green for where you are going. The human side is carried by visible paths, type, voice and photography, so the colour can stay clear and trustworthy. Block size shows each colour’s share of a typical surface.

~18 structure (stone) ~30 decisions (bright + deep blue, buttons and focus only) ~33 field & neutral (white · mist · line · mute) ~8 green (sea green · wayfinding and progress) ~5 signal (coral)

How to read it

An open white field carried by a grounded neutral, with bright blue held back for the moment you actually decide something. The layout mirrors how the colours divide a screen — it isn’t the identity itself.

Structure

Stone — a cool, grounded grey lifted from the moodboard’s architecture and sea photography — carries navigation chrome, dividers, card borders, and section framing. Chrome stays quiet, so blue reads as a signal wherever it appears.

Decisions, held back

Bright blue is reserved for buttons, links, active state, and focus — the moment someone decides or moves forward. Deep blue adds weight only where blue already appears (headers inside a blue surface, deep panels), never as a second structural colour competing with Stone.

The field

Near-white ground, a soft lavender-blue for quiet surfaces and hover, cool hairlines, and near-black-blue ink. This is most of every screen — open, bright, and calm.

Wayfinding, in green

Sea green — the moodboard’s ocean horizon, a blue-green on the green side — is the brand’s green in this palette. It marks orientation and progress: the line network where it meets blue, a "you are here" cue, a threshold between sections, a completed state. It answers a different question from blue (where am I, not what should I click), so the two never mark the same thing, but they often travel together as one gradient line.

The signal

Coral marks the moment an opportunity surfaces. Small share, high impact: a fill, a marker, or large display, always on a clean ground where it reads as energy.

Where the human side lives

Care shows as clarity: visible paths, plain language, rounded type and real photography of teachers and students. The palette stays cool so blue, green and coral stay bright, and the paths between them stay easy to follow.

What it’s for

Product screens that need to feel modern and effortless. Data-rich views where a cool field keeps things readable. Marketing and launch moments where the gradients can open up.

Signal & Light

The field stays flat and white. Expression comes from the signal — coral — and from light gradients mixed from the palette scale. One gradient surface per screen, on a real moment.

on white
on ink
Coral glow A warm halo behind an opportunity as it appears. Small and brief, and it reads on white or on ink. radial · #FF6A3D → #FF9E7A → transparent
Line transition Not sunlight — a gradual crossing, the way two of the moodboard's coloured lines blend where they meet. Blue easing into teal, the palette's own lines shown mid-transition. Lives on the side nav rail exactly as shown here, so the white dots and label stay legible throughout. linear 180° · #2450E6 → #0B7A55
ambient · very low contrast
Cool wash A near-invisible lavender-blue drift for ambient backgrounds and empty states — presence without noise. linear 160° · #EDF1FB → #DCE6FF → #EFEAFE

Bridge tones — gradients only

Periwinkle #6E8BF5 Peach #FF9E7A

Periwinkle and peach make the gradients flow — periwinkle between blue and coral, peach as coral’s light edge. They live inside a blend, not as flat colour.

Use a gradient for

  • The moment an opportunity is surfaced
  • Onboarding and first run
  • Milestone and progress moments
  • Marketing and campaign heroes
  • Loading and transition states
  • Ambient background behind an empty screen

Never

  • Navigation, headers, sidebars, cards
  • Buttons or interactive controls
  • Behind body text
  • More than one gradient surface in a view
  • The daily screens — dashboards, lists, forms
  • Line transition at full strength behind content — dial the opacity right down

Motion: the line-transition gradient shifts gradually — on the side nav rail, each colour eases into the next. Movement stays gentle, and it honours reduced-motion.