Chartreuse Pulse
#dcff4fFilled 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
Madebyon
madebyon.com
Website preview
The design language
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.
Color palette
brand
neutral
Canvas Void
#000000Page background, hero canvas, deepest surface layer
Off-White
#faf9f4Primary 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
Surface Charcoal
#151515Elevated surface for inputs, nav elements, card interiors — sits one step above the canvas to create depth without lightness
Muted Smoke
#666666Secondary text, inactive link borders, subdued metadata
Faint Fog
#bdbdbdTertiary borders, placeholder text, low-emphasis dividers
Typography
Type scale
Major Second (1.125) · 16px basedisplay
56px · 400 · 1.2 · -1.12px trackingThe quick brown fox jumps
heading
40px · 400 · 1.2 · -0.8px trackingThe quick brown fox jumps
subheading
24px · 400 · 1.35 · 0px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · 0px trackingThe quick brown fox jumps
text-13
13px · 400 · 1.3The quick brown fox jumps
text-12
12px · 400 · 1.5The quick brown fox jumps
caption
11px · 400 · 1.5 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Favorit extended
- Weights
- 400
- Sizes
- 40px, 56px
- Line height
- 1.2
- Letter spacing
- -0.02
Favorit extended — detected in extracted data but not described by AI
Additional typeface
Favorit
- Weights
- 400
- Sizes
- 11px, 12px, 13px, 16px, 24px
- Line height
- 1.00–1.50
- Letter spacing
- normal at body sizes; -0.0200em at 40-56px
- Fallback
- Inter, Switzer, Söhne
- Features
- "ss04"
Primary typeface across all contexts — body copy, nav, labels, cards, and headings
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 16px
Border radius
nav
50pxcards
8pxinputs
16pxbuttons
999pxcontainers
24pxSpacing scale
4px6px8px10px11px12px14px16px20px24px25px26px30px32px40px50px72px80px81px113pxGuidelines
Do
- Use #dcff4f for exactly one filled CTA per visible viewport — its power comes from scarcity
- Set display headings at 40-56px with letter-spacing -0.0200em using the extended Favorit variant
- Use #faf9f4 for all primary text and borders — never pure white, the warm cream is part of the identity
- Maintain 80px section gaps to preserve the gallery-walk rhythm between bands
- Apply 999px radius to primary CTAs and 50px to ghost buttons — pill shapes dominate the button language
- Enable font-feature-settings 'ss04' on all Favorit text — this stylistic set is part of the brand voice
- Keep card radius at 8px — small, precise corners that feel intentional, not soft
Don’t
- Do not use #dcff4f for body text, backgrounds of full sections, or decorative fills — it is a functional accent only
- Do not add drop shadows or elevation effects — depth comes from color stepping and hairline borders
- Do not use multiple accent colors — the system is monochrome with one chartreuse spark
- Do not center-align body paragraphs or long-form text — left-align with a 60-70 character measure
- Do not use pure white (#ffffff) for text or borders — #faf9f4 is warmer and more distinctive
- Do not use heavy font weights (600+) — the system relies on weight 400 with extended letterforms for presence
- Do not use gradients — the system is flat by design; any gradient would break the editorial flatness
Components
Pill CTA (Primary)
Primary call-to-action — the only filled chromatic button in the systemBackground #dcff4f, text #000000, radius 999px (fully rounded pill), padding 12px 25px, font Favorit 16px weight 400. The chartreuse fill against the dark void makes this button impossible to miss — it is rationed to one per view.
Outlined Action Button
Secondary action — 'Go to portfolio' styleTransparent background, 1px border #faf9f4, text #faf9f4, radius 50px, padding 12px 25px, font Favorit 16px weight 400. High-contrast ghost button that uses the off-white border as its structural element.
Navigation Bar
Top-level site navigationFull-width transparent bar over #000000 canvas. Left: nav links (Projects, Capabilities, Labs) in #faf9f4 at 13-16px. Right: secondary links + Pill CTA. No background fill — the dark canvas is the nav background. Padding 11px vertical.
Nav Link (Default)
Standard navigation linkFavorit 13-16px weight 400, color #faf9f4, no underline, no background. Hover state shifts to #dcff4f or adds an underline.
Testimonial Card
Client quote panel in the social proof sectionBackground #000000 (same as canvas, so it reads as a borderless card), 1px border #faf9f4 or sits within a bordered grid, radius 8px, padding 24px. Contains: quote text in #faf9f4 at 16px, 'Read more' link, circular avatar photo (48px), name in #faf9f4 weight 400, title + company in muted #bdbdbd.
Client Logo Strip
Horizontal row of partner/client logosFull-width band, #000000 background, logos rendered in #faf9f4 (monochrome — all logos unified to off-white). No gaps or dividers between logos; evenly spaced with generous horizontal padding.
Browser Mockup Frame
Device/screen showcase in hero areaDark frame (#151515 or #000000) with browser chrome controls (traffic-light dots in macOS colors: red/yellow/green). Inner content area shows #faf9f4 (off-white) as a white-page simulation. Rounded corners on the frame (8-16px radius). Sits centered within a max-width container.
Section Heading (Display)
Large editorial section titleFavorit extended variant, 40-56px, weight 400, color #faf9f4, letter-spacing -0.0200em, line-height 1.2. Left-aligned, generous top margin. The extended letterforms at display size carry the brand's editorial confidence.
Body Text Block
Standard paragraph and descriptive copyFavorit regular, 16px, weight 400, color #faf9f4, line-height 1.5. Maximum measure ~60-70 characters. Secondary paragraphs may use #bdbdbd for lower emphasis.
Input Field
Form input (not heavily used, but defined)Background #151515, border 1px #faf9f4 or transparent, radius 16px, padding 24-26px vertical, Favorit 16px. Placeholder text in #666666.
Tag/Pill (Non-Action)
Category labels or metadata pillsRadius 999px, small padding 4-6px vertical, Favorit 11-12px, border or background in #dcff4f or #faf9f4 depending on context.
Surfaces & elevation
Level 0
Canvas Void
#000000Page base — the void everything sits on
Level 1
Surface Charcoal
#151515Inputs, nested card surfaces, nav internals
Level 2
Off-White Card
#faf9f4Inverted cards (testimonial panels, browser mockup) that flip the dark/light relationship
Shadows are absent. Depth is achieved through surface color stepping (canvas #000000 → surface #151515 → inverted #faf9f4) and 1px hairline borders in #faf9f4. The flatness is deliberate — shadows would soften the graphic, editorial feel and add visual noise to a system that relies on negative space and type weight.
Layout & imagery
Layout
Max-width 1200px centered container, full-bleed dark sections. Hero is a full-viewport dark canvas with left-aligned oversized headline, followed by a centered browser-mockup visual. Sections alternate between pure text blocks (two-column: heading left, body right) and grid-based content (testimonial cards in a 3-4 column horizontal scroll). Section gaps of 80px create gallery-walk rhythm. Navigation is a minimal transparent top bar. The page reads top-to-bottom as: hero → intro paragraph → client logos → testimonials — each section is a full-width band on the same #000000 canvas with internal max-width containment.
Imagery
Imagery is minimal and product-focused: circular client avatar photos (48px, grayscale or color) in testimonial cards, monochrome client logos unified to #faf9f4 in the logo strip, and a browser mockup frame in the hero showing a white-page site preview. No lifestyle photography, no abstract illustrations, no decorative gradients. The visual language is gallery-clean: objects sit on the void with breathing room, no overlapping, no masking effects. Icons appear to be simple line-style glyphs in #faf9f4.
Design notes
Agent Guide
Quick Color Reference: - text: #faf9f4 - background: #000000 - surface: #151515 - border: #faf9f4 (primary) / #666666 (muted) - accent: #dcff4f - primary action: #dcff4f (filled action) Example Component Prompts: 1. Create a hero section: #000000 canvas, full-bleed. Headline 'Shaping the future of digital experiences' at 56px Favorit extended, weight 400, #faf9f4, letter-spacing -1.12px, line-height 1.2. No subtitle, no CTA in hero — just the void and the words. 2. Create a Primary Action Button: #dcff4f background, #151515 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 3. Create a ghost/outlined action button: transparent background, 1px solid #faf9f4 border, text #faf9f4, border-radius 50px, padding 12px 25px, font Favorit 16px. Label 'Go to portfolio'. 4. Create a testimonial card: background #000000, 1px border #faf9f4, border-radius 8px, padding 24px. Quote text in Favorit 16px #faf9f4. Below: 48px circular avatar, name in Favorit 16px #faf9f4, title in Favorit 13px #bdbdbd. 5. Create a section heading: Favorit extended 40px weight 400, color #faf9f4, letter-spacing -0.8px, line-height 1.2, left-aligned, with 80px top margin from previous section.
Similar brands
Active Theory
Same dark-canvas editorial approach with oversized sans-serif headlines and rationed color accents
Resn
Dark-mode digital studio site with single accent color and gallery-style section rhythm
Locomotive (scroll agency)
Monochrome dark aesthetic with extended sans-serif display type and minimal flat components
Ueno
Dark canvas, cream/off-white type, generous whitespace, and a single vibrant accent for CTAs
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
