Webflow

Overview

Webflow positions itself as the visual web development platform — the marketing surface reads as a confident professional product, not a tech startup. The default page is a generous white canvas (`{colors.canvas}`) with a deep near-black `{colors.primary}` (`#080808`) for the brand's primary CTA, typography, and ink. Around this restrained primary, the brand layers a five-stop chromatic accent system — `{colors.accent-purple}` `#7a3dff`, `{colors.accent-pink}` `#ed52cb`, `{colors.accent-blue}` `#3b89ff`, `{colors.accent-orange}` `#ff6b00`, `{colors.accent-green}` `#00d722` — each mapped to one of the platform's product categories (design, CMS, hosting, ecommerce, etc.). These accents appear as full-card fills inside the product-category grid, not as button colours; the brand's primary CTA stays near-black.

Type carries the second decisive voice. The proprietary `WF Visual Sans Variable` family carries every display, body, and label role at weight 500 / 600 — the brand never goes heavier than semibold, never lighter than regular. Hero display sits at 80 px / weight 600 / `-0.8 px` tracking — confident but not shouting. Uppercase eyebrows in 15 px weight 500 with `1.5 px` positive tracking mark every section header.

The shape system is restrained. Buttons take a tight `{rounded.sm}` 4 px radius — neither pill nor square; the brand reads as engineered. Cards step up to `{rounded.md}` 8 px. Pill (`{rounded.full}` 9999 px) is reserved for circular icon containers. Layered drop-shadows on featured cards add modest elevation but never feel material-heavy.

**Key Characteristics:**

• A two-colour conversion hierarchy — `{colors.primary}` near-black for every primary CTA, white-on-hairline for every secondary. Chromatic accents are used as full surface fills on category cards, never as button backgrounds.
• The brand's signature is its **five-stop chromatic category palette**: purple / pink / blue / orange / green, each tied to a product surface. Used at full saturation as card fills.
• Hero typography at 80 px weight 600 with `-0.8 px` tracking — restrained, confident, never billboard-loud.
• WF Visual Sans Variable is the single family; the brand uses no separate sans for body / display. WFVisualSans-Mono / Inconsolata appears only for technical captions.
• Tight `{rounded.sm}` 4 px button geometry; cards at `{rounded.md}` 8 px. The brand never uses pill CTAs.
• Layered multi-offset drop-shadows on featured cards — the brand's only elevation cue.

Colors

Brand & Accent

• **Ink Black** (`{colors.primary}` — `#080808`): The brand's primary conversion colour. Every primary CTA, every heading, every wordmark. Deeper than pure black to read as branded.
• **Accent Purple** (`{colors.accent-purple}` — `#7a3dff`): One of the five chromatic category accents — used for design / build product surfaces.
• **Accent Pink** (`{colors.accent-pink}` — `#ed52cb`): Magenta accent — used for animation / interaction product surfaces.
• **Accent Blue** (`{colors.accent-blue}` — `#3b89ff`): Bright cyan-blue — used for SEO / analytics product surfaces.
• **Accent Blue Deep** (`{colors.accent-blue-deep}` — `#006acc`): The deeper blue used for emphasis links.
• **Accent Blue Info** (`{colors.accent-blue-info}` — `#146ef5`): The badge-info blue.
• **Accent Orange** (`{colors.accent-orange}` — `#ff6b00`): Used for hosting / infrastructure product surfaces.
• **Accent Green** (`{colors.accent-green}` — `#00d722`): Used for ecommerce / status-success surfaces.
• **Accent Yellow** (`{colors.accent-yellow}` — `#ffae13`): Used for warning / collaboration product surfaces.
• **Accent Red** (`{colors.accent-red}` — `#ee1d36`): Used for error / destructive states.

Surface

• **Canvas** (`{colors.canvas}` — `#ffffff`): The default page background.
• **Hairline** (`{colors.hairline}` — `#d8d8d8`): 1 px solid borders — input borders, card chrome, divider lines.

