---
version: alpha
name: Juan Mora
description: Playful-minimal designer portfolio — near-black ink on a warm off-white canvas, a single electric-blue accent, oversized display headlines with tight tracking, and geometric scroll-driven shapes (circle, pill, hexagon) that supply the only color outside the type.
colors:
  # Canvas + ink
  background: "#f7f6f3"
  surface: "#ffffff"
  surface-soft: "#f0eeea"
  ink: "#141414"
  ink-pure: "#000000"

  # Accent
  primary: "#2b56ff"        # electric blue — links, shapes, CTAs
  primary-hover: "#1d40d6"

  # Secondary geometric-shape tints (decorative scroll elements)
  shape-blue: "#2b56ff"
  shape-blue-soft: "#dfe6ff"  # flattened tint behind blue shapes

  # Neutral scale
  gray-700: "#3d3d3d"
  gray-500: "#6b6b6b"
  gray-400: "#8f8f8f"
  gray-200: "#d9d7d1"
  gray-100: "#ebe9e4"

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

  # Borders / hairlines
  border: "#e2e0da"

typography:
  display-hero:
    fontFamily: "Plus Jakarta Sans, Inter, Arial, sans-serif"
    fontSize: 80px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -3px
  display:
    fontFamily: "Plus Jakarta Sans, Inter, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -2px
  section-heading:
    fontFamily: "Plus Jakarta Sans, Inter, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1.2px
  card-title:
    fontFamily: "Plus Jakarta Sans, Inter, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.6px
  body-large:
    fontFamily: "Plus Jakarta Sans, Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Plus Jakarta Sans, Inter, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-medium:
    fontFamily: "Plus Jakarta Sans, Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Plus Jakarta Sans, Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.2px
  caption:
    fontFamily: "Plus Jakarta Sans, Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.2px
  eyebrow:
    fontFamily: "Plus Jakarta Sans, Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1px

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

rounded:
  none: 0px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 28px

  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 28px
  button-accent-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 28px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 28px
    borderColor: "{colors.border}"

  badge:
    backgroundColor: "{colors.shape-blue-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.pill}"
    padding: 6px 14px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"

  card-project:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 14px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    padding: 20px 32px
    borderColor: "{colors.border}"
---

# Juan Mora Design System

## Overview

Juan Mora's portfolio is a playful-minimal designer site: a warm off-white canvas (`{colors.background}`) carrying near-black ink (`{colors.ink}`), interrupted by a single, confident electric blue (`{colors.primary}`). The restraint is deliberate — almost the entire page is type and whitespace, so the blue lands hard whenever it appears. Color is treated as a reward, not a wallpaper, which is exactly how a designer who sells "good design takes time" wants to present.

The type does the heavy lifting. Oversized display headlines (`{typography.display-hero}` at 80px, weight 700) use tight negative tracking (-3px) to feel compressed and editorial, while body copy stays generous and readable at 17–20px with relaxed 1.6 line-height. The pairing reads as confident-but-friendly: big bold statements, calm supporting prose.

What makes the site distinctive is its geometric scroll language. Decorative shapes — circle, pill, hexagon, square — appear in the brand blue and animate on scroll (built with GSAP, Lottie, and Lenis smooth scroll). These shapes are the system's signature: they introduce color, motion, and personality without adding chrome. The radii scale follows the same logic — soft, rounded, friendly (`{rounded.lg}`/`{rounded.xl}`), with fully-pill buttons.

**Key Characteristics:**
- Warm off-white canvas (`{colors.background}`) instead of pure white — softer, more crafted
- A single electric-blue accent (`{colors.primary}`) used sparingly for impact
- Oversized display type with tight negative tracking (-3px at 80px)
- Generous body copy at 17–20px, 1.6 line-height
- Geometric blue scroll shapes (circle, pill, hexagon) as the personality layer
- Fully-pill buttons (`{rounded.pill}`), soft rounded cards (`{rounded.lg}`/`{rounded.xl}`)
- Dark primary CTA that flips to blue on hover

## Colors

### Primary
- **Off-White Canvas** (`{colors.background}`): Page background — warm, not stark.
- **Ink** (`{colors.ink}`): Headlines, body text, default CTA fill.
- **Electric Blue** (`{colors.primary}`): The single accent — links, shapes, accent CTA, hover state.

### Accent & Shapes
- **Blue Hover** (`{colors.primary-hover}`): Pressed/hover deepening of the accent.
- **Shape Blue** (`{colors.shape-blue}`): Geometric scroll shapes.
- **Shape Blue Soft** (`{colors.shape-blue-soft}`): Tint behind shapes and in badges.

