Shopify

Overview

Shopifi runs two parallel design tracks that share typographic DNA and a single button vocabulary, but diverge in canvas polarity. The marketing track lives on `{colors.canvas-night}` (`#000000`) — full-bleed cinematic photography of merchants, giant `{typography.display-xxl}` headlines in Neue Haas Grotesk Display set at weight 330 (a thin, almost editorial cut), and a single CTA: a white-stroked black pill with the form `button-outline-on-dark`. The pages read like the spread of a high-end print magazine: lots of black, lots of negative space, photography that doesn't compete with text, and one and only one action per band.

The transactional track flips to `{colors.canvas-light}` and `{colors.canvas-cream}` (an off-white that's barely warmer than pure white). Pricing tiers, comparison tables, and signup flows sit on this lighter canvas, with the same pill button system but in inverse polarity (a solid black pill with white text, or a `{colors.aloe-10}` mint pill for the featured / "Start free trial" tier). The accents — `{colors.aloe-10}` mint and `{colors.pistachio-10}` pistachio — show up only on the light track, never on the cinematic dark hero pages.

Typography is split across three families. **Neue Haas Grotesk Display** at thin weights (330–500) handles every display, headline, and editorial moment — the brand's identity is that thin display cut. **Inter Variable** at 420–550 weights handles every UI body, button label, caption, and form field — utility text that doesn't fight the display. **ui-monospace** appears only in code blocks and rare technical eyebrows. Across all three families, the OpenType `ss03` stylistic set is enabled — it's the brand's character-level signature, applied universally.

**Key Characteristics:**

• Two-canvas system: `{colors.canvas-night}` for cinematic marketing, `{colors.canvas-light}` / `{colors.canvas-cream}` for transactional surfaces — never blended.
• Pill-shape (`{rounded.pill}`) is the only button shape across both tracks; rounded rectangles do not exist for buttons.
• Thin-weight (330) display typography is the signature; `{typography.display-xxl}` at 96px / weight 330 is the brand's loudest visual.
• Aloe and pistachio greens (`{colors.aloe-10}`, `{colors.pistachio-10}`) are reserved for the light track — they signal commerce, growth, transactional success.
• Photography is full-bleed, edge-to-edge, never inset in cards on the cinematic track; merchants and storefront imagery do the heavy visual lifting that gradients and illustrations would do elsewhere.
• The OpenType `ss03` stylistic set is enabled across every text role — a character-level unifier that tracks across both tracks.
• Tight letter-spacing on display sizes (2.4px positive tracking on 96px display) gives the thin weight extra optical air.

Colors

> **Source pages:** home (`/`), `/start`, `/website/builder`, `/pricing`.

Brand & Accent

• **Aloe** (`{colors.aloe-10}` — `#c1fbd4`): The featured-tier and "growth" accent. Used as a pill button background on light surfaces and as a feature-card fill in the pricing comparison band.
• **Pistachio** (`{colors.pistachio-10}` — `#d4f9e0`): Softer than aloe; used as a wide section band fill on the light track to signal a different category of feature without leaving the green family.
• **Cool Link Tones** (`{colors.link-cool-1}` `#9dabad`, `{colors.link-cool-2}` `#9797a2`, `{colors.link-cool-3}` `#bdbdca`, `{colors.link-mint}` `#99b3ad`): Muted footer / tertiary link colors used on dark surfaces to create a quiet hierarchy below the primary white type.

Surface

• **Canvas Night** (`{colors.canvas-night}` — `#000000`): Pure black hero, cinematic feature pages, footer.
• **Canvas Night Elevated** (`{colors.canvas-night-elevated}` — `#0a0a0a`): Cards on cinematic surfaces, video frames.
• **Surface Elevated Dark** (`{colors.surface-elevated-dark}` — `#1e2c31`): Dark teal-shifted surface used on a small subset of dark cards to introduce subtle depth without breaking the black.
• **Canvas Light** (`{colors.canvas-light}` — `#ffffff`): Pricing, signup, comparison tables.
• **Canvas Cream** (`{colors.canvas-cream}` — `#fbfbf5`): Slightly warm off-white used on the pricing-page background canvas — invisibly different from `#ffffff` but adds editorial warmth.
• **Hairline Light** (`{colors.hairline-light}` — `#e4e4e7`): 1px borders on light cards, table dividers.
• **Hairline Dark** (`{colors.hairline-dark}` — `#1e2c31`): 1px borders on the rare dark cards that have visible chrome.

Shade Ladder

• **Shade-30** (`{colors.shade-30}` — `#d4d4d8`): Tag / chip background on light, footer hairline on dark.
• **Shade-40** (`{colors.shade-40}` — `#a1a1aa`): Tertiary text on light, secondary text on dark.
• **Shade-50** (`{colors.shade-50}` — `#71717a`): Secondary text on light.
• **Shade-60** (`{colors.shade-60}` — `#52525b`): Tertiary text on light, deep on dark.
• **Shade-70** (`{colors.shade-70}` — `#3f3f46`): Pressed-state of the primary pill button; deep dark surface accent.

Text

• **Ink** (`{colors.ink}` — `#000000`): All text on light canvas.
• **On Primary** (`{colors.on-primary}` — `#ffffff`): All text on dark canvas + filled-pill labels.

Typography

Font Family

The display tier is **Neue Haas Grotesk Display** at thin weights (330–500). When unavailable, fall back to **Helvetica** at light weight, then Arial. The thin-weight cut is the brand — no substitution should default to weight 400+.

The UI tier is **Inter Variable** at 420–550 — a variable font with sub-weight precision that lets the system span body (420), strong (550), and caption (500) without jumping to heavier tiers. Inter is open-source via Google Fonts.

The code tier is **ui-monospace**, the system mono — preferred over a webfont mono to avoid unnecessary downloads.

The OpenType `ss03` stylistic set is enabled across every role. It alters specific glyph forms (lowercase `a`, `g`, single-story numerals) for a slightly more geometric character. Apply via `font-feature-settings: "ss03"` on the body element or root.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xxl}` | 96px | 330 | 1.0 | 2.4px | Cinematic hero headline |

| `{typography.display-xl}` | 70px | 330 | 1.0 | 0 | Section opener on cinematic pages |

| `{typography.display-lg}` | 55px | 330 | 1.16 | 0 | Pricing-page page title |

| `{typography.display-md}` | 48px | 330 | 1.14 | 0 | Sub-section headline on light track |

| `{typography.heading-xl}` | 28px | 500 | 1.28 | 0.42px | Card title / pricing tier name |

| `{typography.heading-lg}` | 24px | 400 | 1.14 | 0.36px | Compact card title |

| `{typography.heading-md}` | 20px | 500 | 1.4 | 0.3px | Section sub-heading |

| `{typography.heading-sm}` | 18px | 500 | 1.25 | 0.72px | Eyebrow / mini-section label |

| `{typography.body-lg}` | 18px | 550 | 1.56 | 0 | Marketing body lead, large body |

| `{typography.body-md}` | 16px | 420 | 1.5 | 0 | Default UI body, pill-button labels |

| `{typography.body-strong}` | 16px | 550 | 1.5 | 0 | Emphasized body run |

| `{typography.caption}` | 14px | 500 | 1.49 | 0.28px | Helper copy, footnotes |

| `{typography.micro}` | 13px | 500 | 1.5 | -0.13px | Pricing fine print |

| `{typography.eyebrow-cap}` | 12px | 400 | 1.2 | 0.72px | All-caps eyebrow above large headlines |

| `{typography.code}` | 16px | 400 | 1.5 | 0 | Code blocks |

Principles

• **Display thinness is the brand.** Always render display sizes at weight 330 — never 400+. The thinness is a deliberate editorial choice that makes the giant size feel quiet.
• **Display in NHGD, body in Inter.** Don't push body roles up to NHGD; don't push display roles down to Inter.
• **Tracking lifts on display.** The 96px hero gets +2.4px positive tracking — the thin glyphs need air. At 70px and below, tracking returns to 0.

Note on Font Substitutes

Open substitutes for Neue Haas Grotesk Display: **Helvetica Now Display** (proprietary) or **Inter Display** at light weights (open-source) are the closest matches. Avoid Helvetica Neue at default weight — it's too heavy for the brand's thin tier. **Inter Variable** is open-source via Google Fonts and is the canonical body face — no substitute needed.

Layout

Spacing System

• **Base unit**: 8px (with denser sub-units 1, 2, 3, 4 for fine work).
• **Tokens**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.huge}` 64px.
• **Section padding**: `{spacing.huge}` 64–128px on cinematic marketing pages (extreme negative space is the point); collapses to ~48px on transactional pages where density takes priority.
• **Card internal padding**: `{spacing.xxl}` 32px on pricing cards; `{spacing.xl}` 24px on compact tag rows.

