---
version: alpha
name: Made by Null
description: Early-web revival joy — a deep blue night canvas, floating butterfly motifs, and saturated gradient washes (blue → violet → pink). Bold near-white display type at huge sizes, emoji-coded month navigation, and a #MakeTheWebFunAgain attitude where playfulness IS the system.

colors:
  # Canvas + ink
  background: "#0a0e2a"
  surface: "#141a3a"
  surface-soft: "#1d2450"
  ink: "#f4f5ff"
  ink-secondary: "#b6bbe0"
  ink-muted: "#7a80ad"

  # Brand blue — the butterfly blue
  primary: "#4d6dff"
  primary-bright: "#6f8bff"
  primary-deep: "#2a3fcc"

  # Gradient accents — blue → violet → pink
  accent-violet: "#8a5cff"
  accent-pink: "#ff5ca8"
  accent-cyan: "#4fd8ff"

  # On-color
  on-primary: "#ffffff"
  on-accent: "#ffffff"

  # Borders + lines (flattened over canvas)
  border: "#2a3060"
  border-soft: "#1c2247"
  divider: "#232a55"

  # States
  success: "#3ddc97"
  focus: "#6f8bff"
  ring: "#3a4488"     # flattened focus ring over canvas

typography:
  display-hero:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 88px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -2px
  display:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1px
  card-title:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.5px
  stat-number:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -1.5px
  body-large:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-medium:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.2px
  label-caps:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.5px
  caption:
    fontFamily: "Poppins, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 120px

rounded:
  none: 0px
  sm: 8px
  md: 14px
  lg: 20px
  xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-bright}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"

  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.primary-bright}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.pill}"
    padding: 6px 14px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px
    borderColor: "{colors.border}"

  card-stat:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.stat-number}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.focus}"

  nav-pill:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.pill}"
    padding: 10px 18px
    borderColor: "{colors.border}"

  tag-emoji:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
---

# Made by Null Design System

## Overview

Made by Null's "Rewind 2022" site is a love letter to the early web — a deliberately joyful, scroll-driven experience that wears its #MakeTheWebFunAgain ethos on its sleeve. The canvas is a deep midnight blue (`{colors.background}`), a night sky that lets saturated brand color and glowing gradients do the talking. Near-white text (`{colors.ink}`) reads cleanly against it, and the whole thing feels less like a corporate report and more like a personal mixtape pressed into a website.

The signature move is the butterfly: blue-winged motifs float and animate across the page as a continuous visual language, threaded through a calendar-style month navigator where each month carries its own emoji signature. Color is unapologetically loud here. Brand blue (`{colors.primary}`) anchors the palette, but it bleeds into violet (`{colors.accent-violet}`) and pink (`{colors.accent-pink}`) gradient washes that recall the "BUTTERFLIES, GRADIENTS, GREAT TUNES" energy of the loader.

Typography leans on a geometric, friendly sans (Poppins in our render) pushed to billboard sizes — month names, stat numbers (619 goals, 18 awards), and section headings hit 56–88px with tight negative tracking, so the page reads big and confident. Body copy relaxes to a comfortable 16–20px. The contrast between huge, rounded display type and the dark gradient field is the whole personality: confident, warm, and a little nostalgic.

Structurally it's modular — featured creators, playlists, stat sheets, and multi-timezone clocks all live in softly rounded cards (`{rounded.lg}`–`{rounded.xl}`) with generous padding, separated by quiet borders rather than hard rules. Everything is pill-shaped where it can be (buttons, badges, nav chips), reinforcing the soft, playful tone.

**Key Characteristics:**
- Deep midnight-blue canvas (`{colors.background}`) with near-white ink (`{colors.ink}`)
- Butterfly-blue primary (`{colors.primary}`) bleeding into violet/pink gradient accents
- Billboard display type (Poppins, up to 88px) with tight negative tracking
- Big stat numbers as a hero device (`{typography.stat-number}`)
- Pill-everything: buttons, badges, nav chips all fully rounded
- Emoji-coded month navigation and floating butterfly motifs
- Softly rounded cards (14–32px radii) separated by quiet borders
- Early-web playfulness — #MakeTheWebFunAgain as a design principle

## Colors

### Canvas & Ink
- **Night Canvas** (`{colors.background}`): Page background, the deep blue field everything sits on.
- **Surface** (`{colors.surface}`): Card and panel backgrounds, one step up from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Elevated/feature cards, badge backgrounds.
- **Ink** (`{colors.ink}`): Primary text and display headings, near-white.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, timestamps.

### Brand Blue
- **Primary Blue** (`{colors.primary}`): The butterfly blue — primary CTAs, key accents, links.
- **Primary Bright** (`{colors.primary-bright}`): Hover state, brighter highlights.
- **Primary Deep** (`{colors.primary-deep}`): Pressed states, deep gradient stops.

### Gradient Accents
- **Accent Violet** (`{colors.accent-violet}`): Mid-gradient stop, secondary highlights.
- **Accent Pink** (`{colors.accent-pink}`): Warm gradient terminus, playful emphasis.
- **Accent Cyan** (`{colors.accent-cyan}`): Cool sparkle accent, occasional highlights.

