---
version: alpha
name: Altina
description: Quiet luxury for AI hearing eyewear — a warm cream canvas (#F9F5F0) with deep walnut-brown ink (#322813), humanist Junicode serif headlines paired with the Aspekta grotesque, and generous pill-radius (52px) buttons. Editorial restraint, acetate-warm neutrals, no hard black chrome.

colors:
  # Canvas + ink
  background: "#f9f5f0"
  surface: "#ffffff"
  surface-soft: "#faf5f0"
  surface-tint: "#e9d3c3"
  ink: "#322813"
  ink-pure: "#000000"

  # Brand accent — muted walnut/bronze
  primary: "#765d2a"
  primary-soft: "#695732"

  # Neutral scale (warm)
  warm-600: "#7a756b"     # muted brown-gray secondary text
  warm-500: "#78746b"
  warm-300: "#e5e0da"     # borders, dividers
  warm-200: "#e2e1dc"
  warm-100: "#faf5f0"

  # Interactive / overlays
  ink-soft: "#322813"     # 0.2 alpha flattened approximations live in components
  border-faint: "#e5e0da"
  overlay-scrim: "#1a1a1a"  # was rgba(0,0,0,0.6+) over imagery

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

typography:
  display-hero:
    fontFamily: "Junicode, 'EB Garamond', Georgia, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1px
  display:
    fontFamily: "Junicode, 'EB Garamond', Georgia, serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: -0.5px
  heading:
    fontFamily: "Junicode, 'EB Garamond', Georgia, serif"
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.5px
  sub-heading:
    fontFamily: "Junicode, 'EB Garamond', Georgia, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  card-title:
    fontFamily: "Junicode, 'EB Garamond', Georgia, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0px
  body-large:
    fontFamily: "Aspekta, Inter, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Aspekta, Inter, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Aspekta, Inter, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Aspekta, Inter, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0.2px
  label:
    fontFamily: "Aspekta, Inter, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0.6px
  caption:
    fontFamily: "Aspekta, Inter, system-ui, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0.4px

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

rounded:
  none: 0px
  sm: 4px
  md: 14px
  lg: 24px
  pill: 52px
  circle: 9999px

components:
  # Primary CTA — deep walnut ink, cream text, full pill
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  # Secondary — cream surface, ink text, faint warm border
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.warm-300}"

  # Accent — bronze, used sparingly
  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  # Pill label / badge
  badge:
    backgroundColor: "{colors.surface-tint}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  # Editorial card — white surface, soft warm border, gentle radius
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.warm-300}"

  # Feature / image card — cream surface
  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 32px
    borderColor: "{colors.warm-200}"

  # Input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.warm-300}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.primary}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.warm-300}"
---

# Altina Design System

## Overview

Altina sells AI hearing eyewear — audio enhancement engineered into "the world's finest frames," made in collaboration with London eyewear house Cubitts. The website carries that positioning into its visual language: this is quiet luxury, not tech maximalism. The canvas is a warm acetate cream (`{colors.background}`), the color of the Mazzucchelli material the frames are cut from, and the text is a deep walnut brown (`{colors.ink}`) rather than hard black. The effect is editorial and tactile, closer to a heritage optical brand's lookbook than a consumer-electronics launch page.

The typographic pairing is the spine of the identity. Headlines are set in Junicode, a humanist Renaissance serif with old-style proportions and gentle calligraphic stress, run at large sizes (up to 64px) with near-default tracking so the letterforms keep their warmth. Body and interface text use Aspekta, a clean low-contrast grotesque, which grounds the serif with quiet modern legibility. The contrast between a literary serif and a neutral sans is what makes the page feel both crafted and contemporary.

Color is held to a tight, warm range. Beyond the cream canvas and walnut ink, a muted bronze (`{colors.primary}`) acts as the single accent — used for emphasis and the occasional accent button, never as a loud brand shout. Neutrals are warm-toned grays and beiges (`{colors.warm-600}`, `{colors.warm-300}`) for secondary copy and hairline borders. There is no saturated blue, no pure-black chrome; even overlays on photography lean toward soft scrims rather than hard black.

Shape language is soft and confident. Buttons are full pills at a generous 52px radius (`{rounded.pill}`), giving CTAs a rounded, approachable feel against the angular serif headlines. Cards and surfaces use a calmer 14px radius (`{rounded.md}`). Borders are faint warm hairlines, never heavy. Whitespace is generous and unhurried — the layout breathes like a printed catalogue.

