---
version: alpha
name: Kons
description: A Dynamic-Island portfolio — one black pill on a near-white canvas that morphs between states. Inter at weight 500 only, micro type (12–14px) with tight negative tracking, fully-round everything, and vivid single-hue function buttons (orange/blue/green) against pure black chrome.
colors:
  # Canvas + ink
  background: "#fafafa"      # hsl(0 0% 98%) — page canvas, white-10
  surface: "#000000"         # the island pill itself is pure black
  surface-hover: "#303030"   # hsl(0 0% 19%) — gray-800 link hover
  ink: "#0a0a0a"             # primary text on the off-white canvas
  ink-on-canvas: "#000000"   # selection text / text on white
  ink-secondary: "#4b5563"   # gray-600 muted copy — passes on canvas and island

  # Function-button hues — single saturated tone each
  accent: "#f57600"          # hsl(28 100% 48%) — About (orange)
  blue: "#0091f5"            # hsl(206 100% 48%) — Links (blue)
  green: "#00b84b"           # hsl(144 100% 36%) — Home (green)

  # Selection
  selection-bg: "#fafafa"
  selection-text: "#000000"

  # Focus ring
  ring: "#3b82f6"            # rgb(59 130 246) — default focus ring

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

typography:
  name-heading:
    fontFamily: "Inter, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.28px
  body:
    fontFamily: "Inter, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: -0.28px
  caption:
    fontFamily: "Inter, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: -0.12px
  link-label:
    fontFamily: "Inter, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: -0.28px

spacing:
  micro: 2px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 16px
  xl: 20px
  2xl: 24px

rounded:
  xs: 4px      # 0.25rem — small focus targets
  pill-sm: 28px  # 1.75rem — the island resting state (rounded-7)
  pill-lg: 32px  # 2rem — the island expanded state (rounded-8)
  full: 9999px # circular buttons and link chips

components:
  # The island shell — pure black morphing pill
  island:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-black}"
    rounded: "{rounded.pill-sm}"
    height: 32px
    width: 60px

  island-expanded:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-black}"
    rounded: "{rounded.pill-lg}"
    padding: 20px 24px

  # Circular function buttons — single hue each
  button-about:
    backgroundColor: "{colors.accent}"
    rounded: "{rounded.full}"
    width: 36px
    height: 36px

  button-links:
    backgroundColor: "{colors.blue}"
    rounded: "{rounded.full}"
    width: 36px
    height: 36px

  button-home:
    backgroundColor: "{colors.green}"
    rounded: "{rounded.full}"
    width: 24px
    height: 24px

  # Link chip inside the expanded pill
  link-chip:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-black}"
    typography: "{typography.link-label}"
    rounded: "{rounded.full}"
    padding: 4px 6px

  link-chip-hover:
    backgroundColor: "{colors.surface-hover}"
    textColor: "{colors.on-black}"
    typography: "{typography.link-label}"
    rounded: "{rounded.full}"
    padding: 4px 6px

  # Inline text link
  link-inline:
    textColor: "{colors.on-black}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"

  # Avatar
  avatar:
    rounded: "{rounded.full}"
    width: 24px
    height: 24px

  # Muted body copy
  text-muted:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body}"
---

# Kons Design System

## Overview

Kons (kons.fyi) is a single-purpose designer portfolio that compresses an entire personal site into one object: a black pill floating dead-center on a near-white canvas. It is a direct homage to Apple's Dynamic Island, and the whole experience is the morph — the pill expands, contracts, and re-shapes to reveal a name, an about paragraph, a row of links, and a menu. There is no page scroll, no layout grid, no header and footer. The design system is therefore tiny by deliberate constraint: a handful of colors, one font at one weight, and a radius vocabulary that is almost entirely circular.

The canvas is `{colors.background}` (`#fafafa`, a warm off-white that reads as paper rather than glare) and the island chrome is pure black (`{colors.surface}`) with white text (`{colors.ink}`). Against that monochrome shell sit three saturated single-hue function buttons — orange for About (`{colors.accent}`), blue for Links (`{colors.blue}`), green for Home (`{colors.green}`) — each a perfectly circular dot. These are the only color in the entire system, and they map to function the way Apple's status indicators do: hue is a control, never decoration.