Text

• **Ink** (`{colors.ink}` — `#080808`): Default text and headings.
• **Ink Strong** (`{colors.ink-strong}` — `#222222`): Near-black emphasis.
• **Body** (`{colors.body}` — `#363636`): Default body paragraph color.
• **Body Mid** (`{colors.body-mid}` — `#5a5a5a`): Mid-emphasis secondary text — footer lines, captions.
• **Mute** (`{colors.mute}` — `#898989`): Lower-priority text.
• **Mute Soft** (`{colors.mute-soft}` — `#ababab`): The lightest text role — placeholder text, fine print.

Semantic

• **Info Blue** (`{colors.accent-blue-info}` — `#146ef5`): Info badge / notification.
• **Success Green** (`{colors.accent-green}` — `#00d722`): Success indicators.
• **Warning Yellow** (`{colors.accent-yellow}` — `#ffae13`): Warning states.
• **Error Red** (`{colors.accent-red}` — `#ee1d36`): Validation / destructive.

Typography

Font Family

A single proprietary family carries every typographic role: **WF Visual Sans Variable** (with `Arial` system fallback). Weights 400 / 500 / 550 / 600 are present; the brand never uses 700 / 800 / 900. A monospace variant — **WFVisualSans-Mono** with `Inconsolata` fallback — handles rare technical caption moments and code-style labels. OpenType features `"ss02"`, `"ss10"`, `"zero"` are enabled in the mono variant for the styled zero glyph.

Hierarchy

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

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

| `{typography.display-xxl}` | 80px | 600 | 83.2px | -0.8px | Hero headline. |

| `{typography.display-xl}` | 56px | 600 | 58.24px | 0 | Sub-hero displays. |

| `{typography.display-lg}` | 44.8px | 600 | 46.6px | 0 | Section headlines. |

| `{typography.display-md}` | 32px | 500 | 41.6px | 0 | Card-cluster headlines. |

| `{typography.display-sm}` | 24px | 500 | 31.2px | 0 | Sub-section displays. |

| `{typography.display-xs}` | 20px | 500 | 28px | 0 | Inline display micro-headings. |

| `{typography.eyebrow-uppercase}` | 15px | 500 | 19.5px | 1.5px | UPPERCASE eyebrow tags above sections. |

| `{typography.eyebrow-uppercase-sm}` | 12px | 500 | 12px | 0.6px | Small uppercase metadata. |

| `{typography.body-lg}` | 28.8px | 400 | 46.08px | -0.288px | Lead paragraphs. |

| `{typography.body-md}` | 16px | 400 | 25.6px | -0.16px | Default body. |

| `{typography.body-md-strong}` | 16px | 500 | 25.6px | -0.16px | Bolded inline body. |

| `{typography.body-sm}` | 14px | 400 | 22.4px | 0 | Secondary body. |

| `{typography.body-sm-strong}` | 14px | 500 | 22.4px | 0 | Bold caption / nav-link. |

