Overview
Framer's marketing canvas is a near-pure black artboard. The dominant surface is `{colors.canvas}` — almost pure black with a faint warmth — and on top of it sits oversized white display type set in **GT Walsheim Medium** with letter-spacing pulled to extreme negative values (-5.5px on the 110px display, -4.25px on the 85px hero). The page reads like a poster: one assertive statement per band, generous breathing room above and below.
The single accent is `{colors.accent-blue}` — used scarcely, mostly for hyperlinks, selection halos, and a subtle blue-tinted shadow ring on focused inputs. The brand chrome itself is monochrome: white pill buttons, charcoal cards, gray secondary text. What makes Framer distinctive is the rhythm break — every few sections the page drops in a **vibrant gradient atmosphere card**: a magenta-violet spotlight, a sunset-orange wash, a coral-pink panel. These aren't section backgrounds; they're individual cards arranged in a card grid, each one a small living poster that shows what Framer can produce.
Body type is **Inter Variable**, with Framer leaning hard into Inter's character variants (`cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07`, `dlig`) — the result is a body voice that feels custom-tuned, with single-storey "a", straight-leg "l", and tabular figures. There's no light mode on the marketing site; the brand IS dark.
**Key Characteristics:**
- Black-canvas marketing system: `{colors.canvas}` is the surface for hero, body, pricing, FAQ, and footer alike — no light interludes.
- Massive negative letter-spacing on display sizes (-5.5px / -4.25px / -3.1px) creates a poster-grade headline cadence.
- White pill (`{components.button-primary}`) is the only primary CTA shape across the site; secondary actions live as charcoal pills (`{components.button-secondary}`) or text links.
- Oversized **gradient spotlight cards** (violet, magenta, orange, coral) act as showcase tiles inside the dark grid; they are individual cards, not section backgrounds.
- Inter Variable with bespoke OpenType character variants (`cv01/05/09/11`, `ss03/ss07`, `dlig`) used everywhere body type appears — the typographic voice is unmistakable.
- Border radius scale runs from 4px utility chips up to 100px pills and full circles, with 15–20px the default for cards and 30px for atmospheric gradient cards.
- A single chromatic accent `{colors.accent-blue}` reserved for hyperlinks, focus, and selection — never decorative.
Colors
> Source pages: framer.com (home), /ai/, /startups/, /marketplace/templates/nudge/, /gallery/a16z-speedrun-×-tonik, /pricing.
Brand & Accent
- **Pure White** ({colors.primary}): The brand primary surface. Every primary CTA pill, every display headline, every body line on canvas.
- **Sky Blue** ({colors.accent-blue}): The single chromatic accent. Hyperlinks, focused-input rings, and a few selection states. Never used for backgrounds or as a brand fill.
Surface
- **Canvas** ({colors.canvas}): Default page background — near-black with a faint warmth. Footer, pricing, hero, and FAQ all sit on it.
- **Surface 1** ({colors.surface-1}): One step above canvas — pricing cards, secondary buttons, mockup tiles.
- **Surface 2** ({colors.surface-2}): Two steps above — featured pricing card, hero pill backdrop, selected pricing tab.
- **Hairline** ({colors.hairline}): 1px borders on input groups, comparison-table dividers.
- **Hairline Soft** ({colors.hairline-soft}): Subtler dividers — between FAQ rows and footer column rules.
- **Inverse Canvas** ({colors.inverse-canvas}): Pure white — used as the surface of light-on-dark pill CTAs and a small set of light-mode template thumbnails embedded in the showcase grid.
Text
- **Ink** ({colors.ink}): All headline and emphasized body type — pure white.
- **Ink Muted** ({colors.ink-muted}): Secondary type — gray (#999999) used for meta info, footer columns, comparison-row labels, deselected pricing tabs. Hierarchy on the dark canvas is carried by ink → ink-muted contrast, not by weight changes.
Semantic
- **Success Green** ({colors.semantic-success}): Pricing comparison-table checkmarks. Glyph fill, not surface.
Brand Gradient (signature)
- **Gradient Magenta** ({colors.gradient-magenta}): Spotlight card variant.
- **Gradient Violet** ({colors.gradient-violet}): Spotlight card variant — most common.
- **Gradient Orange** ({colors.gradient-orange}): Spotlight card variant — sunset wash.
- **Gradient Coral** ({colors.gradient-coral}): Spotlight card variant — coral/pink.
These four sit as oversized atmospheric tiles inside otherwise monochrome card grids — a dark canvas with one or two glowing spotlight cards is a recurring page signature.
Typography
Font Family
- **GT Walsheim Framer Medium** / **GT Walsheim Medium** — Framer's display typeface. Geometric, slightly humanist, very confident at large sizes with extreme negative tracking. Fallbacks: `GT Walsheim Medium Placeholder` system font.
- **Inter Variable** — System body typeface. Used with extensive OpenType character variants: `cv01` (alternate "1"), `cv05` (alternate "g"), `cv09` (alternate "i" / "l"), `cv11` (alternate "0"), `ss03` / `ss07` stylistic sets, `dlig` discretionary ligatures, and `tnum` for numerics in tabular contexts. The result is a body voice that feels bespoke without commissioning a custom face.
- **Inter** — Used selectively for `{typography.headline}` (the 22px / 20px tier). The non-variable cut catches small tracking targets that the variable file rounds.
Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xxl}` | 110px | 500 | 0.85 | -5.5px | Largest hero headline (home, AI page) |
| `{typography.display-xl}` | 85px | 500 | 0.95 | -4.25px | Section opener headlines |
| `{typography.display-lg}` | 62px | 500 | 1.00 | -3.1px | Sub-section openers |
| `{typography.display-md}` | 32px | 500 | 1.13 | -1.0px | Card titles, smaller display |
| `{typography.headline}` | 22px | 700 | 1.20 | -0.8px | Pricing tier headlines, FAQ category titles |
| `{typography.subhead}` | 24px | 400 | 1.30 | -0.01px | Lead body next to display headlines |
| `{typography.body-lg}` | 18px | 400 | 1.30 | -0.18px | Hero subhead, lead paragraphs |
| `{typography.body}` | 15px | 400 | 1.30 | -0.15px | Default body, card descriptions |
| `{typography.body-sm}` | 14px | 500 | 1.40 | -0.14px | Pricing comparison rows, dense data |
| `{typography.caption}` | 13px | 500 | 1.20 | -0.13px | Eyebrows, footer columns, meta |
| `{typography.micro}` | 12px | 400 | 1.20 | -0.12px | Disclaimer, footnote |
| `{typography.button}` | 14px | 500 | 1.0 | -0.14px | Pill buttons |
Principles
- **Letter-spacing scales with size, hard.** Display-xxl pulls -5.5px (5% of size); body sticks to about -1% (-0.15px on 15px). The result: posters at the top, comfortable reading at body.
- **OpenType character variants are the brand voice.** Switching off `cv11`, `ss03`, etc. visibly changes the body voice — the brand depends on them.
- **Weight stays in a narrow band.** Display sits at 500, body at 400, body-sm/caption at 500. Hierarchy is carried by size + tracking, not by 700/900 ramps.
- **Tight line-heights everywhere.** Even body runs at 1.30 — Framer's editorial tone is denser than typical SaaS marketing.
Note on Font Substitutes
If implementing without GT Walsheim Medium, suitable open-source substitutes include **Mona Sans**, **Geist**, or **Inter** at weight 600–700 with manually tightened tracking. Mona Sans's hairline weights at 100–300 are particularly close to Framer's cleaner section openers. Inter Variable is open-source — keep it as-is and preserve the documented OpenType variants.
Layout
Spacing System
- **Base unit**: 5px (Framer uses non-standard 5/10/15/20/30 increments rather than the more common 4/8/16/24).
- **Tokens (front matter)**: `{spacing.hair}` 1px · `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 15px · `{spacing.lg}` 20px · `{spacing.xl}` 30px · `{spacing.xxl}` 40px · `{spacing.section}` 96px.
- Card interior padding: `{spacing.lg}` 20px on pricing cards; `{spacing.xl}` 30px on gradient spotlight cards.
- Pill button padding: 10px vertical · 15px horizontal — `{components.button-primary}`.
- Section padding (vertical): roughly `{spacing.section}` 96px on home; tighter (~64px) on pricing comparison.
Grid & Container
- Max content width sits around the 1199px breakpoint, with side gutters that scale toward `{spacing.xl}` on desktop.
- Card grids on the home gallery use 2-up at desktop, collapsing to 1-up below 810px.
- Pricing tier grid is 4-up across the documented breakpoints; comparison table beneath it uses fixed-width left column with horizontally scrolling tier columns at narrow widths.
Whitespace Philosophy
The dark canvas IS the whitespace. Where lighter brands lean on white air to separate sections, Framer leans on long stretches of black with a single oversized statement floating in the middle. Sections separate by mode change: a band of charcoal cards, then a band of black with a gradient spotlight, then back to charcoal — like cuts in a dark film.
Elevation & Depth
| Level | Treatment | Use |
|---|---|---|
| 0 (flat) | No shadow, no border | Default for canvas-mounted display type, FAQ rows, footer |
| 1 (charcoal) | `{colors.surface-1}` lift on canvas | Pricing cards, mockup tiles, secondary buttons |
| 2 (light-edge) | `rgba(255,255,255,0.10)` 0.5px top edge + `rgba(0,0,0,0.25)` 0px 10px 30px drop | Floating product cards, modal cards |
| 3 (selected) | `rgba(0,153,255,0.15)` 0px 0px 0px 1px ring | Focused inputs, selected option |
Four shadow signatures recur across the homepage: a 1px subtle drop, a translucent blue ring, a thick near-black 2px outline (used as the active-element marker on sub-nav), and the layered light-edge + drop-shadow used for floating cards.
Decorative Depth
- **Gradient spotlight cards** are the dominant depth device — color saturation against black canvas substitutes for shadow-driven elevation.
- **Layered product mockups** (browser frames containing live Framer-built sites) sit inside `{colors.surface-1}` cards with the level-2 light-edge treatment.
- **Subtle blue ring (focus / selected)** is the only chromatic depth signal — used to mark the active state of input groups and pricing tier toggles without changing the underlying surface.
Shapes
Border Radius Scale
Framer's extracted radius set is unusually granular (1px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 20px, 30px, 40px, 100px). The named scale below picks the levels the marketing surface actually consumes.
| Token | Value | Use |
|---|---|---|
| `{rounded.xs}` | 4px | Small chip / utility radius |
| `{rounded.sm}` | 6px | Inline tag, badge |
| `{rounded.md}` | 10px | Form input, list item |
| `{rounded.lg}` | 15px | Template card thumbnails |
| `{rounded.xl}` | 20px | Pricing cards, mockup tiles |
| `{rounded.xxl}` | 30px | Gradient spotlight cards, oversized panels |
| `{rounded.pill}` | 100px | All primary text CTAs |
| `{rounded.full}` | 9999px | Circular icon buttons, avatar circles |
Photography & Illustration Geometry
- Embedded site mockups (browser-chromed previews of Framer-built sites) sit in `{rounded.xl}` 20px tiles with `{spacing.md}` 15px interior padding.
- Gradient spotlight cards use `{rounded.xxl}` 30px corners — softer than the 20px content cards by design, to make them feel like atmospheric panels rather than tighter UI.
- Icon glyphs and sub-nav glyphs render in `{rounded.full}` circles at 32–40px sizes.
Components
Buttons
**`button-primary`** — White pill on dark canvas. The primary CTA across home, pricing, AI, and gallery pages.
- Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button}`, padding 10px 15px, rounded `{rounded.pill}`.
- Pressed state lives in `button-primary-pressed` (the live site uses a transform-scale shrink rather than a darkened fill).
**`button-secondary`** — Charcoal pill. Used for secondary navigation actions ("Sign in", "Talk to sales") and as the visual counterpart to the primary pill.
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.button}`, padding 10px 15px, rounded `{rounded.pill}`.
**`button-translucent`** — Translucent / lifted secondary used on top of busy backgrounds (gallery hero, gradient cards).
- Background `{colors.surface-2}`, text `{colors.ink}`, type `{typography.button}`, rounded `{rounded.xxl}`, padding 8px 14px.
**`button-icon-circular`** — 40px circle for inline icon actions (carousel arrows, social links).
- Background `{colors.surface-1}`, text `{colors.ink}`, rounded `{rounded.full}`, size 40px.
Pricing Tabs
**`pricing-tab-default`** + **`pricing-tab-selected`** — The pill-toggle that switches between Basic / Pro / Business / Enterprise on `/pricing`.
- Default: `{colors.canvas}` background, `{colors.ink-muted}` text, rounded `{rounded.pill}`.
- Selected: `{colors.surface-2}` background, `{colors.ink}` text — selected = lift, not color. Surface depth communicates "active" without needing a chromatic fill.
Inputs & Forms
**`text-input`** + **`text-input-focused`** — Form fields on `/pricing` (seat-count, currency switcher) and the in-product preview surfaces.
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.md}`, padding 10px 14px.
- Focused state retains the same surface; the focus ring is the level-3 blue-tinted shadow `rgba(0,153,255,0.15)` 0 0 0 1px.
Cards & Containers
**`pricing-card`** — Each tier on `/pricing`.
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.xl}`, padding 24px.
**`pricing-card-featured`** — The Pro tier (visually emphasized).
- Background `{colors.surface-2}`, otherwise identical structure. The lift is one surface step up — no chromatic outline.
**`template-card`** — Thumbnail tile in the home "Built with Framer" gallery and `/marketplace`.
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body-sm}`, rounded `{rounded.lg}`, padding 12px.
**`product-mockup-tile`** — Larger tile that frames a live product UI mock (Framer canvas, Workshop video, AI translate panel).
- Background `{colors.surface-1}`, text `{colors.ink}`, type `{typography.body-sm}`, rounded `{rounded.xl}`, padding 16px.
Gradient Spotlight Cards (signature)
The defining decorative surface of Framer's marketing — oversized atmospheric tiles dropped into otherwise monochrome card grids. Variants:
**`gradient-spotlight-card`** — violet ground (most common).
- Background `{colors.gradient-violet}`, text `{colors.ink}`, type `{typography.subhead}`, rounded `{rounded.xl}`, padding 32px. (The on-site card often pushes to `{rounded.xxl}` 30px when it spans a wider tile.)
**`gradient-spotlight-card-magenta`** — magenta-pink ground.
- Background `{colors.gradient-magenta}`, otherwise identical.
**`gradient-spotlight-card-orange`** — sunset-orange wash.
- Background `{colors.gradient-orange}`, otherwise identical.
(Coral pink follows the same shape with `{colors.gradient-coral}`.)
Comparison & FAQ
**`feature-row`** + **`comparison-row`** — Single rows inside the pricing comparison table.
- `feature-row`: `{colors.canvas}` background, `{colors.ink}` text. Header rows.
- `comparison-row`: `{colors.canvas}` background, `{colors.ink-muted}` text. Data rows with `{typography.body-sm}` and 1px `{colors.hairline-soft}` underlines.
**`faq-row`** — Each accordion line in the pricing-page FAQ.
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body}`, rounded `{rounded.md}`, padding 24px.
Navigation
**`top-nav`** — Sticky bar on `{colors.canvas}` with the Framer wordmark left, primary nav links centered, and a `button-secondary` ("Sign in") + `button-primary` ("Get started for free") pair right.
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-sm}`, height 56px.
- Mobile: collapses primary links into a hamburger; the two pill CTAs collapse into a single primary pill on the bar.
Footer
**`footer`** — Dense link grid on `{colors.canvas}` with the Framer wordmark left and 5–6 columns of caption-sized links.
- Background `{colors.canvas}`, text `{colors.ink-muted}`, type `{typography.caption}`, padding 64px 32px.
Do's and Don'ts
Do
- Reserve `{colors.primary}` (white) and `{colors.canvas}` (near-black) as the system's two anchor surfaces. Every band of the page chooses one or the other.
- Push display-size letter-spacing aggressively negative — `{typography.display-xxl}` at -5.5px is the brand signature, not a stylistic accident.
- Use `{colors.accent-blue}` only for hyperlinks, focus rings, and selected indicators. Never as a background or button fill.
- Drop one or two `gradient-spotlight-card` variants into a card grid; they are the brand's atmosphere device. Don't overdo it — three or more in the same viewport reads as a moodboard, not a system.
- Compose every CTA as a pill (`{rounded.pill}`); secondary actions live as charcoal pills, never as bordered ghost buttons.
- Keep body type Inter Variable with character variants `cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07` enabled — the brand voice depends on them.
- Use surface lift (canvas → surface-1 → surface-2) to mark hierarchy on dark, not opacity changes on white type.
Don't
- Don't ship a light-mode marketing page. Framer's identity is dark.
- Don't introduce mid-tone gray text outside `{colors.ink-muted}`. The hierarchy is binary: `ink` or `ink-muted`.
- Don't use `{colors.accent-blue}` as a brand fill (e.g., a blue CTA pill). The blue is a signal color, not a surface.
- Don't square off CTAs. Pill (`{rounded.pill}`) or full circle is the brand vocabulary.
- Don't reduce the negative letter-spacing on display sizes "for accessibility". The compression is intrinsic to the brand voice; reduce the SIZE if needed, but keep the percentage.
- Don't apply gradient backgrounds to whole sections. Gradients are CARDS, not section grounds.
- Don't combine more than one chromatic accent. The palette is monochrome plus one blue plus the gradient family — not "blue, green, and red".
Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Desktop | 1199px | Default desktop layout |
| Tablet | 810px | Card grids collapse 4-up → 2-up; nav becomes hamburger |
| Mobile-Lg | 809px | Pricing comparison table becomes per-tier accordion |
| Mobile-XS | 98px | Smallest documented breakpoint — single-column everything |
Touch Targets
- Pill buttons (`button-primary`, `button-secondary`) maintain a minimum 44px tap height across all viewports — combine `{typography.button}` 14px line-height with the documented 10px vertical padding.
- Circular icon buttons (`button-icon-circular`) are 40px on desktop and grow to 44px on touch viewports.
- Pricing-tab pills hold ≥40px tap height; below 810px they may collapse into a horizontal-scroll row instead of stacking.
Collapsing Strategy
- **Nav**: horizontal nav with a centered link group + right-anchored pill pair collapses to a hamburger overlay below 810px. The `button-primary` stays visible on the bar.
- **Card grids**: the gallery and template-card grids go 2-up on desktop → 1-up on mobile. Gradient spotlight cards retain `{rounded.xxl}` corners at every viewport — they don't bleed.
- **Pricing comparison table**: collapses into per-tier accordions below 810px to avoid horizontal scroll.
- **Display type**: `{typography.display-xxl}` 110px scales down toward `{typography.display-lg}` 62px on tablet and `{typography.display-md}` 32px on mobile, preserving the percentage-negative letter-spacing.
Image Behavior
- Embedded product mockups (browser frames containing live Framer-built sites) maintain their aspect ratio and never crop.
- Gradient spotlight cards keep their gradient orientations across breakpoints — the gradient direction is part of the brand spec.
Iteration Guide
1. Focus on ONE component at a time and reference it by its `components:` token name (e.g., `{components.button-primary}`, `{components.gradient-spotlight-card}`).
2. When introducing a new section on the dark canvas, decide first which surface lift it lives on — `{colors.canvas}` for hero/FAQ, `{colors.surface-1}` for cards, `{colors.surface-2}` for featured cards. The depth choice is the most consequential decision.
3. Default body to `{typography.body}` with all the documented OpenType variants; reach for `{typography.subhead}` only inside spotlight cards.
4. Run `npx @google/design.md lint DESIGN.md` after edits — `broken-ref`, `contrast-ratio`, and `orphaned-tokens` warnings flag issues automatically.
5. Add new variants as separate component entries (`-pressed`, `-featured`, `-selected`) — do not bury them in prose.
6. Treat `{colors.accent-blue}` as a single-shot signal color: hyperlinks, focus, and selection — that's it. If you find yourself reaching for a second blue, the brand is drifting.
7. Gradient spotlight cards are scarce by design. One or two per long page is the spec; three is a moodboard.
Known Gaps
- The exact gradient stops for the spotlight cards are derived from screenshot pixels rather than from CSS variables — the production gradients are likely defined as `linear-gradient` strings on individual elements rather than as design tokens. Treat the documented `{colors.gradient-*}` hex values as base anchors, not as exact gradient specs.
- Form-field validation / error styling is not visible on the inspected pages because no error states render in the static screenshots.
- Dark mode is the only mode — no light-mode adaptation is documented because the marketing site does not ship one.
- The marketplace template detail page returned sparser CSS variable data than the other pages; surface tokens for that page were inferred from the matching home / gallery treatment rather than extracted directly.
개요
Framer의 마케팅 캔버스는 거의 순수한 검정색 아트보드입니다. 지배적인 표면은 `` - 희미한 따뜻함이 있는 거의 순수한 검정색입니다. 그리고 그 위에 문자 간격이 극단적인 음수 값(110px 디스플레이에서 -5.5px, 85px Hero에서 -4.25px)으로 당겨진 **GT Walsheim Medium**으로 설정된 대형 흰색 디스플레이 유형이 있습니다. 페이지는 마치 포스터처럼 읽혀집니다. 밴드당 하나의 단호한 설명, 위와 아래에 넉넉한 호흡 공간이 있습니다.
단일 악센트는 ``입니다. 거의 사용되지 않으며 주로 하이퍼링크, 선택 후광 및 초점이 맞춰진 입력의 미묘한 파란색 색조 그림자 링에 사용됩니다. 브랜드 크롬 자체는 흰색 알약 버튼, 목탄 카드, 회색 보조 텍스트 등 단색입니다. Framer를 독특하게 만드는 것은 리듬 브레이크입니다. 페이지가 몇 섹션마다 **활기찬 그라데이션 분위기 카드**에 표시됩니다. 즉 마젠타-보라색 스포트라이트, 일몰-오렌지색 워시, 산호색-핑크 패널입니다. 이는 섹션 배경이 아닙니다. 이는 카드 그리드에 배열된 개별 카드이며, 각 카드는 Framer가 제작할 수 있는 것을 보여주는 작은 살아있는 포스터입니다.
Body 유형은 **Inter Variable**입니다. Framer는 Inter의 문자 변형(`cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07`, `dlig`) — 결과는 단층 "a", 직선 다리 "l" 및 표 형식의 수치를 사용하여 맞춤 조정된 느낌의 신체 음성입니다. 마케팅 사이트에는 조명 모드가 없습니다. 브랜드가 어둡습니다.
**주요 특성:**
- 블랙 캔버스 마케팅 시스템: ``은 영웅, 본문, 가격, FAQ 및 바닥글을 모두 표시하는 표면이며 가벼운 막간은 없습니다.
- 디스플레이 크기(-5.5px / -4.25px / -3.1px)의 대규모 음수 문자 간격은 포스터급 헤드라인 흐름을 만듭니다.
- 흰색 알약(``)은 사이트 전체에서 유일한 기본 CTA 형태입니다. 보조 작업은 숯불 알약(``) 또는 텍스트 링크로 제공됩니다.
- 대형 **그라디언트 스포트라이트 카드**(보라색, 마젠타색, 주황색, 산호색)는 어두운 격자 내부에서 쇼케이스 타일 역할을 합니다. 섹션 배경이 아닌 개별 카드입니다.
- 신체 유형이 나타나는 모든 곳에서 사용되는 맞춤형 OpenType 문자 변형(`cv01/05/09/11`, `ss03/ss07`, `dlig`)이 있는 Inter 변수 - 인쇄상의 음성이 틀림없습니다.
- 테두리 반경 크기는 4px 유틸리티 칩에서 최대 100px 알약 및 완전한 원까지 실행됩니다. 카드의 경우 기본값은 15~20px이고 대기 그라데이션 카드의 경우 30px입니다.
- 단일 색채 악센트 `` 하이퍼링크, 초점 및 선택용으로 예약되어 있으며 결코 장식적이지 않습니다.
색상
> 소스 페이지: Framer.com(홈), /ai/, /startups/, /marketplace/templates/nudge/, /gallery/a16z-speedrun-×-tonik, /pricing.
브랜드 및 액센트
- **퓨어 화이트**({colors.primary}): 브랜드 기본 표면입니다. 모든 기본 CTA 알약, 모든 디스플레이 헤드라인, 캔버스의 모든 바디 라인.
- **하늘색** ({colors.accent-blue}): 단일 유채색 악센트입니다. 하이퍼링크, 집중 입력 링 및 몇 가지 선택 상태. 배경이나 브랜드 채우기로 사용되지 않습니다.
표면
- **캔버스** ({colors.canvas}): 기본 페이지 배경 — 희미한 따뜻함이 있는 검정색에 가깝습니다. 바닥글, 가격, 영웅 및 FAQ가 모두 여기에 있습니다.
- **표면 1**({colors.surface-1}): 캔버스보다 한 단계 위 — 가격 카드, 보조 버튼, 모형 타일.
- **표면 2**({colors.surface-2}): 위의 두 단계 — 주요 가격 카드, Hero pill 배경, 선택한 가격 탭.
- **가는 선** ({colors.hairline}): 입력 그룹의 1px 테두리, 비교 테이블 구분선.
- **가는 선 소프트**({colors.hairline-soft}): 미묘한 구분선 — FAQ 행과 바닥글 열 규칙 사이.
- **역 캔버스**({colors.inverse-canvas}): 순백색 — Light-on-Dark 알약 CTA의 표면으로 사용되며 쇼케이스 그리드에 포함된 작은 라이트 모드 템플릿 축소판 세트입니다.
텍스트
- **잉크** ({colors.ink}): 모든 헤드라인과 강조된 본문 유형 — 순백색.
- **잉크 음소거**({colors.ink-muted}): 보조 유형 — 회색(#999999)은 메타 정보, 바닥글 열, 비교 행 라벨, 선택 해제된 가격 탭에 사용됩니다. 어두운 캔버스의 계층은 가중치 변화가 아닌 잉크 → 잉크 음소거 대비로 전달됩니다.
의미
- **성공 녹색** ({colors.semantic-success}): 가격 비교표 체크 표시. 표면이 아닌 글리프 채우기.
브랜드 그라데이션(서명)
- **그라디언트 마젠타**({colors.gradient-magenta}): 스포트라이트 카드 변형.
- **그라디언트 바이올렛** ({colors.gradient-violet}): 스포트라이트 카드 변형 — 가장 일반적입니다.
- **주황색 그라데이션**({colors.gradient-orange}): 스포트라이트 카드 변형 — 일몰 워시.
- **그라디언트 산호초** ({colors.gradient-coral}): 스포트라이트 카드 변형 — 산호색/분홍색.
이 4개는 단색 카드 그리드 내부에 대형 대기 타일로 배치되어 있습니다. 한두 개의 빛나는 스포트라이트 카드가 있는 어두운 캔버스는 반복되는 페이지 서명입니다.
타이포그래피
글꼴군
- **GT Walsheim Framer Medium** / **GT Walsheim Medium** — Framer의 디스플레이 서체입니다. 기하학적이고 약간 인본주의적이며 극단적인 네거티브 트래킹을 통해 큰 크기에 매우 자신감이 있습니다. 대체: `GT Walsheim Medium Placeholder` 시스템 글꼴.
- **상호 변수** — 시스템 본문 서체. 광범위한 OpenType 문자 변형과 함께 사용됩니다: `cv01`(대체 "1"), `cv05`(대체 "g"), `cv09`(대체 "i" / "l"), `cv11`(대체 "0"), `ss03` / _`ss07` 스타일 세트, `dlig` 임의 합자 및 표 형식의 숫자에 대한 `tnum`. 그 결과 맞춤형 얼굴을 의뢰하지 않고도 맞춤형 느낌을 주는 신체 음성이 탄생했습니다.
- **Inter** — ``(22px/20px 계층)에 선택적으로 사용됩니다. 비변수 컷은 가변 파일이 라운드하는 작은 추적 대상을 포착합니다.
계층
| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |
사용
|---|---|---|---|---|---|
| _`` | 110px | 500 | 0.85 | -5.5px | 최대 영웅 헤드라인(홈, AI 페이지) |
| _`` | 85px | 500 | 0.95 | -4.25px | 섹션 오프너 헤드라인 |
| _`` | 62px | 500 | 1.00 | -3.1px | 하위 섹션 오프너 |
| _`` | 32px | 500 | 1.13 | -1.0px | 카드 제목, 더 작은 디스플레이 |
| _`` | 22px | 700 | 1.20 | -0.8px | 가격 등급 헤드라인, FAQ 카테고리 제목 |
| _`` | 24px | 400 | 1.30 | -0.01px | 디스플레이 헤드라인 옆의 리드 본문 |
| _`` | 18px | 400 | 1.30 | -0.18px | 주요 부제목, 리드 단락 |
| _`` | 15px | 400 | 1.30 | -0.15px | 기본 본문, 카드 설명 |
| _`` | 14px | 500 | 1.40 | -0.14px | 가격 비교 행, 밀집된 데이터 |
| _`` | 13px | 500 | 1.20 | -0.13px | 눈썹, 바닥글 열, 메타 |
| _`` | 12px | 400 | 1.20 | -0.12px | 면책조항, 각주 |
| _`` | 14px | 500 | 1.0 | -0.14px | 알약 버튼 |
원칙
- **문자 간격은 크기에 따라 조정됩니다.** Display-xxl은 -5.5px(크기의 5%)를 가져옵니다. 본문은 약 -1%(15px에서 -0.15px)에 고정됩니다. 결과: 상단에 포스터가 있고 몸에서 편안하게 읽을 수 있습니다.
- **OpenType 문자 변형은 브랜드 목소리입니다.** `cv11`, `ss03` 등을 끄면 본문 목소리가 눈에 띄게 변경됩니다. 브랜드는 이에 따라 달라집니다.
- **무게는 좁은 범위에 유지됩니다.** 디스플레이는 500, 본체는 400, 본체-SM/캡션은 500입니다. 계층 구조는 700/900 램프가 아닌 크기 + 추적으로 전달됩니다.
- **어디서나 줄 높이가 빡빡합니다.** 심지어 본문도 1.30으로 실행됩니다. — Framer의 편집 톤은 일반적인 SaaS 마케팅보다 밀도가 높습니다.
글꼴 대체에 대한 참고사항
GT Walsheim Medium 없이 구현하는 경우 적합한 오픈 소스 대체품으로는 **Mona Sans**, **Geist** 또는 **Inter**(수동으로 강화된 추적 포함)가 있습니다. Mona Sans의 100-300 헤어라인 무게는 특히 Framer의 클리너 섹션 오프너에 가깝습니다. Inter Variable은 오픈 소스입니다. 그대로 유지하고 문서화된 OpenType 변형을 보존하세요.
레이아웃
간격 시스템
- **기본 단위**: 5px(Framer는 보다 일반적인 4/8/16/24 대신 비표준 5/10/15/20/30 증분을 사용합니다).
- **토큰(머리말)**: `` 1px · `` 4px · `` 8px · `` 12px · `` 15px · `` 20px · `` 30px · `` 40px · `` 96px.
- 카드 내부 패딩: `` 가격 카드의 20px; `` 그래디언트 스포트라이트 카드의 30px.
- 알약 버튼 패딩: 세로 10px · 가로 15px — ``.
- 섹션 패딩(세로): 집에서는 대략 `` 96px; 가격 비교가 더 엄격해졌습니다(~64px).
그리드 및 컨테이너
- 최대 콘텐츠 너비는 1199px 중단점 주위에 위치하며 측면 여백은 데스크톱에서 `` 방향으로 확장됩니다.
- 홈 갤러리의 카드 그리드는 데스크톱에서 2업을 사용하며 810픽셀 아래에서는 1업으로 축소됩니다.
- 가격 등급 표는 문서화된 중단점 전체에서 4단계입니다. 그 아래의 비교 테이블은 좁은 너비의 가로 스크롤 계층 열과 함께 고정 너비 왼쪽 열을 사용합니다.
공백 철학
어두운 캔버스는 공백입니다. 가벼운 브랜드가 흰색 공기에 기대어 섹션을 분리한 반면, Framer는 중앙에 떠 있는 하나의 대형 문구와 함께 길게 늘어진 검정색에 기대어 있습니다. 모드 변경에 따라 섹션이 구분됩니다. 목탄색 카드 밴드, 그라데이션 스포트라이트가 있는 검정색 밴드, 그리고 다시 목탄색으로 돌아갑니다. 어두운 영화의 컷과 같습니다.
고도 및 깊이
| 레벨 | 치료 | |
사용
|---|---|---|
| 0(플랫) | 그림자 없음, 테두리 없음 | 캔버스 장착 디스플레이 유형, FAQ 행, 바닥글에 대한 기본값 |
| 1(숯) | _`` 캔버스 위의 리프트 | 가격 카드, 모형 타일, 보조 버튼 |
| 2(밝은 가장자리) | `rgba(255,255,255,0.10)` 0.5px 상단 가장자리 + `rgba(0,0,0,0.25)` 0px 10px 30px 드롭 | 플로팅 제품 카드, 모달 카드 |
| 3개(선택됨) | `rgba(0,153,255,0.15)` 0px 0px 0px 1px 링 | 집중된 입력, 선택된 옵션 |
네 가지 그림자 서명은 홈페이지 전반에 걸쳐 반복됩니다. 1픽셀의 미묘한 드롭, 반투명 파란색 링, 검은색에 가까운 두꺼운 2픽셀 윤곽선(하위 탐색의 활성 요소 마커로 사용됨), 플로팅 카드에 사용되는 계층화된 밝은 가장자리 + 드롭 섀도우입니다.
장식적 깊이
- **그라디언트 스포트라이트 카드**는 주요 깊이 장치입니다. 검은색 캔버스에 대한 색상 채도는 그림자 기반 고도를 대체합니다.
- **레이어형 제품 모형**(라이브 Framer 구축 사이트가 포함된 브라우저 프레임)은 레벨 2 라이트 에지 처리가 적용된 `` 카드 내부에 있습니다.
- **미묘한 파란색 링(초점/선택)**은 유일한 색 심도 신호로, 기본 표면을 변경하지 않고 입력 그룹 및 가격 책정 계층 토글의 활성 상태를 표시하는 데 사용됩니다.
도형
경계 반경 배율
Framer의 추출된 반경 세트는 비정상적으로 세분화되어 있습니다(1px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 20px, 30px, 40px, 100px). 아래 명명된 척도는 마케팅 표면이 실제로 소비하는 수준을 선택합니다.
| 토큰 | 가치 | |
사용
|---|---|---|
| _`` | 4픽셀 | 소형 칩/유틸리티 반경 |
| _`` | 6픽셀 | 인라인 태그, 배지 |
| _`` | 10픽셀 | 양식 입력, 목록 항목 |
| _`` | 15px | 템플릿 카드 미리보기 이미지 |
| _`` | 20픽셀 | 가격 카드, 모형 타일 |
| _`` | 30px | 그라데이션 스포트라이트 카드, 대형 패널 |
| _`` | 100px | 모든 기본 텍스트 CTA |
| _`` | 9999px | 원형 아이콘 버튼, 아바타 서클 |
사진 및 일러스트레이션 기하학
- 삽입된 사이트 모형(Framer 구축 사이트의 브라우저 크롬 미리보기)은 `` 20픽셀 타일에 `` 15픽셀 내부 패딩을 사용합니다.
- 그라디언트 스포트라이트 카드는 `` 30픽셀 모서리를 사용합니다. — 디자인상 20픽셀 콘텐츠 카드보다 부드러워서 더 단단한 UI가 아닌 분위기 있는 패널처럼 느껴집니다.
- 아이콘 문자 모양과 하위 탐색 문자 모양은 32~40픽셀 크기의 `` 원으로 렌더링됩니다.
구성요소
버튼
**`button-primary`** — 어두운 캔버스에 흰색 알약. 홈, 가격, AI, 갤러리 페이지 전반의 기본 CTA입니다.
- 배경 ``, 텍스트 ``, 유형 ``, 패딩 10px 15px, 반올림 ``.
- 누른 상태는 `button-primary-pressed`에 적용됩니다(라이브 사이트는 어두운 채우기 대신 변환 크기 축소를 사용합니다).
**`button-secondary`** — 숯 알약. 보조 탐색 작업("로그인", "판매자와 대화") 및 기본 알약에 대한 시각적 대응으로 사용됩니다.
- 배경 ``, 텍스트 ``, 유형 ``, 패딩 10px 15px, 반올림 ``.
**`button-translucent`** — 바쁜 배경(갤러리 히어로, 그라데이션 카드) 위에 사용되는 반투명/리프팅 보조.
- 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 8px 14px.
_**`button-icon-circular`** — 인라인 아이콘 작업(회전식 화살표, 소셜 링크)을 위한 40px 원.
- 배경 ``, 텍스트 ``, 반올림 ``, 크기 40px.
가격 탭
_**`pricing-tab-default`** + **`pricing-tab-selected`** — `/pricing`.
에서 Basic/Pro/Business/Enterprise 간을 전환하는 알약 토글입니다.
- 기본값: `` 배경, `` 텍스트, 반올림 ``.
- 선택됨: `` 배경, `` 텍스트 — 선택됨 = 색상이 아닌 리프트. 표면 깊이는 색채 채우기 없이도 "활성"을 전달합니다.
입력 및 양식
**`text-input`** + **`text-input-focused`** — `/pricing`(좌석 수, 통화 전환기) 및 제품 내 미리 보기 화면의 양식 필드.
- 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 10px 14px.
- 초점 상태는 동일한 표면을 유지합니다. 초점 링은 레벨 3 파란색 색조의 그림자입니다 `rgba(0,153,255,0.15)` 0 0 0 1px.
카드 및 용기
**`pricing-card`** — `/pricing`의 각 계층.
- 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 24px.
**`pricing-card-featured`** — Pro 등급(시각적으로 강조됨).
- 배경 ``, 그 외에는 동일한 구조입니다. 리프트는 한 표면 위로 올라가며 색채 윤곽선이 없습니다.
_**`template-card`** — 홈 "Built with Framer" 갤러리의 썸네일 타일 및 `/marketplace`.
- 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 12px.
_**`product-mockup-tile`** — 실제 제품 UI 모의 프레임을 구성하는 더 큰 타일(프레이머 캔버스, 워크샵 비디오, AI 번역 패널).
- 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 16px.
그라디언트 스포트라이트 카드(서명)
Framer 마케팅의 장식적인 표면을 정의하는 것은 단색 카드 그리드에 배치된 대형 대기 타일입니다. 변형:
**`gradient-spotlight-card`** — 보라색 바탕(가장 일반적).
- 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 32px. (현장 카드는 더 넓은 타일에 걸쳐 있을 때 `` 30px로 푸시되는 경우가 많습니다.)
**`gradient-spotlight-card-magenta`** — 자홍색 바탕.
**`gradient-spotlight-card-orange`** — 선셋-오렌지 워시.
(코랄핑크는 ``과 같은 모양을 따릅니다.)
비교 및 FAQ
**`feature-row`** + **`comparison-row`** — 가격 비교 테이블 내의 단일 행.
- `feature-row`: `` 배경, `` 텍스트. 헤더 행.
- `comparison-row`: `` 배경, `` 텍스트. `` 및 1px `` 밑줄이 있는 데이터 행.
**`faq-row`** — 가격 페이지 FAQ의 각 아코디언 라인.
- 배경 ``, 텍스트 ``, 유형 ``, 반올림 ``, 패딩 24px.
탐색
**`top-nav`** — ``의 고정 막대에는 왼쪽에 프레이머 워드마크가 있고 기본 탐색 링크가 중앙에 있으며 `button-secondary`("로그인") + `button-primary`("무료로 시작하기") 쌍이 오른쪽에 있습니다.
- 배경 ``, 텍스트 ``, 유형 ``, 높이 56px.
- 모바일: 기본 링크를 햄버거로 축소합니다. 두 개의 알약 CTA가 막대에서 하나의 기본 알약으로 축소됩니다.
바닥글
**`footer`** — ``의 밀집 링크 그리드(왼쪽에 프레이머 워드마크와 캡션 크기 링크의 5~6열 포함)
- 배경 ``, 텍스트 ``, 유형 ``, 패딩 64px 32px.
해야 할 일과 하지 말아야 할 일
하라
- ``(흰색) 및 ``(검은색에 가까움)을 시스템의 두 앵커 표면으로 예약합니다. 페이지의 모든 밴드는 둘 중 하나를 선택합니다.
- 디스플레이 크기 문자 간격을 적극적으로 음수로 설정 — -5.5px의 ``은 브랜드 시그니처이며 문체적 사고가 아닙니다.
- 하이퍼링크, 포커스 링 및 선택한 표시기에만 ``을 사용하세요. 절대로 배경이나 버튼 채우기로 사용하지 마세요.
- 하나 또는 두 개의 `gradient-spotlight-card` 변형을 카드 그리드에 놓습니다. 브랜드의 대기 장치입니다. 너무 무리하지 마십시오. 동일한 뷰포트에서 3개 이상을 시스템이 아닌 무드보드로 읽습니다.
- 모든 CTA를 알약으로 작성합니다(``). 보조 작업은 테두리가 있는 고스트 버튼이 아닌 숯불 알약으로 사용됩니다.
- 본문 유형 유지 문자 변형이 있는 Inter 변수 `cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07` 활성화 — 브랜드 보이스는 다음에 따라 다름 .
- 흰색 문자의 불투명도 변경이 아니라 어두운 문자에 계층 구조를 표시하려면 표면 리프트(캔버스 → 표면-1 → 표면-2)를 사용하세요.
하지 마세요
- 라이트 모드 마케팅 페이지를 제공하지 마세요. 프레이머의 정체성은 어둡습니다.
- `` 외부에 중간톤 회색 텍스트를 삽입하지 마세요. 계층 구조는 바이너리입니다: `ink` 또는 `ink-muted`.
- ``을 브랜드 채우기(예: 파란색 CTA 알약)로 사용하지 마세요. 파란색은 표면이 아닌 신호 색상입니다.
- CTA를 정리하지 마세요. 알약(``) 또는 완전한 원은 브랜드 용어입니다.
- "접근성을 위해" 디스플레이 크기의 음수 문자 간격을 줄이지 마세요. 압축은 브랜드 목소리에 내재되어 있습니다. 필요한 경우 SIZE를 줄이되 비율은 유지하세요.
- 전체 섹션에 그라데이션 배경을 적용하지 마세요. 그라데이션은 섹션 근거가 아닌 카드입니다.
- 하나 이상의 반음계 악센트를 결합하지 마세요. 팔레트는 "파란색, 녹색, 빨간색"이 아닌 단색에 파란색 하나와 그라데이션 계열을 더한 것입니다.
반응적 행동
중단점
| 이름 | 폭 | 주요 변경 사항 |
|---|---|---|
| 데스크탑 | 1199px | 기본 데스크탑 레이아웃 |
| 태블릿 | 810px | 카드 그리드는 4장 → 2장으로 축소됩니다. nav가 햄버거가 됩니다 |
| 모바일LG | 809px | 가격 비교표가 계층별 아코디언으로 변경됨 |
| 모바일-XS | 98px | 문서화된 가장 작은 중단점 - 모두 단일 열 |
터치 대상
- 알약 버튼(`button-primary`, `button-secondary`)은 모든 뷰포트에서 최소 44px 탭 높이를 유지합니다. `` 14px 선 높이와 문서화된 10px 수직 패딩을 결합합니다.
- 원형 아이콘 버튼(`button-icon-circular`)은 데스크톱에서 40픽셀이고 터치 뷰포트에서는 44픽셀로 늘어납니다.
- 가격 탭 알약은 ≥40px 탭 높이를 유지합니다. 810px 미만에서는 쌓이는 대신 가로 스크롤 행으로 축소될 수 있습니다.
축소 전략
- **Nav**: 중앙에 링크 그룹이 있고 오른쪽에 고정된 알약 쌍이 있는 가로 탐색이 810px 아래의 햄버거 오버레이로 축소됩니다. _`button-primary`은 막대에 계속 표시됩니다.
- **카드 그리드**: 갤러리와 템플릿 카드 그리드는 데스크톱에서는 2배로 표시되고 모바일에서는 1배로 표시됩니다. 그라데이션 스포트라이트 카드는 모든 뷰포트에서 `` 모서리를 유지하며 번지지 않습니다.
- **가격 비교표**: 가로 스크롤을 피하기 위해 810px 미만의 계층별 아코디언으로 축소됩니다.
- **디스플레이 유형**: `` 110px는 태블릿에서 `` 62px로 축소되고 모바일에서는 `` 32px로 축소되어 백분율 음수 문자 간격을 유지합니다.
이미지 동작
- 삽입된 제품 모형(라이브 프레이머가 구축한 사이트를 포함하는 브라우저 프레임)은 가로세로 비율을 유지하며 잘리지 않습니다.
- 그라디언트 스포트라이트 카드는 중단점 전체에서 그라데이션 방향을 유지합니다. 그라데이션 방향은 브랜드 사양의 일부입니다.
반복 가이드
1. 한 번에 하나의 구성 요소에 집중하고 `components:` 토큰 이름(예: ``, ``)으로 참조합니다.
2. 어두운 캔버스에 새 섹션을 도입할 때 영웅/FAQ의 경우 ``, 카드의 경우 ``, 추천 카드의 경우 ``과 같이 해당 섹션이 어느 표면에 있는지 먼저 결정하세요. 깊이 선택이 가장 중요한 결정입니다.
3. 문서화된 모든 OpenType 변형이 포함된 ``의 기본 본문입니다. 스포트라이트 카드 내에서만 ``에 도달합니다.
4. 편집 후 _`npx @google/design.md lint DESIGN.md` 실행 — `broken-ref`, `contrast-ratio` 및 `orphaned-tokens` 경고 플래그는 자동으로 문제를 표시합니다.
5. 새 변형을 별도의 구성 요소 항목(`-pressed`, `-featured`, `-selected`)으로 추가합니다. 산문체로 묻어두지 마세요.
6. _``을 단발 신호 색상(하이퍼링크, 초점 및 선택)으로 처리합니다. 그게 전부입니다. 두 번째 파란색에 도달했다면 브랜드는 표류하고 있는 것입니다.
7. 그라데이션 스포트라이트 카드는 설계상 부족합니다. 긴 페이지당 하나 또는 두 개가 사양입니다. 세 번째는 무드보드입니다.
알려진 격차
- 스포트라이트 카드의 정확한 그라데이션 중지점은 CSS 변수가 아닌 스크린샷 픽셀에서 파생됩니다. 프로덕션 그라데이션은 디자인 토큰이 아닌 개별 요소의 `linear-gradient` 문자열로 정의될 가능성이 높습니다. 문서화된 `` 16진수 값을 정확한 그라데이션 사양이 아닌 기본 앵커로 처리합니다.
- 정적 스크린샷에는 오류 상태가 렌더링되지 않기 때문에 양식 필드 유효성 검사/오류 스타일이 검사된 페이지에 표시되지 않습니다.
- 어두운 모드가 유일한 모드입니다. 마케팅 사이트에서 라이트 모드 적용을 제공하지 않기 때문에 라이트 모드 적응이 문서화되어 있지 않습니다.
- 마켓플레이스 템플릿 세부정보 페이지는 다른 페이지보다 더 희박한 CSS 변수 데이터를 반환했습니다. 해당 페이지의 표면 토큰은 직접 추출되지 않고 일치하는 홈/갤러리 처리에서 추론되었습니다.
概要
Framer のマーケティング キャンバスは、ほぼ純粋な黒のアートボードです。主な表面は `` で、ほのかに温かみのあるほぼ純粋な黒で、その上に **GT Walsheim Medium** で設定された特大の白いディスプレイ タイプがあり、文字間隔は極端な負の値 (110 ピクセルのディスプレイでは -5.5 ピクセル、85 ピクセルのヒーローでは -4.25 ピクセル) に設定されています。このページはポスターのように見えます。バンドごとに 1 つの自己主張があり、上下にゆったりとしたスペースがあります。
単一のアクセントは `` です。ほとんど使用されず、主にハイパーリンク、選択ハロー、および集中した入力上の微妙な青みがかったシャドウ リングに使用されます。ブランドのクロム自体はモノクロです。白い錠剤ボタン、木炭のカード、灰色の二次テキストです。 Framer を特徴づけているのはリズムブレイクです。数セクションごとに、マゼンタとバイオレットのスポットライト、サンセットとオレンジのウォッシュ、コーラルとピンクのパネルなど、**鮮やかなグラデーションの雰囲気のカード**がページに表示されます。これらはセクションの背景ではありません。これらはカード グリッドに配置された個別のカードであり、それぞれが Framer が作成できるものを示す小さな生きたポスターです。
ボディ タイプは **Inter Variable** で、Framer は Inter の文字バリアント (`cv01`、__CODEBCK_630___、__CODEBCK_631___、__CODEBCK_632___、__CODEBCK_633___、__CODEBCK_634___、 `dlig`) — その結果、平屋の「a」、まっすぐな脚の「l」、および表形式の数字を備えた、カスタムチューニングされたと感じるボディボイスが得られます。マーケティング サイトにはライト モードはありません。ブランドは暗いです。
**主な特徴:**
- 黒キャンバスのマーケティング システム: `` は、ヒーロー、本文、価格設定、FAQ、フッターなどの表面であり、軽い中断はありません。
- ディスプレイ サイズでの大きな負の文字間隔 (-5.5px / -4.25px / -3.1px) により、ポスター グレードの見出しのリズムが生まれます。
- 白い錠剤 (``) は、サイト全体で唯一の主要な CTA 図形です。二次アクションは、木炭錠剤 (``) またはテキスト リンクとして表示されます。
- 特大 **グラデーション スポットライト カード** (バイオレット、マゼンタ、オレンジ、コーラル) は、ダーク グリッド内のショーケース タイルとして機能します。これらはセクションの背景ではなく、個別のカードです。
- カスタム OpenType 文字バリアント (`cv01/05/09/11`、__CODEBCK_640___、__CODEBCK_641___) を備えた Inter 変数は、本文タイプが表示されるすべての場所で使用されます。タイポグラフィーの音声は紛れもないものです。
- 境界線の半径スケールは、4 ピクセルのユーティリティ チップから最大 100 ピクセルの錠剤および完全な円まで対応し、カードのデフォルトは 15 ～ 20 ピクセル、大気のグラデーション カードの場合は 30 ピクセルです。
- 単一の半音アクセント__CODEBCK_642___はハイパーリンク、フォーカス、選択用に予約されており、決して装飾的ではありません。
色
> ソース ページ: Framer.com (home)、/ai/、/startups/、/marketplace/templates/nudge/、/gallery/a16z-speedrun-×-tonik、/pricing.
ブランドとアクセント
- **ピュア ホワイト** ({colors.primary}): ブランドの主要な表面。すべての主要 CTA ピル、すべての表示見出し、キャンバス上のすべての本文。
- **スカイブルー** ({colors.accent-blue}): 単一の半音アクセント。ハイパーリンク、フォーカスされた入力リング、およびいくつかの選択状態。背景やブランドの塗りつぶしとして使用されることはありません。
サーフェス
- **キャンバス** ({colors.canvas}): デフォルトのページの背景 — ほのかな温かみのある黒に近い色。 フッター、価格設定、ヒーロー、FAQ はすべてこの上にあります。
- **Surface 1** ({colors.surface-1}): キャンバスの 1 つ上のステップ — 価格カード、二次ボタン、モックアップ タイル。
- **Surface 2** ({colors.surface-2}): 上の 2 つのステップ — 注目の価格カード、ヒーロー ピルの背景、選択した価格タブ。
- **ヘアライン** ({colors.hairline}): 入力グループの 1 ピクセルの境界線、比較テーブルの区切り線。
- **ヘアライン ソフト** ({colors.hairline-soft}): FAQ 行とフッター列ルールの間の微妙な区切り線。
- **反転キャンバス** ({colors.inverse-canvas}): 純白 — ライトオンダーク錠剤 CTA の表面として使用され、ショーケース グリッドに埋め込まれたライトモード テンプレート サムネイルの小さなセットとして使用されます。
テキスト
- **インク** ({colors.ink}): すべての見出しと強調された本文タイプ - 純白。
- _**インクミュート** ({colors.ink-muted}): セカンダリ タイプ — メタ情報、フッター列、比較行ラベル、選択解除された価格設定タブに使用されるグレー (#999999)。暗いキャンバス上の階層は、ウェイトの変更ではなく、インク→インクでミュートされたコントラストによって保持されます。
セマンティック
- **サクセス グリーン** ({colors.semantic-success}): 価格比較表のチェックマーク。表面ではなく、グリフの塗りつぶし。
ブランド グラデーション (署名)
- **グラデーション マゼンタ** ({colors.gradient-magenta}): スポットライト カードのバリアント。
- **グラデーション バイオレット** ({colors.gradient-violet}): Spotlight カードのバリアント — 最も一般的です。
- **グラデーション オレンジ** ({colors.gradient-orange}): スポットライト カードのバリエーション — サンセット ウォッシュ。
- **グラデーション コーラル** ({colors.gradient-coral}): スポットライト カードのバリエーション — コーラル/ピンク。
これら 4 つは、モノクロのカード グリッド内に特大の雰囲気タイルとして配置されています。1 つまたは 2 つの輝くスポットライト カードを備えた暗いキャンバスは、繰り返し表示されるページの署名です。
タイポグラフィ
フォント ファミリー
- _**GT Walsheim Framer Medium** / **GT Walsheim Medium** — フレーマーの表示書体。幾何学的で、やや人間味があり、大きなサイズで非常に自信があり、極端なネガティブ トラッキングを備えています。フォールバック: `GT Walsheim Medium Placeholder` システム フォント。
- **内部変数** — システム本文の書体。広範な OpenType 文字バリアントで使用されます: `cv01` (代替 "1")、__CODEBCK_645___ (代替 "g")、__CODEBCK_646___ (代替 "i" / "l")、__CODEBCK_647___ (代替 "0")、__CODEBCK_648___ / `ss07`スタイル セット、__CODEBCK_650___ 任意の合字、および表形式コンテキストの数値用の `tnum`。その結果、カスタムフェイスを依頼しなくても、オーダーメイドのようなボディボイスが得られます。
- **Inter** — `` (22px / 20px 層) に選択的に使用されます。 非変数カットは、変数ファイルが丸める小さな追跡ターゲットを捕捉します。
階層_
|トークン |サイズ |重量 |行の高さ |文字間隔 | |
を使用します
|---|---|---|---|---|---|
| `` | 110ピクセル | 500 | 0.85 | -5.5ピクセル |最大のヒーローの見出し (ホーム、AI ページ) |
| `` | 85ピクセル | 500 | 0.95 | -4.25ピクセル |セクション冒頭の見出し |
| `` | 62ピクセル | 500 | 1.00 | -3.1ピクセル |サブセクションのオープナー |
| `` | 32ピクセル | 500 | 1.13 | -1.0ピクセル |カード タイトル、小さい表示 |
| `` | 22ピクセル | 700 | 1.20 | -0.8ピクセル |価格帯の見出し、FAQ カテゴリのタイトル |
| `` | 24ピクセル | 400 | 1.30 | -0.01ピクセル |表示見出しの隣に本文を表示 |
| `` | 18ピクセル | 400 | 1.30 | -0.18ピクセル |ヒーローの小見出し、先頭段落 |
| `` | 15ピクセル | 400 | 1.30 | -0.15ピクセル |デフォルトの本文、カードの説明 |
| `` | 14ピクセル | 500 | 1.40 | -0.14ピクセル |価格比較行、高密度データ |
| `` | 13ピクセル | 500 | 1.20 | -0.13ピクセル |眉毛、フッター列、メタ |
| `` | 12ピクセル | 400 | 1.20 | -0.12ピクセル |免責事項、脚注 |
| `` | 14ピクセル | 500 | 1.0 | -0.14ピクセル |ピル ボタン |
原則
- **文字間隔はサイズに応じて調整されます。** Display-xxl は -5.5px (サイズの 5%) をプルします。ボディは約 -1% (15px では -0.15px) に固定されます。結果: 上部にポスター、本文に快適な読書が表示されます。
- **OpenType 文字のバリエーションはブランドの声です。** `cv11`、__CODEBCK_666___ などをオフにすると、体の声が目に見えて変わります。ブランドはそれらに依存します。
- **ウェイトは狭い範囲内に留まります。** ディスプレイは 500、本体は 400、本体 SM/キャプションは 500 に設定されます。階層は、700/900 ランプではなく、サイズ + トラッキングによって保持されます。
- **どこでも行の高さがタイトです。** 本文も 1.30 で実行されます — Framer の編集トーンは、典型的な SaaS マーケティングよりも密度が高くなります。
フォントの代替に関する注意
_GT Walsheim Medium を使用せずに実装する場合、適切なオープンソースの代替には、手動でトラッキングを強化したウェイト 600 ～ 700 の **Mona Sans**、**Geist**、または **Inter** が含まれます。 Mona Sans の 100 ～ 300 のヘアライン ウェイトは、特に Framer のよりクリーンなセクション オープナーに近いです。 Inter Variable はオープンソースです。そのままにして、文書化された OpenType バリアントを保存します。
レイアウト
間隔システム
- **基本単位**: 5px (フレーマーは、より一般的な 4/8/16/24 ではなく、非標準の 5/10/15/20/30 増分を使用します)。
- **トークン (前付)**: `` 1px · `` 4px · `` 8px · `` 12px · `` 15px · `` 20px · `` 30px · `` 40px · `` 96px.
- カード内部のパディング: `` 価格カードでは 20 ピクセル。 `` グラデーション スポットライト カードでは 30 ピクセル。
- ピル ボタンのパディング: 縦 10 ピクセル · 横 15 ピクセル — ``.
- セクション パディング (垂直): ホームではおよそ `` 96 ピクセル。価格比較ではより厳密 (~64 ピクセル)。
グリッドとコンテナ
- コンテンツの最大幅は 1199 ピクセルのブレークポイント付近にあり、デスクトップでは `` に向かって拡大する側溝があります。
- ホーム ギャラリーのカード グリッドはデスクトップでは 2 アップを使用し、810 ピクセル未満では 1 アップに折りたたまれます。
- 価格階層グリッドは、文書化されたブレークポイント全体で 4 つずつ増えています。その下の比較表では、固定幅の左側の列と狭い幅で水平にスクロールする階層列が使用されています。
ホワイトスペースの哲学
_暗いキャンバスは空白です。軽めのブランドが白い空気に頼ってセクションを区切るのに対し、フレーマーは長い黒地に寄りかかり、中央に特大のステートメントを 1 つ浮かべています。モード変更によってセクションが区切られます。木炭のカードのバンド、次にグラデーションのスポットライトが付いた黒のバンド、そして木炭に戻ります。暗い映画のカットのように。
標高と深さ
|レベル |治療 | |
を使用します
|---|---|---|
| 0 (フラット) |影も境界線もありません |キャンバス マウント表示タイプ、FAQ 行、フッターのデフォルト |
| 1 (木炭) | `` キャンバス上でリフト |価格カード、モックアップ タイル、二次ボタン |
| 2 (ライトエッジ) | `rgba(255,255,255,0.10)` 0.5px 上端 + `rgba(0,0,0,0.25)` 0px 10px 30px ドロップ |フローティング製品カード、モーダル カード |
| 3 (選択済み) | `rgba(0,153,255,0.15)` 0px 0px 0px 1px リング |集中入力、選択されたオプション |
4 つのシャドウ シグネチャがホームページ全体に繰り返し表示されます。1 ピクセルの微妙なドロップ、半透明の青いリング、黒に近い 2 ピクセルの太いアウトライン (サブナビゲーションのアクティブ要素マーカーとして使用)、およびフローティング カードに使用されるレイヤード ライト エッジ + ドロップ シャドウです。
装飾の深さ
- **グラデーション スポットライト カード** が主な深度デバイスです。黒いキャンバスに対する色の彩度が影による高度の代わりになります。
- **レイヤード製品モックアップ** (フレーマーで構築されたライブ サイトを含むブラウザ フレーム) は、レベル 2 ライトエッジ処理を備えた `` カード内に配置されます。
- **微妙な青いリング (フォーカス/選択)** は唯一の有彩色深度信号です。下層のサーフェスを変更せずに、入力グループと価格階層の切り替えのアクティブな状態をマークするために使用されます。
図形
境界線の半径スケール
Framer の抽出された半径セットは異常に細分化されています (1px、4px、5px、6px、8px、10px、12px、15px、20px、30px、40px、100px)。 以下の名前付きスケールは、マーケティング サーフェスが実際に消費するレベルを選択します。
|トークン |値 | |
を使用します
|---|---|---|
| `` | 4ピクセル |チップ/ユーティリティ半径が小さい |
| `` | 6ピクセル |インライン タグ、バッジ |
| `` | 10ピクセル |フォーム入力、リスト項目 |
| `` | 15ピクセル |テンプレート カードのサムネイル |
| `` | 20ピクセル |価格カード、モックアップ タイル |
| `` | 30ピクセル |グラデーション スポットライト カード、特大パネル |
| `` | 100ピクセル |すべてのプライマリ テキスト CTA |
| `` | 9999ピクセル |円形のアイコン ボタン、アバターの円 |
写真とイラストの幾何学
- 埋め込みサイトのモックアップ (フレーマーで構築されたサイトのブラウザーでクロームされたプレビュー) は、__CODEBCK_694___ 20 ピクセルのタイル内に配置され、__CODEBCK_695___ 15 ピクセルの内部パディングが含まれます。
- グラデーション スポットライト カードは `` 30 ピクセルのコーナーを使用します。デザイン上、20 ピクセルのコンテンツ カードよりも柔らかく、タイトな UI ではなく雰囲気のあるパネルのように感じられます。
- アイコン グリフとサブナビゲーション グリフは、__CODEBCK_697___ 円内に 32 ～ 40 ピクセル サイズでレンダリングされます。
コンポーネント
ボタン
**`button-primary`** — 暗いキャンバスに白い錠剤。ホーム、価格設定、AI、ギャラリー ページにわたる主要な CTA。
- 背景__CODEBCK_699___、テキスト__CODEBCK_700___、入力__CODEBCK_701___、パディング10ピクセル15ピクセル、丸め__CODEBCK_702___.
- 押された状態は__CODEBCK_703___にあります(ライブサイトは暗く塗り潰すのではなく、変換スケールの縮小を使用します)。
**`button-secondary`** — 木炭錠剤。二次的なナビゲーション アクション (「サインイン」、「営業担当者と話す」) に使用され、主要な錠剤の視覚的な対応物として使用されます。
- 背景__CODEBCK_705___、テキスト__CODEBCK_706___、入力__CODEBCK_707___、パディング10px 15px、丸め__CODEBCK_708___.
_**`button-translucent`** — 賑やかな背景 (ギャラリー ヒーロー、グラデーション カード) の上に使用される半透明/リフト セカンダリ。
- 背景__CODEBCK_710___、テキスト__CODEBCK_711___、入力__CODEBCK_712___、丸め__CODEBCK_713___、パディング8px 14px。
**`button-icon-circular`** — インライン アイコン アクション (カルーセル矢印、ソーシャル リンク) 用の 40 ピクセルの円。
- 背景__CODEBCK_715___、テキスト__CODEBCK_716___、角丸__CODEBCK_717___、サイズ40px.
価格タブ
**`pricing-tab-default`** + **`pricing-tab-selected`** — `/pricing`.
で Basic / Pro / Business / Enterprise を切り替えるピルトグル
- デフォルト: `` 背景、__CODEBCK_722___ テキスト、角丸__CODEBCK_723___.
- 選択済み: `` 背景、__CODEBCK_725___ テキスト — 選択 = カラーではなくリフト。 表面の深さは、彩色塗りつぶしを必要とせずに「アクティブ」であることを伝えます。
入力とフォーム
_**`text-input`** + **`text-input-focused`** — `/pricing` (シート数、通貨スイッチャー) および製品内プレビュー画面のフォーム フィールド。
- 背景__CODEBCK_729___、テキスト__CODEBCK_730___、入力__CODEBCK_731___、丸め__CODEBCK_732___、パディング10ピクセル14ピクセル。
- _フォーカスされた状態は同じ表面を保持します。フォーカス リングはレベル 3 の青みがかったシャドウ `rgba(0,153,255,0.15)` 0 0 0 1px.
カードとコンテナ
_**`pricing-card`** — `/pricing`.
の各層
- 背景__CODEBCK_736___、テキスト__CODEBCK_737___、入力__CODEBCK_738___、丸め__CODEBCK_739___、パディング24ピクセル。
**`pricing-card-featured`** — Pro レベル (視覚的に強調)。
- 背景 ``、それ以外は同一の構造。リフトは 1 つの表面ステップです - 彩色の輪郭はありません。
**`template-card`** — ホームの「Built with Framer」ギャラリーのサムネイル タイルと `/marketplace`.
- 背景__CODEBCK_744___、テキスト__CODEBCK_745___、入力__CODEBCK_746___、丸め__CODEBCK_747___、パディング12ピクセル。
**`product-mockup-tile`** — ライブ製品 UI モックをフレーム化する大きなタイル (フレーマー キャンバス、ワークショップ ビデオ、AI 翻訳パネル)。
- 背景__CODEBCK_749___、テキスト__CODEBCK_750___、入力__CODEBCK_751___、丸め__CODEBCK_752___、パディング16ピクセル。
グラデーション スポットライト カード (署名)
Framer のマーケティングの特徴的な装飾面 — 特大の雰囲気のあるタイルが、モノクロのカード グリッドに落とし込まれています。バリエーション:
**`gradient-spotlight-card`** — 紫色の地面 (最も一般的)。
- 背景__CODEBCK_754___、テキスト__CODEBCK_755___、入力__CODEBCK_756___、丸め__CODEBCK_757___、パディング32ピクセル。 (オンサイト カードは、より広いタイルにまたがる場合、__CODEBCK_758___ 30 ピクセルにプッシュされることがよくあります。)
**`gradient-spotlight-card-magenta`** — マゼンタピンクの地面。
- 背景__CODEBCK_760___、それ以外は同一。
**`gradient-spotlight-card-orange`** — サンセットオレンジウォッシュ。
- 背景__CODEBCK_762___、それ以外は同一。
(コーラルピンクは__CODEBCK_763___と同じ形状です。)
比較とよくある質問
_**`feature-row`** + **`comparison-row`** — 価格比較テーブル内の単一行。
- `feature-row`: `` 背景、__CODEBCK_768___ テキスト。ヘッダー行
- `comparison-row`: `` 背景、__CODEBCK_771___ テキスト。 `` および 1 ピクセルの `` の下線が付いたデータ行。
**`faq-row`** — 価格設定ページの FAQ の各アコーディオン行。
- 背景__CODEBCK_775___、テキスト__CODEBCK_776___、入力__CODEBCK_777___、丸め__CODEBCK_778___、パディング24ピクセル
ナビゲーション
_**`top-nav`** — `` 上のスティッキー バー。フレーマーのワードマークが左、プライマリ ナビゲーション リンクが中央、__CODEBCK_781___ (「サインイン」) + `button-primary` (「無料で始める」) のペアが右。
- 背景__CODEBCK_783___、テキスト__CODEBCK_784___、タイプ__CODEBCK_785___、高さ56ピクセル
- _モバイル: プライマリ リンクをハンバーガーに折りたたみます。 2 つの錠剤 CTA は、バー上で 1 つの主錠剤に折りたたまれます。
フッター
**`footer`** — `` 上の高密度リンク グリッド。フレーマーのワードマークが左にあり、キャプション サイズのリンクが 5 ～ 6 列あります。
- 背景__CODEBCK_788___、テキスト__CODEBCK_789___、入力__CODEBCK_790___、パディング64ピクセル32ピクセル。
推奨事項と禁止事項
実行
- __CODEBCK_791___ (白) と `` (黒に近い) をシステムの 2 つのアンカー サーフェスとして予約します。ページの各バンドはどちらかを選択します。
- 表示サイズの文字間隔を積極的にマイナスに設定します — `` -5.5px はブランドの特徴であり、スタイル上の偶然ではありません。
- _`` は、ハイパーリンク、フォーカス リング、および選択したインジケーターにのみ使用します。決して背景やボタンの塗りつぶしとして使用しないでください。
- 1 つまたは 2 つの__CODEBCK_795___ バリアントをカード グリッドにドロップします。それらはブランドの雰囲気を演出するデバイスです。やりすぎないでください。同じビューポート内に 3 つ以上あると、システムではなくムードボードとして読み込まれます。
- すべての CTA を丸薬として作成します (``)。二次アクションは木炭丸薬として存在し、境界線付きのゴースト ボタンとしては存在しません。
- 文字バリアントでボディ タイプのインター変数を維持__CODEBCK_797___、__CODEBCK_798___、__CODEBCK_799___、__CODEBCK_800___、__CODEBCK_801___、__CODEBCK_802___ を有効にします。ブランドの声はそれらに依存します。
- サーフェス リフト (キャンバス → サーフェス 1 → サーフェス 2) を使用して、白いタイプの不透明度の変更ではなく、暗い色の階層をマークします。
しないでください
- ライトモードのマーケティング ページを配布しないでください。フレーマーの正体は闇です。
- __CODEBCK_803___ の外側に中間調の灰色のテキストを導入しないでください。階層はバイナリです: `ink` または `ink-muted`.
- _`` をブランドの塗りつぶしとして使用しないでください (例: 青い CTA ピル)。青は信号色であり、表面ではありません。
- CTA を四角形にしないでください。錠剤 (``) または完全な円がブランドの語彙です。
- _「アクセシビリティのため」表示サイズの負の文字間隔を狭くしないでください。圧縮はブランドの声に本質的なものです。必要に応じて SIZE を減らしますが、パーセンテージは維持します。
- セクション全体にグラデーションの背景を適用しないでください。グラデーションはカードであり、セクションのグラウンドではありません。
- 複数の色彩アクセントを組み合わせないでください。 パレットはモノクロと青 1 つとグラデーション ファミリーです。「青、緑、赤」ではありません。
応答動作
ブレークポイント
|名前 |幅 |主な変更点 |
|---|---|---|
|デスクトップ | 1199ピクセル |デフォルトのデスクトップ レイアウト |
|タブレット | 810ピクセル |カードグリッドは 4 アップ → 2 アップに崩壊します。ナビがハンバーガーになります |
|モバイルLG | 809ピクセル |価格比較表が階層ごとのアコーディオンになります |
|モバイルXS | 98ピクセル |文書化された最小のブレークポイント — 単一列のすべて |
タッチターゲット
- ピル ボタン (`button-primary`、__CODEBCK_809___) は、すべてのビューポートにわたって最小タップ高さ 44 ピクセルを維持します。`` 14 ピクセルの行の高さと文書化された 10 ピクセルの垂直パディングを組み合わせます。
- 円形アイコン ボタン (`button-icon-circular`) は、デスクトップでは 40 ピクセルですが、タッチ ビューポートでは 44 ピクセルまで拡大されます。
- 価格タブの錠剤はタップ高さ 40 ピクセル以上を保持します。 810 ピクセル未満では、積み重ねずに水平スクロール行に折りたたむことができます。
戦略の崩壊
- **ナビゲーション**: 中央にリンク グループと右アンカーの錠剤ペアを備えた水平ナビゲーションは、810 ピクセル未満でハンバーガー オーバーレイに折りたたまれます。 `button-primary` はバーに表示されたままになります。
- **カード グリッド**: ギャラリーとテンプレート カード グリッドは、デスクトップでは 2 アップ、モバイルでは 1 アップになります。グラデーション スポットライト カードは、すべてのビューポートで__CODEBCK_813___ コーナーを保持し、にじみません。
- **価格比較表**: 水平スクロールを避けるため、810 ピクセル未満では階層ごとのアコーディオンに折りたたまれます。
- **表示タイプ**: `` 110 ピクセルは、タブレットでは `` 62 ピクセル、モバイルでは `` 32 ピクセルに向かって縮小され、マイナスの文字間隔が維持されます。
画像の動作
- 埋め込まれた製品モックアップ (フレーマーで構築されたライブ サイトを含むブラウザ フレーム) はアスペクト比を維持し、切り取られることはありません。
- グラデーション スポットライト カードは、ブレークポイントを越えてグラデーションの方向を維持します。グラデーションの方向はブランド仕様の一部です。
反復ガイド
1.一度に 1 つのコンポーネントに注目し、__CODEBCK_817___ トークン名 (_``、__CODEBCK_819___) で参照します。
2.ダーク キャンバスに新しいセクションを導入するときは、最初にそれがどのサーフェス リフトに属するかを決定します。ヒーロー/FAQ の場合は ``、カードの場合は ``、注目のカードの場合は `` です。深さの選択は最も重要な決定です。
3.デフォルトの本文は `` で、文書化されたすべての OpenType バリアントが含まれます。スポットライト カード内でのみ `` に到達します。
4.編集後に `npx @google/design.md lint DESIGN.md` を実行します — `broken-ref`、__CODEBCK_827___、__CODEBCK_828___ の警告は問題に自動的にフラグを立てます。
5.新しいバリアントを個別のコンポーネント エントリとして追加します (`-pressed`、__CODEBCK_830___、__CODEBCK_831___)。散文の中に埋め込まないでください。
6. `` をシングルショット信号カラーとして扱います: ハイパーリンク、フォーカス、選択、それだけです。 2 番目の青に手が伸びていることに気付いたら、ブランドは漂流しています。
7.グラデーションのスポットライト カードは設計上希少です。 長いページごとに 1 つまたは 2 つが仕様です。 3 つはムードボードです。
既知のギャップ
- _スポットライト カードの正確なグラデーション停止点は、CSS 変数ではなくスクリーンショットのピクセルから導出されます。実際のグラデーションは、デザイン トークンとしてではなく、個々の要素の `linear-gradient` 文字列として定義される可能性があります。文書化された `` 16 進値を、正確なグラデーション仕様としてではなく、基本アンカーとして扱います。
- 静的スクリーンショットではエラー状態がレンダリングされないため、フォームフィールドの検証/エラーのスタイル設定は検査されたページに表示されません。
- ダーク モードが唯一のモードです。マーケティング サイトにはライト モードの適応が同梱されていないため、文書化されていません。
- _マーケットプレイス テンプレートの詳細ページは、他のページよりもまばらな CSS 変数データを返しました。そのページの表面トークンは、直接抽出されるのではなく、一致するホーム/ギャラリーの処理から推測されます。