---
version: alpha
name: Mike Matas
description: Editorial monochrome portfolio — a chronological text-list of work set in clean Helvetica-style sans on near-white paper, with near-black ink, generous line spacing, and zero chrome. Imagery lives in hover/expand states; the resting page is pure typography.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#fafafa"
  surface-soft: "#f8f8f8"
  ink: "#181818"
  ink-pure: "#000000"

  # Text scale (monochrome)
  ink-secondary: "#333333"
  ink-muted: "#666666"
  ink-faint: "#999999"

  # Hairlines + dividers
  border: "#e6e6e6"
  border-soft: "#efefef"

  # Single restrained accent — link/interactive
  primary: "#0073e6"
  link: "#0073e6"

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

  # Dark / inverted contexts (image overlays, captions)
  overlay-dark: "#101010"
  overlay-ink: "#ffffff"

typography:
  display-hero:
    fontFamily: "Helvetica Now Display, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.4px
  page-title:
    fontFamily: "Helvetica Now Display, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -0.9px
  project-title:
    fontFamily: "Helvetica Now Display, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.4px
  list-item:
    fontFamily: "Helvetica Now Text, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Helvetica Now Text, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Helvetica Now Text, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Helvetica Now Text, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  meta:
    fontFamily: "Helvetica Now Text, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  caption:
    fontFamily: "Helvetica Now Text, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0px
  label:
    fontFamily: "Helvetica Now Text, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0.2px

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

rounded:
  none: 0px
  xs: 3px
  sm: 4px
  md: 8px
  lg: 13px
  xl: 21px
  pill: 9999px

components:
  # Resting list row — the core repeated unit
  list-row:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.list-item}"
    padding: 12px 0px
    borderColor: "{colors.border-soft}"
  list-row-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-pure}"
    typography: "{typography.list-item}"
    padding: 12px 0px

  # Role / company / year metadata under each project
  meta-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.meta}"

  # Inline link / interactive text
  link-inline:
    textColor: "{colors.link}"
    typography: "{typography.body}"

  # Small role/category label
  label-tag:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    padding: 2px 8px

  # Project thumbnail / image card (revealed on hover/expand)
  image-card:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.md}"
    borderColor: "{colors.border}"

  # Featured / large project media
  image-featured:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.border}"

  # Caption over imagery
  caption-text:
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"

  # Bio / about paragraph
  bio-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-large}"

  # Social / contact link
  social-link:
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"

  # Hairline divider between sections
  divider:
    backgroundColor: "{colors.border-soft}"
    height: 1px

  # Dark overlay context (fullscreen image view)
  overlay:
    backgroundColor: "{colors.overlay-dark}"
    textColor: "{colors.overlay-ink}"
    typography: "{typography.caption}"
---

# Mike Matas Design System

## Overview

Mike Matas's portfolio is the design language of someone who shaped Apple's iOS interface and Facebook's Paper — applied, with discipline, to the act of presenting himself. The resting page is almost entirely typography: a chronological list of projects running from the present back to 2004, each line set in a clean Helvetica-family sans on near-white paper. There is no grid of glossy hero shots, no gradient, no card chrome. The work is named, dated, and credited in plain text, and the imagery lives in the second layer — hover, expand, fullscreen — so the page resists at first glance and rewards exploration.