| `{typography.caption}` | 12.8px | 550 | 15.36px | 0 | Badge labels (the brand's signature 550 weight). |

| `{typography.caption-mono}` | 12px | 400 | 18px | 0 | Mono code captions. |

| `{typography.button-md}` | 16px | 500 | 25.6px | -0.16px | Button labels. |

Principles

• **Weight ceiling at 600.** The brand never uses 700+. Confident, not loud.
• **Negative tracking at display sizes.** `-0.8 px` at 80 px, scaling through. Tight kerning is part of the voice.
• **Uppercase eyebrows mark every section.** 15 px / weight 500 / `1.5 px` positive tracking is the brand's signature label style.
• **Single family across the system.** No separate display vs body face. The variable axes do the work.

Note on Font Substitutes

WF Visual Sans Variable is proprietary. Open-source substitutes:

• **Display + body** — *Inter* weights 400 / 500 / 600 with `font-feature-settings: "ss01"` enabled is the closest stylistic match.
• **Mono** — *Inconsolata* (the documented fallback) or *DM Mono*.

Layout

Spacing System

• **Base unit**: 4 px (with frequent 0.4 / 0.8 sub-multiples for fine padding).
• **Tokens**: `{spacing.xxs}` 2 px · `{spacing.xs}` 4 px · `{spacing.sm}` 8 px · `{spacing.md}` 12 px · `{spacing.lg}` 16 px · `{spacing.xl}` 20 px · `{spacing.2xl}` 24 px · `{spacing.3xl}` 32 px.
• **Section padding**: hero / content bands use `{spacing.3xl}` 32 px gutters with generous vertical spacing.
• **Card interior padding**: feature and pricing cards sit at `{spacing.3xl}` 32 px.

Grid & Container

• Marketing container is wide (effectively edge-to-edge with `{spacing.3xl}` gutters).
• Category card grid: 2 / 3-up at desktop with mixed sizing (some larger feature cards span 2 columns).
• Pricing tier grid: 3-up at desktop, 1-up at mobile.

Responsive Strategy

#### Breakpoints

| Name | Width | Key Changes |

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

| Mobile | < 479px | Hero stacks; all grids 1-up. |

| Mobile-Large | 479–767px | Same as Mobile. |

| Tablet | 768–991px | 2-up grids. |

| Desktop | ≥ 992px | Full multi-up grids. |

#### Touch Targets

Buttons render at ~44 px (12 px vertical padding + 25.6 px line-height). WCAG AAA met.

#### Collapsing Strategy

• Nav: full link row at desktop. Hamburger at mobile.
• Category card grid: 2 / 3 / 4-up at desktop, drops to 1-up at mobile.
• Pricing tier: 3 / 4-up at desktop, 1-up at mobile.

#### Image Behavior

• Category cards: full-bleed solid colour fills (no photography).
• Product screenshots: 16:9 inside `{rounded.md}` card chrome.
• No portrait imagery in the marketing surface.

Elevation & Depth

| Level | Treatment | Use |

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

| Level 0 — Flat | No shadow, no border. | Default bands. |

| Level 1 — Hairline | 1 px solid `{colors.hairline}` border on `{colors.canvas}`. | Default card chrome and input borders. |

| Level 2 — Layered Drop | Multi-stop layered shadow with subtle warm offsets — `0 84px 24px rgba(0,0,0,0), 0 54px 22px rgba(0,0,0,0.01), 0 30px 18px rgba(0,0,0,0.04), 0 13px 13px rgba(0,0,0,0.08), 0 3px 7px rgba(0,0,0,0.09)`. | Featured cards needing visible lift. |

| Level 3 — Layered Drop Strong | Deeper version of Level 2 with `0.12` final offset opacity. | Pricing / modal-level emphasis. |

| Level 4 — Heavy Modal | Extremely heavy multi-stop — `0 24px 24px rgba(0,0,0,0.26), 0 6px 13px rgba(0,0,0,0.29)` final stops. | Modal / dialog surfaces. |

Decorative Depth

• The chromatic category cards (full-saturation purple / pink / blue / orange / green fills) provide visual depth through pure colour contrast against the white canvas.
• Layered shadow recipes are the brand's only true atmospheric effect — they're 5-stop drop-shadow stacks with very low individual opacities.

Shapes

Border Radius Scale

| Token | Value | Use |

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

| `{rounded.none}` | 0px | Full-bleed bands. |

| `{rounded.xs}` | 2px | Tight inline pills. |

| `{rounded.sm}` | 4px | The brand's canonical button + badge + small-element radius. |

| `{rounded.md}` | 8px | Card chrome and feature / category cards. |

| `{rounded.full}` | 9999px | Circular icon containers only. |

Components

Buttons

**`button-primary`** — the canonical near-black CTA.

• Background `{colors.primary}` (`#080808`), text `{colors.on-primary}` white, label `{typography.button-md}` (16 px weight 500), padding `{spacing.md} {spacing.xl}`, shape `{rounded.sm}` 4 px.

**`button-secondary`** — the white outline CTA.

• Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.hairline}` border, same typography + padding + shape.

**`button-text-arrow`** — the underlined text-link CTA with arrow used in long-form sections.

• Background `{colors.canvas}`, text `{colors.ink}`, no border, body in `{typography.button-md}`, padding `{spacing.xl}` 0.

**`button-icon-circular`** — the circular icon button for carousel controls.

• Background `{colors.canvas}`, ink icon, shape `{rounded.full}`.

Cards & Containers

**`card-feature`** — the canonical feature card on canvas.

• Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.hairline}`, padding `{spacing.3xl}`, shape `{rounded.md}`. Often elevated to Level 2 shadow when featured.

