---
version: alpha
name: Maker Member
description: Premium dark editorial community design — near-black canvas, warm off-white ink, a single confident high-contrast CTA, founder photography carrying the visual weight, and quiet sans-serif typography that signals exclusivity through restraint rather than decoration.
colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#141414"
  surface-soft: "#1c1c1c"
  ink: "#f5f3ef"
  ink-secondary: "#a8a39c"
  ink-muted: "#6e6a64"

  # Accent — single warm signal color
  primary: "#f5f3ef"        # CTA fill is the warm off-white, inverted on dark
  accent: "#c9a24b"         # restrained brass/gold editorial accent

  # Interactive
  link: "#f5f3ef"
  focus-ring: "#c9a24b"
  surface-hover: "#242424"
  cta-hover: "#e4e0d8"

  # Neutral scale
  gray-900: "#0a0a0a"
  gray-800: "#141414"
  gray-700: "#1c1c1c"
  gray-600: "#2a2a2a"
  gray-400: "#6e6a64"
  gray-300: "#a8a39c"
  gray-100: "#d6d2cb"

  # Borders + dividers
  border: "#2a2a2a"
  border-strong: "#3a3a3a"

  # On-color
  on-primary: "#0a0a0a"
  on-ink: "#0a0a0a"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -1.0px
  sub-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1.5px

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

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 20px
  pill: 9999px

components:
  # Primary CTA — inverted warm off-white on dark
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.cta-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  # Secondary — outlined ghost on dark
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-hover}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"

  # Eyebrow / label badge
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
    borderColor: "{colors.border}"

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

  card-featured:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border-strong}"

  # Input
  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}"
    borderColor: "{colors.focus-ring}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    padding: 20px 32px
    borderColor: "{colors.border}"
---

# Maker Member Design System

## Overview

Maker Member presents itself as an invitation, not a product. The site is built on a near-black canvas (`{colors.background}`) with warm off-white text (`{colors.ink}`), a combination that reads as gallery-quiet and members-only rather than tech-startup loud. The warmth in the ink — a soft bone tone rather than clinical pure white — is the single most important nuance: it signals print, paper, and editorial heritage instead of screens and dashboards. The result feels like the inside cover of a well-made magazine for people who build things.

The design deliberately withholds color. There is no rainbow of feature accents, no gradient washes, no playful illustration. Photography of founders and makers carries the entire visual load, and the typography stays out of its way. A single restrained brass accent (`{colors.accent}`) exists for the rare moment that needs warmth or emphasis, but the dominant move is monochrome confidence. Exclusivity is communicated through what is left out.

Typography is clean, modern sans-serif with a tight, slightly compressed feeling at display sizes (negative tracking from -1.6px down). Headlines like "We connect people shaping the world" are set at medium weight rather than heavy bold — the restraint itself is the flex. Body copy and testimonials are generous in line-height and comfortable to read, because the testimonials ARE the product: authentic founder voices stacked as social proof.

The one place the system raises its voice is the primary call to action. "Apply Now" inverts the palette entirely — a warm off-white pill on the dark field — making it the single brightest object on the page. Everything else recedes; the invitation advances.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with warm off-white ink (`{colors.ink}`) — editorial, not clinical
- Withheld color: monochrome dominance, single brass accent (`{colors.accent}`) used sparingly
- Founder photography carries visual weight; type stays quiet and supportive
- Medium-weight (500) display type with negative tracking — restraint as confidence
- One high-contrast inverted CTA (`button-primary`) as the brightest object on screen
- Pill-shaped buttons and badges; soft-cornered cards with subtle borders
- Testimonial cards stacked as social-proof rhythm
- Uppercase tracked eyebrows for section labels

## Colors

### Primary
- **Canvas Black** (`{colors.background}`): The dominant near-black field. Almost everything sits on it.
- **Warm Off-White** (`{colors.ink}`): Primary text and the inverted CTA fill. Bone-warm, not pure white.
- **Brass Accent** (`{colors.accent}`): Restrained editorial gold for rare emphasis and focus rings.

### Surfaces
- **Surface** (`{colors.surface}`): Card and input backgrounds, a hair lighter than canvas.
- **Surface Soft** (`{colors.surface-soft}`): Featured cards, slightly lifted.
- **Surface Hover** (`{colors.surface-hover}`): Hover state for secondary surfaces.

### Ink Scale
- **Ink** (`{colors.ink}`): Headings, primary body text.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, testimonial attribution.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled text.

### Interactive
- **Link** (`{colors.link}`): Inline links, off-white to stay in the monochrome family.
- **Focus Ring** (`{colors.focus-ring}`): Brass focus indicator on interactive elements.
- **CTA Hover** (`{colors.cta-hover}`): Slightly dimmed off-white on primary button hover.

### Borders
- **Border** (`{colors.border}`): Card outlines, dividers, nav bottom.
- **Border Strong** (`{colors.border-strong}`): Featured cards, ghost-button outlines.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks: `Helvetica Neue, Arial, sans-serif`
- A neutral, modern grotesque sans-serif chosen for legibility and quiet authority. No display or serif faces — the restraint is the point.

