---
version: alpha
name: Upclose
description: Editorial studio minimalism — near-monochrome off-white canvas with deep near-black ink, a large refined sans for confident display lines, generous whitespace, hairline dividers, and sharp-to-soft radii. A design-driven web development studio that lets the work speak through restraint.
colors:
  # Canvas + ink
  background: "#f6f5f2"
  surface: "#ffffff"
  surface-soft: "#efeeea"
  ink: "#141414"
  ink-pure: "#000000"
  ink-secondary: "#575757"
  ink-muted: "#8a8a87"

  # Accent — quiet, used sparingly for links/hover
  primary: "#1a1a1a"
  accent: "#3b48ff"
  accent-soft: "#e6e8ff"

  # Lines + neutrals
  border: "#dedcd6"
  border-strong: "#c7c5be"
  divider: "#e7e5df"

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

  # States
  link-hover: "#3b48ff"
  surface-hover: "#ebe9e4"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.02
    letterSpacing: -2.16px
  display-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.68px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: -0.84px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: -0.44px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.2px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0px
  label-mono:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0.26px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.13px

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

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 14px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 22px
  button-primary-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 22px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 22px
    borderColor: "{colors.border-strong}"
  link-inline:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
  link-inline-hover:
    textColor: "{colors.link-hover}"
    typography: "{typography.body}"
  card-project:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.divider}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.accent}"
  divider:
    backgroundColor: "{colors.divider}"
    height: 1px
---

# Upclose Design System

## Overview

Upclose is a design-driven web development studio, and its own website is a quiet demonstration of the values it sells: restraint, precision, and letting refined work carry the page. The canvas is a warm off-white (`{colors.background}`) rather than pure white, paired with a deep near-black ink (`{colors.ink}`) — a combination that reads as paper-and-print rather than screen-and-glass. The result is editorial: closer to a well-set monograph than a typical SaaS landing page.

The typographic voice does most of the work. Large display lines set in a refined geometric-humanist sans at weight 500 with tight negative tracking (`{typography.display-hero}`) give the page confidence without shouting. Body copy relaxes to weight 400 at comfortable reading sizes, and a monospace label (`{typography.label-mono}`) appears for technical metadata — project years, capability tags, index numbers — borrowing the studio-portfolio convention of a "spec sheet" voice beside the prose.

Chrome is deliberately near-invisible. Separation comes from hairline dividers (`{colors.divider}`) and generous whitespace rather than boxes and shadows. Color is held in reserve: the palette is essentially monochrome until an electric accent (`{colors.accent}`) flashes on link hover and primary action states — a single, intentional spark against the grayscale. This is minimalism as a portfolio strategy, where the client work in the project cards is the only thing allowed to be loud.

**Key Characteristics:**
- Warm off-white canvas (`{colors.background}`) with deep near-black ink — paper, not screen
- Large refined sans display at weight 500 with tight negative tracking
- Monospace metadata labels (`{typography.label-mono}`) for years, tags, and index numbers
- Near-monochrome palette with a single electric accent (`{colors.accent}`) reserved for hover/primary states
- Hairline dividers and whitespace instead of cards, borders, and shadows
- Generous vertical rhythm — the work, not the chrome, is the focus
- Pill-radius actions against otherwise restrained, low-radius geometry

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headings, dark CTA fill. Near-black, slightly warm.
- **Off-White Canvas** (`{colors.background}`): Page background — warm paper tone.
- **Surface** (`{colors.surface}`): Pure-white cards and inputs that lift subtly off the canvas.

### Text
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, disabled, tertiary metadata.

### Accent
- **Accent Electric** (`{colors.accent}`): Reserved spark — link hover, primary hover, focus.
- **Accent Soft** (`{colors.accent-soft}`): Tinted accent wash for highlights.

### Lines & Neutrals
- **Border** (`{colors.border}`): Card outlines, input borders.
- **Border Strong** (`{colors.border-strong}`): Secondary button outline.
- **Divider** (`{colors.divider}`): Hairline section separators — the primary structuring device.
- **Surface Soft** (`{colors.surface-soft}`): Badge and quiet-fill backgrounds.

### On-Color
- **On Ink** (`{colors.on-ink}`): Canvas-tone text on dark fills.
- **On Primary** (`{colors.on-primary}`): White text on accent.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `Helvetica Neue, Arial, sans-serif` — a refined geometric-humanist sans standing in for the studio's display face.
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace` — for metadata labels and spec-sheet detail.

### 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` | 72px hero statement line |
| `display-large` | Major section openers |
| `section-heading` | Feature/section titles |
| `sub-heading` | Lighter sub-sections |
| `card-title` | Project / card headings |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | Dense UI text, captions |
| `button-ui` | Buttons, nav links |
| `label-mono` | Years, tags, index numbers |
| `caption` | Metadata, footnotes |