**`card-feature-dark`** — the polarity-flipped feature card on near-black.

• Background `{colors.primary}`, text `{colors.on-primary}`, padding `{spacing.3xl}`, shape `{rounded.md}`.

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

• Background `{colors.canvas}`, text `{colors.ink}`, hairline border, padding `{spacing.3xl}`, shape `{rounded.md}`. Layered shadow on the featured tier.

Inputs & Forms

**`text-input`** — the canonical text input.

• Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.hairline}`, body in `{typography.body-md}`, padding `{spacing.md} {spacing.lg}`, shape `{rounded.sm}`.

Navigation

**`nav-bar`** — the sticky top nav.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.lg} {spacing.3xl}`.

**`nav-link`** — link items inside `nav-bar`.

• Text `{colors.ink}`, set in `{typography.body-sm-strong}`.

**`footer`** — the footer band.

• Background `{colors.canvas}`, text `{colors.body-mid}`, padding `{spacing.3xl} {spacing.3xl}`. Body in `{typography.body-sm}`.

Signature Components

**`hero-band`** — the white hero band.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.3xl} {spacing.3xl}`. Headline in `{typography.display-xxl}` (80 px weight 600).

**`hero-band-dark`** — the polarity-flipped near-black hero band (used on some campaign pages).

• Background `{colors.primary}`, text `{colors.on-primary}`, same padding / headline scale.

**`content-band`** — the standard content band on canvas.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.3xl} {spacing.3xl}`. Section headline in `{typography.display-lg}`.

**`category-card-purple`** — full-fill purple category card.

• Background `{colors.accent-purple}`, text white, padding `{spacing.3xl}`, shape `{rounded.md}`.

**`category-card-pink`** — full-fill pink category card.

• Background `{colors.accent-pink}`, text white, padding `{spacing.3xl}`, shape `{rounded.md}`.

**`category-card-blue`** — full-fill blue category card.

• Background `{colors.accent-blue}`, text white, padding `{spacing.3xl}`, shape `{rounded.md}`.

**`category-card-orange`** — full-fill orange category card.

• Background `{colors.accent-orange}`, text white, padding `{spacing.3xl}`, shape `{rounded.md}`.

**`category-card-green`** — full-fill green category card (uses ink text for legibility against the lighter green).

• Background `{colors.accent-green}`, text `{colors.primary}` (ink), padding `{spacing.3xl}`, shape `{rounded.md}`.

**`badge-info`** + **`badge-info-soft`** — info badges in solid blue or soft outline.

• Filled: bg `{colors.accent-blue-info}` text white. Soft: bg canvas, text `{colors.accent-blue-info}`. Both at `{typography.caption}` (12.8 px weight 550) — the brand's signature 550-weight caption.

Examples (illustrative)

> Auto-derived kit-mirror demonstration surfaces (`scripts/derive-examples-block.mjs`). Each `ex-*` entry references brand-native primitives so downstream consumers (`/preview-design`, `/generate-kit`) re-skin the same 10 surfaces consistently. `TO_FILL` markers indicate missing primitives — resolve in the LLM judgment pass.

**`ex-pricing-tier`** — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

