---
version: alpha
name: Ma5a
description: Content-first minimalism — a near-empty white canvas, near-black ink, and a single playful accent (a bunny emoji mark). Typographic hierarchy carries the whole page; ornament is reduced to one warm coral highlight and generous whitespace.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f7f7f7"
  ink: "#111111"
  ink-secondary: "#555555"
  ink-muted: "#888888"

  # Playful accent
  primary: "#ff5a6e"        # coral — link hover + accent mark
  accent-soft: "#ffe5e9"    # tint behind highlighted text

  # Interactive
  link: "#111111"
  link-hover: "#ff5a6e"
  focus-ring: "#ff5a6e"

  # Neutral scale
  gray-700: "#333333"
  gray-500: "#777777"
  gray-200: "#e4e4e4"
  gray-100: "#f0f0f0"

  # Hairlines
  border: "#e4e4e4"

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

typography:
  display:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1px
  heading:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.5px
  subheading:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  link:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

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

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 10px
  lg: 16px
  pill: 9999px

components:
  # Text link — default state
  link:
    textColor: "{colors.link}"
    typography: "{typography.link}"
  link-hover:
    textColor: "{colors.link-hover}"
    typography: "{typography.link}"

  # Accent button (rare — page is link-led)
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.link}"
    rounded: "{rounded.pill}"
    padding: 10px 20px

  # Ghost / secondary
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.link}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
    borderColor: "{colors.border}"

  # Highlighted inline text (accent-soft wash)
  highlight:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    padding: 1px 4px

  # Simple content card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.border}"

  # Hairline divider row
  list-item:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 12px 0px
    borderColor: "{colors.border}"

  # Footer / meta text
  caption:
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
---

# Ma5a Design System

## Overview

Ma5a is a personal site reduced to its essentials — a single white page (`{colors.background}`) where near-black ink (`{colors.ink}`) and typographic hierarchy do all the work. There is no header chrome, no card grid, no decorative gradient. The page reads like a well-set sheet of paper: a name, a short introduction, and a handful of text links to email and social accounts. Restraint is the whole identity.

The one note of personality is a small playful mark — a bunny emoji — that warms what would otherwise be a strictly utilitarian layout. That same warmth carries into the accent color, a friendly coral (`{colors.primary}`) reserved for link hover and the occasional highlighted phrase. The accent never floods the page; it appears as a flash on interaction, so the resting state stays calm and monochrome.

Typography is a clean geometric sans (Inter, with system fallbacks). Headings sit at a comfortable 24–40px with mild negative tracking for a tighter, more intentional feel, while body copy runs at a generous 1.6 line-height for easy reading. The page leans on weight (400 for reading, 500 for links, 600 for headings) rather than color or size jumps to establish rank.

Layout is single-column and centered, with wide vertical rhythm between blocks. Whitespace is the primary structural device — sections separate by air and the occasional hairline (`{colors.border}`), not by boxes or shadows.

**Key Characteristics:**
- Content-first single-column layout — text and links, almost no chrome
- Pure white canvas with near-black `{colors.ink}` — gallery calm at rest
- One playful coral accent (`{colors.primary}`) for hover and highlights only
- A bunny emoji mark as the lone decorative flourish
- Inter / system sans with mild negative tracking on headings
- Weight-driven hierarchy (400 / 500 / 600), not color or scale shouting
- Whitespace and hairlines instead of cards and shadows

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, name, headings. Near-black for soft contrast.
- **White** (`{colors.background}`): Page background and all surfaces.
- **Coral** (`{colors.primary}`): The single playful accent — link hover, highlight, focus ring.

### Accent & Tint
- **Accent Soft** (`{colors.accent-soft}`): Pale coral wash behind highlighted inline text.

### Interactive
- **Link** (`{colors.link}`): Default link color — same near-black as ink, underline on hover.
- **Link Hover** (`{colors.link-hover}`): Coral on hover, the moment of color.
- **Focus Ring** (`{colors.focus-ring}`): Coral keyboard focus outline.

### Text Scale
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, intro paragraph.
- **Ink Muted** (`{colors.ink-muted}`): Captions, meta, footer.