### Principles
- **Tracking scales with size**: aggressive negative tracking at display (-2.16px), relaxing to neutral by body — display lines feel set, body feels read.
- **Weight 500 is the loudest**: headings sit at medium, never bold. Confidence comes from scale and tracking, not heaviness.
- **Mono as the spec voice**: monospace appears only for technical metadata, echoing studio-portfolio captions.

## Layout

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

### Grid & Container
- Max content width approximately 1280px with wide outer margins
- Hero: left-aligned single statement line with abundant top space
- Project listings: full-width rows or a 2-column grid, separated by hairline dividers
- Metadata columns (year, role, tags) aligned in a mono spec strip

### Whitespace Philosophy
- **Editorial breathing room**: large vertical gaps (`{spacing.4xl}`–`{spacing.5xl}`) between sections.
- **Hairlines over boxes**: separation comes from 1px dividers (`{colors.divider}`), not borders or shadows.
- **The work is the loudest element**: chrome stays monochrome and quiet so client imagery carries the color.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Dividers, full-bleed media |
| `xs` | 2px | Tiny inline elements |
| `sm` | 4px | Small functional containers |
| `md` | 8px | Inputs, list items |
| `lg` | 14px | Project cards, media frames |
| `pill` | 9999px | Buttons, badges, tags |

## Components

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

### Buttons
- **`button-primary`** — Ink fill, canvas-tone text, pill radius. Hover flips to the electric accent.
- **`button-secondary`** — White surface with a strong hairline outline.

### Cards
- **`card-project`** — White surface lifted off the canvas, soft `{rounded.lg}` radius, thin border.

### Pills & Badges
- **`badge`** — Quiet soft-fill pill in monospace for capability tags.

### Navigation
- **`nav-bar`** — Minimal header on the canvas tone with a bottom hairline divider.

### Inputs
- **`input`** — White surface, thin border; focus switches the border to the electric accent.

## Do's and Don'ts

### Do
- Use the warm off-white canvas (`{colors.background}`) — not pure white
- Keep weight 500 as the heaviest display weight
- Use hairline dividers (`{colors.divider}`) to structure the page
- Reserve the electric accent (`{colors.accent}`) for hover and primary states only
- Use monospace (`{typography.label-mono}`) for years, tags, and index metadata
- Let client work carry the color; keep chrome monochrome

### Don't
- Don't use heavy bold (700+) on display headings
- Don't box content in shadows and borders where a hairline will do
- Don't scatter the accent decoratively — it loses its spark
- Don't tighten body tracking; only display lines compress
- Don't replace the warm canvas with cold pure white

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, dividers persist |
| Tablet | 600–1024px | 2-column project grid begins |
| Desktop | 1024–1280px | Full layout, mono spec strip aligns |
| Large | >1280px | Centered with wide editorial margins |

### Collapsing Strategy
- Hero display 72px → scales down proportionally, keeps negative tracking
- Navigation: inline links → minimal menu
- Project rows: spec columns stack under the title on mobile
- Section spacing: `{spacing.5xl}` → tighter on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: warm off-white `{colors.background}`
- Heading/body text: Ink `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Divider: `{colors.divider}`
- Accent (hover/primary): `{colors.accent}`
- Primary CTA: Ink fill `{colors.ink}`

### Example Component Prompts
- "Create a hero on warm off-white `{colors.background}`. Left-aligned statement line at 72px Inter weight 500, line-height 1.02, letter-spacing -2.16px, color `{colors.ink}`. Mono eyebrow label `{typography.label-mono}` above it in `{colors.ink-secondary}`."
- "Design a project row: title at 22px Inter weight 500, a monospace spec strip (year · role · tags) in `{colors.ink-secondary}`, separated from the next row by a 1px `{colors.divider}` hairline. No card, no shadow."
- "Build a pill button: `{colors.ink}` fill, `{colors.on-ink}` text, 9999px radius, 12px 22px padding, 15px Inter weight 500. Hover fills with `{colors.accent}`."

### Iteration Guide
1. Start from the warm off-white canvas, never pure white
2. Structure with hairline dividers before reaching for cards
3. Keep everything monochrome except the single accent on hover/primary
4. Use monospace only for technical metadata
5. Display lines compress with negative tracking; body stays neutral

---

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