---
version: alpha
name: Morton's Light
description: Cosmic editorial luxury — near-black canvas with sculptural product photography, off-white ink, sharp zero-radius edges, restrained warm-amber accent borrowed from circadian lamplight, generous whitespace, and large minimal type that lets the light be the hero.
colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#121212"
  surface-soft: "#1a1a1a"
  ink: "#f2f0eb"
  ink-secondary: "#a8a6a0"
  ink-muted: "#6e6c66"

  # Accent — circadian warm light
  primary: "#e8a13c"
  primary-soft: "#f5c97a"

  # Cool product variant accents
  variant-blue: "#5b7fb0"
  variant-red: "#b0524a"

  # Lines + borders
  border: "#2a2a2a"
  border-strong: "#3d3d3d"

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

typography:
  display-hero:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: -1.12px
  section-heading:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 300
    lineHeight: 1.15
    letterSpacing: -0.8px
  sub-heading:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.28px
  card-title:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 300
    lineHeight: 1.7
    letterSpacing: 0px
  body:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  caption:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 2.4px
  button-ui:
    fontFamily: "Jost, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 1.6px

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

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  pill: 9999px

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

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

  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.primary-soft}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.none}"
    padding: 6px 12px

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

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

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

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

# Morton's Light Design System

## Overview

Morton's Light is a Nordic designer-lighting brand whose website treats the screen the way a gallery treats a wall — a near-black canvas (`{colors.background}`) where sculptural product photography and a single warm amber accent carry all of the energy. The premise of the product (circadian lamps that simulate natural sunlight, derived from space technology tested aboard the ISS) sets the visual thesis: light is the subject, and the interface should disappear around it. Every chrome element is desaturated to the point of near-invisibility so the lamplight glow in the imagery becomes the only color that reads.

The palette is almost entirely achromatic — deep charcoals from `{colors.background}` to `{colors.surface-soft}`, an off-white ink (`{colors.ink}`) that reads warm rather than clinical, and a graded muted scale for secondary text. The one expressive move is `{colors.primary}`, a warm circadian amber pulled directly from the lamps' glow. It appears sparingly: a hover state, an eyebrow accent, a thin focus line. Cool product-variant accents (`{colors.variant-blue}`, `{colors.variant-red}`) echo the lamps' selectable color temperatures but never govern UI chrome.

Typography is large, light-weight, and minimal. Headlines lean on weight 300 with gentle negative tracking, giving an airy editorial feel that matches the whitespace-heavy layout. Eyebrow labels use wide positive letter-spacing (2.4px) as a luxury signal. Edges are sharp throughout — zero border-radius is a deliberate identity choice, reinforcing the "sculptural, architectural" framing of the product. Borders are hairline and barely-there, separating sections by tone shift rather than visible line.

**Key Characteristics:**
- Near-black gallery canvas (`{colors.background}`) with warm off-white ink (`{colors.ink}`)
- Single warm-amber accent (`{colors.primary}`) borrowed from circadian lamplight, used with extreme restraint
- Sharp zero-radius edges everywhere — `{rounded.none}` as identity
- Light-weight (300) large display type with negative tracking
- Wide-tracked eyebrow labels (2.4px) as a luxury/editorial signal
- Hairline near-invisible borders (`{colors.border}`); separation by tone, not line
- Full-bleed product photography as the real color source; chrome stays desaturated
- Generous whitespace rhythm (`{spacing.3xl}`–`{spacing.4xl}` between sections)

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Near-black page canvas, the gallery wall.
- **Surface** (`{colors.surface}`): Slightly lifted card/panel surface.
- **Surface Soft** (`{colors.surface-soft}`): Product-tile and badge surface, one step lighter.
- **Ink** (`{colors.ink}`): Warm off-white primary text and headings.
- **Ink Secondary** (`{colors.ink-secondary}`): Body and descriptive copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled labels.

### Accent
- **Primary** (`{colors.primary}`): Warm circadian amber — hovers, eyebrow accents, focus lines.
- **Primary Soft** (`{colors.primary-soft}`): Lighter amber for badge text and subtle highlights.

