01Selected Direction · Asset Brief

Black, White & the Takeover

The direction we're building Sport Ledger on — and the spec to update the market-dashboard assets against. Grown-up, uber-functional black and white, where one color takes over the entire screen to mean something.

ClientSport Ledger
Word to ownSafe
Direction1 — The Functional Standard
ForAsset update → market dashboard
DateJune 2026
The idea in one line

Clean books, made visible.

In youth and amateur sports the money moves through volunteers, and nobody is the one who made it safe. This direction makes "safe" look like a set of clean books: high-contrast black and white, nothing hidden, nothing decorated, everything laid out plainly and easy to scan. It reads first and is admired second. The interface never tries to be cute — its restraint is the trust signal.

02The core mechanic — the takeover

Color is never an accent. It's a takeover.

The whole system lives in monochrome. Color does not appear as a stripe, a badge tint, or a button highlight. It stays out entirely — until something happens that matters, and then a single color floods the entire surface. Two states, two colors:

Adoption Purple

Claimed · Adopted · Verified

When something is taken on, made the standard, or confirmed safe, purple takes the whole space. This is the positive takeover — and it doubles as the brand's "verified / claimed" proof moment, the thing that makes "safe" credible rather than just calm.

Alert Orange

Something is wrong

When there's a problem, orange floods the screen the same way — impossible to miss. Heavy, total, unmissable. A problem is never a small red dot in the corner; the interface itself changes state.

03Palette

Mono by default, two takeover colors

Black, white, and a few muted greys carry 95% of every surface. The two chromatic colors below appear only in their takeover states. Hex values are starting points, pulled from the chosen references — confirm/refine against the live UI.

Ink
#111111
Primary text, structure, mono UI
Paper
#FFFFFF
Canvas — kept clean and open
Muted grey
#6B6B6B
The subtle tones under the B&W
Line
#E8E8E8
Dividers, quiet structure
Adoption Purple
#7030B0
Claimed / adopted / verified takeover
Alert Orange
#F0600F
Warning / something-wrong takeover
04Visual language

How it's built

Typography

  • Condensed & reserved. A super-condensed grotesque for display/headlines and figures; the type does the work without raising its voice.
  • Type as the hero. Let strong, simple typography carry the frame — it's a primary design element, not a label.
  • Functional body. A clean, neutral sans for data and dense information — built to be scanned.

Marks & logo

  • Simple and ownable. A mark simple enough to sit on any abstract background it overlays.
  • Inviting field. Place the simplified mark on a complementary, inviting ground — not a stark void — so it feels warm, not clinical.

Interface principles

  • Uber-functional. Easy to navigate, easy to scan, never cute. Read-first.
  • Ask one question, not twenty-five. Favor chat-first / single-ask surfaces over walls of navigation.
  • Abstract into the cards. Bring the abstract visual element into the cards themselves as wayfinding — a small library of recognizable references.
  • Restraint. Don't show everything at once. Space and silence are part of the system.
  • States over accents. Surfaces shift wholesale into the takeover color — components don't get a colored trim.
Design guardrail · safe = people + proof

The strength of this direction is proof — clarity, control, audit-readability. The watch-out, flagged in team review, is that strict black-and-white can read cold. Keep it approachable: lean on the inviting mark fields, muted warmth, and generous space, and make the verified / claimed state a hero moment (that's the purple takeover). Money should never feel casual — but the system should never feel unfriendly either. Where it fits, show youth-sports artifacts (a roster, a registration batch) only as they relate to money and controls, so "safe" reads as built-for-this-vertical, not generic finance.

05Reference board

The references behind the direction

The set the direction was built from. The two outlined tiles are the mechanic itself — the purple adoption takeover and the orange alert takeover. Click any image to enlarge.

06Applying it — market-dashboard assets

Update checklist for Chase

  1. Rebuild surfaces in high-contrast black & white plus muted greys; strip decorative color out entirely.
  2. Replace any accent stripes / colored badges with full takeover states — the whole component or screen changes color, not a trim.
  3. Use Adoption Purple (#7030B0) for claimed / adopted / verified / standard-set states — and make that verified moment a hero.
  4. Use Alert Orange (#F0600F) for problems — flood the surface, don't dot it.
  5. Set headlines & key figures in a condensed grotesque; data in a clean functional sans.
  6. Place the simplified mark on an inviting field with generous space — keep it warm, not stark.
  7. Favor single-ask / chat-first surfaces; pull the abstract element into cards as wayfinding.
  8. Where relevant, show youth-sports artifacts only as they connect to money and controls.
07Guide rails

Do / Don't

Do

  • Keep color binary — fully off (mono) or fully on (takeover).
  • Let restraint and clarity be the trust signal.
  • Make the verified / claimed state unmistakable.
  • Hold generous space; read-first layouts.

Don't

  • Use accent color as decoration, stripes, or button tints.
  • Get cute, or let money feel casual (no playful cash-box vibes).
  • Let "functional" tip into cold or clinical.
  • Crowd the screen — never show everything at once.