### Neutral Scale
- **Gray 700** (`{colors.gray-700}`): Strong secondary text.
- **Gray 500** (`{colors.gray-500}`): Tertiary text.
- **Gray 200** (`{colors.gray-200}`): Hairlines, dividers, borders.
- **Gray 100** (`{colors.gray-100}`): Subtle surface tint.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks: `-apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif`
- A neutral geometric grotesque — invisible enough to keep the focus on the words, with mild negative tracking applied at heading sizes.

### Hierarchy

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

| Token | Use |
|---|---|
| `display` | 40px name / hero line |
| `heading` | 24px section headings |
| `subheading` | 18px emphasized lines |
| `body-large` | Introduction paragraph |
| `body` | Standard reading text |
| `body-small` | Compact supporting copy |
| `link` | Text links, weight 500 |
| `caption` | Footer, meta, captions |

### Principles
- **Weight over color**: Hierarchy comes from 400 / 500 / 600, not from a rainbow of sizes or hues.
- **Mild compression on headings**: Negative tracking (-0.5px to -1px) gives headings intent without going extreme.
- **Generous reading rhythm**: Body copy at 1.6 line-height for comfortable scanning.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with wide steps up to `{spacing.3xl}` (96px) for the vertical air between blocks.

### Grid & Container
- Single centered column, roughly 600–680px max content width
- No multi-column grids — everything stacks
- Hairline dividers (`{colors.border}`) separate list rows where needed

### Whitespace Philosophy
- **Air as structure**: Sections separate by `{spacing.2xl}`–`{spacing.3xl}` of vertical space, not by boxes.
- **Resting calm**: The monochrome resting state means color (coral) only appears on interaction.
- **One flourish**: The bunny emoji mark is the single permitted ornament — everything else is type and space.

## Components

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

### Links
- **`link`** — Near-black text, weight 500; turns coral (`{colors.link-hover}`) on hover.

### Buttons
- **`button-primary`** — Coral pill, white text. Rare; the page is link-led.
- **`button-secondary`** — White pill with hairline border.

### Highlight
- **`highlight`** — Inline text wrapped in a pale coral (`{colors.accent-soft}`) wash.

### Cards & Lists
- **`card`** — White surface, hairline border, 10px radius. Used sparingly.
- **`list-item`** — Hairline-separated row for link lists.

## Do's and Don'ts

### Do
- Keep the resting page monochrome — let coral appear only on hover/highlight
- Use weight to build hierarchy before reaching for size or color
- Preserve wide vertical whitespace between blocks
- Allow one playful flourish (the bunny mark) and no more

### Don't
- Don't flood the page with the coral accent
- Don't add cards, shadows, or gradients where whitespace will do
- Don't introduce a second accent color
- Don't use heavy bold (700+) on body text — 600 is the heading ceiling

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Tighter side padding, single column unchanged |
| Tablet | 600–900px | Centered column, comfortable margins |
| Desktop | >900px | Max ~680px content width, generous side air |

### Collapsing Strategy
- Layout is already single-column, so little reflow is needed
- Side padding tightens on mobile; vertical rhythm compresses from `{spacing.3xl}` toward `{spacing.xl}`
- Display line scales down while keeping its negative tracking

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White `{colors.background}`
- Heading / name: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Link hover / accent: Coral `{colors.primary}`
- Hairline: `{colors.border}`

### Example Component Prompts
- "Create a centered single-column personal page on white. Name at 40px Inter weight 600, letter-spacing -1px, color `{colors.ink}`. Intro paragraph at 18px weight 400, line-height 1.6, color `{colors.ink-secondary}`."
- "Build a list of text links: near-black `{colors.ink}` weight 500, hover color coral `{colors.primary}` with underline. Rows separated by 1px `{colors.border}` hairlines."
- "Add one inline highlight: wrap a phrase in a pale coral `{colors.accent-soft}` background, 4px radius, 1px 4px padding."

### Iteration Guide
1. Start monochrome — add coral only on interaction
2. Build hierarchy with weight (400 / 500 / 600), not color
3. Keep whitespace wide; avoid cards and shadows
4. One flourish maximum — the playful mark, nothing more

---

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