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

# Shortcut · Design System

> Clear, spacious product storytelling with indigo accents

**Theme:** light · **Industry:** saas · **Source:** https://www.shortcut.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._

Shortcut pairs a bright, spacious canvas with confident indigo calls to action and deep navy feature bands. Product interface imagery, centered headings, and rounded cards make the page feel practical and approachable.

## North star

Let clear product UI and centered, spacious storytelling lead; use indigo for actions and navy only for purposeful contrast.

## Overview

The page is built on a white canvas, with pale lavender-gray bands separating feature areas and deep navy sections reserved for selected product stories and the closing CTA/footer. Indigo is the key action color: it marks primary buttons and selected headline emphasis, while dark ink carries headings and navigation. Satoshi is used throughout, combining heavy, tightly tracked display headlines with readable medium-weight body copy. Sections favor centered introductions followed by product UI imagery or two-column content; the page alternates open white space with denser card and interface layouts. Product screenshots are the main visual asset, shown large enough to explain workflows rather than as decorative thumbnails. Cards use pale surfaces, subtle borders, rounded corners, and restrained shadows. The overall rhythm is spacious and orderly, with consistent button styling and occasional yellow badges adding a small contrast note.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas and light section background; also appears in text and fades. |
| Shortcut Indigo | `#494bcb` | `--color-shortcut-indigo` | brand | Primary CTA fill, selected navigation accents, and highlighted headline text. |
| Midnight Ink | `#08093f` | `--color-midnight-ink` | brand | Core heading and navigation text, inverse text, and full-width dark feature bands. |
| Quiet Slate | `#686878` | `--color-quiet-slate` | neutral | Muted body copy, navigation details, and subdued labels on light backgrounds. |
| Cloud Lavender | `#f6f6fa` | `--color-cloud-lavender` | surface | Soft section bands, navigation surfaces, cards, and secondary button backgrounds. |
| Dusky Indigo | `#3e3f69` | `--color-dusky-indigo` | semantic | Minor button-related border detail; not a defining page color. |
| Nightfall Blue | `#181b4c` | `--color-nightfall-blue` | brand | Lower stop in the dark section gradient and subtle footer or section treatment. |
| Mist Lilac | `#f0f0f7` | `--color-mist-lilac` | surface | Feature cards, badges, and light UI surfaces against white. |
| Soft Divider | `#dddde1` | `--color-soft-divider` | neutral | Fine card borders and quiet separators. |
| Deep Navy | `#13153d` | `--color-deep-navy` | brand | Upper stop in the dark section gradient; supports navy feature-band depth. |
| Pale Rule | `#e5e5e5` | `--color-pale-rule` | neutral | Additional card and navigation hairlines; secondary to the measured divider color. |
| Footer Haze | `#babbca` | `--color-footer-haze` | neutral | Low-emphasis footer and navigation text. |
| Warm Badge | `#ffde87` | `--color-warm-badge` | accent | Small New badge and occasional illustrative annotation, not a primary brand surface. |
| Muted Indigo | `#30315e` | `--color-muted-indigo` | accent | Minor button accent detail; subordinate to Shortcut Indigo. |
| Lilac Tint | `#b0b1e9` | `--color-lilac-tint` | semantic | Tiny button-related detail, not a prominent page color. |
| Illustration Pink | `#ffa7de` | `--color-illustration-pink` | semantic | Very limited button or interface detail; not a defining brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#08093f` (Midnight Ink) · `--color-surface-2` → `#f6f6fa` (Cloud Lavender) · `--color-surface-3` → `#f0f0f7` (Mist Lilac) · `--color-text` → `#08093f` (Midnight Ink) · `--color-text-muted` → `#686878` (Quiet Slate) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#dddde1` (Soft Divider) · `--color-accent` → `#494bcb` (Shortcut Indigo) · `--color-accent-2` → `#30315e` (Muted Indigo) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#08093f` | `#ffffff` | 18.73:1 | AAA |
| `#08093f` | `#f6f6fa` | 17.38:1 | AAA |
| `#08093f` | `#f0f0f7` | 16.51:1 | AAA |
| `#686878` | `#ffffff` | 5.47:1 | AA |
| `#686878` | `#08093f` | 3.42:1 | AA-large |
| `#686878` | `#f6f6fa` | 5.07:1 | AA |
| `#686878` | `#f0f0f7` | 4.82:1 | AA |
| `#ffffff` | `#08093f` | 18.73:1 | AAA |
| `#ffffff` | `#f6f6fa` | 1.08:1 | fail |
| `#ffffff` | `#f0f0f7` | 1.13:1 | fail |