Grid & Container

• Cinematic hero pages use a wide max-width container (~1440–1600px) with edge-bleeding photography that escapes the container.
• Pricing collapses through 4-up → 2-up → 1-up tiers based on viewport.
• Body content centers in a ~720–840px reading column on long-form pages.

Whitespace Philosophy

The cinematic track treats whitespace as the brand's most valuable asset — sections often have 128–192px of vertical air between content blocks, with photography filling the rest. The transactional track tightens to ~48–64px between bands because users are scanning, comparing, and acting. The contrast between the two whitespace philosophies is part of the brand voice.

Elevation & Depth

| Level | Treatment | Use |

|---|---|---|

| 0 | Flat, no shadow | Default surface |

| 1 | `0 1px 2px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.04)` | Subtle inset highlight on dark cards (a top-edge sheen) |

| 2 | `0 0 0 1px rgba(255,255,255,0.08), 0 1px 3px rgba(0,0,0,0.3), 0 5px 10px rgba(0,0,0,0.2)` | Dark elevated cards with hairline + drop shadow stack |

| 3 | `0 8px 8px rgba(0,0,0,0.1), 0 4px 4px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.1)` | Stacked-shadow card on light surfaces; layered tiny shadows produce a soft halo |

| 4 | `0 25px 50px -12px rgba(0,0,0,0.25)` | Modal / floating panel on light |

