---
version: alpha
name: Limitless
description: Calm, humane minimalism for an AI wearable — a near-white canvas with warm-gray ink, a single confident black primary, generous whitespace, and large soft-rounded surfaces. Editorial sans headlines with relaxed tracking; restraint as the entire visual argument.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f7f7f5"
  surface-muted: "#f1f1ee"
  ink: "#0a0a0a"
  ink-secondary: "#6b6b6b"
  ink-muted: "#9a9a96"

  # Primary action
  primary: "#0a0a0a"
  on-primary: "#ffffff"

  # Accent — restrained warm signal
  accent: "#1a1a1a"
  accent-soft: "#ededea"

  # Lines + chrome
  border: "#e6e6e3"
  border-strong: "#d4d4d0"

  # Badge / tint
  badge-bg: "#f1f1ee"
  badge-text: "#3a3a3a"

  # States
  focus-ring: "#0a0a0a"
  surface-hover: "#f1f1ee"
  primary-hover: "#262626"

typography:
  display-hero:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.68px
  section-heading:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.56px
  card-title:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.27
    letterSpacing: -0.44px
  body-large:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: -0.19px
  body:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.38
    letterSpacing: 0.13px

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

rounded:
  none: 0px
  xs: 6px
  sm: 10px
  md: 16px
  lg: 24px
  xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-hover}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.border-strong}"
  badge:
    backgroundColor: "{colors.badge-bg}"
    textColor: "{colors.badge-text}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.surface-soft}"
  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}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"
---

# Limitless Design System

## Overview

Limitless designs for trust. As an always-listening AI wearable, its product asks for an unusual amount of intimacy, and the website answers that ask with calm rather than spectacle. The canvas is a near-pure white (`{colors.background}`) carrying warm-gray ink (`{colors.ink-secondary}`) and true near-black headlines (`{colors.ink}`), so the page reads like good print: quiet, confident, and entirely about the words. There is no gradient theater and no neon AI signaling. The restraint is the argument.

Type does the heavy lifting. Headlines sit in a clean grotesque sans (Inter as the closest open proxy) at large sizes with gently negative tracking (`-1.68px` at the hero), giving the display copy a composed, editorial density without the compression of a developer brand. Body copy relaxes to neutral tracking and generous `1.55`–`1.60` line-height, prioritizing readability over information density. Weight is used sparingly: 400 for reading, 500 for interface and emphasis, 600 for headings. Nothing shouts.

Surfaces are large and softly rounded. Cards and media containers use `{rounded.lg}` (24px) and `{rounded.xl}` (32px) radii that feel hardware-adjacent — echoing the rounded pebble of the device itself. Where separation is needed, Limitless prefers a faint hairline (`{colors.border}`) or a warm tonal surface (`{colors.surface-soft}`) over shadow. Depth is implied through whitespace and tonal steps, not elevation stacks.

The single accent is black. The primary CTA is a full-pill near-black button with white text — the one high-contrast object on an otherwise whisper-quiet page. This monochrome discipline keeps focus on the message and the device, and lets the occasional product photograph or signature mark (the hand-signed founder note is a recurring trust device) carry all the warmth the palette withholds.

**Key Characteristics:**
- Near-white canvas (`{colors.background}`) with warm-gray body ink (`{colors.ink-secondary}`) and near-black headlines (`{colors.ink}`)
- Monochrome discipline — the only saturated object is the black pill CTA
- Inter-class grotesque sans with gently negative display tracking (-1.68px hero) and relaxed body line-height (1.55–1.60)
- Large soft radii (24–32px) echoing the device's hardware form
- Hairline borders and warm tonal surfaces (`{colors.surface-soft}`) instead of shadow for separation
- Three-weight system: 400 read, 500 interface, 600 headings
- Generous whitespace as the primary structuring tool
- Trust-first tone: signature marks, plain language, no AI spectacle

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Page and primary surface — pure white.
- **Surface Soft** (`{colors.surface-soft}`): Warm off-white for tonal section blocks and soft cards.
- **Surface Muted** (`{colors.surface-muted}`): Slightly deeper warm gray for nested fills.
- **Ink** (`{colors.ink}`): Headlines and primary text — near-black.
- **Ink Secondary** (`{colors.ink-secondary}`): Body copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled text.

### Primary & Accent
- **Primary** (`{colors.primary}`): The black pill CTA fill.
- **On Primary** (`{colors.on-primary}`): White text on the primary button.
- **Accent** (`{colors.accent}`): Emphasis ink for active/hover marks.
- **Accent Soft** (`{colors.accent-soft}`): Subtle tinted background for selected chips.

### Lines & Chrome
- **Border** (`{colors.border}`): Hairline dividers, card outlines.
- **Border Strong** (`{colors.border-strong}`): Inputs, secondary buttons.

### Badge & Tint
- **Badge Bg** (`{colors.badge-bg}`): Pill badge background.
- **Badge Text** (`{colors.badge-text}`): Pill badge text.

### States
- **Focus Ring** (`{colors.focus-ring}`): Keyboard focus outline.
- **Surface Hover** (`{colors.surface-hover}`): Hover fill for secondary surfaces.
- **Primary Hover** (`{colors.primary-hover}`): Hovered primary button.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `-apple-system, Helvetica Neue, Arial, sans-serif`
- A clean neutral grotesque chosen for legibility and warmth, not personality. The closest widely available proxy for the live custom grotesque.