### Borders & Lines
- **Border** (`{colors.border}`): Card outlines, input borders.
- **Border Soft** (`{colors.border-soft}`): Subtle inner dividers.
- **Divider** (`{colors.divider}`): Section separators.

### States
- **Success** (`{colors.success}`): Positive states.
- **Focus** (`{colors.focus}`): Keyboard focus ring color.

## Typography

### Font Family
- **Primary**: `Poppins`, with fallbacks: `Helvetica Neue, Arial, sans-serif`
- A geometric, friendly sans chosen for its rounded warmth at large sizes — closest Google match to the site's playful display voice.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 88px billboard — landing/month headlines |
| `display` | 64px large display |
| `stat-number` | 56px hero stat figures |
| `section-heading` | 40px section titles |
| `card-title` | 24px card headings |
| `body-large` | 20px intros, lead copy |
| `body` | 16px standard reading text |
| `body-medium` | 16px emphasized/nav text |
| `button-ui` | 15px buttons |
| `label-caps` | 12px uppercase tracked labels |
| `caption` | 13px metadata |

### Principles
- **Go big**: Display type runs huge (56–88px) with tight negative tracking — the page is meant to feel loud and confident.
- **Rounded warmth**: Poppins' geometric curves keep even billboard type feeling friendly, not corporate.
- **Numbers as drama**: Large stat figures are a hero device, not buried metadata.
- **Three weights**: 400 (body), 500–600 (UI/headings), 700 (display).

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Generous vertical rhythm between scroll sections (`{spacing.3xl}`–`{spacing.4xl}`) gives each module room to breathe in a scroll-driven story.

### Grid & Container
- Centered single-column scroll narrative with full-bleed gradient sections
- Modular card grids for creators, playlists, and stat sheets (2–3 columns)
- Calendar-style month navigator with emoji-coded chips
- Multi-timezone clock row spanning collaborative cities

### Whitespace Philosophy
- **Room to scroll**: Each section is a beat in a story — large spacing between modules.
- **Dark field, bright moments**: The deep canvas is mostly negative space; color and motifs punctuate it.
- **Soft separation**: Cards and quiet borders separate content, never hard rules.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | Canvas, no border | Page background |
| Surface | `{colors.surface}` + `{colors.border}` | Standard cards |
| Elevated | `{colors.surface-soft}` + soft glow | Feature cards |
| Focus | `2px solid {colors.focus}` | Keyboard focus |

**Depth Philosophy**: Depth comes from surface lightening (canvas → surface → surface-soft) and soft colored glows behind gradient elements, not heavy drop shadows. Butterfly motifs and gradient washes add atmospheric depth.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Inputs, small chips |
| `md` | 14px | Inputs, compact cards |
| `lg` | 20px | Standard cards |
| `xl` | 32px | Feature cards |
| `pill` | 9999px | Buttons, badges, nav chips, tags |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Brand blue fill, white text, full pill. The default CTA.
- **`button-secondary`** — Surface fill with quiet border.
- **`button-ghost`** — Transparent on canvas with border, muted text.

### Pills & Badges
- **`badge`** — Surface-soft fill, bright-blue uppercase tracked label.
- **`tag-emoji`** — Pill chip for emoji-coded month/category tags.

### Cards
- **`card`** — Surface background, quiet border, 20px radius.
- **`card-feature`** — Surface-soft, 32px radius, generous padding.
- **`card-stat`** — Hosts a huge stat number over a short label.

### Inputs
- **`input`** — Surface fill, border, focus shifts border to `{colors.focus}`.

### Navigation
- **`nav-pill`** — Pill nav chip for the month/section selector.

## Do's and Don'ts

### Do
- Keep the canvas deep midnight blue and let color punctuate it
- Push display type huge with tight negative tracking
- Use pills for buttons, badges, nav, and tags
- Lean into gradients (blue → violet → pink) and butterfly motifs
- Treat big numbers as a hero device
- Keep separation soft — surfaces and quiet borders, not hard rules

### Don't
- Don't put dark ink on the dark canvas — text stays near-white
- Don't set CTAs to the page background color
- Don't go corporate-flat — playfulness is the system
- Don't use heavy drop shadows; depth comes from surface lightening and glow
- Don't square off buttons or badges — pills are the default
- Don't desaturate the accents — the gradients should sing

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, display type scales down, butterflies simplify |
| Tablet | 600–1024px | 2-column card grids, calendar wraps |
| Desktop | >1024px | Full multi-column modules, full-bleed gradient sections |

### Collapsing Strategy
- Hero display: 88px → scales down, keeps negative tracking proportionally
- Card grids: 3-column → 2-column → single column
- Month navigator: full calendar → horizontally scrollable chip row
- Multi-timezone clocks: row → stacked
- Section spacing: 120px → ~64px on mobile

### Image & Motion Behavior
- Butterfly motifs reduce in count/animation intensity on mobile
- Gradient washes simplify on smaller screens
- Cards maintain radius and border treatment at all sizes

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Made by Null. Brand names and trademarks belong to their respective owners.