---
version: alpha
name: Public Squares
description: Motion-first dark portfolio for a creative engineer — near-black canvas, luminous off-white type, an electric gradient accent that runs through links and CTAs, oversized editorial headlines, and image-forward project cards built for GSAP/Lottie/parallax motion.

colors:
  # Canvas + ink
  background: "#0a0a0c"
  surface: "#121216"
  surface-soft: "#1a1a20"
  ink: "#f5f5f3"
  ink-secondary: "#a8a8b0"
  ink-muted: "#6c6c78"

  # Gradient accent — the motion brand
  primary: "#6a5cff"
  accent-cyan: "#3fd5ff"
  accent-pink: "#ff5c97"
  gradient-start: "#6a5cff"
  gradient-end: "#3fd5ff"

  # Lines + chrome
  border: "#26262e"
  border-strong: "#34343e"

  # Interactive
  link: "#c9c4ff"
  focus-ring: "#6a5cff"
  surface-hover: "#1f1f26"

  # On-color
  on-primary: "#0a0a0c"
  on-ink: "#0a0a0c"

typography:
  display-hero:
    fontFamily: "Sora, Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.04
    letterSpacing: -2px
  section-heading:
    fontFamily: "Sora, Inter, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.12
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Sora, Inter, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.6px
  card-title:
    fontFamily: "Sora, Inter, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Sora, Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  label-mono:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 1.5px
  caption:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    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: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.accent-cyan}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  button-ghost-hover:
    backgroundColor: "{colors.surface-hover}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
    borderColor: "{colors.border}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  card-project:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 0px
    borderColor: "{colors.border}"
  card-title-text:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.lg}"
    padding: 20px 24px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 18px 32px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.focus-ring}"
  faq-item:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-large}"
    rounded: "{rounded.none}"
    padding: 20px 0px
    borderColor: "{colors.border}"
---

# Public Squares Design System

## Overview

Public Squares is the portfolio of a creative engineer, and the site reads like a showreel rendered in HTML — a near-black canvas (`{colors.background}`) that lets motion, gradients, and image-forward project cards do the talking. Where a typical agency site leans on whitespace, this one leans on darkness: the void around each element makes animation legible and gradients glow. Everything is staged so that a parallax scroll, a Lottie loop, or a GSAP timeline can run without the chrome competing for attention.

Typography is editorial and oversized. Headlines use a geometric grotesk (mapped here to `Sora`) at 64px with tight negative tracking, giving them the confident, slightly architectural feel of a creative studio's title cards. Body copy drops to `Inter` for calm readability against the dark surface, and a monospace label voice (`JetBrains Mono`, uppercase, wide tracking) tags technical sections — a nod to the "engineer" half of "creative engineer."

The brand's signature is its gradient accent. A violet-to-cyan ramp (`{colors.gradient-start}` → `{colors.gradient-end}`) runs through the primary CTA, link hovers, and decorative motion washes. Pink (`{colors.accent-pink}`) appears as a third gradient stop for warmth. Because the accent is energetic and saturated, the rest of the palette stays disciplined: off-white ink, two greys for hierarchy, and hairline borders the color of smoke.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) tuned for motion and gradient legibility
- Violet → cyan gradient accent (`{colors.gradient-start}` → `{colors.gradient-end}`) through CTAs and link hovers
- Oversized editorial headlines in `Sora` with tight negative tracking (-2px at 64px)
- `Inter` body and `JetBrains Mono` uppercase technical labels
- Image-forward project cards with overlaid titles, built for carousel/parallax
- Pill-shaped buttons, hairline borders, generous vertical rhythm
- Award-credentialed (CSSDA) motion-first aesthetic: parallax, Lottie, GSAP

## Colors

### Canvas & Ink
- **Canvas Black** (`{colors.background}`): Page background. Near-black with a hint of blue.
- **Surface** (`{colors.surface}`): Cards, inputs, badges — one step up from the canvas.
- **Surface Soft** (`{colors.surface-soft}`): Raised panels, hover fills on darker contexts.
- **Ink** (`{colors.ink}`): Primary text and headings — luminous off-white, not pure white.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, captions.
- **Ink Muted** (`{colors.ink-muted}`): Metadata, disabled, placeholder text.

### Gradient Accent
- **Primary Violet** (`{colors.primary}`): Primary CTA fill, gradient start, focus ring.
- **Accent Cyan** (`{colors.accent-cyan}`): Gradient end, hover states.
- **Accent Pink** (`{colors.accent-pink}`): Third gradient stop, warm highlights.

### Lines & Interactive
- **Border** (`{colors.border}`): Hairline card and divider lines.
- **Border Strong** (`{colors.border-strong}`): Ghost button outlines, input borders.
- **Link** (`{colors.link}`): Inline links — pale violet.
- **Surface Hover** (`{colors.surface-hover}`): Hover fill on ghost surfaces.

## Typography

### Font Family
- **Display / UI**: `Sora`, fallbacks `Inter, Helvetica Neue, Arial, sans-serif`
- **Body**: `Inter`, fallbacks `Helvetica Neue, Arial, sans-serif`
- **Mono**: `JetBrains Mono`, fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`

### 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 — studio title-card impact |
| `section-heading` | Section titles (Works, About, Contact) |
| `sub-heading` | Sub-sections, large card headings |
| `card-title` | Project card titles |
| `body-large` | Intros, FAQ questions |
| `body` | Standard reading copy |
| `body-small` | Compact UI text |
| `button-ui` | Buttons and nav links |
| `label-mono` | Uppercase technical labels / eyebrows |
| `caption` | Metadata, image credits |

### Principles
- **Editorial scale**: Headlines run large with tight negative tracking — confident, architectural.
- **Two voices**: `Sora` announces, `Inter` reads. Mono is reserved for technical/eyebrow labels.
- **Luminous, not blinding**: Text is off-white (`{colors.ink}`), never pure `#ffffff`, easing dark-mode glare.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px; sections breathe at `{spacing.4xl}`–`{spacing.5xl}`.