### 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` | 56px hero headline — medium weight, compressed tracking |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections, large card headings |
| `card-title` | Founder/testimonial card names |
| `body-large` | Lead paragraphs, hero subtitle |
| `body` | Standard reading text, testimonials |
| `body-medium` | Navigation, emphasized labels |
| `button-ui` | Buttons and CTAs |
| `caption` | Metadata, company/role attribution |
| `eyebrow` | Uppercase tracked section labels |

### Principles
- **Restraint as confidence**: Display type sits at weight 500, not 700. The brand flexes by NOT shouting.
- **Negative tracking at scale**: -1.6px at hero, relaxing toward 0 as size drops.
- **Generous body line-height**: 1.6 on reading copy — testimonials are the product, so reading comfort wins.
- **Tracked uppercase eyebrows**: +1.5px letter-spacing on the smallest labels for an editorial masthead feel.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px with large jumps (`{spacing.4xl}`–`{spacing.5xl}`) between major sections for gallery breathing room.

### Grid & Container
- Max content width: approximately 1200px, centered
- Hero: full-width imagery with text overlay, single confident headline
- Founder portraits: responsive grid
- Testimonials: card-based, consistent spacing, stacked as social-proof rhythm

### Whitespace Philosophy
- **Exclusive emptiness**: Heavy vertical padding between sections. Space signals premium.
- **Photography leads**: Imagery occupies the bold positions; type supports.
- **Quiet chrome**: Borders are low-contrast (`{colors.border}`); separation comes from spacing, not lines.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed imagery |
| `xs` | 4px | Small inline elements |
| `sm` | 6px | Tags, small chips |
| `md` | 8px | Inputs, list items |
| `lg` | 12px | Cards |
| `xl` | 20px | Large featured containers |
| `pill` | 9999px | Buttons, badges, eyebrows |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Inverted warm off-white pill, dark text. The single brightest object; the invitation.
- **`button-secondary`** — Ghost pill, off-white text on a `{colors.border-strong}` outline over the dark canvas.

### Badges
- **`badge`** — Pill, uppercase tracked eyebrow text, subtle surface and border. Section labels.

### Cards
- **`card`** — Surface-tinted, soft 12px corners, low-contrast border. Founder/testimonial container.
- **`card-featured`** — Slightly lifted surface, stronger border, more padding.

### Inputs
- **`input`** — Surface background, subtle border, brass focus ring (`{colors.focus-ring}`).

### Navigation
- **`nav-bar`** — Dark sticky header, off-white links at weight 500, "Apply Now" inverted CTA right-aligned, subtle bottom border.

## Do's and Don'ts

### Do
- Keep the canvas near-black and the ink warm off-white — the warmth is the brand
- Reserve the inverted CTA as the single brightest object on any screen
- Let photography carry visual weight; keep type quiet and supportive
- Use medium (500) weight for display type — restraint over bold
- Apply the brass accent (`{colors.accent}`) sparingly, for rare emphasis and focus rings
- Use generous line-height on testimonial copy

### Don't
- Don't introduce feature-accent colors or gradients — the palette is withheld on purpose
- Don't use pure white (`#ffffff`) ink — keep the warm bone tone
- Don't set display type to heavy bold (700) — it breaks the quiet-confidence voice
- Don't compete with the inverted CTA by adding other bright elements
- Don't use high-contrast borders — chrome stays quiet, spacing does the separating

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked testimonials, hero text scales down |
| Tablet | 600–1024px | 2-column founder grid begins |
| Desktop | 1024–1200px | Full layout, multi-column testimonial grid |
| Large Desktop | >1200px | Centered, generous margins |

### Collapsing Strategy
- Hero: 56px → scales down, maintains negative tracking proportionally
- Navigation: horizontal links + CTA → hamburger menu, CTA stays visible
- Founder grid: multi-column → 2-column → single column
- Section spacing: 140px+ → 64px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: near-black `{colors.background}`
- Heading text: warm off-white `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Primary CTA: inverted off-white pill `{colors.primary}` with `{colors.on-primary}` text
- Accent: brass `{colors.accent}` (sparingly)
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline at 56px Inter weight 500, line-height 1.05, letter-spacing -1.6px, color `{colors.ink}`. Subtitle at 20px weight 400, `{colors.ink-secondary}`. One inverted pill CTA: `{colors.primary}` fill, `{colors.on-primary}` text, 9999px radius, 14px 28px padding."
- "Build a testimonial card: `{colors.surface}` background, 12px radius, 1px `{colors.border}`. Name at 18px Inter weight 600 `{colors.ink}`. Quote at 16px weight 400 line-height 1.6 `{colors.ink-secondary}`. Company at 13px `{colors.ink-muted}`."
- "Create a tracked uppercase eyebrow label: 12px Inter weight 500, letter-spacing 1.5px, `{colors.ink-secondary}`."

### Iteration Guide
1. Near-black canvas, warm off-white ink — never pure white
2. One bright inverted CTA per screen; everything else recedes
3. Medium weight display, negative tracking — restraint is the identity
4. Brass accent only for rare emphasis and focus
5. Photography leads, type supports, spacing separates

---

## 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 Maker Member. Brand names and trademarks belong to their respective owners.