Decorative Depth

On the cinematic track, depth comes from photography — full-bleed merchant imagery layered behind cards, with subtle inset top-edge highlights creating the illusion of light hitting a glass surface. On the light track, the layered tiny-shadow stack (Level 3) produces a soft, paper-like halo around pricing cards — depth without harshness.

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Inputs, hairline tags |

| `{rounded.sm}` | 5px | Image containers (small) |

| `{rounded.md}` | 8px | Form inputs, video frames, smaller cards |

| `{rounded.lg}` | 12px | Pricing cards, feature cards |

| `{rounded.xl}` | 20px (top-only on some asymmetric cards) | Hero photo frames, cinematic card chrome |

| `{rounded.pill}` | 9999px | All buttons, pill tags, mint chips |

Photography Geometry

Photography is full-bleed with no border. On cinematic pages it escapes the container entirely; on transactional pages it sits inside `{rounded.lg}` containers with no shadow. Avatar treatments in customer-logo strips are simple greyscale wordmarks at uniform height (~24–32px), aligned in a single horizontal strip.

Components

Buttons

**`button-primary-pill`** — the dominant CTA across the system.

• Background `{colors.primary}` (black), text `{colors.on-primary}`, type `{typography.body-md}`, padding `{spacing.md} {spacing.xl}` (12px 24px), rounded `{rounded.pill}` 9999px.
• Pressed state `button-primary-pill-pressed`: background lifts to `{colors.shade-70}`.

**`button-outline-on-dark`** — the cinematic hero CTA.

• Background `{colors.canvas-night}` (transparent on the canvas), 2px solid `{colors.on-primary}` border, text `{colors.on-primary}`, same pill geometry.

**`button-outline-on-light`** — the light-track equivalent.

• Background `{colors.canvas-light}`, 1px solid `{colors.ink}` border, text `{colors.ink}`, same pill geometry.

**`button-aloe-pill`** — the featured CTA on pricing pages.

