---
version: alpha
name: Daniel Sun
description: Studio-folio minimalism — Inter Tight headlines with tight negative tracking over an off-white canvas, near-black ink, an electric blue accent for links and CTAs, and Caveat handwriting for personality. Big soft radii (20–32px) on cards and buttons.
colors:
  # Canvas + ink
  background: "#f5f5f5"
  surface: "#ffffff"
  surface-soft: "#f2f2f2"
  ink: "#000000"
  ink-soft: "#1f1f1f"

  # Accent
  primary: "#0099ff"        # electric blue — links, CTAs
  highlight: "#ffd500"      # yellow text highlight / marker

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

  # Neutral scale
  ink-secondary: "#767676"
  ink-muted: "#8c8c8c"
  border: "#d5d5d5"
  border-soft: "#e6e6e6"
  divider: "#f2f2f2"

  # Overlays (flattened over canvas)
  overlay-scrim: "#7a7a7a"  # was rgba(0,0,0,0.5) over canvas
  glass-soft: "#fbfbfb"     # was rgba(255,255,255,0.6) over canvas

typography:
  display-hero:
    fontFamily: "Inter Tight, Inter, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -2px
  section-heading:
    fontFamily: "Inter Tight, Inter, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Inter Tight, Inter, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.6px
  card-title:
    fontFamily: "Inter Tight, Inter, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter Tight, Inter, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.2px
  caption:
    fontFamily: "Inter, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  accent-script:
    fontFamily: "Caveat, cursive"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-accent:
    backgroundColor: "{colors.primary}"
    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}"
  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 32px
    borderColor: "{colors.border-soft}"
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px
    borderColor: "{colors.divider}"
  badge:
    backgroundColor: "{colors.highlight}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  nav-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
    borderColor: "{colors.border-soft}"
---

# Daniel Sun Design System

## Overview

Daniel Sun's portfolio is a designer's self-folio built in Framer — the kind of site whose job is to prove the maker can be trusted with a brand. It reads as quiet and confident: an off-white canvas (`{colors.background}`) instead of glaring pure white, pure-black ink (`{colors.ink}`) for headlines and copy, and exactly one loud color — an electric blue (`{colors.primary}`) reserved for links and the moments that need to convert. Nothing competes for attention; the work in the project cards does the talking.

Typography carries the personality. Headlines are set in Inter Tight with meaningful negative tracking, giving them a compact, modern editorial weight, while body copy stays in plain Inter at a comfortable reading measure. The signature flourish is Caveat — a casual handwriting face — used sparingly for annotations and personal asides ("tap this tiny button"), the human fingerprint on an otherwise systematic layout. That contrast between engineered sans and looped script is the brand's whole tone in one move.

Geometrically the system is generous and rounded. Cards, buttons and media all use large soft radii (20–32px), and primary actions go fully pill-shaped. Buttons are high-contrast: a black pill for the main CTA, the blue accent for emphasis, and a bordered white pill for the quieter secondary path. Depth is implied through subtle borders and light surface tints rather than heavy shadows — the page feels flat, calm, and printed.

A second accent, a marker yellow (`{colors.highlight}`), shows up as a text-highlight swipe behind key phrases, the visual equivalent of underlining a sentence with a highlighter. Used against black ink it stays warm and legible without ever fighting the blue.

**Key Characteristics:**
- Off-white canvas (`{colors.background}`) instead of pure white — softer, gallery-like
- Inter Tight headlines with negative tracking (-2px at hero) over plain Inter body
- Caveat handwriting as the personal/annotation voice
- Single electric-blue accent (`{colors.primary}`) for links and conversion moments
- Marker-yellow (`{colors.highlight}`) text highlight as secondary accent
- Large soft radii (20–32px) on cards/media, full pills on buttons
- Black pill primary CTA, blue accent CTA, bordered white secondary
- Depth from borders + surface tints, not heavy shadows

## Colors

### Primary
- **Off-White Canvas** (`{colors.background}`): The page background — warm-neutral, not pure white.
- **Pure Black** (`{colors.ink}`): Headlines, body text, primary CTA fill.
- **White Surface** (`{colors.surface}`): Cards, nav, secondary buttons.

### Accent
- **Electric Blue** (`{colors.primary}`): Links, accent CTA, conversion emphasis.
- **Marker Yellow** (`{colors.highlight}`): Text-highlight swipe behind key phrases, badges.

### Neutral Scale
- **Ink Secondary** (`{colors.ink-secondary}`): Secondary text, captions.
- **Ink Muted** (`{colors.ink-muted}`): Tertiary/meta text.
- **Border** (`{colors.border}`): Input and secondary-button outlines.
- **Border Soft** (`{colors.border-soft}`): Card outlines, nav border.
- **Divider** (`{colors.divider}`): Subtle separators, soft card tint.