**Key Characteristics:**
- Warm acetate-cream canvas (`{colors.background}`) — material-derived, never stark white
- Walnut-brown ink (`{colors.ink}`) instead of black, for warmth and softness
- Junicode humanist serif headlines (closest Google match: EB Garamond) paired with the Aspekta grotesque for body/UI
- Single muted-bronze accent (`{colors.primary}`), used sparingly
- Full pill buttons at 52px radius; cards at a softer 14px
- Faint warm hairline borders (`{colors.warm-300}`), no heavy rules or hard black chrome
- Editorial, catalogue-like whitespace rhythm

## Colors

### Primary
- **Acetate Cream** (`{colors.background}`): Page canvas. The hero neutral, drawn from the frame material.
- **Walnut Ink** (`{colors.ink}`): Primary text, headings, dark CTA fills. Warm near-black.
- **Pure White** (`{colors.surface}`): Card surfaces lifted off the cream.

### Accent
- **Bronze** (`{colors.primary}`): Single accent — emphasis, accent buttons, links.
- **Bronze Soft** (`{colors.primary-soft}`): Muted variant for subtle accent contexts.

### Surface & Tint
- **Surface Soft** (`{colors.surface-soft}`): Warm card/section tint just off the canvas.
- **Surface Tint** (`{colors.surface-tint}`): Peach-toned badge/highlight surface.

### Neutral Scale (warm)
- **Warm 600** (`{colors.warm-600}`): Secondary text, muted brown-gray.
- **Warm 300** (`{colors.warm-300}`): Borders, dividers, hairlines.
- **Warm 100** (`{colors.warm-100}`): Subtle surface tint.

### Overlay
- **Overlay Scrim** (`{colors.overlay-scrim}`): Softened dark scrim over photography.

## Typography

### Font Family
- **Display / headings**: `Junicode` (humanist Renaissance serif), fallbacks `EB Garamond, Georgia, serif`
- **Body / UI**: `Aspekta` (low-contrast grotesque), fallbacks `Inter, system-ui, sans-serif`

### 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` | 64px serif hero headline |
| `display` | 56px section opener |
| `heading` | 44px section heading |
| `sub-heading` | 32px sub-section |
| `card-title` | 24px feature/card title |
| `body-large` | 20px lead paragraph |
| `body` | 18px standard reading text |
| `body-small` | 15px secondary copy |
| `button-ui` | 14px button/link labels |
| `label` | 12px tracked labels, badges |
| `caption` | 11px metadata, fine print |

### Principles
- **Serif speaks, sans supports**: Junicode carries voice and warmth in headlines; Aspekta keeps body and interface text quietly legible.
- **Near-default tracking on the serif**: Headlines stay close to normal letter-spacing so Junicode's old-style proportions read as crafted, not compressed.
- **Single weight serif**: Headlines use one regular weight — restraint over typographic shouting.
- **Tracked sans labels**: Small Aspekta labels gain slight positive tracking (0.4–0.6px) for an editorial, considered feel.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Generous, catalogue-like rhythm with large jumps from `{spacing.2xl}` (40px) to `{spacing.3xl}` (64px) to `{spacing.4xl}` (120px) for section separation.

### Grid & Container
- Centered content column with wide outer margins
- Hero: single-column serif headline over a soft cream field
- Feature sections: 2-column editorial splits (image + copy)
- Generous vertical padding between sections

### Whitespace Philosophy
- **Catalogue breathing room**: Large vertical gaps; the cream field is part of the composition.
- **Warmth over starkness**: Soft cream rather than clinical white keeps the page feeling material and tactile.
- **Quiet separation**: Sections divide by spacing and faint warm hairlines, not heavy rules.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Cream canvas, text blocks |
| Hairline | `1px solid {colors.warm-300}` | Cards, inputs, nav border |
| Soft Lift | Faint warm shadow | White cards over cream |
| Scrim | `{colors.overlay-scrim}` softened overlay | Text over photography |