• Background `{colors.aloe-10}`, text `{colors.ink}`, same pill geometry. Used for the "Start free trial" tier.

Cards & Containers

**`card-pricing`** — the standard tier card on the pricing page.

• Background `{colors.canvas-light}`, padding `{spacing.xxl}`, rounded `{rounded.lg}` 12px, 1px `{colors.hairline-light}` border. Title in `{typography.heading-xl}`, price in `{typography.display-md}`, body in `{typography.body-md}`, CTA pinned to the bottom as `button-primary-pill`.

**`card-pricing-featured`** — the highlighted pricing tier.

• Background `{colors.aloe-10}`, otherwise identical to `card-pricing`. The mint fill (rather than a brand-color border) is the brand's distinctive featured-tier choice.

**`card-feature-cinematic`** — feature card on the cinematic track.

• Background `{colors.canvas-night-elevated}`, text `{colors.on-primary}`, rounded `{rounded.lg}`, often with a top-edge inset highlight (Level 1 elevation). Holds full-bleed photography or a single large statement.

**`card-pistachio-band`** — wide horizontal band card used to highlight a category of features on the light track.

• Background `{colors.pistachio-10}`, text `{colors.ink}`, rounded `{rounded.lg}` 12px, padding `{spacing.xxl}`.

**`card-photo-frame`** — full-bleed photography container on cinematic pages.

• Background `{colors.canvas-night}`, padding 0, rounded `{rounded.xl}` 20px (often top-only). The photo IS the content; no inner padding, no overlay text inside the card.

Inputs & Forms

**`text-input`** — standard text input on light surfaces.

• Background `{colors.canvas-light}`, text `{colors.ink}`, type `{typography.body-md}`, padding `{spacing.sm}+ {spacing.md}` (10px 12px), rounded `{rounded.md}` 8px, 1px `{colors.hairline-light}` border.

Navigation

**`nav-bar-light`** — top nav on light pages.

• Background `{colors.canvas-light}`, text `{colors.ink}`, padding `{spacing.lg} {spacing.xl}`. Logo wordmark on the left, nav items center, two pill buttons on the right (`button-outline-on-light` for "Log in", `button-primary-pill` for "Start free trial").

**`nav-bar-dark`** — top nav on cinematic pages.

• Background `{colors.canvas-night}`, text `{colors.on-primary}`, otherwise identical structure. Two pill buttons on the right (`button-outline-on-dark` for both, with the rightmost subtly more prominent via type weight).

Pills, Tags, and Chips

**`pill-tag-mint`** — small tag on light surfaces, signaling a feature category.

• Background `{colors.aloe-10}`, text `{colors.ink}`, type `{typography.eyebrow-cap}`, padding `{spacing.xs} {spacing.md}`, rounded `{rounded.pill}`.

**`pill-tag-shade`** — neutral tag on light surfaces.

• Background `{colors.shade-30}`, text `{colors.ink}`, otherwise same shape as `pill-tag-mint`.

Signature Components

**Cinematic Photography Layer** — full-bleed merchant photos on the hero. No overlay scrim, no text-on-image; instead, the type sits in clean negative space above or below the photo. The brand treats photography as an editorial spread, not as decoration.

**Stacked Tiny Shadows (Level 3 Elevation)** — pricing cards on the light track use 4 stacked tiny drop shadows (each 1–8px Y offset, 10% black) to produce a soft, layered paper halo. This is the brand's distinctive depth on light.

**`link-on-dark`** — inline link on cinematic pages.

• Color `{colors.on-primary}`, no underline by default (links rely on context); for tertiary footer links, color shifts to one of the cool muted tones (`{colors.link-cool-1}` etc.) with a persistent underline.

**`footer-dark`** — full-page-width footer on the cinematic track.

• Background `{colors.canvas-night}`, text `{colors.on-primary}`, type `{typography.caption}`, padding `{spacing.huge} {spacing.xl}`. Contains 4–5 columns of muted-tone link groups, social icons, and a small legal row.

**`footer-light`** — equivalent on the transactional track.

• Background `{colors.canvas-light}`, text `{colors.ink}`, otherwise same structure.

Do's and Don'ts

