---
version: alpha
name: Endless
description: An infinite collaborative design canvas with a deep near-black workspace, crisp off-white ink, and a single bold spectrum gradient (violet → magenta → orange) used as the brand's signature accent. Dark-first chrome, subtle elevated panels, pill controls, and vivid gradient CTAs over a quiet neutral surface.

colors:
  # Canvas + ink
  background: "#0a0a0c"
  surface: "#141417"
  surface-soft: "#1c1c20"
  surface-raised: "#222226"
  ink: "#f5f5f7"
  ink-secondary: "#a1a1aa"
  ink-muted: "#6b6b73"

  # Brand spectrum gradient stops
  gradient-start: "#7c3aed"   # violet
  gradient-mid: "#ec4899"     # magenta
  gradient-end: "#fb923c"     # orange
  primary: "#a855f7"          # violet-magenta accent (flattened mid-point)
  accent-pink: "#ec4899"
  accent-orange: "#fb923c"

  # Interactive
  link: "#c084fc"
  focus-ring: "#a855f7"
  border: "#2a2a30"
  border-strong: "#3a3a42"

  # On-color
  on-primary: "#0a0a0c"
  on-surface: "#f5f5f7"

  # Status
  success: "#34d399"
  warning: "#fbbf24"
  danger: "#f87171"

typography:
  display-hero:
    fontFamily: "Inter, -apple-system, Segoe UI, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -2px
  section-heading:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1px
  card-title:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0px
  mono-label:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    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

rounded:
  none: 0px
  sm: 6px
  md: 10px
  lg: 14px
  xl: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.accent-pink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px

  button-secondary:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
    borderColor: "{colors.border-strong}"

  button-ghost:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 8px 14px
    borderColor: "{colors.border}"

  badge:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.link}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border}"

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

  card-raised:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border-strong}"

  input:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    borderColor: "{colors.focus-ring}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 14px 24px
    borderColor: "{colors.border}"

  toolbar:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    rounded: "{rounded.pill}"
    padding: 6px 10px
    borderColor: "{colors.border-strong}"

  toolbar-item:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink-secondary}"
    rounded: "{rounded.md}"
    padding: 8px
    height: 36px
    width: 36px
---

# Endless Design System

## Overview

Endless is an infinite, real-time collaborative design canvas, and its visual identity is built for the work-in-progress mindset rather than the polished marketing page. The system is dark-first: a deep, near-black workspace (`{colors.background}`) that recedes so that user content and brand color can sit forward. Where most product surfaces fight for attention, Endless treats its own chrome as scaffolding, quiet panels (`{colors.surface}`) and hairline borders (`{colors.border}`) that frame the canvas without competing with it.

The brand's single loud move is its spectrum gradient: a violet → magenta → orange sweep (`{colors.gradient-start}` → `{colors.gradient-mid}` → `{colors.gradient-end}`) that shows up on the primary CTA, key highlights, and the wordmark. Because the rest of the palette is achromatic dark neutrals, this one gradient does a lot of work, signaling energy, creativity, and the "endless" continuity of an unbounded canvas. The flattened mid-point of that gradient (`{colors.primary}`) carries solid-fill accents where a gradient would be too heavy.

Typography is functional and contemporary: Inter for everything in the UI, tightened with negative tracking at display sizes for a confident, compressed headline, and a JetBrains Mono companion for technical labels and coordinates. Controls lean on the pill radius (`{rounded.pill}`) for buttons and floating toolbars, while content panels and cards use a softer `{rounded.lg}`. The result is a tool that feels modern and playful at the accent layer but disciplined and unobtrusive everywhere else.

**Key Characteristics:**
- Dark-first workspace — near-black canvas (`{colors.background}`) with off-white ink (`{colors.ink}`)
- One signature spectrum gradient (violet → magenta → orange) as the entire brand accent
- Achromatic neutral chrome so brand color never competes with user content
- Inter UI type with negative tracking at display; JetBrains Mono for technical labels
- Pill-shaped buttons and floating toolbars; soft-rounded content cards
- Layered dark surfaces (`{colors.surface}` → `{colors.surface-raised}`) for elevation instead of heavy shadows

## Colors