Typography is radically restrained. Everything is Inter at weight 500 — there is no 400, no 600, no bold except a browser-default `<b>`. Type sizes never exceed 14px; the name, the body paragraph, and the link labels all live at 12–14px with tight negative tracking (-0.28px at 14px). The smallness is the point: the content has to fit inside a pill, so the type is sized to the object rather than the viewport.

**Key Characteristics:**
- Single-object UI — the whole portfolio is one morphing black pill, not a page
- Pure black chrome (`{colors.surface}`) on a warm off-white canvas (`{colors.background}`)
- Three single-hue function buttons (orange/blue/green) as the only color, mapped to function
- Inter at weight 500 exclusively — one font, one weight, no bold
- Micro type scale (12–14px) with tight negative letter-spacing
- Radius is almost entirely circular: `rounded-full` chips/dots and ~28–32px island corners
- Animated morph transitions (350ms ease-out) with scale + opacity + blur reveals
- Lottie-driven icon buttons for menu affordances

## Colors

### Canvas & Ink
- **Canvas** (`{colors.background}`): The warm off-white page (`#fafafa`). Fills the entire viewport behind the centered island.
- **Island Black** (`{colors.surface}`): Pure black pill — the only surface in the system.
- **Surface Hover** (`{colors.surface-hover}`): `#303030`, the gray-800 background that appears under a link chip on hover.
- **Ink** (`{colors.ink}`): White text on the black island.
- **Ink Secondary** (`{colors.ink-secondary}`): `#9ca3af`, muted gray-500 for the about paragraph body; emphasized words flip to white.

### Function Accents
- **About Orange** (`{colors.accent}`): The About menu dot. The single warm accent.
- **Links Blue** (`{colors.blue}`): The Links menu dot.
- **Home Green** (`{colors.green}`): The Home button dot — the "back to rest" control.

### System
- **Selection Bg** (`{colors.selection-bg}`): Off-white text-selection highlight.
- **Focus Ring** (`{colors.ring}`): Default blue focus ring for keyboard navigation.

## Typography

### Font Family
- **Primary**: `Inter`, loaded via WebFont with fallback `sans-serif`. Weight **500 only**.
- No monospace, no serif, no secondary family.

### Hierarchy

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

| Token | Use |
|---|---|
| `name-heading` | The "Kons" name in the collapsed header (14px / 500) |
| `body` | About paragraph and inline links (14px / 500) |
| `caption` | "Hello, I'm" eyebrow and small labels (12px / 500) |
| `link-label` | Text labels inside link chips (14px / 500) |

### Principles
- **One weight, no exceptions**: Inter 500 everywhere. Hierarchy comes from color (white vs gray-500) and position, never weight.
- **Micro-scale by constraint**: Nothing exceeds 14px because everything must fit inside the pill.
- **Tight tracking**: Negative letter-spacing (-0.28px at 14px, -0.12px at 12px) keeps short strings dense and tidy at small sizes.

## Layout

### Structure
- Full-viewport flex container, `items-center justify-center`, 8px page padding — the island is always dead-center.
- No grid, no columns, no scroll. The island resizes itself between states (`min-w-96 max-w-96` for the about panel, capped to `calc` on small screens).

### Spacing System
The complete scale lives in the `spacing:` token block above. Internal padding is small and pill-relative: the expanded panel uses `{spacing.xl}` / `{spacing.2xl}` (20–24px) horizontal padding; link chips use `{spacing.xs}` / `{spacing.sm}` (4–6px).

### Whitespace Philosophy
- **Object, not page**: The "whitespace" is the entire off-white viewport surrounding one small black object. The emptiness frames the island like a single artwork on a gallery wall.
- **No sections**: There is nothing to scroll past. State changes happen in place via morph.

## Motion & Depth

Motion IS the design. The island has no shadow system; depth is implied entirely by contrast (black on off-white) and by animated transforms.

| Treatment | Detail |
|---|---|
| Morph | Width/height/radius animate between rest (`{rounded.pill-sm}`) and expanded (`{rounded.pill-lg}`) over **350ms ease-out** |
| Reveal | Hidden panels enter via `scale-50 → 100`, `opacity-0 → 100`, `blur-sm → 0`, staggered with `delay-150` |
| Hover | Link chips fade to `{colors.surface-hover}` background over 350ms |
| Icons | Lottie players (`dotlottie-player`) drive the About / Links / Home button glyphs |