Do

• Reserve `{colors.aloe-10}` and `{colors.pistachio-10}` for the light track only — they don't appear on cinematic black pages.
• Always use `{rounded.pill}` for buttons; never `{rounded.md}` or `{rounded.lg}`.
• Render display tiers at weight 330; bumping to 400 or 500 breaks the brand's thin-display signature.
• Use full-bleed photography on cinematic pages — let it escape the container.
• Apply `font-feature-settings: "ss03"` globally; the stylistic set is the brand's typographic signature.
• Pair black canvas with white type and white-stroked outline pills; pair light canvas with black type and filled-black pills.

Don't

• Don't introduce a third canvas color — stick to black or light/cream. Greys, beiges, and blues are not in the system.
• Don't add drop shadows on cinematic dark cards beyond the subtle inset top-highlight; the cinematic track wants flat blackness.
• Don't shrink display tiers below `{typography.display-md}` (48px) on hero surfaces; below that they read as section heads, not display.
• Don't put aloe / pistachio greens behind type — they're surface fills, not text colors.
• Don't replace the pill shape with a rounded-rectangle button anywhere.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Wide | ≥ 1440px | Full cinematic hero with edge-bleeding photography; pricing 4-up |

| Desktop | 1024–1440px | Default content max-width; pricing 4-up tightens |

| Tablet | 768–1023px | Pricing 2-up; cinematic hero photography crops |

| Mobile | < 768px | Pricing 1-up; hamburger nav; display-xxl drops to ~56–64px |

Touch Targets

• Pill buttons hit ≥ 44×44px on mobile via 12px vertical padding × 16px line-height. WCAG AAA compliant.
• Form fields stay at the 44px minimum height across all breakpoints.

Collapsing Strategy

• Display sizes scale down through the breakpoint stair: 96 → 70 → 55 → 48 → 36px on mobile.
• Cinematic photography crops aggressively at smaller widths, prioritizing focal subject over edge-bleed.
• Pricing tiers stair-step 4-up → 2-up → 1-up; the featured aloe tier stays visually distinguished at every step.
• Top nav collapses to hamburger below 768px; menu inherits canvas polarity.

Image Behavior

Photography uses responsive `srcset` with art-direction crops at major breakpoints. Mobile crops favor close subjects; wide crops favor environmental / storefront context.

Iteration Guide

1. Focus on ONE component at a time.

2. Reference component names and tokens directly (`{colors.aloe-10}`, `{button-primary-pill}-pressed`, `{rounded.pill}`).

3. Run `npx @google/design.md lint DESIGN.md` after edits.

4. Add new variants as separate entries.

5. Default body to `{typography.body-md}`; reserve `{typography.body-lg}` for marketing leads.

6. Keep the two canvas tracks separated — when designing a new page, choose cinematic OR transactional, not both.

7. The pill shape is non-negotiable; new button variants vary in fill / border / canvas, never in shape.

개요

Shopifi는 인쇄상의 DNA와 단일 버튼 어휘를 공유하지만 캔버스 극성이 다른 두 개의 병렬 디자인 트랙을 실행합니다. 마케팅 트랙은 `{colors.canvas-night}`(`#000000`)에 있습니다. 판매자의 전체 영화 사진, 무게 330(가늘고 편집에 가까운 컷)으로 설정된 Neue Haas Grotesk 디스플레이의 거대한 `{typography.display-xxl}` 헤드라인, 단일 CTA: 'button-outline-on-dark' 형식의 흰색 선이 있는 검은색 알약입니다. 페이지는 고급 인쇄 잡지가 펼쳐져 있는 것처럼 읽혀집니다. 검은색이 많고 네거티브 공간이 많으며 텍스트와 경쟁하지 않는 사진, 밴드당 단 하나의 작업만 포함됩니다.