### Gradients

- `linear-gradient(rgb(19, 21, 61) 0%, rgb(24, 27, 76) 100%)`
- `linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0))`
- `radial-gradient(circle, rgb(240, 240, 251), rgba(255, 255, 255, 0) 55%)`
- `radial-gradient(circle, rgba(255, 255, 255, 0) 31%, rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Satoshi | `--font-body` | webfont | 500, 700, 600, 900, 400 | All page typography, from display headlines and navigation to body copy, buttons, and captions. | Plus Jakarta Sans |

- **Satoshi:** Use bold, tightly tracked display headlines; body and navigation remain clean and mostly sentence case, with uppercase eyebrow labels.

### Type scale — Custom (ratio ≈ 1.886, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 700 | 1.12 | -0.02em | capitalize | Satoshi | Large centered hero and campaign headlines. |
| h1 | 48px | 700 | 1.25 | -0.02em | — | Satoshi | Primary section headlines and prominent feature titles. |
| body | 18px | 500 | 1.6 | 0 | — | Satoshi | Explanatory paragraphs beneath headings and within feature areas. |
| caption | 14px | 500 | 1.35 | 0 | — | Satoshi | Small supporting notes, UI labels, and customer details. |
| button | 18px | 700 | 1.3 | 0 | — | Satoshi | Primary and secondary CTA labels. |
| nav | 16px | 700 | 1.25 | 0 | — | Satoshi | Header navigation and prominent menu labels. |
| link | 14px | 500 | 1.5 | 0 | — | Satoshi | Secondary links and card actions. |
| eyebrow | 14.5px | 700 | 1.1 | 0.08em | uppercase | Satoshi | Uppercase category labels above section headings. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 5, 6, 8, 10, 12, 14, 16, 20, 24, 32, 96 px.
- Section rhythm 96px · element gap 8px · card padding — · max content width 1296px.

Use a centered content frame with a measured maximum width of 1296px and a spacious 96px section rhythm. The header is a single horizontal navigation row. Most sections begin with centered headings and concise copy, then shift into two-column feature layouts, product showcases, or card grids. Alternate white canvas sections with pale lavender-gray bands and occasional full-width navy sections. Keep density low around introductions, letting product UI occupy the visual focus.

## Shape & elevation

- Radius: button `8px` · card `16px` · media `50%` · badge `9999px` · nav `8px` · link `10px` · xs `6px` · sm `8px` · md `10px` · lg `12px` · xl `16px` · pill `9999px`
- Shadow `md` (card): `rgba(8, 9, 63, 0.04) 0px 8px 16px 0px`
- Shadow `md-2` (card, section): `rgba(21, 30, 45, 0.09) 0px 6px 19px 0px`
- Shadow `md-3` (nav): `rgba(0, 0, 0, 0.024) 0px 12px 12px 0px, rgba(8, 9, 63, 0.08) 0px 2px 0px 0px`
- Shadow `md-4` (media): `rgba(21, 30, 45, 0.09) 0px 7px 21px 0px`
- Motion: standard transition `0.18s ease` on interactive elements.

The page is mostly flat, relying on section color changes and fine card borders to define structure. Use subtle, soft shadows beneath interface panels and customer cards rather than dramatic elevation. Rounded card surfaces sit close to the background; dark sections gain depth through a restrained navy gradient, not heavy effects.

## Imagery

Product interface screenshots and workflow mockups are the main imagery; customer portraits and small partner or certification marks support specific sections. Frame product UI as large, legible panels, often with subtle shadows and rounded edges. Use diagram-like annotations sparingly around screenshots. There is no dominant photographic or 3D art direction; interface imagery should feel crisp and integrated with the page.

## Components

### Primary CTA

Solid Shortcut Indigo (#494bcb) button with white text, an 8px radius, and bold Satoshi lettering; keep it visually dominant.

### Header navigation

Single horizontal row on white, with dark ink links, compact dropdown indicators, and an indigo sign-up button.

### Eyebrow badge

Small pill or compact rounded label above section headings; use pale surfaces or Warm Badge (#ffde87) for selected new-item emphasis.

### Feature card

Pale Mist Lilac (#f0f0f7) or white card with a fine divider border, rounded corners, and restrained shadow.

### Product showcase

Large, crisp product UI panel, optionally surrounded by short hand-drawn-style workflow annotations.

### Dark feature band

Full-width Midnight Ink (#08093f) section with light text, product imagery, and concise centered introduction.

### Secondary action

Quiet text or pale-surface button alongside the primary CTA, visually subordinate and typically indigo or dark-ink labeled.

### Measured component styles

- **Primary button** (“Get Started - free forever”): background #494bcb · text #ffffff · border 1px solid · radius 8px · padding 10px 20px · 700 18px Satoshi
- **Secondary button** (“Discover Key Features”): background #30315e · text #ffffff · border 1px solid · radius 8px · padding 10px 20px · 700 18px Satoshi
- **Link** (“Sprints Quickly prioritize and keep trac”): transparent background · text #08093f · radius 0px · padding 28px 0px 0px 32px · 500 16px Satoshi
- **Card** (“Sprints Quickly prioritize and keep trac”): background #f0f0f7 · text #08093f · border 1px solid #dddde1 · radius 16px · padding 0px · 500 16px Satoshi · shadow rgba(8, 9, 63, 0.04) 0px 8px 16px 0px
- **Badge** (“New”): background #ffde87 · text #000000 · radius 6px · padding 4px 6px · 700 11px Satoshi
- **Navigation item** (“Shortcut Way Product Products Shortcut F”): transparent background · text #08093f · radius 0px · padding 0px · 500 16px Satoshi

## Do

- Use white as the default canvas.
- Reserve indigo for primary actions and selective emphasis.
- Center section introductions above their content.
- Show product interfaces as legible, substantial panels.
- Separate major content areas with pale or navy bands.
- Keep shadows subtle and borders fine.
- Use generous whitespace between section groups.

## Don't

- Do not turn every section into a card grid.
- Do not use bright colors beyond measured accents.
- Do not crowd headings with dense explanatory copy.
- Do not add decorative photography that competes with product UI.
- Do not apply strong shadows to every element.
- Do not use navy as the default light-section background.
- Do not introduce unmeasured sizes, colors, or radii.

## Agent prompt

Build a new page in Shortcut’s visual style: a white, spacious canvas with centered Satoshi headings and clear product-led storytelling. Use Midnight Ink (#08093f) for headings and navigation, Shortcut Indigo (#494bcb) for primary CTA buttons and selective emphasis, Quiet Slate (#686878) for supporting copy, and Cloud Lavender (#f6f6fa) or Mist Lilac (#f0f0f7) for soft section and card surfaces. Alternate open white sections with occasional full-width navy feature bands. Lead feature areas with concise centered introductions, then show substantial, crisp product-interface panels or orderly two-column content. Keep borders delicate, shadows restrained, and card corners consistent with the measured rounded treatment. Add only small Warm Badge (#ffde87) labels where useful. Preserve generous section rhythm and avoid decorative assets that distract from the interface.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered announcement, large headline, supporting copy, CTA, then wide product UI preview. | announcement link, primary signup CTA, trust proof | centered display type, indigo emphasis, product screenshot |
| 2 | feature-split | Centered section introduction followed by a two-column product showcase. | feature discovery, primary and secondary actions | category eyebrow, workflow screenshot, annotation labels |
| 3 | feature-split | Full-width dark band with centered intro and broad interface image. | progress visibility, feature discovery | navy background, light type, status-rich product UI |
| 4 | product-showcase | White section with centered heading and a wide objectives interface below. | goal alignment, primary signup action | yellow category badge, product table, annotated details |
| 5 | feature-grid | Pale section with centered introduction and a three-column feature-card layout. | feature comparison, customization discovery | soft surface band, rounded cards, embedded UI previews |
| 6 | product-showcase | Dark, media-led product area with a large interface and supporting panels. | agent introduction, try-agent CTA | dark gradient treatment, chat interface, agent cards |
| 7 | integrations | Centered white introduction above a tidy grid of partner icons. | integration discovery, view integrations link | icon grid, compact CTA row, light background |
| 8 | feature-grid | Pale full-width band with centered copy and a horizontal row of certification cards. | security reassurance, learn more action | certification tiles, muted surface, centered heading |
| 9 | testimonials | White section with centered introduction and two testimonial cards side by side. | customer proof, read all stories | quote cards, customer avatars, subtle elevation |
| 10 | cta | Full-width dark section with centered CTA panel and two actions. | free signup, request a demo | navy canvas, indigo primary action, soft gradient panel |
| 11 | footer | Dark footer with brand/social area, four link columns, and a slim legal row. | multi-column navigation, legal links, social access | navy background, muted footer links, compact lists |

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