---
title: "Made by ON design system"
variant: extended
source: https://madebyon.com/
captured_at: 2026-10-12
theme: dark
industry: agency
generator: Design DNA (https://four.wiralomi.com/style/madebyon-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Made by ON · Design System

> Quiet black canvas, editorial type, electric green signals

**Theme:** dark · **Industry:** agency · **Source:** https://madebyon.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Made by ON pairs an almost-black, expansive canvas with refined editorial typography and sharp green calls to action. Project imagery, client proof, field notes, and a lead-generation form unfold in a restrained, high-contrast sequence.

## North star

Let the near-black canvas and generous negative space frame delicate editorial type, using green only to signal action or emphasis.

## Overview

The page is built on a nearly uninterrupted #0a0a0a canvas, making negative space a defining part of the identity rather than a gap between content. Warm off-white #f5f4f0 carries the large, light editorial headlines and essential copy; muted grays keep supporting details quiet. Bright #1fc742 marks primary actions, small eyebrow text, and selected links, while the paler green #9aefab appears as a secondary action treatment. Large headlines use a delicate serif-like Geist Arrow, contrasted with Geist sans-serif body text and Geist Mono navigation and buttons. The opening hero centers its message among floating portfolio previews, then the page shifts into case studies, a testimonial, field notes, a client strip, a contact form, and a compact newsletter/footer. Thin dark rules and restrained outlines separate elements without adding card-heavy elevation. Spacious section breaks preserve a calm, cinematic rhythm.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Carbon Canvas | `#0a0a0a` | `--color-carbon-canvas` | surface | Dominant page canvas and dark ground behind hero imagery, content sections, and footer. |
| Warm Porcelain | `#f5f4f0` | `--color-warm-porcelain` | neutral | Primary headings, navigation, body copy, and footer text against the dark canvas. |
| Electric Leaf | `#1fc742` | `--color-electric-leaf` | accent | Primary project CTA, outlined action links, accent text, and select footer links. |
| Mint Signal | `#9aefab` | `--color-mint-signal` | accent | Pale green secondary button treatment, notably the newsletter submit action. |
| Quiet Ash | `#a3a3a3` | `--color-quiet-ash` | semantic | Muted supporting copy and subdued secondary details on the black canvas. |
| Graphite Rule | `#292929` | `--color-graphite-rule` | neutral | Thin footer and form borders that divide content without strong contrast. |
| Soft Pewter | `#8c8b89` | `--color-soft-pewter` | neutral | Minor subdued text detail; not a defining brand color. |
| Control Gray | `#858585` | `--color-control-gray` | semantic | Measured input border detail, likely browser or control styling rather than a brand accent. |
| Shadowed Charcoal | `#121212` | `--color-shadowed-charcoal` | surface | Subtle dark button or control surface detail against the main canvas. |

### Semantic aliases

`--color-canvas` → `#0a0a0a` (Carbon Canvas) · `--color-text` → `#f5f4f0` (Warm Porcelain) · `--color-text-muted` → `#a3a3a3` (Quiet Ash) · `--color-text-subtle` → `#0a0a0a` (Carbon Canvas) · `--color-border` → `#292929` (Graphite Rule) · `--color-accent` → `#1fc742` (Electric Leaf) · `--color-accent-2` → `#9aefab` (Mint Signal) · `--color-on-accent` → `#000000`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f5f4f0` | `#0a0a0a` | 17.99:1 | AAA |
| `#a3a3a3` | `#0a0a0a` | 7.85:1 | AAA |
| `#1fc742` | `#0a0a0a` | 8.77:1 | AAA |

### Gradients

- `linear-gradient(oklab(0.966804 -0.000436932 0.00541019), oklab(0.966804 -0.000436932 0.00541019))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 340 | Body copy, captions, and standard content links. | Inter |
| Geist Arrow | `--font-display` | system | 300 | Display and heading typography, including hero and testimonial statements. | Newsreader |
| Geist Mono | `--font-mono` | webfont | 400, 500 | Navigation, buttons, and code-like interface labels. | IBM Plex Mono |

- **Geist:** Use a restrained sans-serif voice with regular-to-light weight; keep supporting copy compact and unornamented.
- **Geist Arrow:** Light, high-contrast editorial serif styling; large headlines use tight leading and subtly negative tracking.
- **Geist Mono:** Monospaced interface text at modest sizes; keep labels concise and avoid decorative casing.

### Type scale — Major Third (ratio ≈ 1.262, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 300 | 1.05 | -0.016em | — | Geist Arrow | Oversized hero statement and prominent editorial moments. |
| h1 | 56px | 300 | 1.05 | -0.01em | — | Geist Arrow | Primary page headline and major section headings. |
| h2 | 40px | 300 | 1.05 | -0.01em | — | Geist Arrow | Section titles and prominent testimonial or contact headings. |
| h3 | 32px | 300 | 1.15 | -0.031em | — | Geist Arrow | Case study and field-note titles. |
| h4 | 24px | 300 | 1.2 | 0 | — | Geist Arrow | Smaller subsection headings and supporting content titles. |
| body | 20px | 340 | 1.4 | 0 | — | Geist | Introductory and descriptive paragraphs. |
| caption | 16px | 340 | 1.4 | 0 | — | Geist | Supporting descriptions, attribution, and compact content. |
| button | 14px | 400 | 1.5 | 0 | — | Geist Mono | Monospaced CTA and form action labels. |
| nav | 14px | 400 | 1.5 | 0 | — | Geist Mono | Compact monospaced navigation labels. |
| link | 12px | 340 | 1.5 | 0 | — | Geist | Small inline links, including footer policy links. |
| code | 14px | 400 | 1.5 | 0 | — | Geist Mono | Monospaced utility or code-like interface text. |

OpenType features in use: `"ss03", "ss04", "ss08"`, `"clig", "liga"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 7, 8, 12, 16, 30, 32, 80 px.
- Section rhythm 80px · element gap 16px · card padding — · max content width 1142px.

The measured content width is capped at 1142px, with a comfortable density and an 8px-based spacing system. The hero is centered in a full-width dark field, with project previews distributed around its headline. Subsequent areas alternate between multi-column case-study and field-note compositions, centered testimonial and partner messaging, and single-column contact content. The section rhythm is notably spacious, with an 80px measured section gap; small text and controls remain compact. Footer content resolves into a two-column newsletter and link layout.

## Shape & elevation

- Radius: button `4px` · input `4px` · xs `4px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0.22, 1, 0.36, 1)` on interactive elements.

The interface is mostly flat: the near-black canvas carries content without visible card shadows or layered panels. Thin graphite borders and occasional outlined green actions provide separation. Measured controls use a subtle 4px radius where specified, while some browser-like input details are not part of the brand treatment. Media previews supply most of the visual depth.

## Imagery

The hero uses floating, cropped previews of real client work, including web interfaces and campaign imagery, rather than decorative illustrations. Preview tiles vary in scale and position around the centered headline, with much of the surrounding canvas left empty. Later sections include project and editorial thumbnails, a client-logo strip, and limited video content. Colourful media is allowed to retain its own palette; it reads as portfolio work, not as the site's core colour system.

## Components

### Primary project CTA

Solid #1fc742 button with black text, Geist Mono label, and a measured 4px radius.

### Outlined action link

Transparent dark fill with a 1px #1fc742 border and green monospaced label.

### Hero portfolio previews

Floating, differently sized client-site thumbnails distributed around the centered editorial headline.

### Case study link

Light text link paired with a project title and short description; keep the composition open rather than card-heavy.

### Contact form

Single-column lead form with six measured inputs, light text, and restrained control styling.

### Newsletter signup

Footer signup area with short editorial introduction, email field, and pale-green submit button.

### Footer

Dark, rule-divided information area with brand statement, service and sector links, contact details, and small policy links.

### Measured component styles

- **Primary button** (“Start a project”): background #1fc742 · text #000000 · border 1px solid #1fc742 · radius 4px · padding 7px 16px 8px 16px · 400 14px Geist Mono
- **Secondary button** (“Submit”): background #9aefab · text #f5f4f0 · border 1px solid #9aefab · radius 4px · padding 7px 16px 8px 16px · 400 14px Geist Mono
- **Link** (“View case study Air Making a creative op”): transparent background · text #f5f4f0 · radius 0px · padding 0px · 340 16px Geist
- **Input**: background #3b3b3b · text #ffffff · border 2px inset #858585 · radius 0px · padding 1px 2px · 400 13.3333px Arial
- **Navigation item** (“Menu Start a project”): transparent background · text #f5f4f0 · radius 0px · padding 0px · 340 16px Geist

## Do

- Use #0a0a0a as the dominant canvas.
- Keep headlines light, editorial, and visually prominent.
- Reserve #1fc742 for actionable or deliberately emphasized elements.
- Use generous empty space between major sections.
- Let project imagery retain its own colours.
- Use monospaced styling for compact navigation and buttons.

## Don't

- Do not introduce bright section backgrounds.
- Do not turn every content group into a bordered card.
- Do not use green as a large decorative field.
- Do not crowd the hero with dense copy or interface chrome.
- Do not add shadows or prominent elevation.
- Do not treat portfolio-thumbnail colours as the brand palette.

## Agent prompt

Build a new agency page in Made by ON's restrained visual language. Use Carbon Canvas (#0a0a0a) across the page, Warm Porcelain (#f5f4f0) for editorial headlines and primary copy, and Quiet Ash (#a3a3a3) for secondary text. Keep Electric Leaf (#1fc742) focused on key actions, links, and small emphasis; use Mint Signal (#9aefab) sparingly for secondary submit treatment. Set large headings in a light editorial serif-like face such as Newsreader, body text in a clean sans such as Inter, and controls in IBM Plex Mono. Favor a centered hero, open negative space, asymmetrical portfolio imagery, and clear section breaks. Use restrained graphite rules, minimal borders, and no visible shadow-heavy cards. Keep form and footer areas compact, legible, and consistent with the dark canvas.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-screen dark canvas with centered headline and scattered portfolio previews. | Project CTA, Scroll cue | Editorial headline, Floating media previews, Monospaced navigation |
| 2 | product-showcase | Open multi-column case-study area with section heading and project links. | Case-study links, Browse projects | Project thumbnails, Light editorial titles, Green outline action |
| 3 | testimonials | Centered quotation and attribution in a two-column section. | Client endorsement, Carousel controls | Large serif quote, Centered attribution, Minimal controls |
| 4 | content-feed | Editorial field-note listing in a multi-column grid beneath a section heading. | Read article links, Browse field notes | Small green category labels, Editorial titles, Compact summaries |
| 5 | logo-cloud | Centered partnership statement followed by a horizontal client-logo strip. | Brand credibility, Client recognition | Centered heading, Monochrome logos, Open spacing |
| 6 | contact | Single-column contact section with an introductory heading and multi-field enquiry form. | Project enquiry, Lead capture | Editorial heading, Minimal dark form, Green submit action |
| 7 | footer | Full-width footer with newsletter band above a two-column information and link area. | Newsletter signup, Footer navigation | Thin divider, Email field, Green subscribe button, Compact link columns |

## Source CSS custom properties (selected)

```css
--radius-none: 0;
--radius-default: 4px;
--radius-full: 999px;
--border-strong: #666;
--radius-control: 4px;
--radius-container: 4px;
--radius-overlay: 4px;
--radius-selection: 4px;
--radius-pill: 999px;
--radius-sharp: 0;
--surface-canvas-neutral: color-mix(in oklab, #f5f4f0 calc(0 * 100%), #0a0a0a);
--surface-canvas-neutral-subtle: color-mix(in oklab, #edece8 calc(0 * 100%), #121212);
--surface-canvas-brand: color-mix(in oklab, #e5ffe6 calc(0 * 100%), #031407);
--surface-canvas-brand-subtle: color-mix(in oklab, #c1facd calc(0 * 100%), #093813);
--surface-card: color-mix(in oklab, #edece8 calc(0 * 100%), #121212);
--surface-card-elevated: color-mix(in oklab, #deddd9 calc(0 * 100%), #292929);
--text: color-mix(in oklab, #0a0a0a calc(0 * 100%), #f5f4f0);
--text-muted: color-mix(in oklab, #a3a3a3 calc(0 * 100%), #666);
--text-accent: color-mix(in oklab, #19a336 calc(0 * 100%), #1fc742);
--text-bright: color-mix(in oklab, #000 calc(0 * 100%), #fff);
--text-inverse: color-mix(in oklab, #f5f4f0 calc(0 * 100%), #000);
--border: color-mix(in oklab, #a3a3a3 calc(0 * 100%), #292929);
--icon-primary: color-mix(in oklab, #19a336 calc(0 * 100%), #1fc742);
--icon-secondary: color-mix(in oklab, #a3a3a3 calc(0 * 100%), #666);
--radius-media: 4px;
--card-radius: 4px;
--space-compact: calc(1rem + clamp(0rem, (min(100vw, 2400px) - 375px) * .022535, 1.5rem));
--space-medium: calc(1.5rem + clamp(0rem, (min(100vw, 2400px) - 375px) * .022535, 1.5rem));
--space-loose: calc(2rem + clamp(0rem, (min(100vw, 2400px) - 375px) * .030047, 2rem));
--space-none: 0;
--font-mono-ui: "Geist Mono", ui-monospace, "SF Mono", menlo, consolas, monospace;
--font-sans: "Geist", sans-serif;
--font-serif-display: "Geist Arrow", "Newsreader", georgia, serif;
--text-error-ink: #e66666;
--duration-tint: .2s;
--duration-control: .3s;
--duration-move: .5s;
--duration-entrance: .8s;
--duration-shimmer: 1.5s;
--duration-spin: 2s;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/madebyon-com