### 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` | 56px hero — quiet billboard |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, lighter emphasis |
| `card-title` | Feature/card headings |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-medium` | Emphasized UI text, nav |
| `button-ui` | Buttons and links |
| `caption` | Metadata, badges, labels |

### Principles
- **Quiet density**: Display sizes use moderate negative tracking (-1.68px hero) — composed, not compressed.
- **Read-first body**: Body copy keeps neutral tracking and 1.55–1.60 line-height for comfortable reading.
- **Three weights, strict roles**: 400 (read), 500 (interface), 600 (headings). No 700.
- **Sentence-case voice**: Plain, human, lowercase-leaning copy that avoids hype.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px with large jumps at the top (`{spacing.4xl}` 96px, `{spacing.5xl}` 140px) for gallery-level section breathing room.

### Grid & Container
- Max content width: approximately 1120px
- Hero: centered single column with deep top padding
- Feature sections: 2–3 column grids on warm tonal blocks
- Section separation via whitespace and `{colors.surface-soft}` blocks, not rules

### Whitespace Philosophy
- **Calm over density**: Sections breathe with `{spacing.4xl}`–`{spacing.5xl}` vertical padding.
- **Tonal banding**: Alternating white and warm off-white sections create rhythm without borders.
- **Soft containment**: Content lives inside large-radius surfaces that feel hardware-adjacent.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text blocks |
| Tonal (Level 1) | `{colors.surface-soft}` fill | Section blocks, soft cards |
| Hairline (Level 1b) | `1px solid {colors.border}` | Card outlines, dividers |
| Lifted (Level 2) | Soft ambient `0 8px 32px rgba(10,10,10,0.06)` | Floating media / product shots |
| Focus | `2px solid {colors.focus-ring}` outline | Keyboard focus |

**Shadow Philosophy**: Shadows are rare and atmospheric. Limitless prefers tonal steps and hairlines to communicate hierarchy; when a shadow appears it is wide, soft, and low-opacity — a gentle lift, never a drop.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `xs` | 6px | Small chips, inline marks |
| `sm` | 10px | Inputs, small controls |
| `md` | 16px | Buttons, list items |
| `lg` | 24px | Cards, media containers |
| `xl` | 32px | Large hero surfaces |
| `pill` | 9999px | CTAs, badges, tags |

## Components

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

### Buttons
- **`button-primary`** — Near-black full-pill CTA with white text. The single high-contrast object on the page.
- **`button-secondary`** — White pill with `{colors.border-strong}` hairline outline.

### Pills & Badges
- **`badge`** — Warm tinted pill, dark text, used for labels and status.

### Cards
- **`card`** — White surface, hairline `{colors.border}`, 24px radius.
- **`card-soft`** — Warm `{colors.surface-soft}` fill, borderless, for feature blocks.

### Inputs
- **`input`** — White surface, `{colors.border-strong}` outline, 10px radius. Focus swaps to a near-black `{colors.focus-ring}` outline.

### Navigation
- **`nav-bar`** — White header, hairline bottom border, 15px medium links, black pill CTA right-aligned.

## Do's and Don'ts

### Do
- Keep the canvas near-white with warm-gray body ink and near-black headlines
- Use a single black pill CTA as the only high-contrast object
- Separate sections with whitespace and warm tonal banding, not heavy borders
- Use large soft radii (24–32px) that echo the device's form
- Keep tracking gently negative at display sizes, neutral in body
- Use the three-weight system (400/500/600)

### Don't
- Don't introduce gradients, neon, or "AI glow" effects
- Don't use saturated accent colors — the system is monochrome
- Don't crowd sections; whitespace is the structure
- Don't use heavy drop shadows — depth is tonal and atmospheric
- Don't use weight 700 or all-caps shouting
- Don't replace the calm, plain-language tone with hype copy

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, reduced section padding |
| Tablet | 600–1024px | 2-column grids, expanded padding |
| Desktop | 1024–1120px | Full layout, max content width |
| Large | >1120px | Centered, generous side margins |

### Touch Targets
- Buttons use comfortable 12px vertical padding
- Nav links at 15px with adequate spacing
- Pill badges at 12px horizontal padding

### Collapsing Strategy
- Hero: 56px → scales down, maintains proportional tracking
- Navigation: horizontal links + CTA → hamburger menu
- Feature cards: 3-column → 2-column → single column
- Section spacing: 140px → ~64px on mobile

### Image Behavior
- Product/device photography keeps large radius at all sizes
- Signature and trust marks scale proportionally
- Tonal section blocks remain edge-to-edge

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: near-black `{colors.primary}`
- Background: white `{colors.background}`
- Heading text: near-black `{colors.ink}`
- Body text: warm gray `{colors.ink-secondary}`
- Border: hairline `{colors.border}`
- Soft section: `{colors.surface-soft}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts
- "Create a hero on white. Headline at 56px Inter weight 600, line-height 1.05, letter-spacing -1.68px, color `{colors.ink}`. Subtitle at 19px weight 400, line-height 1.60, color `{colors.ink-secondary}`. One black pill CTA (`{colors.primary}`, white text, 9999px radius, 12px 24px padding)."
- "Design a soft feature card: `{colors.surface-soft}` fill, no border, 24px radius, 32px padding. Title at 22px Inter weight 600, body at 16px weight 400 in `{colors.ink-secondary}`."
- "Build a pill badge: `{colors.badge-bg}` background, `{colors.badge-text}` text, 9999px radius, 4px 12px padding, 13px Inter weight 500."
- "Create navigation: white header, hairline bottom border `{colors.border}`. Inter 15px weight 500 links in `{colors.ink}`. Black pill CTA right-aligned."

### Iteration Guide
1. Stay monochrome — the black pill CTA is the only high-contrast element
2. Tracking scales with size: -1.68px at 56px, neutral in body
3. Three weights only: 400 read, 500 interface, 600 headings
4. Separate with whitespace and warm tonal banding, never heavy borders
5. Large soft radii (24–32px) keep the system hardware-adjacent and calm

---

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