Skip to content
Library

Madebyon. Black gallery with chartreuse spark.

  • Studio
  • Dark theme
  • 6 colors
  • 2 typefaces

Madebyon operates as a dark-canvas digital studio identity: near-black void backgrounds (#000000) push every element forward, with a warm off-white (#faf9f4) doing the heavy typographic lifting. A single electric chartreuse accent (#dcff4f) — the only chromatic color in the system — is rationed to a single filled CTA, giving it a searchlight quality against the dark. The type system uses one custom geometric sans (Favorit) across two voices: a wide-spaced extended cut at 40-56px for editorial-style headlines, and a regular cut at 11-24px for everything else. Layouts are generous and section-driven, with each section separated by substantial vertical air (64-96px) and contained within a centered max-width grid. Components are flat or barely elevated — borders do the structural work, shadows are absent. The overall rhythm is gallery-like: whitespace, tight type, and one green spark.

Screenshot of Madebyon
Captured from madebyon.com on October 11, 2026

Madebyon design system

Madebyon

Brand1

  • Filled CTA buttons, active nav indicators, accent borders, highlight strokes — the single chromatic spark against the monochrome void; near-black text on this fill creates an inverted button effect

Neutrals5

  • Page background, hero canvas, deepest surface layer

  • Elevated surface for inputs, nav elements, card interiors — sits one step above the canvas to create depth without lightness

  • Secondary text, inactive link borders, subdued metadata

  • Tertiary borders, placeholder text, low-emphasis dividers

  • Primary text, headlines, icon strokes, card backgrounds inside dark frames, borders on cards — warm cream gives the type a lit-from-within quality against pure black

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Canvas Void on Chartreuse Pulse

18.46 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.