• Properties: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`

**`ex-pricing-tier-featured`** — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

• Properties: `backgroundColor`, `textColor`, `rounded`, `padding`

**`ex-product-selector`** — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-cart-drawer`** — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

• Properties: `backgroundColor`, `rounded`, `padding`, `item-divider`

**`ex-app-shell-row`** — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

• Properties: `backgroundColor`, `activeIndicator`, `rounded`, `padding`

**`ex-data-table-cell`** — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

• Properties: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`

**`ex-auth-form-card`** — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-modal-card`** — Modal dialog surface — same chrome as feature-card with elevated shadow.

• Properties: `backgroundColor`, `rounded`, `padding`

**`ex-empty-state-card`** — Empty-state illustration frame.

• Properties: `backgroundColor`, `rounded`, `padding`, `captionTypography`

**`ex-toast`** — Toast notification surface — feature-card shape + medium shadow.

• Properties: `backgroundColor`, `rounded`, `padding`, `typography`

Do's and Don'ts

Do

• Reserve `{colors.primary}` (`#080808`) for every primary CTA, every heading, and every wordmark. Near-black is the conversion colour.
• Use the five chromatic accents (purple / pink / blue / orange / green) as full-fill category cards, NOT as button backgrounds.
• Set hero headlines in `{typography.display-xxl}` weight 600 with `-0.8 px` tracking.
• Pair the proprietary WF Visual Sans family across every typographic role.
• Use `{rounded.sm}` 4 px for buttons, `{rounded.md}` 8 px for cards. The brand never uses pill CTAs.
• Use layered multi-stop drop-shadows on featured cards — the brand's distinctive elevation recipe.

Don't

• Don't promote button-medium weight to 700+. The brand's weight ceiling is 600.
• Don't use chromatic accents as button backgrounds. They're surface fills, not actions.
• Don't render CTAs as pills. The brand's button geometry is tight 4 px rectangle.
• Don't introduce a sixth accent colour. The 5-stop palette is the system.

개요

Webflow는 시각적 웹 개발 플랫폼으로 자리매김합니다. 마케팅 표면에서는 기술 스타트업이 아닌 자신감 있는 전문 제품으로 읽혀집니다. 기본 페이지는 브랜드의 기본 CTA, 타이포그래피 및 잉크를 위한 짙은 검정색 `{colors.primary}`(`#080808`)가 있는 넉넉한 흰색 캔버스(`{colors.canvas}`)입니다. 이 절제된 원색 주위에 브랜드는 `{colors.accent-purple}` `#7a3dff`, `{colors.accent-pink}` `#ed52cb`, `{colors.accent-blue}` `#3b89ff`, `{colors.accent-orange}` `#ff6b00`, `{colors.accent-green}` 등 5스톱 유채색 악센트 시스템을 배치합니다. `#00d722` — 각각은 플랫폼의 제품 카테고리(디자인, CMS, 호스팅, 전자상거래 등) 중 하나에 매핑됩니다. 이러한 강조는 버튼 색상이 아닌 제품 카테고리 그리드 내부의 전체 카드 채우기로 나타납니다. 브랜드의 기본 CTA는 검정색에 가깝습니다.

유형은 두 번째 결정적인 목소리를 전달합니다. 독점적인 'WF Visual Sans Variable' 제품군은 모든 디스플레이, 본문 및 라벨 역할을 500/600의 무게로 수행합니다. 브랜드는 결코 세미볼드보다 무겁지 않고 일반보다 결코 가볍지 않습니다. 영웅 디스플레이는 80px / 무게 600 / `-0.8px` 추적에 위치합니다. 자신감은 있지만 소리를 지르지는 않습니다. 모든 섹션 헤더마다 `1.5px` 포지티브 추적 표시가 있는 15px 무게 500의 대문자 눈썹.