트랜잭션 트랙은 `{colors.canvas-light}` 및 `{colors.canvas-cream}`(순백색보다 거의 따뜻하지 않은 황백색)으로 전환됩니다. 가격 등급, 비교표, 가입 흐름은 동일한 알약 버튼 시스템을 사용하지만 극성이 반대인 이 더 가벼운 캔버스에 있습니다(흰색 텍스트가 있는 단색 검정색 알약 또는 추천/"무료 평가판 시작" 계층에 대한 `{colors.aloe-10}` 민트 알약). 액센트 — `{colors.aloe-10}` 민트와 `{colors.pistachio-10}` 피스타치오 -는 라이트 트랙에만 표시되며 영화 같은 다크 히어로 페이지에는 표시되지 않습니다.

타이포그래피는 세 가지 계열로 나뉩니다. **Neue Haas Grotesk 디스플레이**는 얇은 무게(330~500)로 모든 디스플레이, 헤드라인, 편집 순간을 처리합니다. 브랜드의 아이덴티티는 바로 얇은 디스플레이 컷입니다. 420~550 가중치의 **간 변수**는 모든 UI 본체, 버튼 라벨, 캡션 및 양식 필드(디스플레이와 싸우지 않는 유틸리티 텍스트)를 처리합니다. **ui-monospace**는 코드 블록과 희귀한 기술적 눈썹에만 나타납니다. 세 가지 제품군 모두에서 OpenType 'ss03' 스타일 세트가 활성화됩니다. 이는 브랜드의 문자 수준 시그니처로서 보편적으로 적용됩니다.

**주요 특징:**

• 2-캔버스 시스템: 영화 마케팅을 위한 `{colors.canvas-night}`, 거래 표면을 위한 `{colors.canvas-light}` / `{colors.canvas-cream}` - 혼합되지 않습니다.
• 알약 모양(`{rounded.pill}`)은 두 트랙 모두에서 유일한 버튼 모양입니다. 버튼에는 둥근 사각형이 없습니다.
• 얇은 두께(330)의 디스플레이 타이포그래피가 시그니처입니다. 96px / 무게 330의 `{typography.display-xxl}`은 브랜드의 가장 큰 시각적 요소입니다.
• 알로에와 피스타치오 그린(`{colors.aloe-10}`, `{colors.pistachio-10}`)은 가벼운 트랙용으로 예약되어 있으며 상업, 성장, 거래 성공을 나타냅니다.
• 사진은 풀 블리드, 가장자리에서 가장자리까지, 영화 트랙의 카드에 삽입되지 않습니다. 판매자와 매장 전면 이미지는 다른 곳에서 그라디언트와 일러스트레이션이 수행하는 시각적 효과를 크게 높여줍니다.
• OpenType 'ss03' 스타일 세트는 모든 텍스트 역할에서 활성화됩니다. 즉, 두 트랙을 모두 추적하는 문자 수준 통합자입니다.
• 디스플레이 크기의 좁은 문자 간격(96px 디스플레이에서 2.4px 포지티브 추적)은 얇은 무게에 추가적인 시각적 공기를 제공합니다.

색상

> **소스 페이지:** 홈(`/`), `/start`, `/website/builder`, `/pricing`.

브랜드 및 액센트

• **Aloe** (`{colors.aloe-10}` — `#c1fbd4`): 추천 계층 및 '성장' 악센트입니다. 밝은 표면의 알약 버튼 배경으로 사용되며 가격 비교 밴드를 채우는 기능 카드로 사용됩니다.
• **피스타치오** (`{colors.pistachio-10}` — `#d4f9e0`): 알로에보다 부드럽습니다. 녹색 계열을 벗어나지 않고 기능의 다른 범주를 알리기 위해 조명 트랙의 넓은 섹션 밴드 채우기로 사용됩니다.
• **쿨 링크 톤**(`{colors.link-cool-1}` `#9dabad`, `{colors.link-cool-2}` `#9797a2`, `{colors.link-cool-3}` `#bdbdca`, `{colors.link-mint}` `#99b3ad`): 기본 흰색 유형 아래에 조용한 계층 구조를 만들기 위해 어두운 표면에 사용되는 음소거된 바닥글/3차 링크 색상입니다.

표면