### Canvas & Ink
- **Canvas** (`{colors.background}`): The infinite workspace background, near-black with a faint cool cast.
- **Surface** (`{colors.surface}`): Panels, cards, and side rails sitting above the canvas.
- **Surface Soft** (`{colors.surface-soft}`): Inputs and secondary fills.
- **Surface Raised** (`{colors.surface-raised}`): Floating toolbars, popovers, the highest elevation.
- **Ink** (`{colors.ink}`): Primary text, off-white for comfortable dark-mode reading.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, inactive labels.
- **Ink Muted** (`{colors.ink-muted}`): Placeholder and disabled text.

### Brand Spectrum
- **Gradient Start** (`{colors.gradient-start}`): Violet, the cool end of the brand sweep.
- **Gradient Mid** (`{colors.gradient-mid}`): Magenta, the heart of the gradient.
- **Gradient End** (`{colors.gradient-end}`): Orange, the warm end.
- **Primary** (`{colors.primary}`): Solid-fill brand accent, the gradient's flattened core.
- **Accent Pink** (`{colors.accent-pink}`) / **Accent Orange** (`{colors.accent-orange}`): Secondary highlight pulls from the sweep.

### Interactive
- **Link** (`{colors.link}`): Inline links and active accents, a lighter violet for contrast on dark.
- **Focus Ring** (`{colors.focus-ring}`): Keyboard focus outline.
- **Border** (`{colors.border}`) / **Border Strong** (`{colors.border-strong}`): Hairline and emphasized dividers.

### Status
- **Success** (`{colors.success}`), **Warning** (`{colors.warning}`), **Danger** (`{colors.danger}`): Collaboration and validation states.

## Typography

### Font Family
- **Primary**: `Inter`, with system-UI fallbacks.
- **Monospace**: `JetBrains Mono` for technical labels, coordinates, and code-like tags.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | Marketing hero, 56px compressed headline |
| `section-heading` | Section titles |
| `card-title` | Panel and card headings |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-medium` | Emphasized UI text |
| `button-ui` | Buttons and primary controls |
| `caption` | Metadata, badges, hints |
| `mono-label` | Technical labels, coordinates |

### Principles
- **Compression at scale**: Negative tracking (-2px) tightens display headlines for a modern, confident feel; tracking relaxes to 0 at body sizes.
- **One UI typeface**: Inter handles the entire interface; mono is reserved for genuinely technical content.
- **Weight discipline**: 400 (read), 500–600 (UI/emphasis), 700 (hero only).

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 4px, growing on an 8px rhythm with larger jumps (`{spacing.2xl}`–`{spacing.4xl}`) for marketing whitespace.

### Grid & Container
- Canvas: edge-to-edge infinite surface; chrome floats over it.
- Marketing: centered single-column hero, ~1100px max content width.
- Panels: fixed-width side rails with internal `{spacing.xl}` padding.

### Elevation
Depth comes from stacking progressively lighter dark surfaces (`{colors.surface}` → `{colors.surface-soft}` → `{colors.surface-raised}`) plus hairline borders, rather than heavy drop shadows. Floating toolbars use the highest surface and the pill radius to read as detached objects over the canvas.

## Components

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

### Buttons
- **`button-primary`** — Solid violet-magenta accent, pill radius; the brand CTA (often rendered with the full spectrum gradient in marketing).
- **`button-secondary`** — Dark soft surface with a stronger border, pill radius.
- **`button-ghost`** — Quiet surface, muted ink; canvas-level affordances.

### Surfaces
- **`card`** / **`card-raised`** — Dark panels with hairline borders for content and settings.
- **`toolbar`** — Floating pill toolbar at the highest elevation; **`toolbar-item`** is a 36px square icon target.

### Inputs
- **`input`** — Soft dark fill with a strong border; focus swaps the border to the violet focus ring.

### Navigation
- **`nav-bar`** — Canvas-colored top bar with a bottom hairline border.

## Do's and Don'ts

### Do
- Keep the canvas dark and let the spectrum gradient be the one loud element.
- Use the gradient on the primary CTA and wordmark; use `{colors.primary}` for solid accents.
- Build elevation from layered dark surfaces and hairline borders, not heavy shadows.
- Use pill radius for buttons and floating toolbars.

### Don't
- Don't introduce a second saturated accent family — the spectrum sweep is the identity.
- Don't put brand gradient behind user content where it competes with the canvas.
- Don't use pure black (`#000000`) or pure white — the off-tints keep dark mode comfortable.
- Don't add positive letter-spacing to display headlines.

---

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