### Product Variants
- **Variant Blue** (`{colors.variant-blue}`): Cool product color-temperature accent.
- **Variant Red** (`{colors.variant-red}`): Warm product color-temperature accent.

### Lines
- **Border** (`{colors.border}`): Hairline section/card divider.
- **Border Strong** (`{colors.border-strong}`): Slightly more visible ghost-button and input outline.

## Typography

### Font Family
- **Primary**: `Jost`, with fallbacks `Helvetica Neue, Arial, sans-serif` — a geometric humanist sans that captures the brand's modern, airy, light-weight feel.

### 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 — light, airy, gallery billboard |
| `section-heading` | Section titles, weight 300 |
| `sub-heading` | Sub-sections, feature intros |
| `card-title` | Product and feature card titles |
| `body-large` | Lead paragraphs, feature descriptions |
| `body` | Standard reading text |
| `caption` | Metadata, fine print |
| `eyebrow` | Wide-tracked overline labels |
| `button-ui` | Buttons, nav links — tracked uppercase feel |

### Principles
- **Lightness as luxury**: Weight 300 dominates display type — the type should feel as weightless as the light the brand sells.
- **Wide eyebrows, tight headlines**: Eyebrow labels expand to 2.4px tracking; headlines compress to negative tracking. The contrast is the system.
- **Restraint**: No bold. Hierarchy comes from size and color value, not weight.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps to `{spacing.3xl}` (96px) and `{spacing.4xl}` (140px) for the gallery-grade section rhythm.

### Grid & Container
- Max content width: ~1280px, generously margined
- Hero: full-bleed product imagery with overlaid minimal text
- Feature sections: 2–3 column grids separated by whitespace, not lines
- Section separation via tone shift (`{colors.surface}` vs `{colors.background}`) and spacing

### Whitespace Philosophy
- **Gallery emptiness**: Massive vertical padding lets each product photograph breathe.
- **Light is the color**: Chrome stays desaturated so the imagery's lamplight glow is the only saturated element on screen.
- **Sharp and quiet**: Zero-radius edges plus hairline borders keep the frame architectural and silent.

## Components

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

### Buttons
- **`button-primary`** — Off-white fill, near-black text, zero radius, wide-tracked label. Hover shifts to warm amber (`{colors.primary}`).
- **`button-ghost`** — Transparent on canvas with a `{colors.border-strong}` outline; the quiet secondary action.

### Badges
- **`badge`** — Soft surface with amber-tinted (`{colors.primary-soft}`) wide-tracked eyebrow text. Square corners.

### Cards
- **`card`** — Lifted surface (`{colors.surface}`), hairline border, zero radius.
- **`card-product`** — Product tile on `{colors.surface-soft}`, generous padding, photography-first.

### Inputs
- **`input`** — Surface fill with `{colors.border-strong}` outline; focus shifts the border to amber (`{colors.primary}`).

### Navigation
- **`nav-bar`** — Near-black sticky header, wide-tracked links, hairline bottom border.

## Do's and Don'ts

### Do
- Keep the canvas near-black and let product photography supply the color
- Use `{colors.primary}` amber sparingly — hover, eyebrow, focus only
- Use zero radius everywhere — sharp edges are the brand
- Favor weight 300 for large type
- Use wide letter-spacing on eyebrow labels and buttons

### Don't
- Don't round corners — `{rounded.none}` is identity
- Don't introduce bold weights into display type
- Don't let the amber accent govern large surfaces
- Don't use heavy visible borders — hairlines and tone shifts only
- Don't put bright UI chrome that competes with the lamplight imagery

---

## Responsive Behavior

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

### Collapsing Strategy
- Hero: 56px display scales down, retains light weight and negative tracking
- Navigation: wide-tracked links collapse to a minimal menu
- Feature grids: 3-column → 2-column → single column
- Section spacing: 140px → ~64px on mobile

---

## 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 Morton's Light. Brand names and trademarks belong to their respective owners.