모양 시스템이 제한됩니다. 버튼은 빡빡한 `{rounded.sm}` 4픽셀 반경을 사용합니다. 알약도 사각형도 아닙니다. 브랜드는 엔지니어링 된 것으로 읽습니다. 카드는 `{rounded.md}` 8픽셀까지 증가합니다. 알약(`{rounded.full}` 9999px)은 원형 아이콘 컨테이너용으로 예약되어 있습니다. 추천 카드의 레이어드 드롭 섀도우는 적당한 높이를 추가하지만 결코 무겁게 느껴지지 않습니다.

**주요 특징:**

• 2가지 색상 변환 계층 — 모든 기본 CTA에 대해 검은색에 가까운 `{colors.primary}`, 모든 보조 CTA에 가는선이 흰색입니다. 색채 강조는 버튼 배경이 아닌 카테고리 카드의 전체 표면 채우기로 사용됩니다.
• 브랜드의 시그니처는 **5가지 색상 카테고리 팔레트**입니다: 보라색/분홍색/파란색/주황색/녹색, 각각은 제품 표면에 연결되어 있습니다. 카드가 채워질 때 완전 포화 상태로 사용됩니다.
• '-0.8px' 추적 기능을 갖춘 80px 무게 600의 영웅 타이포그래피 - 절제되고 자신감 있으며 결코 광고판에 시끄럽지 않습니다.
• WF Visual Sans Variable은 단일 제품군입니다. 브랜드는 본체/디스플레이에 별도의 산세를 사용하지 않습니다. WFVisualSans-Mono / Inconsolata는 기술 캡션에만 표시됩니다.
• 꽉 조여진 `{rounded.sm}` 4px 버튼 형상; `{rounded.md}` 8픽셀의 카드. 이 브랜드는 알약 CTA를 절대 사용하지 않습니다.
• 추천 카드에 계층화된 다중 오프셋 그림자 - 브랜드의 유일한 상승 신호입니다.

색상

브랜드 및 액센트

• **잉크 블랙** (`{colors.primary}` — `#080808`): 브랜드의 기본 변환 색상입니다. 모든 기본 CTA, 모든 제목, 모든 워드마크. 브랜드로 읽기에 순수한 검정색보다 더 깊습니다.
• **액센트 퍼플**(`{colors.accent-purple}` — `#7a3dff`): 5가지 색채 카테고리 액센트 중 하나 - 디자인/제품 표면 제작에 사용됩니다.
• **액센트 핑크**(`{colors.accent-pink}` — `#ed52cb`): 마젠타색 액센트 — 애니메이션/상호작용 제품 표면에 사용됩니다.
• **액센트 블루** (`{colors.accent-blue}` — `#3b89ff`): 밝은 청록색 - SEO/분석 제품 표면에 사용됩니다.
• **Accent Blue Deep** (`{colors.accent-blue-deep}` — `#006acc`): 강조 링크에 사용되는 진한 파란색입니다.
• **액센트 블루 정보** (`{colors.accent-blue-info}` — `#146ef5`): 배지 정보 파란색입니다.
• **액센트 오렌지**(`{colors.accent-orange}` — `#ff6b00`): 호스팅/인프라 제품 표면에 사용됩니다.
• **액센트 그린**(`{colors.accent-green}` — `#00d722`): 전자상거래/상태 성공 표면에 사용됩니다.
• **Accent Yellow** (`{colors.accent-yellow}` — `#ffae13`): 경고/협업 제품 표면에 사용됩니다.
• **Accent Red** (`{colors.accent-red}` — `#ee1d36`): 오류/파괴적인 상태에 사용됩니다.

표면

• **캔버스** (`{colors.canvas}` — `#ffffff`): 기본 페이지 배경입니다.
• **헤어라인**(`{colors.hairline}` — `#d8d8d8`): 1px 실선 테두리 — 입력 테두리, 카드 크롬, 구분선.

텍스트

