---
name: Madebyon
description: "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 exp"
version: alpha

colors:
  background: "#000000"
  primary: "#FAF9F4"
  tertiary: "#DCFF4F"
  neutral: "#888888"
  bg-soft: "#151515"
  line: "rgba(250,249,244,0.12)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  h2:
    fontFamily: geometric-sans
    fontSize: 40px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 12.8px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 24px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A premium digital agency focused on shaping the future of digital experiences through bold design and technical innovation.

*A high-end architectural firm for digital experiences, combining technical precision with creative boldness.*

## Colors

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

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FAF9F4`)** — uses `ink` token
- **Accent (`#DCFF4F`)** — uses `accent` token
- **Muted (`#888888`)** — uses `muted` token
- **Borders (`rgba(250,249,244,0.12)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Consistent 8px base unit with generous whitespace to create a spacious, premium feel.

## Elevation & Depth

- 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.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 24px
- `pill`: 999px

## Components

- **button:** High-contrast pill-shaped buttons with vibrant accent color (yellow) and black text, or outlined pill buttons with white text.
- **card:** Content cards with generous padding, subtle background differentiation, and smooth hover transitions.
- **chip:** Minimal chips used for navigation or tags, often with a border or subtle background.
- **input:** Clean, minimal input fields with subtle borders and clear focus states.
- **hero:** Full-width, immersive hero sections with large typography and dynamic visual backgrounds (video/images).

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```