**Shadow Philosophy**: Depth is whisper-level and warm. Cards lift off the cream with faint hairline borders and at most a soft shadow; the brand never uses hard black drop-shadows. Imagery uses softened scrims rather than opaque black overlays.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed imagery, dividers |
| `sm` | 4px | Inputs, small elements |
| `md` | 14px | Cards, surfaces, containers |
| `lg` | 24px | Large feature panels |
| `pill` | 52px | Buttons, pill labels |
| `circle` | 9999px | Avatars, icon buttons |

## Components

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

### Buttons
- **`button-primary`** — Walnut ink fill, cream text, full 52px pill. The default CTA.
- **`button-secondary`** — Cream surface, ink text, faint warm hairline border.
- **`button-accent`** — Bronze fill, cream text. Used sparingly for emphasis.

### Pills & Badges
- **`badge`** — Peach surface tint, ink text, tracked 12px label, full pill.

### Cards
- **`card`** — White surface lifted off cream, 14px radius, faint warm border.
- **`card-feature`** — Cream-tint surface, larger padding for editorial feature blocks.

### Inputs
- **`input`** — White surface, warm hairline border, 4px radius. Focus shifts the border to bronze (`{colors.primary}`).

### Navigation
- **`nav-bar`** — Cream header, ink links in Aspekta 14px, faint warm bottom border.

## Do's and Don'ts

### Do
- Use the warm cream canvas (`{colors.background}`), never stark white, for the page field
- Use walnut ink (`{colors.ink}`) for text instead of pure black
- Set headlines in Junicode (or EB Garamond) at large sizes with near-default tracking
- Pair the serif with Aspekta for body and interface text
- Keep buttons as full 52px pills
- Reserve bronze (`{colors.primary}`) as a single, sparing accent
- Use faint warm hairlines (`{colors.warm-300}`) for borders and dividers

### Don't
- Don't use hard black (`{colors.ink-pure}`) for body text or chrome
- Don't introduce saturated blues, greens, or other cool brand colors
- Don't compress or heavily track the serif headlines
- Don't use heavy black drop-shadows — depth is warm and whisper-level
- Don't set the accent bronze as a page background or use it loudly
- Don't square off the buttons — the full pill is part of the identity

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked editorial blocks, reduced hero size |
| Tablet | 600–1024px | 2-column splits begin, expanded padding |
| Desktop | 1024–1400px | Full editorial layout, centered content column |
| Large Desktop | >1400px | Generous outer margins, max content width |

### Touch Targets
- Pill buttons use comfortable 14px/28px padding
- Nav links at 14px with adequate spacing
- Badges at 4px/12px padding

### Collapsing Strategy
- Hero serif: 64px → scales down on mobile, keeps near-default tracking
- Feature splits: 2-column image + copy → stacked single column
- Section spacing: 120px → reduced on mobile
- Navigation: horizontal links → compact menu

### Image Behavior
- Product photography full-bleed or in soft-radius containers
- Softened scrims over imagery for legible overlaid text
- Warm cream backgrounds behind product shots

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Acetate Cream `{colors.background}`
- Heading + body text: Walnut Ink `{colors.ink}`
- Secondary text: Warm 600 `{colors.warm-600}`
- Accent: Bronze `{colors.primary}`
- Border: Warm 300 `{colors.warm-300}`
- Primary CTA: Walnut Ink `{colors.ink}` fill, cream text, 52px pill

### Example Component Prompts
- "Create a hero on a warm cream (`{colors.background}`) field. Headline at 64px Junicode (fallback EB Garamond) weight 400, line-height 1.05, color `{colors.ink}`. Lead paragraph at 20px Aspekta weight 400, color `{colors.warm-600}`. Primary pill button: `{colors.ink}` fill, cream text, 52px radius, 14px/28px padding."
- "Design an editorial feature split: image left, copy right. Title 32px Junicode, body 18px Aspekta `{colors.warm-600}`, peach badge (`{colors.surface-tint}` bg, ink text, 12px tracked label, full pill)."
- "Build a card: white surface over cream, 14px radius, 1px `{colors.warm-300}` border, 24px padding. Title 24px Junicode, body 15px Aspekta."

### Iteration Guide
1. Cream canvas + walnut ink is the foundation — never pure white or pure black
2. Junicode/EB Garamond for headlines, Aspekta/Inter for everything else
3. Buttons are full 52px pills; cards are 14px radius
4. Bronze is the only accent and it stays quiet
5. Borders are faint warm hairlines; shadows are whisper-level and warm

---

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