### On-Color
- **On Primary** (`{colors.on-primary}`): White text on blue.
- **On Ink** (`{colors.on-ink}`): White text on black.

## Typography

### Font Family
- **Headings**: `Inter Tight`, fallback `Inter, sans-serif`
- **Body**: `Inter`, fallback `sans-serif`
- **Accent / handwriting**: `Caveat`, fallback `cursive`

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 64px hero headline, -2px tracking |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections, intros |
| `card-title` | Project / feature card titles |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-small` | Captions, secondary UI |
| `button-ui` | Buttons, nav links |
| `caption` | Metadata, tags |
| `accent-script` | Caveat handwriting asides |

### Principles
- **Tight headlines, relaxed body**: Inter Tight pulls headlines together with negative tracking; Inter body stays at neutral spacing for readability.
- **Handwriting as personality**: Caveat appears only for small human annotations, never for primary content.
- **Two voices, clear roles**: sans for the system, script for the person.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, with generous section gaps (`{spacing.3xl}`–`{spacing.4xl}`) between stacked content blocks.

### Grid & Container
- Centered single-column reading width for narrative sections
- Project work shown as large rounded media cards, one or two per row
- Pill nav floating near the top

### Whitespace Philosophy
- **Calm and roomy**: large vertical gaps let each project card breathe.
- **One focal accent per view**: blue marks the single action that matters; everything else stays monochrome.
- **Soft over sharp**: rounded corners everywhere reinforce the friendly, approachable tone.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Small inline elements |
| `md` | 16px | Inputs, soft cards |
| `lg` | 20px | Media, large containers |
| `xl` | 24px | Cards |
| `2xl` | 32px | Feature cards, hero media |
| `pill` | 9999px | Buttons, nav, badges |

## Components

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

### Buttons
- **`button-primary`** — Black pill, white text. The default CTA.
- **`button-accent`** — Electric-blue pill for conversion emphasis.
- **`button-secondary`** — White pill with `{colors.border}` outline.

### Cards
- **`card`** — White surface, 32px radius, soft border.
- **`card-soft`** — Tinted surface for quieter blocks.

### Navigation
- **`nav-bar`** — Floating white pill, bordered, Inter Tight links.

### Badges
- **`badge`** — Marker-yellow pill, black text.

## Do's and Don'ts

### Do
- Keep the canvas off-white (`{colors.background}`), not pure white
- Use Inter Tight with negative tracking on headlines, plain Inter for body
- Reserve electric blue (`{colors.primary}`) for links and the single key action
- Use Caveat sparingly for human annotations
- Use large soft radii and full pills on buttons

### Don't
- Don't add a second saturated UI color beyond blue + yellow highlight
- Don't use heavy drop shadows — depth comes from borders and tints
- Don't set headline tracking positive
- Don't use Caveat for body or primary content
- Don't sharpen corners — the system is rounded throughout

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, pill nav collapses |
| Tablet | 600–1024px | 1–2 card rows, expanded padding |
| Desktop | >1024px | Full layout, centered reading width, generous gaps |

### Collapsing Strategy
- Hero: 64px → scales down, keeps proportional negative tracking
- Project cards: 2-up → single column
- Section spacing: 96px+ → ~48px on mobile
- Nav: floating pill → compact / menu

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Off-White `{colors.background}`
- Heading/body text: Black `{colors.ink}`
- Accent CTA / links: Electric Blue `{colors.primary}`
- Highlight: Marker Yellow `{colors.highlight}`
- Card surface: White `{colors.surface}`

### Example Component Prompts
- "Hero on off-white `{colors.background}`. Headline 64px Inter Tight weight 600, letter-spacing -2px, color `{colors.ink}`. Subtitle 20px Inter weight 400 in `{colors.ink-secondary}`. Black pill CTA (`{colors.ink}`, pill radius, 14px 28px) plus bordered white secondary pill."
- "Project card: white surface, 32px radius, 1px `{colors.border-soft}` border, 32px padding. Title 22px Inter Tight weight 500. Body 17px Inter in `{colors.ink-secondary}`."
- "Highlight badge: `{colors.highlight}` fill, black text, pill radius, 4px 12px padding, 13px Inter weight 500."
- "Floating nav pill: white surface, `{colors.border-soft}` border, pill radius, Inter Tight 16px links in `{colors.ink}`, accent link in `{colors.primary}`."

### Iteration Guide
1. Off-white canvas, not pure white — that warmth is the brand
2. Blue is the only conversion color; keep everything else monochrome
3. Inter Tight tight, Inter relaxed; Caveat only for human asides
4. Big radii everywhere, full pills on actions
5. Borders + surface tints for depth, never heavy shadows

---

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