## Shapes

| Token | Value | Use |
|---|---|---|
| `xs` | 4px | Small focus targets, inline link hit-area |
| `pill-sm` | 28px | Island resting-state corner radius |
| `pill-lg` | 32px | Island expanded-state corner radius |
| `full` | 9999px | Every dot, avatar, and link chip |

Roundness is the brand. Almost nothing in the system has a sharp corner — the chrome reads as a soft physical object.

## Components

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

### The Island
- **`island`** — The pure-black resting pill (60×32px, `{rounded.pill-sm}`).
- **`island-expanded`** — Same black surface, larger radius (`{rounded.pill-lg}`), 20×24px padding, holding the active panel.

### Function Buttons
- **`button-about`** — Orange (`{colors.accent}`) circle, 36px.
- **`button-links`** — Blue (`{colors.blue}`) circle, 36px.
- **`button-home`** — Green (`{colors.green}`) circle, 24px. The reset control.

### Links
- **`link-chip`** — Black pill chip inside the expanded Links panel; hover fades to `{colors.surface-hover}`.
- **`link-inline`** — White underlined inline link inside the about paragraph (`ds:hover:no-underline`).

## Do's and Don'ts

### Do
- Keep the whole UI as one centered morphing object on `{colors.background}`
- Use Inter at weight 500 only — express hierarchy through color and position
- Reserve the three hues for function buttons; map hue to control, not decoration
- Keep all type at 12–14px with negative tracking
- Make everything round — `{rounded.full}` for dots/chips, ~28–32px for the island
- Animate state changes with the 350ms ease-out morph + scale/opacity/blur reveal

### Don't
- Don't add a second font, a bold weight, or type above 14px
- Don't use the accent hues as backgrounds for text or large surfaces
- Don't introduce sharp corners or CSS borders — the system is shadowless and round
- Don't build a scrolling page or multi-section layout; everything lives in the pill
- Don't put dark text on the black island or white-on-white in panels

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Small (max-sm) | <640px | About panel min/max width clamps to `calc` instead of fixed `24rem` |
| Default | ≥640px | About panel fixed at `min-w-96 max-w-96` (24rem) |

### Touch Targets
- Menu dots are 36px circles (About/Links), comfortably tappable
- Home button is a 24px dot enlarged by its surrounding Lottie hit-area
- Link chips use `px-1.5 py-1` plus full-round hit-area

### Collapsing Strategy
- The island is already a single centered object, so there is no layout to reflow — only the about panel narrows to the viewport via `calc` clamps
- 8px viewport padding guarantees the pill never touches the screen edge

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: warm off-white `{colors.background}`
- Chrome: pure black `{colors.surface}`
- Text on chrome: white `{colors.ink}`
- Muted text: gray-500 `{colors.ink-secondary}`
- Function hues: orange `{colors.accent}`, blue `{colors.blue}`, green `{colors.green}`

### Example Component Prompts
- "Build a centered Dynamic-Island pill: pure black `{colors.surface}` background, 60×32px, 28px radius, on an off-white `{colors.background}` page. Inter weight 500 only."
- "Add three circular function buttons in a row: orange `{colors.accent}`, blue `{colors.blue}`, green `{colors.green}`, each `{rounded.full}`, 36px. Hue maps to function, never decoration."
- "Animate the pill expanding to 32px radius with a panel that reveals via scale-50→100, opacity-0→100, blur-sm→0 over 350ms ease-out with a 150ms stagger."
- "Render an about paragraph in Inter 14px weight 500, color gray-500 `{colors.ink-secondary}`, with emphasized words flipped to white `{colors.ink}` and an inline underlined link."

### Iteration Guide
1. Everything is one morphing object — never add a page, grid, or scroll
2. Inter 500 only; hierarchy from color/position, not weight
3. Color is functional: three hues, three controls
4. Round everything; the chrome is a soft physical object
5. Motion (350ms ease-out morph + blur/scale/opacity reveal) is the identity, not an enhancement

---

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