• **캔버스 나이트**(`{colors.canvas-night}` — `#000000`): 순수한 검은 영웅, 영화 특집 페이지, 바닥글.
• **Canvas Night Elevated** (`{colors.canvas-night-elevated}` — `#0a0a0a`): 영화 표면의 카드, 비디오 프레임.
• **Surface Elevated Dark** (`{colors.surface-elevated-dark}` — `#1e2c31`): 검은색을 깨지 않고 미묘한 깊이를 도입하기 위해 어두운 카드의 작은 하위 집합에 사용되는 어두운 청록색 이동 표면입니다.
• **캔버스 라이트** (`{colors.canvas-light}` — `#ffffff`): 가격, 가입, 비교 테이블.
• **캔버스 크림**(`{colors.canvas-cream}` — `#fbfbf5`): 가격 페이지 배경 캔버스에 사용되는 약간 따뜻한 황백색 — `#ffffff`와 눈에 띄지 않지만 편집상의 따뜻함을 더합니다.
• **헤어라인 라이트** (`{colors.hairline-light}` — `#e4e4e7`): 라이트 카드의 1px 테두리, 테이블 구분선.
• **Hairline Dark** (`{colors.hairline-dark}` — `#1e2c31`): 눈에 보이는 크롬이 있는 희귀한 어두운 카드의 1px 테두리입니다.

그늘 사다리

• **Shade-30** (`{colors.shade-30}` — `#d4d4d8`): 밝은 부분에는 태그/칩 배경, 어두운 부분에는 바닥글 헤어라인.
• **Shade-40** (`{colors.shade-40}` — `#a1a1aa`): 밝은 부분에는 3차 텍스트, 어두운 부분에는 2차 텍스트입니다.
• **Shade-50** (`{colors.shade-50}` — `#71717a`): 조명 위의 보조 텍스트입니다.
• **Shade-60** (`{colors.shade-60}` — `#52525b`): 3차 텍스트

概要

