EdCity · Palette study · Option A · Calm Momentum

Slate, Sky & First Light

A dawn palette built from the moodboard's sunrise-over-mountains photo, taken at the moment the sky turns from night to morning. Slate blue carries structure and wayfinding, drawn from the photo's mountain-shadow tone. The ground is a cool morning paper and a pale mist blue, so surfaces read as open sky. Clear sky is the colour of action and the primary button, lit from within. Apricot glow is the first light on the horizon, kept small, marking where the next step begins; dusty coral is its rarer, stronger partner. Spruce green, from the tree line at the base of the photo, is the brand’s green: it marks progress and what is done. Blue and green are the two brand constants every EdCity palette keeps; here blue leads and green highlights. Block size shows each colour’s share of a typical surface.

~53 structure (slate navy + deep slate navy) ~28 ground and sky (morning paper · mist · haze blue) ~7 first light (apricot glow · dusty coral) ~8 action (clear sky) ~4 green highlight (spruce green)

How to read it

A landscape at the moment of dawn: a steady slate field, an open morning ground, a clear blue that moves things forward, and a thin line of first light where something is beginning. The layout mirrors how the colours divide a screen — it isn’t the identity itself.

The field

Slate navy holds structure — navigation, framing, wayfinding. Deep slate navy takes edges and quiet emphasis, and night ink carries text. The hue stays clearly blue throughout — the mountain-shadow tone in the photo, never a flattened grey or a brown-black.

The ground

Morning paper and mist are the surfaces a teacher reads on all day: cool, bright and low in chroma, like the sky just before sunrise. Haze blue is the light in that sky — hero meshes, soft glows, the brightening band at the end of a journey.

The clear note

Clear sky is the colour of action. The primary button carries it as a short lit gradient — deeper at one edge, brighter at the other, with light showing through — so the one thing to do next is the brightest blue on the screen. Links and focus rings use the flat tone. One primary button per view.

First light

Apricot glow is the sun just clearing the horizon: the current step, the end of a progress line, a thin horizon under the page’s closing moment. It stays small so it keeps its meaning. Dusty coral is its rarer, stronger partner, reserved for the single most important mark in a view; never both at full strength in the same moment.

The green highlight

Spruce green comes from the tree line at the base of the photo, caught in the first light — fresh and clear, growing rather than glowing. It is the brand’s green in this palette, used as a highlight: a finished step, an adopted suggestion, a status on track, the completed stops along a journey. Clear sky says “go here”; spruce says “this is done”. Blue carries the page; green is always present where progress is shown.

What it’s for

Screens a teacher lives in every day: calm, structured and open. Moments of guidance where the next step should feel like morning rather than a deadline.

Spark & Light

Colour and light do the expressive work. The field stays flat and matte; energy comes from the spark and from gradients built out of the palette. Each screen uses at most one gradient surface, on a real moment.

on paper
on night ink
Spark glow First light behind the current step as it appears. Small and brief, and it reads the same on a light or a dark ground. radial · oklch(73.9% 0.126 53.4) → oklch(84.0% 0.091 68.7) → transparent
First light The sunrise-photo gradient itself — mountain-shadow blue through misted rose to the horizon's apricot-gold, for the big moments: onboarding, a milestone, a campaign hero. Blue holds most of the band, same as the sky itself — gold only breaks through at the very end, not across half the gradient. Built for dark grounds, where the range reads richest. linear 100° · oklch(40.8% 0.056 239.0) 0% → oklch(60.0% 0.071 244.5) 62% → oklch(82.5% 0.057 33.4) 76% → oklch(81.2% 0.116 69.8) 90% → oklch(94.5% 0.051 84.5) 100%
gradient over image
Dawn on photography A warm light pass over real photographs — highlights catching dusty coral, shadows cooling to slate. Keeps image-led screens inside the palette. linear 180° · dusty-coral / 50% → dusty-coral / 5% → deep-slate-navy / 40%, over image

Bridge tones — gradients only

Sun Haze oklch(84.0% 0.091 68.7) Sun Disc oklch(94.5% 0.051 84.5) Mist Rose oklch(82.5% 0.057 33.4)

Sun haze, sun disc, and mist rose exist to make the gradients glow — lifted directly from the sunrise photo's horizon and fog bands. They belong 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
  • Light overlays on photography
  • The primary button, as a short clear-sky gradient

Never

  • Navigation, headers, sidebars, cards
  • Interactive controls, except the one lit primary button
  • Behind body text
  • More than one gradient surface in a view
  • The daily screens — dashboards, lists, forms
  • First light on a light ground — it’s made for dark surfaces

Motion: first light reveals slowly on load, then holds. Movement stays gentle and peripheral, and it honours reduced-motion.