### Neutral Scale
- **Gray 700** (`{colors.gray-700}`): Strong secondary text.
- **Gray 500** (`{colors.gray-500}`): Body secondary, captions.
- **Gray 400** (`{colors.gray-400}`): Muted/placeholder text.
- **Gray 200** (`{colors.gray-200}`): Dividers.
- **Gray 100** (`{colors.gray-100}`): Subtle fills.

### Surface & Border
- **Surface** (`{colors.surface}`): White cards lifted off the warm canvas.
- **Surface Soft** (`{colors.surface-soft}`): Project tiles, muted blocks.
- **Border** (`{colors.border}`): Hairlines around cards, inputs, nav.

## Typography

### Font Family
- **Primary**: `Plus Jakarta Sans`, fallbacks `Inter, Arial, sans-serif`. A geometric humanist sans — friendly round forms with enough character to carry a personal brand.

### 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` | 80px landing headline — maximum impact |
| `display` | Large section openers |
| `section-heading` | Section titles |
| `card-title` | Project / card headings |
| `body-large` | Intros, feature descriptions |
| `body` | Standard reading text |
| `body-medium` | Nav, emphasized labels |
| `button-ui` | Buttons |
| `caption` | Metadata |
| `eyebrow` | Uppercase-ish labels, badges |

### Principles
- **Big and tight up top, calm down low**: Display sizes use heavy negative tracking (-3px → -1.2px); body returns to neutral tracking and generous 1.6 line-height.
- **Two weights for hierarchy**: 700 for display, 600 for headings/buttons/eyebrows, 400 for reading.
- **Whitespace as luxury**: Type sits in wide margins; the page breathes.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px. The scale jumps generously at the top end (`{spacing.3xl}` 96px, `{spacing.4xl}` 160px) for big section gaps.

### Grid & Container
- Max content width ~1200px, centered with wide gutters
- Hero: single-column, left- or center-aligned oversized headline
- Project sections: 1–2 column tiles on `{colors.surface-soft}`

### Whitespace Philosophy
- Big vertical rhythm between sections (`{spacing.3xl}`–`{spacing.4xl}`)
- Color and motion (blue shapes) replace heavy section chrome
- Soft warm canvas keeps the whole page low-glare

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Small fills, tags |
| `md` | 12px | Inputs |
| `lg` | 20px | Cards |
| `xl` | 32px | Project tiles |
| `pill` | 9999px | Buttons, badges |

## Components

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

### Buttons
- **`button-primary`** — Ink fill, white text, full pill. Flips to blue on hover (the signature move).
- **`button-accent`** — Blue fill, white text, full pill.
- **`button-ghost`** — Canvas fill, hairline border, ink text.

### Badges
- **`badge`** — Soft-blue tint, blue text, full pill — used for eyebrow labels.

### Cards
- **`card`** — White surface on the warm canvas, `{rounded.lg}`, hairline border.
- **`card-project`** — Muted `{colors.surface-soft}` tile, `{rounded.xl}` for a softer, friendlier block.

### Inputs
- **`input`** — White surface, `{rounded.md}`, hairline border; focus switches border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Warm canvas, ink links at 16px weight 500, hairline bottom border.

## Do's and Don'ts

### Do
- Keep blue rare — it's the reward color, not the base
- Use the warm off-white canvas, not pure white
- Go big and tight on display type (-3px tracking at 80px)
- Keep buttons fully pill-shaped
- Let geometric blue shapes carry color and motion

### Don't
- Don't flood the page with blue
- Don't use sharp corners — everything is soft and rounded
- Don't tighten body tracking — only display gets negative tracking
- Don't add heavy borders or shadows — hairlines and whitespace only
- Don't replace the off-white canvas with stark white

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, display scales to ~44px |
| Tablet | 600–1024px | 2-column project tiles begin |
| Desktop | 1024–1200px | Full layout |
| Large | >1200px | Centered, wide margins |

### Collapsing Strategy
- Hero: 80px → ~44px, tracking eases proportionally
- Project tiles: 2-column → single column
- Nav: horizontal links → menu toggle
- Section spacing: 96–160px → ~48px on mobile

### Motion
- Scroll-driven geometric shapes (GSAP + Lottie) simplify on mobile
- Lenis smooth scroll throughout; micro-interactions on hover and scroll

---

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