### Grid & Container
- Max content width ~1200px, centered
- Hero: single-column, left- or center-aligned oversized headline
- Works/Examples: horizontal carousels with arrow navigation
- Project cards: image-forward grid, overlaid titles
- FAQ: full-width accordion with hairline dividers

### Whitespace Philosophy
- **Darkness as space**: The black canvas does what whitespace does on light sites — isolates each element so motion reads.
- **Generous vertical rhythm**: Large gaps between sections let parallax and Lottie loops play.
- **Restraint around the accent**: The gradient is loud, so it appears sparingly against a quiet field.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | Canvas, no border | Page background, text blocks |
| Hairline (Level 1) | 1px `{colors.border}` | Cards, dividers, badges |
| Raised (Level 2) | `{colors.surface}` fill + hairline | Project cards, inputs |
| Glow (Accent) | Gradient wash / blurred violet-cyan halo | Hero background, hover emphasis |
| Focus (Accessibility) | 2px `{colors.focus-ring}` outline | Keyboard focus on interactive elements |

**Depth Philosophy**: Depth comes from surface lightness steps and gradient glow, not heavy drop shadows. A blurred violet-cyan halo behind hero content and on hover provides the only "lift" — everything else is flat planes separated by hairlines.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Dividers, FAQ rows, full-bleed media |
| `xs` | 4px | Small chips |
| `sm` | 8px | Inputs |
| `md` | 12px | Small cards, image masks |
| `lg` | 16px | Project cards |
| `xl` | 24px | Large feature panels |
| `pill` | 9999px | Buttons, badges, tags |

## Components

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

### Buttons
- **`button-primary`** — Violet fill, dark text, pill. Hover ramps toward cyan (the gradient in motion).
- **`button-ghost`** — Transparent on canvas with a `{colors.border-strong}` outline; border goes violet on hover.

### Cards
- **`card`** — `{colors.surface}` fill, hairline border, `{rounded.lg}`.
- **`card-project`** — Image-forward, zero padding, title overlaid; built for carousel + parallax.

### Badges & Labels
- **`badge`** — Surface chip with mono uppercase text and a hairline border.

### Navigation
- **`nav-bar`** — Transparent over the canvas, off-white links, hamburger toggle on mobile.

### Inputs & FAQ
- **`input`** — Surface fill, strong hairline; focus switches the border to `{colors.focus-ring}`.
- **`faq-item`** — Full-width row with `+` toggle and a bottom hairline divider.

## Do's and Don'ts

### Do
- Keep the canvas near-black (`{colors.background}`) so motion and gradients read
- Use the violet → cyan gradient only on CTAs, link hovers, and atmospheric glows
- Set headlines in `Sora` with tight negative tracking
- Keep body text off-white (`{colors.ink}`), never pure white
- Use hairline borders (`{colors.border}`) instead of heavy shadows
- Reserve mono uppercase for technical/eyebrow labels

### Don't
- Don't put the gradient accent on large fields — it's an accent, not a background
- Don't use pure black or pure white — the system runs on near-black and off-white
- Don't add heavy drop shadows; depth is surface steps + gradient glow
- Don't set primary to the page background — the violet CTA must pop off the canvas
- Don't crowd sections; the vertical rhythm is what lets motion breathe

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hamburger nav, 64px hero scales down |
| Tablet | 600–1024px | 2-up project grids, carousels keep arrows |
| Desktop | 1024–1400px | Full layout, centered ~1200px content |
| Large | >1400px | Generous side margins, centered |

### Collapsing Strategy
- Hero: 64px headline scales down, tracking stays proportionally tight
- Nav: horizontal links → hamburger menu
- Works/Examples: carousels become swipe; arrows persist
- Project cards: multi-column → single column, image-forward maintained
- Section spacing: `{spacing.5xl}` → roughly `{spacing.3xl}` on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: `{colors.background}`
- Heading text: `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Primary CTA: `{colors.primary}` (gradient toward `{colors.accent-cyan}`)
- Border: `{colors.border}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts
- "Hero on near-black `{colors.background}`. Headline 64px Sora weight 700, line-height 1.04, letter-spacing -2px, color `{colors.ink}`. Subhead 18px Inter `{colors.ink-secondary}`. Pill CTA filled `{colors.primary}` with dark text, hovering toward `{colors.accent-cyan}`. Soft blurred violet-cyan glow behind."
- "Project card: `{colors.surface}` fill, 1px `{colors.border}`, 16px radius, image-forward with overlaid 22px Sora title."
- "Mono eyebrow label: 12px JetBrains Mono uppercase, 1.5px tracking, `{colors.ink-secondary}`."

### Iteration Guide
1. Canvas stays near-black; off-white ink, never pure white/black
2. Gradient (violet → cyan) is an accent — CTAs, hovers, glows only
3. Sora announces, Inter reads, mono labels
4. Depth = surface lightness steps + gradient glow, not shadows
5. Generous vertical rhythm so motion has room to play

---

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