This is editorial minimalism, not startup minimalism. Where developer-tool sites use whitespace to feel "engineered," this page uses it the way a printed CV or a gallery wall label uses it: to let each entry breathe and to make the reading rhythm calm. The ink is a soft near-black (`{colors.ink}`, #181818) rather than pure black, which reads warmer and less harsh against the white — the same micro-contrast restraint you'd expect from someone who obsessed over text rendering on Retina displays.

The type does the differentiating work. Headings use a tighter, more display-weighted Helvetica cut with mild negative tracking; list items and body relax to normal tracking and generous 1.45–1.55 line-height so a dense chronology never feels cramped. Color is held almost entirely in reserve — the palette is a monochrome ramp from `{colors.ink-pure}` to `{colors.background}` with grays for hierarchy — and the single chromatic note is a restrained blue (`{colors.link}`) reserved for genuinely interactive text.

The whole system is an argument that confidence reads as quiet. A founder-and-interface-designer who has built some of the most-used UIs in the world doesn't need a flashy site; the credibility is in the list itself, and the design's job is to get out of its way.

**Key Characteristics:**
- Chronological text-list as the primary layout — work named and dated, not gridded
- Helvetica-family sans throughout; display cut for headings, text cut for body
- Soft near-black ink (`{colors.ink}`) on near-white — warm micro-contrast, never pure black on chrome
- Monochrome palette with grays for hierarchy; a single restrained blue (`{colors.link}`) as the only accent
- Generous line-height (1.45–1.55) for calm reading of a dense chronology
- Imagery deferred to hover/expand/fullscreen states — the resting page is pure typography
- Hairline dividers (`{colors.border-soft}`) instead of cards or boxes
- Mild negative letter-spacing on display headings, normal tracking on body

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, project titles, list items. Soft near-black, not pure black — warmer on the eye.
- **Background** (`{colors.background}`): The near-white page. The dominant surface; whitespace is the layout.
- **Pure Black** (`{colors.ink-pure}`): Reserved for maximum-emphasis hover/active text and dark overlays.

### Text Ramp (Monochrome Hierarchy)
- **Ink Secondary** (`{colors.ink-secondary}`): Secondary copy, label tags.
- **Ink Muted** (`{colors.ink-muted}`): Role/company/year metadata, captions.
- **Ink Faint** (`{colors.ink-faint}`): De-emphasized tertiary text.

### Surfaces
- **Surface** (`{colors.surface}`): Subtle off-white tint for tags and resting media wells.
- **Surface Soft** (`{colors.surface-soft}`): Image-card backing before media loads.

### Hairlines
- **Border** (`{colors.border}`): Image-card outlines, hairline frames.
- **Border Soft** (`{colors.border-soft}`): The between-row dividers — barely-there separation.

### Accent
- **Link / Primary** (`{colors.primary}`): The single chromatic note. Restrained blue for interactive text only — never decorative.

### Inverted
- **Overlay Dark** (`{colors.overlay-dark}`): Fullscreen image viewer background.
- **Overlay Ink** (`{colors.overlay-ink}`): Captions over dark imagery.

## Typography

### Font Family
- **Display / Headings**: `Helvetica Now Display`, falling back to `Helvetica Neue, Helvetica, Arial, sans-serif`
- **Text / Body**: `Helvetica Now Text`, falling back to `Helvetica Neue, Helvetica, Arial, sans-serif`
- The two optical cuts of the Helvetica Now family do the heavy lifting: the Display cut tightens for titles, the Text cut is tuned for sustained reading at list and body sizes.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 48px name/hero — maximum presence |
| `page-title` | Section / page titles |
| `project-title` | Individual project names |
| `list-item` | The core chronological list rows |
| `body-large` | Bio paragraph, lead copy |
| `body` | Standard reading text |
| `body-small` | Compact UI text, social links |
| `meta` | Role / company / year metadata |
| `caption` | Image captions |
| `label` | Small role/category tags |

### Principles
- **Two optical cuts, strict roles**: Display for titles (tighter), Text for everything read in quantity.
- **Tracking scales with size**: mild negative tracking on display headings (-0.9px to -1.4px), relaxing to normal at body sizes — never positive tracking on the sans.
- **Two weights**: 400 for reading, 500 for titles and labels. No bold-as-shouting.
- **Generous leading**: 1.45–1.55 line-height keeps a dense chronology calm and editorial.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is an 8px unit; the scale opens up dramatically at the top end (`{spacing.4xl}`–`{spacing.5xl}`) because vertical whitespace between sections is a primary design tool.

### Grid & Container
- Single-column, reading-width column — closer to a document than a marketing grid
- Left-aligned text throughout; no centered hero blocks
- Chronological list flows top-to-bottom, newest first
- Imagery, when expanded, can break to wider/fullscreen but the resting layout stays narrow

### Whitespace Philosophy
- **Document, not dashboard**: The page reads like a well-set CV — line spacing and section gaps carry the structure, not boxes.
- **Restraint as signal**: Emptiness communicates confidence; the work list doesn't need ornament.
- **Hairlines over containers**: Separation comes from `{colors.border-soft}` dividers and spacing, never from cards.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | The entire resting page — text on paper |
| Hairline (Level 1) | 1px `{colors.border-soft}` divider | Between list rows / sections |
| Framed media (Level 2) | 1px `{colors.border}` + `{rounded.md}` | Image cards |
| Fullscreen overlay (Level 3) | `{colors.overlay-dark}` backdrop | Expanded image viewer |

**Depth Philosophy**: There is almost no z-axis at rest. The page is deliberately flat — paper-like. Depth only appears when media expands into a darker overlay context. No drop shadows on text content; the design treats shadow as a tool for the image layer, not the type layer.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Text content, full-bleed media |
| `xs` | 3px | Inline chips |
| `sm` | 4px | Label tags |
| `md` | 8px | Image cards |
| `lg` | 13px | Featured media |
| `xl` | 21px | Large rounded media panels |
| `pill` | 9999px | Status pills / avatars (rare) |

## Components

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

### List & Rows
- **`list-row`** — The core unit: project name in `{typography.list-item}`, near-black ink, separated by a `{colors.border-soft}` hairline. On hover, ink deepens toward `{colors.ink-pure}`.
- **`meta-text`** — Role, company, and year in muted gray beneath each project.

### Text & Links
- **`link-inline`** — The only place color appears: `{colors.link}` blue for interactive text.
- **`bio-text`** — The about paragraph in `{typography.body-large}`.
- **`social-link`** — Twitter / Instagram / Email in plain ink.

### Media
- **`image-card`** — Soft surface backing, hairline border, `{rounded.md}`. Appears on hover/expand.
- **`image-featured`** — Larger media at `{rounded.lg}`.
- **`caption-text`** — Muted caption beneath imagery.
- **`overlay`** — Dark fullscreen viewer with light captions.

### Structure
- **`label-tag`** — Small role/category chip on a faint surface.
- **`divider`** — 1px `{colors.border-soft}` hairline; the only separator in the system.

## Do's and Don'ts

### Do
- Lead with typography — a clean chronological list, not a grid of hero images
- Use the soft near-black `{colors.ink}` for text, not pure black on chrome
- Keep line-height generous (1.45–1.55) so dense lists stay calm
- Reserve `{colors.link}` blue strictly for interactive text
- Separate with hairline dividers and whitespace, never cards
- Use mild negative tracking on display headings, normal tracking on body
- Defer imagery to hover/expand/fullscreen states
- Keep weights to 400 (read) and 500 (titles/labels)

### Don't
- Don't box content in cards or add drop shadows to text
- Don't introduce a second accent color — monochrome plus one blue is the whole palette
- Don't use positive letter-spacing on the sans
- Don't center hero blocks — the system is left-aligned and document-like
- Don't crowd the chronology; whitespace is load-bearing
- Don't add gradients, glows, or decorative chrome
- Don't use bold (700) as emphasis — 500 is the ceiling for titles

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, tighter section gaps, smaller display sizes |
| Tablet | 600–1024px | Standard reading column, expanded whitespace |
| Desktop | 1024–1400px | Full layout, generous vertical rhythm |
| Large Desktop | >1400px | Centered reading column, wide margins |

### Touch Targets
- List rows have comfortable vertical padding for tap
- Social/contact links spaced for thumb reach
- Expanded media uses fullscreen tap-to-dismiss

### Collapsing Strategy
- Display sizes scale down on mobile while keeping negative tracking proportional
- Chronological list stays single-column at all sizes (it already is)
- Metadata (role/company/year) may wrap beneath the title on narrow screens
- Expanded imagery goes edge-to-edge on mobile

### Image Behavior
- Resting page shows little to no imagery; media is revealed on interaction
- Expanded media maintains aspect ratio and hairline framing
- Fullscreen viewer uses the dark `{colors.overlay-dark}` backdrop at all sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Near-white `{colors.background}`
- Heading / body text: Soft near-black `{colors.ink}`
- Metadata: Muted gray `{colors.ink-muted}`
- Link: Restrained blue `{colors.link}`
- Divider: Hairline `{colors.border-soft}`

### Example Component Prompts
- "Create a chronological project list. Each row: project name at 20px Helvetica Now Text weight 400, color `{colors.ink}`, separated by a 1px `{colors.border-soft}` hairline, 12px vertical padding. Below the name, role · company · year at 15px in `{colors.ink-muted}`. On hover, deepen the title to `{colors.ink-pure}`. No cards, no shadows."
- "Design a hero with the name at 48px Helvetica Now Display weight 500, line-height 1.05, letter-spacing -1.4px, color `{colors.ink}`, on a `{colors.background}` page. Bio paragraph below at 20px weight 400, line-height 1.55."
- "Build an image card revealed on hover: `{colors.surface-soft}` backing, 1px `{colors.border}` outline, 8px radius, muted caption at 13px `{colors.ink-muted}` below."
- "Style inline links in `{colors.link}` blue — the only color on an otherwise monochrome page."

### Iteration Guide
1. Start with typography on white — the list IS the design
2. Use soft `{colors.ink}` (#181818), never pure black, for text on chrome
3. Hairlines and whitespace separate; never reach for cards
4. One accent only — `{colors.link}` blue, interactive text exclusively
5. Display cut tightens for titles, Text cut relaxes for reading
6. Imagery is a second layer — hover, expand, fullscreen, never the resting state

---

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