---
title: "Switch-Lit design system"
variant: extended
source: https://switch-lit.com/
captured_at: 2026-10-12
theme: light
industry: media
generator: Design DNA (https://four.wiralomi.com/style/switch-lit-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Switch-Lit · Design System

> Quiet editorial space for stories made together.

**Theme:** light · **Industry:** media · **Source:** https://switch-lit.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Switch-Lit pairs a restrained editorial canvas with expressive display typography and small, playful color cues. The homepage introduces collaborative writing through a process walkthrough, story library, prompts, and community values.

## North star

Let expressive editorial typography and generous off-white space frame the stories, using color only as a restrained cue for collaboration.

## Overview

The page is built on a warm off-white canvas (#f9f9f7), with pale sage panels and fine sage-gray rules providing structure without competing with the writing. Typography does most of the branding: distressed, heavy display lettering gives section titles a distinctive editorial voice, while lighter serif headings and clean sans-serif body copy keep the long-form content readable. Small colored dots and the occasional periwinkle or lime element signal writer identities and interface states; they are accents, not a general-purpose saturated palette. The layout is deliberately spacious, with a narrow content measure for explanatory copy and staggered, asymmetrical demonstrations of the writing process. Story cards and value rows stay quiet and lightly bordered. A compact charcoal footer closes the otherwise continuous light canvas.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Story Ink | `#000000` | `--color-story-ink` | neutral | Primary text, display headings, story titles, body copy, links, and dark button lettering. |
| Paper Canvas | `#f9f9f7` | `--color-paper-canvas` | brand | Dominant page and navigation background; also appears in light button fills and inverse footer text. |
| Sage Mist | `#f1f3ef` | `--color-sage-mist` | surface | Story cards and value panels, creating soft separation from the main canvas. |
| Pencil Sage | `#d2ddd2` | `--color-pencil-sage` | neutral | Thin outlines around cards and controls; subtle structural hairlines. |
| Sea Glass | `#deece8` | `--color-sea-glass` | accent | One stop in a restrained decorative gradient, seen in supporting graphic treatment rather than core UI. |
| Warm Stone | `#edece9` | `--color-warm-stone` | accent | Middle tone in the subtle decorative gradient; not a prominent interface color. |
| Cloud Slate | `#e1e4e8` | `--color-cloud-slate` | accent | Cool gray endpoint of the decorative gradient, used in supporting visual treatment. |
| Charcoal Close | `#1c1c1c` | `--color-charcoal-close` | surface | Full-width footer band, contrasting with the light page and carrying pale navigation text. |
| Story Periwinkle | `#bed4fb` | `--color-story-periwinkle` | accent | Small interface or illustration highlight in the collaboration walkthrough, not a broad page surface. |
| Prompt Lime | `#edfe5e` | `--color-prompt-lime` | accent | Rare bright accent among writer-color or illustrative details; keep it confined to those cues. |

### Semantic aliases

`--color-canvas` → `#f9f9f7` (Paper Canvas) · `--color-surface` → `#f1f3ef` (Sage Mist) · `--color-surface-2` → `#1c1c1c` (Charcoal Close) · `--color-surface-3` → `#bed4fb` (Story Periwinkle) · `--color-text` → `#000000` (Story Ink) · `--color-text-muted` → `#f9f9f7` (Paper Canvas) · `--color-border` → `#d2ddd2` (Pencil Sage)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f9f9f7` | 19.92:1 | AAA |
| `#000000` | `#f1f3ef` | 18.81:1 | AAA |
| `#000000` | `#1c1c1c` | 1.23:1 | fail |
| `#000000` | `#bed4fb` | 14:1 | AAA |
| `#f9f9f7` | `#f1f3ef` | 1.06:1 | fail |
| `#f9f9f7` | `#1c1c1c` | 16.17:1 | AAA |
| `#f9f9f7` | `#bed4fb` | 1.42:1 | fail |

### Gradients

- `linear-gradient(90deg, rgb(222, 236, 232), rgb(237, 236, 233) 50%, rgb(225, 228, 232))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABCArizonaSans | `--font-body` | webfont | 400, 700, 500 | Primary body copy, story links, buttons, and card text. | Inter |
| ABCArizonaSansVariable | `--font-abcarizonasansvariable` | webfont | 400 | Navigation, captions, and uppercase eyebrow labels. | Inter |
| ABCArizonaFlare-Regular | `--font-display` | webfont | 300, 400 | Light editorial section and subsection headings. | Cormorant Garamond |
| ABCArizonaMixVariable | `--font-abcarizonamixvariable` | webfont | 700 | Bold tertiary headings and emphasized value labels. | DM Sans |
| ABCArizonaMix | `--font-abcarizonamix` | webfont | 500 | Medium-weight utility labels, including compact secondary controls. | DM Sans |
| ABCCamera-Heavy | `--font-abccamera-heavy` | webfont | 700, 400 | Oversized distressed display titles such as process and section headings. | Bowlby One SC |

- **ABCArizonaSans:** Clean sans-serif workhorse; regular body text, with measured medium and bold weights used for emphasis.
- **ABCArizonaSansVariable:** Light, widely tracked small text; captions and eyebrows use uppercase styling.
- **ABCArizonaFlare-Regular:** Serif heading voice, mostly light to regular, with compact leading and subtle tracking.
- **ABCArizonaMixVariable:** Use bold selectively for short heading labels; retain the page’s restrained editorial hierarchy.
- **ABCArizonaMix:** Medium weight for small interface text; avoid making controls visually heavier than section titles.
- **ABCCamera-Heavy:** Heavy, highly distinctive display face; reserve for short titles and keep its textured character prominent.

### Type scale — Perfect Fourth (ratio ≈ 1.351, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 67.5px | 700 | 0.74 | -0.001em | — | ABCCamera-Heavy | Distressed display treatment for major section titles. |
| h1 | 28px | 300 | 1.07 | 0.011em | — | ABCArizonaFlare-Regular | Light serif heading for primary content introductions. |
| h2 | 27px | 400 | 1.11 | 0.004em | — | ABCArizonaFlare-Regular | Editorial serif subsection headings, including value content. |
| h3 | 24px | 300 | 1.04 | 0.004em | — | ABCArizonaFlare-Regular | Smaller light serif headings within content blocks. |
| h4 | 20px | 700 | 1.15 | 0.025em | — | ABCArizonaMixVariable | Bold short labels and compact card headings. |
| body | 15px | 400 | 1.27 | 0.033em | — | ABCArizonaSans | Story descriptions, explanatory paragraphs, and card copy. |
| caption | 11px | 400 | 1.36 | 0.091em | uppercase | ABCArizonaSansVariable | Small uppercase metadata and author details. |
| button | 15px | 400 | 1 | 0 | — | ABCArizonaSans | Primary action labels such as starting a story. |
| nav | 15px | 400 | 1.4 | 0.04em | — | ABCArizonaSansVariable | Header and footer navigation links. |
| link | 16px | 400 | 1 | 0 | — | ABCArizonaSans | Inline story titles and content links. |
| eyebrow | 11px | 400 | 1.36 | 0.091em | uppercase | ABCArizonaSansVariable | Compact uppercase category or section labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 6, 10, 12, 13, 15, 16, 19, 20, 29, 40, 60, 160 px.
- Section rhythm 60px · element gap 10px · card padding — · max content width 613px.

Use a centered, narrow reading measure for explanatory copy, with measured page max width around 613px as the content anchor. The page is mostly a single column, but feature demonstrations and values use staggered or two-column arrangements. Library content expands into a denser multi-column row. Keep the section rhythm spacious and let large vertical gaps separate major chapters; align headings and rules to the content edge rather than centering everything. The footer switches to a compact three-column arrangement.

## Shape & elevation

- Radius: button `6px` · card `12px` · link `6px` · xs `6px` · sm `12px` · pill `9999px`
- Shadow `sm` (button, link): `rgba(0, 0, 0, 0.2) 0px 2px 6px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

The interface favors flat surfaces over layered cards. Use fine sage-gray borders to define pale panels and value rows, with soft rounded corners on cards. Shadows are limited to subtle control lift, most apparent on pill-like actions. Avoid strong depth, heavy outlines, or stacked overlays; hierarchy comes from typography, whitespace, and panel contrast.

## Imagery

Imagery is sparse and mostly product-oriented: small screenshots and interface demonstrations explain the writing flow, while the story library uses cover or story artwork. Treat these assets as quiet, lightly framed panels on the off-white canvas. The visible process graphic includes small colored writer markers and a periwinkle interface highlight; retain such color inside the demo rather than spreading it through the surrounding layout. A small illustrative flourish appears near the closing quote.

## Components

### Primary story action

A light-filled, rounded CTA with black 15px sans-serif text and a restrained soft shadow; use it to invite a story start.

### Story card

Pale sage surface with a thin sage-gray border and rounded corners; story copy and artwork stay quiet against the canvas.

### Process walkthrough

Numbered, staggered sequence of interface panels explaining writer selection, settings, matchmaking, and chapter editing.

### Library controls

Compact bordered arrow controls and a small 'See all' action sit beside a display-style section heading.

### Core values row

A pale, lightly outlined horizontal panel pairs a short value title with compact explanatory copy.

### Footer navigation

A charcoal band uses pale text in compact columns, balanced by a centered brand mark and short descriptor.

### Measured component styles

- **Primary button** (“Start a story”): background #f9f9f7 · text #000000 · radius 24px · padding 0px 29px · 400 15px ABCArizonaSans · shadow rgba(0, 0, 0, 0.2) 0px 2px 6px 0px
- **Secondary button** (“See all”): background #edf0e9 · text #000000 · border 1px solid #d2ddd2 · radius 6px · padding 0px 13px · 500 13px ABCArizonaSans
- **Link** (“Grievances written by ALYSSAH TONN and E”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px ABCArizonaSans
- **Card** (“Every writer is a color here. Which one ”): background #f1f3ef · text #000000 · border 1px solid #d2ddd2 · radius 12px · padding 0px · 400 16px ABCArizonaSans
- **Navigation item** (“Home”): transparent background · text #f9f9f7 · radius 0px · padding 0px · 400 15px ABCArizonaSansVariable

## Do

- Use #f9f9f7 as the dominant canvas.
- Reserve distressed display lettering for short section titles.
- Set explanatory copy in clean sans-serif text.
- Use #f1f3ef panels and #d2ddd2 hairlines for quiet grouping.
- Keep bright colors limited to writer and illustration details.
- Create asymmetry with staggered demonstrations and spacious section breaks.

## Don't

- Do not turn the page into a saturated multicolor interface.
- Do not add heavy shadows to cards or story covers.
- Do not center every heading and content block.
- Do not use the distressed display face for long paragraphs.
- Do not crowd the narrow reading areas with dense grids.
- Do not treat illustration-only colors as core UI surfaces.

## Agent prompt

Build a new page in Switch-Lit’s quiet editorial style. Use Paper Canvas (#f9f9f7) as the broad background, Story Ink (#000000) for type, and Sage Mist (#f1f3ef) panels with Pencil Sage (#d2ddd2) hairlines for content grouping. Give major section titles a bold, textured display face; pair them with light serif headings and readable sans-serif body copy. Keep content measures narrow, use generous blank space between sections, and vary alignment with restrained staggered layouts rather than making every block symmetrical. Treat Story Periwinkle (#bed4fb) and Prompt Lime (#edfe5e) as rare illustration or identity cues. Keep cards flat, borders delicate, controls softly rounded, and the footer as a compact Charcoal Close (#1c1c1c) band.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Sparse header navigation over the light canvas, with a prominent story-start action and grouped page links. | Primary start action, Direct page navigation | Light canvas, Compact sans-serif links, Rounded CTA |
| 2 | how-it-works | Staggered numbered walkthrough panels, mixing a writer-color selection screen, story settings, matchmaking, and an editing preview. | Numbered steps, Choose writer identity, Configure story, Preview collaboration | Pale bordered demo panels, Small color markers, Asymmetric alignment |
| 3 | product-grid | A display-style section heading above a horizontal multi-column library of story covers and metadata. | Browse story examples, Carousel arrows, See-all link | Compact story cards, Small author captions, Bordered controls |
| 4 | feature-split | Two-column feature area with a short explanatory block and a single supporting image. | Read latest prompts | Display heading, Concise body copy, Light CTA |
| 5 | feature-grid | Section heading and introduction lead into a stacked set of horizontal value rows. | Scan value statements, Read paired explanations | Two-part rows, Pale panels, Fine borders |
| 6 | other | A brief standalone visual interlude with a quote and small decorative illustration. | Reflective pause | Open canvas, Small illustration, Editorial quotation |
| 7 | footer | Full-width dark footer organized into three compact columns, with brand identity centered. | Secondary navigation, Newsletter access, Social links | Charcoal band, Pale links, Centered wordmark |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/switch-lit-com