Shopifi は、タイポグラフィック DNA と 1 つのボタン語彙を共有する 2 つの並行したデザイン トラックを実行しますが、キャンバスの極性は異なります。マーケティング トラックは「{colors.canvas-night}」 (「#000000」) にあります。商人のフルブリードの映画のような写真、ウェイト 330 に設定された Neue Haas Grotesk Display の巨大な「{typography.display-xxl}」見出し (薄く、ほとんど編集用のカット)、および 1 つの CTA (「button-outline-on-dark」という形式の白いストロークの黒い錠剤) です。ページは高級印刷雑誌の見開きのように読めます。黒が多く、ネガスペースが多く、テキストと競合しない写真が使用され、バンドごとにアクションは 1 つだけです。

トランザクション トラックは「{colors.canvas-light}」と「{colors.canvas-cream}」（純粋な白よりかろうじて暖かいオフホワイト）に切り替わります。価格階層、比較表、およびサインアップ フローは、同じピル ボタン システムを使用して、この明るいキャンバス上に配置されますが、極性が逆になっています (白地に黒の錠剤、または注目/「無料トライアルを開始」階層の場合は `{colors.aloe-10}` ミントの錠剤) です。アクセントの「{colors.aloe-10}」ミントと「{colors.pistachio-10}」ピスタチオは、ライトトラックにのみ表示され、映画のダークヒーローページには決して表示されません。

タイポグラフィは 3 つのファミリーに分かれています。 **Neue Haas Grotesk Display** は薄型 (330 ～ 500) で、あらゆるディスプレイ、見出し、編集の瞬間に対応します。ブランドのアイデンティティはその薄型ディスプレイ カットです。重み 420 ～ 550 の **Inter Variable** は、すべての UI 本体、ボタン ラベル、キャプション、フォーム フィールド (表示と競合しないユーティリティ テキスト) を処理します。 **ui-monospace** は、コード ブロックとまれな技術的な眉毛にのみ表示されます。 3 つのファミリーすべてで、OpenType `ss03` スタイル セットが有効になっています。これはブランドのキャラクター レベルのシグネチャであり、普遍的に適用されます。

**主な特徴:**

• 2 つのキャンバス システム: 映画のようなマーケティング用の `{colors.canvas-night}`、トランザクション サーフェス用の `{colors.canvas-light}` / `{colors.canvas-cream}` — 決してブレンドされません。
• 錠剤の形 (`{rounded.pill}`) は、両方のトラックにわたる唯一のボタンの形状です。ボタンには角丸長方形は存在しません。
• 薄型 (330) ディスプレイ タイポグラフィーが特徴です。 96 ピクセル / ウェイト 330 の「{typography.display-xxl}」は、ブランドの最も派手なビジュアルです。
• アロエとピスタチオのグリーン (`{colors.aloe-10}`、`{colors.pistachio-10}`) はライトトラック用に予約されており、商業、成長、取引の成功を示します。
• 写真はフルブリードで端から端まで撮影され、映画のトラック上のカードにはめ込まれることはありません。小売業者や店頭の画像は、グラデーションやイラストが他の場所で行うような視覚的な強化を行います。
• OpenType `ss03` スタイル セットは、すべてのテキスト ロールにわたって有効です。これは、両方のトラックにわたって追跡する文字レベルの統合です。
• ディスプレイ サイズ上の狭い文字間隔 (96 ピクセルのディスプレイで 2.4 ピクセルのポジティブ トラッキング) により、薄い重量に特別な光学的空気が与えられます。

色

> **ソース ページ:** ホーム (`/`)、`/start`、`/website/builder`、`/pricing`。

ブランドとアクセント

• **Aloe** (`{colors.aloe-10}` — `#c1fbd4`): 注目の層と「成長」のアクセント。明るい表面上のピル ボタンの背景として、また価格比較バンド内のフィーチャー カードの塗りつぶしとして使用されます。
• **ピスタチオ** (`{colors.pistachio-10}` — `#d4f9e0`): アロエより柔らかい。ライト トラック上のワイド セクション バンド フィルとして使用され、緑のファミリーから離れることなく、別のカテゴリーのフィーチャーを示します。
• **クール リンク トーン** (`{colors.link-cool-1}` `#9dabad`、`{colors.link-cool-2}` `#9797a2`、`{colors.link-cool-3}` `#bdbdca`、`{colors.link-mint}` `#99b3ad`): 暗い表面で使用されるミュートされたフッター / ターシャリ リンク カラー主要な白色タイプの下に静かな階層を作成します。

表面

• **キャンバス ナイト** (`{colors.canvas-night}` — `#000000`): 純粋な黒人のヒーロー、映画のような特集ページ、フッター。
• **Canvas Night Elevated** (`{colors.canvas-night-elevated}` — `#0a0a0a`): 映画のような表面、ビデオ フレーム上のカード。
• **サーフェス エレベーテッド ダーク** (`{colors.surface-elevated-dark}` — `#1e2c31`): ダーク ティールにシフトしたサーフェスは、黒を壊すことなく微妙な深さを導入するために、ダーク カードの小さなサブセットで使用されます。
• **Canvas Light** (`{colors.canvas-light}` — `#ffffff`): 価格、サインアップ、比較表。
• **キャンバス クリーム** (`{colors.canvas-cream}` — `#fbfbf5`): 価格設定ページの背景キャンバスで使用されるわずかに温かみのあるオフホワイト。目に見えないように `#ffffff` とは異なりますが、編集上の暖かみが加わります。
• **ヘアライン ライト** (`{colors.hairline-light}` — `#e4e4e7`): ライト カードの 1 ピクセルの境界線、テーブルの仕切り。
• **ヘアライン ダーク** (`{colors.hairline-dark}` — `#1e2c31`): 目に見えるクロムを持つレアなダーク カードの 1 ピクセルの境界線。

シェードラダー

• **Shade-30** (`{colors.shade-30}` — `#d4d4d8`): ライトにタグ/チップの背景、ダークにフッターのヘアライン。
• **Shade-40** (`{colors.shade-40}` — `#a1a1aa`): 明るい部分に 3 番目のテキスト、暗い部分に 2 番目のテキスト。
• **Shade-50** (`{colors.shade-50}` — `#71717a`): ライト上の二次テキスト。
• **Shade-60** (`{colors.shade-60}` — `#52525b`): 三次テキストオン