• **잉크**(`{colors.ink}` — `#080808`): 기본 텍스트 및 제목.
• **Ink Strong** (`{colors.ink-strong}` — `#222222`): 검정색에 가까운 강조입니다.
• **본문**(`{colors.body}` — `#363636`): 기본 본문 단락 색상입니다.
• **Body Mid** (`{colors.body-mid}` — `#5a5a5a`): 중간 강조 보조 텍스트 — 바닥글 줄, 캡션.
• **음소거** (`{colors.mute}` — `#898989`): 우선순위가 낮은 텍스트입니다.
• **Mute Soft** (`{colors.mute-soft}` — `#ababab`): 가장 가벼운 텍스트 역할 — 자리 표시자 텍스트, 작은 글씨.

의미론

• **정보 블루**(`{colors.accent-blue-info}` — `#146ef5`): 정보 배지/알림.
• **성공 녹색** (`{colors.accent-green}` — `#00d722`): 성공 표시기입니다.
• **경고 노란색**(`{colors.accent-yellow}` — `#ffae13`): 경고 상태입니다.
• **오류 빨간색**(`{colors.accent-red}` — `#ee1d36`): 유효성 검사/파괴적입니다.

타이포그래피

글꼴 계열

단일 독점 제품군은 모든 인쇄상의 역할을 수행합니다. **WF Visual Sans Variable**(`Arial` 시스템 대체 사용)

概要

Webflow は自らをビジュアル Web 開発プラットフォームとして位置づけています。マーケティング面では、技術系スタートアップではなく、自信に満ちたプロフェッショナルな製品として扱われています。デフォルトのページは、ブランドの主要な CTA、タイポグラフィー、インク用の濃い黒に近い `{colors.primary}` (`#080808`) を備えた広々とした白いキャンバス (`{colors.canvas}`) です。この控えめな原色を中心に、ブランドは 5 ストップのクロマチック アクセント システムを重ねています - `{colors.accent-purple}` `#7a3dff`、`{colors.accent-pink}` `#ed52cb`、`{colors.accent-blue}` `#3b89ff`、`{colors.accent-orange}` `#ff6b00`、 `{colors.accent-green}` `#00d722` — それぞれがプラットフォームの製品カテゴリ (デザイン、CMS、ホスティング、e コマースなど) の 1 つにマッピングされます。これらのアクセントは、ボタンの色としてではなく、製品カテゴリ グリッド内のカード全体の塗りつぶしとして表示されます。ブランドの主要なCTAはほぼ黒のままです。

タイプは 2 番目の決定的な声を伝えます。独自の「WF Visual Sans Variable」ファミリーは、ディスプレイ、ボディ、ラベルのすべての役割を 500 / 600 のウェイトで担っています。このブランドは、セミボールドよりも重くなることはなく、通常よりも軽くなることはありません。ヒーロー ディスプレイは 80 ピクセル / ウェイト 600 / `-0.8 ピクセル` トラッキングに設定されています。自信はありますが、叫んでいるわけではありません。 15 ピクセルのウェイト 500 で大文字の眉毛、「1.5 ピクセル」のポジティブ トラッキング マークが各セクション ヘッダーに表示されます。

形状システムは抑制されています。ボタンは `{rounded.sm}` の 4 ピクセルの半径をタイトに取り、丸薬でも正方形でもありません。ブランドはエンジニアリングと読みます。カードは `{rounded.md}` 8 ピクセルまで増加します。ピル (`{rounded.full}` 9999 ピクセル) は、円形アイコン コンテナー用に予約されています。注目のカードに重ねられたドロップシャドウは適度な高さを加えますが、素材が重く感じられることはありません。

**主な特徴:**

