# Madebyon · Design system migration spec

> Source: https://www.madebyon.com  ·  Curated by OpenDesign  ·  en

> This site exemplifies modern premium agency design with its confident typography, restrained color palette, and immersive visual storytelling, making it an excellent reference for high-end digital experience design.

## 1. Identity DNA

The Madebyon design system operates like a high-end architectural firm's practice: technical precision provides the load-bearing structure, while creative boldness is the expressive facade. This is a system built for a premium digital agency, where every decision serves the singular goal of shaping ambitious digital experiences with confidence.

**One-liner:** A premium digital agency focused on shaping the future of digital experiences through bold design and technical innovation.
**Keywords:** digital agency · creative studio · innovation · modern · premium
**Analogy:** A high-end architectural firm for digital experiences, combining technical precision with creative boldness.

## 2. Color

The color system is one of disciplined contrast, built on a foundation of black and off-white. A single vibrant yellow-green accent is reserved exclusively for calls-to-action, creating an immediate and focused visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#151515` | card background |
| `--ink` | `#FAF9F4` | body text |
| `--muted` | `#888888` | placeholder |
| `--accent` | `#DCFF4F` | single accent |
| `--line` | `rgba(250,249,244,0.12)` | divider |

**Color principle:** High-contrast minimalism with a single vibrant accent for call-to-action, creating a bold, focused visual hierarchy.

This palette enforces a rule of singular emphasis; its power derives from what it deliberately withholds.

## 3. Typography

Typographic voice is established through a geometric sans-serif, a category choice that ensures a clean, modern, and highly legible baseline across all interfaces. The system prioritizes impact through scale and weight—large, tight-set headings contrast with a primary reliance on weight 400 for refined consistency.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -1px | Main headline on hero |
| h2 | 40px | 1.2 | 400 | -0.5px | Section headings |
| body | 16px | 1.5 | 400 | 0px | Body text and navigation |
| caption | 12.8px | 1.25 | 400 | 0px | Small UI text and labels |

**Type rules:**
- Use geometric sans-serif for all primary text, maintaining a clean and modern aesthetic.
- Keep headings large and bold with tight letter-spacing for impact.
- Limit weight variations, relying primarily on weight 400 for a consistent, refined look.

## 4. Spacing

Rhythm is governed by a consistent 8px base unit, creating a measurable grid for all spatial relationships.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 8px base unit with generous whitespace to create a spacious, premium feel.

## 5. Surfaces

Depth is communicated not through heavy ornamentation, but through a considered hierarchy of shadows and a philosophy of minimal borders. Separation is achieved through subtle shifts in opacity and generous whitespace, allowing content to breathe and the interface to feel open.

- **Radius:** sm 4px · md 8px · lg 24px · pill 999px
- **Shadows:**
  - 0px 4px 14px rgba(0, 0, 0, 0.12)
  - 0px 24px 60px rgba(0, 0, 0, 0.35)
  - 0px 32px 68px rgba(0, 0, 0, 0.3)
- **Borders:** Minimal borders, using subtle opacity changes or hairline dividers for separation.

## 6. Layout

The layout skeleton begins with a left-aligned hero, pairing large typography with a full-width visual element below. This linear introduction gives way to a grid-based structure for showcasing projects, maintaining order while allowing for dynamic content presentation.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Left-aligned hero text with full-width visual element below, transitioning to grid-based project showcases.

## 7. Motion & Interaction

Motion is treated as a functional narrative, using smooth fades and transforms to guide attention through the interface's construction. It is purposeful rather than decorative, with refined easing curves and varied durations that enhance the system's premium, technical feel.

- **Durations:** micro 220ms · small 400ms · medium 900ms
- **Easing:** `cubic-bezier(0.165, 0.84, 0.44, 1)`
- **Patterns:**
  - Smooth fade-in and transform animations for page elements.
  - Dynamic video backgrounds with subtle particle effects in experimental sections.
  - Hover transitions on interactive elements for enhanced feedback.

- **Hover:** Subtle visual feedback through color changes, opacity adjustments, or slight transforms.
- **Click:** Immediate visual response with smooth transition states.
- **Transition:** Consistent use of 'all' transitions with varied durations for different element types.
- **Keyboard:** Logical tab order with visible focus states for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, visionary, and professional, matching the bold declarative style of the typography. Headlines are impactful statements, and calls-to-action are direct, using the high-contrast button system to drive clear engagement.

- **Tone:** Confident, visionary, and professional with a forward-looking perspective.
- **Headline style:** Bold, declarative statements using large, impactful typography.
- **CTA style:** Direct and action-oriented, using high-contrast buttons to drive engagement.
- **Avoid:** Technical jargon / Overly casual language / Uncertain or hesitant phrasing

### Don'ts
- ❌ Don't use decorative or serif fonts — screenshot shows clean geometric sans-serif throughout.
- ❌ Don't use multiple accent colors — screenshot shows only one dominant accent (yellow-green).
- ❌ Don't clutter the interface with unnecessary elements — screenshot shows ample whitespace and minimal UI.
- ❌ Don't use small, cramped typography — screenshot shows large, readable text with generous spacing.
- ❌ Don't use rigid, boxy layouts — screenshot shows fluid, organic elements and rounded corners.
- ❌ Don't rely on heavy borders for separation — screenshot shows subtle spacing and background differentiation instead.

The system explicitly rejects decorative fonts, multiple accents, cluttered layouts, and small text, defining its premium identity as much by its exclusions as its inclusions.

## System Prompt (paste into AI tool)

```
Premium digital agency website for Madebyon, featuring a dark, high-contrast aesthetic with geometric sans-serif typography. Primary colors are black (#000000) and off-white (#FAF9F4), with a vibrant yellow-green accent (#DCFF4F) for call-to-action elements. The design emphasizes bold, large typography with tight letter-spacing, generous whitespace, and immersive visual content including dynamic video backgrounds. Key principles include minimalism, confidence, and technical innovation. Critical don'ts: avoid decorative fonts, multiple accent colors, cluttered layouts, small text, rigid boxes, and heavy borders. The site positions itself as shaping the future of digital experiences through ambitious, high-impact collaborations.
```