• 2 色の変換階層 — `{colors.primary}` はすべてのプライマリ CTA でほぼ黒、すべてのセカンダリ CTA ではヘアライン上の白です。色のアクセントは、ボタンの背景としてではなく、カテゴリ カードの表面全体の塗りつぶしとして使用されます。
• ブランドの特徴は、**5 ストップのクロマティック カテゴリ パレット**です。パープル / ピンク / ブルー / オレンジ / グリーンで、それぞれが製品の表面に関連付けられています。カードがいっぱいになると完全に飽和状態で使用されます。
• 80 ピクセル ウェイト 600 のヒーロー タイポグラフィ、「-0.8 ピクセル」トラッキング - 控えめで自信に満ちた、決して看板のようなうるささではありません。
• WF Visual Sans Variable は単一のファミリーです。このブランドはボディとディスプレイを別々に使用していません。 WFVisualSans-Mono / Inconsolata は技術キャプションにのみ表示されます。
• タイトな `{rounded.sm}` 4 ピクセルのボタン ジオメトリ。カードは `{rounded.md}` 8 ピクセルです。このブランドはピル CTA を決して使用しません。
• 注目のカードに重ねられたマルチオフセットのドロップシャドウ - ブランドの唯一の標高の手がかり。

色

ブランドとアクセント

• **インク ブラック** (`{colors.primary}` — `#080808`): ブランドの主要な変換色。すべての主要 CTA、すべての見出し、すべてのワードマーク。純粋な黒よりも深く、ブランドとして読み取れます。
• **アクセント パープル** (`{colors.accent-purple}` — `#7a3dff`): 5 つの彩色カテゴリー アクセントの 1 つ — 製品表面のデザイン/構築に使用されます。
• **アクセント ピンク** (`{colors.accent-pink}` — `#ed52cb`): マゼンタのアクセント — アニメーション/インタラクション製品の表面に使用されます。
• **アクセント ブルー** (`{colors.accent-blue}` — `#3b89ff`): 明るいシアンブルー — SEO/分析製品の表面に使用されます。
• **アクセント ブルー ディープ** (`{colors.accent-blue-deep}` — `#006acc`): 強調リンクに使用される濃い青。
• **アクセント ブルー情報** (`{colors.accent-blue-info}` — `#146ef5`): バッジ情報の青。
• **アクセント オレンジ** (`{colors.accent-orange}` — `#ff6b00`): ホスティング/インフラストラクチャ製品の表面に使用されます。
• **アクセント グリーン** (`{colors.accent-green}` — `#00d722`): e コマース / ステータス成功の表面に使用されます。
• **アクセントイエロー** (`{colors.accent- yellow}` — `#ffae13`): 警告/コラボレーション製品の表面に使用されます。
• **アクセントレッド** (`{colors.accent-red}` — `#ee1d36`): エラー/破壊状態に使用されます。

表面

• **キャンバス** (`{colors.canvas}` — `#ffffff`): デフォルトのページの背景。
• **ヘアライン** (`{colors.hairline}` — `#d8d8d8`): 1 ピクセルの実線境界線 — 入力境界線、カード クロム、区切り線。

テキスト

• **インク** (`{colors.ink}` — `#080808`): デフォルトのテキストと見出し。
• **インク ストロング** (`{colors.ink-strong}` — `#222222`): 黒に近い強調。
• **本文** (`{colors.body}` — `#363636`): 本文の段落のデフォルトの色。
• **Body Mid** (`{colors.body-mid}` — `#5a5a5a`): 中間強調の二次テキスト — フッター行、キャプション。
• **ミュート** (`{colors.mute}` — `#898989`): 優先度の低いテキスト。
• **ミュート ソフト** (`{colors.mute-soft}` — `#ababab`): 最も軽いテキストの役割 — プレースホルダー テキスト、細字。

セマンティック

• **情報ブルー** (`{colors.accent-blue-info}` — `#146ef5`): 情報バッジ/通知。
• **成功グリーン** (`{colors.accent-green}` — `#00d722`): 成功インジケーター。
• **警告黄色** (`{colors.accent- yellow}` — `#ffae13`): 警告状態。
• **エラー 赤** (`{colors.accent-red}` — `#ee1d36`): 検証/破壊的。

タイポグラフィー

フォントファミリー

単一の独自のファミリーがあらゆるタイポグラフィーの役割を担います: **WF Visual Sans Variable** (`Arial` システム フォールバックを使用)