Slack

Overview

Slacc's design language centers on a deep aubergine primary (`{colors.primary}`) — the brand's most enduring visual asset — applied as the dominant button color, the footer band, the featured pricing tier, and the brand wordmark. Around that aubergine the system stages an unusually delicate ecosystem: cream-lavender hero canvases with soft pastel-mesh gradients (peachy oranges, lavenders, dusty greens) that pulse behind floating product UI mockups, with the actual interface chrome rendered in fine detail at 3:2 aspect.

Typography splits between two proprietary humanist sans families. The display tier runs at 700 weight at sizes 32–64px with negative letter-spacing for tight optical density on hero headlines. The UI tier uses the second family at 400–700 with slightly relaxed leading (1.55) — the brand's body copy reads quietly without competing with the aubergine moments.

Buttons are pill-shaped at 90px radius with an unusual amount of horizontal padding (28–30px), giving them a distinctly comfortable, almost over-padded feel. The primary aubergine pill is the only filled button in most contexts; secondary actions use a soft lavender pill (`{colors.canvas-lavender}`) which reads as a gentler echo of the primary surface. Inline links shift to a saturated blue (`{colors.link-blue}`) — the brand's only chromatic departure from the aubergine-and-cream world.

**Key Characteristics:**

• Single aubergine primary (`{colors.primary}`) reused across CTAs, the featured pricing tier, the footer band, and the wordmark — the brand's chromatic monotheism.
• Cream-lavender hero canvas (`{colors.canvas-cream}` / `{colors.canvas-lavender}`) with diffused pastel-mesh atmospheric gradients and floating UI mockups composited above.
• Pill buttons at `{rounded.pill}` (90px radius) with generous 28–30px horizontal padding — over-padded by SaaS-default standards, deliberately so.
• Tight negative letter-spacing on display sizes (-0.768px on 64px hero) for editorial-density headlines.
• Blue inline links (`{colors.link-blue}`) — the only non-aubergine chromatic accent in body type.
• Pastel-mesh gradient atmospherics: every hero band has a subtle peach-lavender-dusty-green wash behind it; product UI sits on top, never inside, the gradient.
• Statistics cards rendered in massive aubergine display type (90% / 43 / 87%) on white — quantitative emphasis through scale alone.

Colors

> **Source pages:** home (`/`), `/features/channels`, `/pricing`, `/contact-sales`.

Brand & Accent

• **Aubergine** (`{colors.primary}` — `#4a154b`): The brand's primary surface and CTA color. Deep, warm purple with a hint of ruby — used on filled buttons, the featured pricing tier, the footer band, and the brand wordmark.
• **Aubergine Deep** (`{colors.primary-deep}` — `#481a54`): A near-identical sibling of `{colors.primary}` extracted from a different surface; treat as functionally equivalent.
• **Aubergine Press** (`{colors.primary-press}` — `#611f69`): Pressed-state lift of the primary, slightly lighter and warmer.
• **Aubergine Tint** (`{colors.primary-tint}` — `#592466`): Border accent on aubergine-on-aubergine surfaces.
• **Link Blue** (`{colors.link-blue}` — `#1264a3`): Inline link color — saturated, slightly warm blue. The only chromatic alternative to aubergine in body type.
• **Link Hover** (`{colors.link-hover}` — `#3860be`): A more saturated blue used on link hover state.

Surface

• **Canvas White** (`{colors.canvas}` — `#ffffff`): Default content surface.
• **Canvas Cream** (`{colors.canvas-cream}` — `#f4ede4`): Warm off-white used on hero gradients and feature bands. Adds editorial warmth.
• **Canvas Lavender** (`{colors.canvas-lavender}` — `#f9f0ff`): Pale lavender tint used as the secondary-button surface and as a soft section band.
• **Surface Aubergine** (`{colors.surface-aubergine}` — `#4a154b`): The primary aubergine reused as a surface — featured pricing tier, footer, dark feature bands.
• **Hairline** (`{colors.hairline}` — `#e6e6e6`): 1px borders on cards and table dividers.

Text

• **Ink** (`{colors.ink}` — `#1d1d1d`): Primary body text on light surfaces. Just shy of pure black.
• **Ink Mute** (`{colors.ink-mute}` — `#696969`): Secondary text, captions, helper copy.
• **On Primary** (`{colors.on-primary}` — `#ffffff`): Text on aubergine surfaces and filled CTAs.
• **On Aubergine Mute** (`{colors.on-aubergine-mute}` — `#d9bdde`): Secondary text on aubergine surfaces — a desaturated mauve that reads as muted-light.

Semantic

• **Error** (`{colors.semantic-error}` — `#cc4117`): Form error and destructive-action color.
• **Success** (`{colors.semantic-success}` — `#007a5a`): Inline success indicators.

Typography

Font Family

The display tier is **Salesforce Avant Garde** — a proprietary humanist sans with broad apertures and a slightly geometric character. When unavailable, fall back to the system font stack (`system-ui, -apple-system, BlinkMacSystemFont`).

The UI tier is **Salesforce Sans** — a separate proprietary face used for body, captions, and button labels. Same fallback chain.

Both faces are proprietary and not freely available. Substitute with **Inter** (open-source via Google Fonts) at matching weights for both display and body — Inter is the closest open analogue across both tiers.

Hierarchy

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

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

| `{typography.display-xxl}` | 64px | 700 | 1.12 | -0.768px | Marketing hero headline |

| `{typography.display-xl}` | 58px | 600 | 1.25 | -0.464px | Section openers |

| `{typography.display-lg}` | 50px | 700 | 1.12 | -0.6px | Statistics callouts |

| `{typography.display-md}` | 32px | 700 | 1.25 | -0.256px | Card / feature titles |

| `{typography.heading-lg}` | 24px | 700 | 1.33 | -0.096px | Pricing tier names |

| `{typography.heading-md}` | 22px | 600 | 1.4 | 0 | Sub-section heading |

| `{typography.heading-sm}` | 18px | 600 | 1.56 | -0.0216px | Compact card title |

| `{typography.body-lg}` | 18px | 400 | 1.55 | -0.0216px | Marketing body lead |

| `{typography.body-md}` | 16px | 400 | 1.55 | 0 | Default UI body |

| `{typography.body-strong}` | 16px | 700 | 1.5 | 0.16px | Emphasized body |

| `{typography.button-lg}` | 18px | 700 | 1.0 | 0 | Hero pill button label |

| `{typography.button-md}` | 16px | 700 | 1.38 | 0.2px | Standard pill button label |

| `{typography.button-cap}` | 14.4px | 700 | 1.0 | 0.144px | Compact pill label |

| `{typography.caption}` | 14px | 400 | 1.43 | 0.1px | Helper, footnote |

| `{typography.micro-cap}` | 12px | 700 | 1.0 | 0.96px | All-caps eyebrow |

Principles

• **Tight tracking on display.** Negative letter-spacing across 32–64px sizes; the proprietary face is wide by default, the negative tracking pulls it into editorial density.
• **Body at 1.55 leading.** Slightly relaxed for marketing readability without crossing into airy / 1.7+ territory.
• **Caps for eyebrows.** All eyebrows render uppercase with positive 0.96–0.144px tracking depending on size.

Note on Font Substitutes

Use **Inter** (open-source Google Fonts) for both display and UI tiers — Inter at 700 weight with `-0.768px` letter-spacing closely approximates the brand's display behavior. For maximum brand fidelity, **Lato** is a softer humanist alternative that pairs well at body sizes. Avoid System UI fonts on the body — the brand's subtle warmth disappears at default weights.

Layout

Spacing System

• **Base unit**: 8px (with 4 / 12 / 16 / 20 / 24 / 28 sub-tokens for fine vertical rhythm).
• **Tokens**: `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 20px · `{spacing.xxl}` 24px · `{spacing.huge}` 28px.
• **Section padding**: 64–96px on marketing surfaces; tightens to 48px on transactional pages.
• **Card internal padding**: 32px on pricing cards; 48px on aubergine band cards.

Grid & Container

• Marketing pages center in a ~1240px container with edge-bleeding pastel-mesh gradients escaping the container.
• Pricing collapses 4-up → 2-up → 1-up at 992 / 768 breakpoints.
• Statistics row: 3-column grid with massive 50px aubergine display numerals.

Whitespace Philosophy

The pastel-mesh gradients fill most of the negative space on marketing pages — sections feel expansive without being literally empty. On transactional pages the gradients drop, and whitespace reverts to traditional 48px-section breathing room.

Elevation & Depth

| Level | Treatment | Use |

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

| 0 | Flat | Default surface |

| 1 | `box-shadow: rgba(0,0,0,0.1) 0 5px 20px 0` | Floating buttons on hero |

| 2 | `box-shadow: rgba(0,0,0,0.1) 0 0 32px 0` | Product UI mockup composites |

| 3 | `box-shadow: rgba(0,0,0,0.2) 0 1px 10px 0` | Toast / notification chrome |

| 4 | `box-shadow: rgb(97,31,105) 0 0 0 1px inset` | Aubergine inset border (button focus, special chrome) |

Decorative Depth

The brand's depth language is the **pastel-mesh gradient** — peach, lavender, dusty green stops blurred together at large radii to create soft atmospheric backdrops behind product UI screenshots. The gradient is the brand's flavor of "depth without shadows": the eye perceives the product mockup as floating above a luminous backdrop without any literal lift.

Shapes

Border Radius Scale

| Token | Value | Use |

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

| `{rounded.xs}` | 2px | Hairline tags, status pills (rare) |

| `{rounded.sm}` | 4px | Form inputs |

| `{rounded.md}` | 8px | Compact card chrome, video frames |

| `{rounded.lg}` | 12px | Mid-size cards, secondary surface |

| `{rounded.xl}` | 16px | Pricing cards, feature cards |

| `{rounded.xxl}` | 48px | Stat badge backdrops |

| `{rounded.pill}` | 90px | All buttons |

Photography Geometry

The brand uses **product UI screenshots** more than photography. UI mockups sit on top of pastel-mesh gradients at roughly 4:3 aspect, with no shadow but with the gradient providing the "lift" the eye expects. Real photography appears in customer-logo strips and the occasional case-study card, treated as full-bleed inside `{rounded.xl}` containers.

Components

Buttons

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

• Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button-md}`, padding `14px 28px`, rounded `{rounded.pill}` 90px.
• Pressed state `button-primary-pill-pressed` shifts background to `{colors.primary-press}`.

**`button-secondary-pill`** — the soft lavender alternative.

• Background `{colors.canvas-lavender}`, text `{colors.ink}`, padding `10px 30px`, same pill geometry. Used as the second action beside the primary aubergine pill.

**`button-outline-aubergine`** — outline variant on white surfaces.

• Background `{colors.canvas}`, text `{colors.primary}`, 2px solid `{colors.primary}` border, same pill shape.

**`button-outline-on-aubergine`** — outline on aubergine canvas.

• Background `{colors.surface-aubergine}` (transparent over the surface), text `{colors.on-primary}`, 2px solid `{colors.on-primary}` border, same pill shape.

Cards & Containers

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

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

**`card-pricing-featured`** — the inverted aubergine featured tier.

• Background `{colors.surface-aubergine}`, text `{colors.on-primary}`, otherwise identical to `card-pricing`. The aubergine fill is the brand's signature featured-tier choice.

**`card-feature-cream`** — feature explanation card on the cream track.

• Background `{colors.canvas-cream}`, text `{colors.ink}`, rounded `{rounded.xl}`, padding 32px.

**`card-aubergine-band`** — large horizontal band card with aubergine fill, often containing the closing CTA of a marketing page.

• Background `{colors.surface-aubergine}`, text `{colors.on-primary}`, padding 48px, rounded `{rounded.xl}` 16px.

**`card-stat`** — statistics callout card.

• Background `{colors.canvas}`, text `{colors.primary}` rendered in `{typography.display-lg}` (50px aubergine numeral). Holds a single percentage/number with a small caption underneath.

Inputs & Forms

**`text-input`** — standard form field.

• Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, padding `10px 12px`, rounded `{rounded.sm}` 4px, 1px `{colors.hairline}` border.

Navigation

**`nav-bar-light`** — top nav across all marketing pages.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.lg} {spacing.xxl}`. Logo wordmark on the left, nav items center, two pill buttons on the right (`button-secondary-pill` for "Sign In", `button-primary-pill` for "Try For Free").

Pills, Tags, and Chips

**`pill-cap-shade`** — small all-caps pill used as eyebrow above pricing-tier titles.

• Background `{colors.canvas-cream}`, text `{colors.ink}`, type `{typography.micro-cap}`, padding `4px 12px`, rounded `{rounded.pill}`.

Signature Components

**Pastel-Mesh Gradient Backdrop** — peach (`#fff0e6`-ish) + lavender (`#e9d8ff`) + dusty green stops blurred together behind hero bands. Implemented as a CSS radial-gradient stack, not a single image. Provides the brand's depth/luminosity without literal shadows.

**Floating Product UI Mockup** — product screenshots framed in `{rounded.lg}` (12px) containers, positioned above the pastel-mesh gradient with no border or shadow. The gradient does the lifting.

**Aubergine Footer Band** — every marketing page closes with a full-bleed `card-aubergine-band` containing a closing CTA in white type. The band height is generous (~480–600px on desktop) and reads as the page's signature.

**`link-on-light`** — inline links in body copy on light surfaces.

• Text `{colors.link-blue}` rendered in `{typography.body-md}`. No underline by default; underline appears on hover via the link-hover behavior.

**`link-on-aubergine`** — links inside aubergine surfaces.

• Text `{colors.on-primary}` with persistent underline.

**`footer-aubergine`** — site-wide footer.

• Background `{colors.surface-aubergine}`, text `{colors.on-primary}` rendered in `{typography.caption}`, padding `{spacing.huge}+ {spacing.xxl}` (32px 24px). Holds 4–5 columns of `{colors.on-aubergine-mute}` link groups, social icons, and a small legal/copyright row at the bottom.

Do's and Don'ts

Do

• Reserve `{colors.primary}` aubergine for filled CTAs, the featured pricing tier, and the closing aubergine band — it's the brand's chromatic monotheism.
• Use `{rounded.pill}` (90px) for every button across the system — never a rounded-rectangle button.
• Pair display tiers with negative letter-spacing (`-0.768px` at 64px); the proprietary face needs the tracking pull.
• Compose hero bands with pastel-mesh gradient backdrop + floating product UI mockup; the gradient is the depth.
• Use `{colors.link-blue}` for inline links — it's the only chromatic departure from aubergine and is part of the brand voice.

Don't

• Don't add a third accent color to the system — the aubergine + blue link combination is exhaustive.
• Don't shrink button padding below `14px 28px` — the over-padded pill is part of the brand feel.
• Don't render display tiers at default tracking (0) — without negative letter-spacing the headlines read loose and unedited.
• Don't put product UI screenshots inside cards — they sit ABOVE the pastel-mesh gradient, never inside chrome.
• Don't use aubergine for body text — it's a surface and CTA color, not a type color at body sizes.
• Don't replace the pill shape with a square button anywhere.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

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

| Wide | ≥ 1440px | Full-bleed pastel-mesh hero; pricing 4-up |

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

| Tablet | 768–1023px | Pricing 2-up; product UI mockups crop to focal panel |

| Mobile | < 768px | Pricing 1-up; hamburger nav; display-xxl drops 64 → 40px |

Touch Targets

• Pill buttons hit ≥ 48×48px due to the over-padded geometry. WCAG AAA compliant.
• Form fields stay at the 44px minimum height.

Collapsing Strategy

• Display tiers stair-step 64 → 50 → 32 → 28 → 24 across breakpoints.
• Pastel-mesh gradients re-tile on mobile to prevent the wash from disappearing entirely.
• Floating product UI mockups crop to the most actionable inner panel on mobile.
• Pricing tiers stair-step 4 → 2 → 1; aubergine featured tier stays distinguished.
• Top nav collapses to hamburger below 768px; menu inherits canvas color.

Image Behavior

Product UI mockups use `srcset` for desktop / tablet / mobile crops; the mobile crop centers on the most actionable inner panel rather than scaling the whole composite down.

Iteration Guide

1. Focus on ONE component at a time.

2. Reference component names and tokens directly (`{colors.primary}`, `{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 aubergine scarce — one filled aubergine button per viewport.

7. Pair every hero band with the pastel-mesh gradient backdrop; bare-canvas heroes read as off-brand.

개요

Slacc의 디자인 언어는 브랜드의 가장 오래 지속되는 시각적 자산인 깊은 가지색 원색(``)을 중심으로 주요 버튼 색상, 바닥글 밴드, 주요 가격 등급 및 브랜드 워드마크로 적용됩니다. 그 가지 주위에 시스템은 유난히 섬세한 생태계를 조성합니다. 부드러운 파스텔 메쉬 그라데이션(복숭아 오렌지, 라벤더, 먼지가 많은 녹색)이 있는 크림 라벤더 영웅 캔버스는 떠다니는 제품 UI 모형 뒤에서 고동치고, 실제 인터페이스 크롬은 3:2 비율로 세밀하게 렌더링됩니다.

타이포그래피는 두 개의 독점 인문주의 산세 계열로 나뉩니다. 디스플레이 계층은 주요 헤드라인의 엄격한 광학 밀도를 위해 음수 문자 간격을 사용하여 32~64px 크기에서 700 무게로 실행됩니다. UI 계층은 약간 느슨한 행간(1.55)이 있는 400-700의 두 번째 계열을 사용합니다. 브랜드의 본문 카피는 가지와 경쟁하지 않고 조용히 읽혀집니다.

버튼은 특이한 양의 수평 패딩(28~30px)을 사용하여 반경 90픽셀의 알약 모양으로 되어 있어 확실히 편안하고 거의 과대포장된 느낌을 줍니다. 기본 가지 알약은 대부분의 상황에서 유일하게 채워진 버튼입니다. 보조 작업은 기본 표면의 더 부드러운 울림으로 읽히는 부드러운 라벤더 알약(``)을 사용합니다. 인라인 링크는 채도가 높은 파란색(``)으로 전환됩니다. 이는 가지와 크림 세계에서 브랜드가 유일하게 유채색으로 출발한 것입니다.

**주요 특성:**

• 단일 가지 기본(``)은 CTA, 추천 가격 책정 계층, 바닥글 밴드 및 워드마크 전반에 걸쳐 재사용됩니다. 이는 브랜드의 반음계 유일신교입니다.
• 크림-라벤더 히어로 캔버스(`` / ``)는 확산된 파스텔 메쉬 대기 그라데이션과 위에 합성된 플로팅 UI 모형을 포함합니다.
• ``(반경 90px)에 넉넉한 28~30px 수평 패딩이 있는 알약 버튼 — 의도적으로 SaaS 기본 표준에 따라 오버패딩됨.
• 편집 밀도 헤드라인의 경우 디스플레이 크기(64px 영웅의 경우 -0.768px)에서 음수 문자 간격을 좁혔습니다.
• 파란색 인라인 링크(``) — 신체 유형에서 가지가 아닌 유일한 색채 악센트입니다.
• 파스텔 메쉬 그라데이션 분위기: 모든 히어로 밴드 뒤에는 은은한 복숭아-라벤더-더스티-그린 워시가 있습니다. 제품 UI는 그라데이션 내부가 아닌 상단에 위치합니다.
• 흰색에 대규모 가지 표시 유형(90% / 43 / 87%)으로 렌더링된 통계 카드 — 규모만으로 정량적 강조.

색상

> **소스 페이지:** 홈(`/`), `/features/channels`, `/pricing`, `/contact-sales`.

브랜드 및 액센트

• **Aubergine** (`` — ``): 브랜드의 기본 표면 및 CTA 색상입니다. 루비가 살짝 가미된 깊고 따뜻한 보라색 - 채워진 버튼, 주요 가격 계층, 바닥글 밴드 및 브랜드 워드마크에 사용됩니다.
• **Aubergine Deep** (`` — ``): ``의 거의 동일한 형제가 다른 표면에서 추출되었습니다. 기능적으로 동등한 것으로 취급됩니다.
• **Aubergine Press** (`` — ``): 1차 프레스 상태 리프트, 약간 더 가볍고 따뜻함.
• **가지 색조** (`` — ``): 가지 표면에 테두리 강조 표시.
• **링크 파란색** (`` — ``): 인라인 링크 색상 — 채도가 높고 약간 따뜻한 파란색입니다. 가지의 체형에 대한 유일한 반음계 대안입니다.
• **링크 호버** (`` — ``): 링크 호버 상태에 사용되는 채도가 높은 파란색입니다.

표면

• **캔버스 흰색**(`` — ``): 기본 콘텐츠 표면.
• **캔버스 크림** (`` — ``): 히어로 그라데이션 및 기능 밴드에 사용되는 따뜻한 황백색입니다. 편집의 따뜻함을 더해줍니다.
• **캔버스 라벤더** (`` — ``): 보조 버튼 표면과 부드러운 섹션 밴드로 사용되는 연한 라벤더 색조입니다.
• **표면 가지**(`` — ``): 표면으로 재사용되는 기본 가지 — 주요 가격 책정 계층, 바닥글, 어두운 기능 밴드.
• **가는 선** (`` — ``): 카드 및 표 구분선의 1px 테두리.

텍스트

• **잉크** (`` — ``): 밝은 표면의 기본 본문 텍스트입니다. 그냥 순수한 검정색이 부끄러워요.
• **잉크 음소거**(`` — ``): 보조 텍스트, 캡션, 도우미 사본.
• **기본**(`` — ``): 가지 표면의 텍스트와 채워진 CTA.
• **가지 음소거에서** (`` — ``): 가지 표면의 보조 텍스트 — 음소거 빛으로 읽히는 채도가 낮은 자주빛.

의미

• **오류** (`` — ``): 양식 오류 및 파괴 작업 색상.
• **성공**(`` — ``): 인라인 성공 표시기.

타이포그래피

글꼴군

디스플레이 계층은 **Salesforce Avant Garde**입니다. 이는 넓은 조리개와 약간의 기하학적 특성을 지닌 독점 휴머니스트 산세입니다. 사용할 수 없는 경우 시스템 글꼴 스택(`system-ui, -apple-system, BlinkMacSystemFont`)으로 대체합니다.

UI 계층은 **Salesforce Sans**입니다. 이는 본문, 캡션 및 버튼 레이블에 사용되는 별도의 독점 얼굴입니다. 동일한 대체 체인.

두 얼굴 모두 독점적이며 무료로 사용할 수 없습니다. 디스플레이와 본체 모두에 대해 일치하는 가중치를 **Inter**(Google Fonts를 통한 오픈 소스)로 대체합니다. Inter는 두 계층 모두에서 가장 가까운 개방형 아날로그입니다.

계층구조

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

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

| _`` | 64px | 700 | 1.12 | -0.768px | 마케팅 히어로 헤드라인 |

| _`` | 58px | 600 | 1.25 | -0.464px | 섹션 오프너 |

| _`` | 50px | 700 | 1.12 | -0.6px | 통계 콜아웃 |

| _`` | 32px | 700 | 1.25 | -0.256px | 카드/기능 제목 |

| _`` | 24px | 700 | 1.33 | -0.096px | 가격 책정 계층 이름 |

| _`` | 22px | 600 | 1.4 | 0 | 하위 섹션 제목 |

| _`` | 18px | 600 | 1.56 | -0.0216px | 콤팩트 카드 제목 |

| _`` | 18px | 400 | 1.55 | -0.0216px | 마케팅 담당자 |

| _`` | 16px | 400 | 1.55 | 0 | 기본 UI 본문 |

| _`` | 16px | 700 | 1.5 | 0.16px | 강조된 본문 |

| _`` | 18px | 700 | 1.0 | 0 | 히어로 알약 버튼 라벨 |

| _`` | 16px | 700 | 1.38 | 0.2px | 표준 알약 버튼 라벨 |

| _`` | 14.4px | 700 | 1.0 | 0.144px | 소형 알약 라벨 |

| _`` | 14px | 400 | 1.43 | 0.1픽셀 | 도우미, 각주 |

| _`` | 12px | 700 | 1.0 | 0.96px | 올캡 눈썹 |

원칙

• **디스플레이에서 긴밀한 추적.** 32~64픽셀 크기에서 음수 문자 간격; 독점 페이스는 기본적으로 넓으며, 네거티브 트래킹은 이를 편집 밀도로 끌어옵니다.
• **본문 행간 1.55.** 통풍이 잘 되는/1.7+ 영역을 넘지 않고 마케팅 가독성을 위해 약간 완화됨.
• **눈썹용 캡.** 모든 눈썹은 크기에 따라 양수 0.96~0.144px 추적으로 대문자로 렌더링됩니다.

글꼴 대체에 대한 참고사항

디스플레이 및 UI 계층 모두에 **Inter**(오픈 소스 Google Fonts)를 사용합니다. `-0.768px` 문자 간격이 있는 700 가중치의 Inter는 브랜드의 디스플레이 동작과 매우 유사합니다. 브랜드 충실도를 극대화하기 위해 **Lato**는 신체 크기에 잘 어울리는 좀 더 부드러운 휴머니스트 대안입니다. 본체에 시스템 UI 글꼴을 사용하지 마세요. 기본 무게에서는 브랜드의 은은한 따뜻함이 사라집니다.

레이아웃

간격 시스템

• **기본 단위**: 8px(세밀한 수직 리듬을 위한 4/12/16/20/24/28 하위 토큰 포함).
• **토큰**: `` 4px · `` 8px · `` 12px · `` 16px · `` 20px · `` 24px · `` 28px.
• **섹션 패딩**: 마케팅 표면에서 64~96px; 거래 페이지에서는 48px로 조여집니다.
• **카드 내부 패딩**: 가격 카드의 경우 32px; 가지 밴드 카드의 48px.

그리드 및 컨테이너

• 마케팅 페이지는 가장자리가 선명한 파스텔 메시 그라데이션이 컨테이너를 벗어나는 ~1240픽셀 컨테이너의 중앙에 배치됩니다.
• 가격은 992/768 중단점에서 4위 → 2위 → 1위로 축소됩니다.
• 통계 행: 거대한 50px 가지 표시 숫자가 있는 3열 그리드.

공백 철학

파스텔 메쉬 그라데이션은 마케팅 페이지의 여백 대부분을 채웁니다. 섹션은 글자 그대로 비어 있지 않으면서 확장된 느낌을 줍니다. 트랜잭션 페이지에서는 그라데이션이 떨어지고 공백은 기존의 48px 섹션 호흡 공간으로 되돌아갑니다.

고도 및 깊이

| 레벨 | 치료 | |

사용

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

| 0 | 플랫 | 기본 표면 |

| 1 | _`box-shadow: rgba(0,0,0,0.1) 0 5px 20px 0` | 영웅의 플로팅 버튼 |

| 2 | _`box-shadow: rgba(0,0,0,0.1) 0 0 32px 0` | 제품 UI 모형 복합물 |

| 3 | _`box-shadow: rgba(0,0,0,0.2) 0 1px 10px 0` | 토스트/알림 크롬 |

| 4 | _`box-shadow: rgb(97,31,105) 0 0 0 1px inset` | 가지 삽입 테두리(버튼 포커스, 특수 크롬) |

장식적 깊이

브랜드의 심도 언어는 **파스텔 메쉬 그라데이션**입니다. 복숭아, 라벤더, 더스티 그린은 큰 반경에서 함께 흐려져 제품 UI 스크린샷 뒤에 부드러운 분위기의 배경을 만듭니다. 그라데이션은 "그림자가 없는 깊이"라는 브랜드의 특징입니다. 눈은 제품 모형이 문자 그대로 들어올림 없이 빛나는 배경 위에 떠 있는 것처럼 인식합니다.

도형

테두리 반경 배율

| 토큰 | 가치 | |

사용

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

| _`` | 2픽셀 | 헤어라인 태그, 상태 알약(드물게) |

| _`` | 4픽셀 | 양식 입력 |

| _`` | 8픽셀 | 컴팩트 카드 크롬, 비디오 프레임 |

| _`` | 12px | 중간 크기 카드, 보조 표면 |

| _`` | 16px | 가격 카드, 기능 카드 |

| _`` | 48px | 통계 배지 배경 |

| _`` | 90px | 모든 버튼 |

사진 기하학

브랜드에서는 사진보다는 **제품 UI 스크린샷**을 더 많이 사용합니다. UI 모형은 대략 4:3 비율의 파스텔 메시 그라데이션 위에 위치하며 그림자는 없지만 눈이 기대하는 "리프트"를 제공하는 그라데이션이 있습니다. 실제 사진은 고객 로고 스트립과 가끔 사례 연구 카드에 표시되며 `` 컨테이너 내부에서 풀 블리드로 처리됩니다.

구성요소

버튼

**`button-primary-pill`** — 시스템 전체에 걸쳐 지배적인 CTA입니다.

• 배경 ``, 텍스트 ``, 유형 ``, 패딩 `14px 28px`, 반올림 `` 90px.
• 누른 상태 `button-primary-pill-pressed` 배경이 ``로 전환됩니다.

**`button-secondary-pill`** — 부드러운 라벤더 대안

• 배경 ``, 텍스트 ``, 패딩 `10px 30px`, 동일한 알약 형상. 주요 가지 알약 옆의 두 번째 조치로 사용됩니다.

**`button-outline-aubergine`** — 흰색 표면의 윤곽선 변형.

• 배경 ``, 텍스트 ``, 2px 실선 `` 테두리, 동일한 알약 모양.

**`button-outline-on-aubergine`** — 가지 캔버스의 윤곽선.

• 배경 ``(표면 위에 투명), 텍스트 ``, 2px 단색 `` 테두리, 동일한 알약 모양.

카드 및 용기

**`card-pricing`** — 표준 가격 등급 카드.

• 배경 ``, 패딩 `+`(32px), 둥근 `` 16px, 1px `` 테두리. 제목은 ``, 가격은 ``, 본문은 ``, CTA는 하단에 `button-primary-pill`.
로 고정되어 있습니다.

**`card-pricing-featured`** — 거꾸로 된 가지 기능 계층.

• 배경 ``, 텍스트 ``, 그 외에는 `card-pricing`과 동일합니다. 가지 필은 브랜드의 시그니처 추천 등급 선택입니다.

**`card-feature-cream`** — 크림 트랙의 기능 설명 카드.

• 배경 ``, 텍스트 ``, 반올림 ``, 패딩 32px.

_**`card-aubergine-band`** — 가지로 채워진 대형 가로 밴드 카드로, 종종 마케팅 페이지의 닫는 CTA를 포함합니다.

• 배경 ``, 텍스트 ``, 패딩 48px, 반올림 `` 16px.

**`card-stat`** — 통계 콜아웃 카드.

• 배경 ``, 텍스트 `` ``(50픽셀 가지 숫자)로 렌더링됩니다. 아래에 작은 캡션과 함께 단일 백분율/숫자를 표시합니다.

입력 및 양식

**`text-input`** — 표준 양식 필드.

• 배경 ``, 텍스트 ``, 유형 ``, 패딩 `10px 12px`, 반올림 `` 4px, 1px `` 테두리.

탐색

**`nav-bar-light`** — 모든 마케팅 페이지의 상단 탐색.

• 배경 ``, 텍스트 ``, 패딩 ` `. 왼쪽의 로고 워드마크, 탐색 항목 중앙, 오른쪽의 알약 버튼 2개("로그인"의 경우 `button-secondary-pill`, "무료 체험"의 경우 `button-primary-pill`).

알약, 태그 및 칩

_**`pill-cap-shade`** — 가격 등급 제목 위에 눈썹으로 사용되는 작은 대문자 알약입니다.

• 배경 ``, 텍스트 ``, 유형 ``, 패딩 `4px 12px`, 반올림 ``.

서명 구성요소

**파스텔 메시 그라데이션 배경** — 복숭아색(``-ish) + 라벤더색(``) + 먼지가 많은 녹색 중지가 영웅 밴드 뒤에서 함께 흐릿해집니다. 단일 이미지가 아닌 CSS 방사형 그라데이션 스택으로 구현됩니다. 문자 그대로의 그림자 없이 브랜드의 깊이/광도를 제공합니다.

**플로팅 제품 UI 모형** — ``(12px) 컨테이너로 둘러싸인 제품 스크린샷으로, 테두리나 그림자 없이 파스텔 메시 그라데이션 위에 배치됩니다. 그라데이션이 리프팅 효과를 줍니다.

**가지 바닥글 밴드** — 모든 마케팅 페이지는 흰색 유형의 종료 CTA를 포함하는 풀 블리드 `card-aubergine-band`로 닫힙니다. 밴드 높이는 넉넉하며(데스크톱의 경우 ~480~600픽셀) 페이지의 서명으로 읽혀집니다.

**`link-on-light`** — 밝은 표면의 본문 문구에 있는 인라인 링크.

• 텍스트 ``은 ``로 렌더링됩니다. 기본적으로 밑줄은 없습니다. 링크 호버 동작을 통해 마우스를 올리면 밑줄이 나타납니다.

**`link-on-aubergine`** — 가지 표면 내부의 링크.

• 텍스트 ``에 밑줄이 계속 표시됩니다.

**`footer-aubergine`** — 사이트 전체 바닥글.

• 배경 ``, ``에서 렌더링된 텍스트 ``, 패딩 `+ `(32px 24px). `` 링크 그룹의 4~5개 열, 소셜 아이콘, 하단에 작은 법적/저작권 행이 있습니다.

해야 할 일과 하지 말아야 할 일

하세요

• 채워진 CTA, 주요 가격 계층 및 닫는 가지 밴드를 위해 `` 가지를 예약하세요. 이는 브랜드의 반음계 유일신교입니다.
• 시스템 전체의 모든 버튼에 ``(90px)을 사용하세요. 둥근 직사각형 버튼은 사용하지 마세요.
• 음수 문자 간격으로 디스플레이 계층을 쌍으로 만듭니다(`-0.768px`, 64px). 독점 얼굴에는 추적 풀이 필요합니다.
• 파스텔 메시 그라데이션 배경 + 플로팅 제품 UI 모형으로 히어로 밴드를 구성합니다. 그라데이션은 깊이입니다.
• 인라인 링크에는 ``을 사용하세요. 이는 aubergine에서 유일하게 색채가 다른 색상이며 브랜드 보이스의 일부입니다.

하지 마세요

• 시스템에 세 번째 강조 색상을 추가하지 마세요. 가지 + 파란색 링크 조합은 완전합니다.
• 버튼 패딩을 `14px 28px` 아래로 축소하지 마세요. 과하게 패딩된 알약은 브랜드 느낌의 일부입니다.
• 기본 추적(0)에서 디스플레이 계층을 렌더링하지 마세요. 음수 간격이 없으면 헤드라인이 느슨하고 편집되지 않은 채 읽혀집니다.
• 제품 UI 스크린샷을 카드 안에 넣지 마세요. 파스텔 메시 그라데이션 위에 위치하며 크롬 내부에는 절대 넣지 마세요.
• 본문 텍스트에 가지를 사용하지 마세요. 표면 및 CTA 색상이며 본문 크기의 활자 색상이 아닙니다.
• 알약 모양을 사각형 버튼으로 바꾸지 마세요.

반응적 행동

중단점

| 이름 | 폭 | 주요 변경 사항 |

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

| 와이드 | ≥ 1440px | 풀블리드 파스텔 메시 영웅; 가격 4-up |

| 데스크탑 | 1024~1440px | 기본 콘텐츠 최대 너비; 가격 4-up |

| 태블릿 | 768~1023px | 2인용 가격; 제품 UI 모형이 초점 패널로 자르기 |

| 모바일 | _< 768px | Pricing 1-up; hamburger nav; display-xxl drops 64 → 40px |

터치 대상

• 과대하게 패딩된 기하학적 구조로 인해 알약 버튼이 ≥ 48×48px에 도달했습니다. WCAG AAA 규격을 준수합니다.
• 양식 필드는 최소 높이 44픽셀로 유지됩니다.

축소 전략

• 중단점 전체에서 64 → 50 → 32 → 28 → 24 계단식 디스플레이 계층입니다.
• 파스텔 메쉬 그라데이션은 모바일에서 다시 타일링되어 워시가 완전히 사라지는 것을 방지합니다.
• 플로팅 제품 UI 모형은 모바일에서 가장 실행 가능한 내부 패널로 잘립니다.
• 가격 책정 단계 4 → 2 → 1; 가지 특집 등급은 계속해서 구별됩니다.
• 상단 탐색 메뉴가 768px 미만에서 햄버거로 축소됩니다. 메뉴는 캔버스 색상을 상속합니다.

이미지 동작

제품 UI 모형은 데스크톱/태블릿/모바일 자르기에 `srcset`을 사용합니다. 전체 합성물을 축소하는 대신 모바일 자르기가 가장 활용도가 높은 내부 패널에 중심을 둡니다.

반복 가이드

1. 한 번에 하나의 구성요소에만 집중하세요.

2. 구성요소 이름 및 토큰을 직접 참조하십시오(``, `-pressed`, ``).

3. 편집 후 _`npx @google/design.md lint DESIGN.md`을 실행합니다.

4. 새 변형을 별도의 항목으로 추가합니다.

5. 기본 본문은 _``입니다. 마케팅 리드용으로 ``을 예약하세요.

6. 가지를 부족하게 유지하세요. 뷰포트당 하나의 가지 버튼이 채워져 있습니다.

7. 모든 영웅 밴드를 파스텔 메쉬 그라데이션 배경과 짝을 이루세요. 맨 캔버스 영웅은 오프 브랜드로 읽혀집니다.

概要

Slacc のデザイン言語は、ブランドの最も永続的な視覚資産である深いナスのプライマリ (``) を中心としており、主要なボタンの色、フッター バンド、注目の価格帯、およびブランドのワードマークとして適用されます。その茄子を中心に、システムは異常に繊細なエコシステムを演出します。クリーム ラベンダーのヒーロー キャンバスにソフトなパステル メッシュのグラデーション (ピーチ オレンジ、ラベンダー、ダスティ グリーン) が浮かび上がり、浮遊する製品 UI モックアップの背後で脈動し、実際のインターフェイス クロムは 3:2 のアスペクトで詳細にレンダリングされます。

タイポグラフィーは、2 つの独自の人文主義者サンファミリーに分かれています。表示層は、サイズ 32 ～ 64 ピクセルで 700 ウェイトで実行され、ヒーローの見出しで光学密度を高めるために負の文字間隔が設定されています。 UI 層は、わずかにリラックスしたリーディング (1.55) で 400 ～ 700 の 2 番目のファミリーを使用します。ブランドのボディ コピーは、ナスの瞬間と競合することなく静かに読まれます。

ボタンは半径 90 ピクセルの錠剤の形をしており、異常な量の水平方向のパディング (28 ～ 30 ピクセル) があり、明らかに快適で、ほとんど過剰にパッドが入っているような感触を与えます。ほとんどの状況では、主要なナスの錠剤が唯一の塗りつぶされたボタンです。二次アクションでは、柔らかいラベンダーの錠剤 (``) を使用します。これは、一次表面の穏やかなエコーとして読み取られます。インライン リンクは飽和した青 (``) に移行します。これは、ブランドのナスとクリームの世界からの唯一の有彩色脱却です。

_**主な特徴:**

• 単一のナスのプライマリ (``)、CTA、注目の価格帯、フッター バンド、ワードマーク全体で再利用 — ブランドの色彩一神教。
• クリーム ラベンダーのヒーロー キャンバス (`` / ``)、拡散パステル メッシュの大気グラデーションと上に合成されたフローティング UI モックアップ。
• __CODEBCK_560___ (半径 90 ピクセル) のピル ボタン。水平方向に 28 ～ 30 ピクセルのたっぷりとしたパディングが施されています。SaaS のデフォルト標準により意図的に過剰にパディングされています。
• 編集密度の見出しの場合、表示サイズで負の文字間隔を狭くします (64 ピクセルのヒーローでは -0.768 ピクセル)。
• 青色のインライン リンク (_``) — ボディ タイプの唯一の非茄子色アクセント。
• パステル メッシュのグラデーションの雰囲気: すべてのヒーロー バンドの背後には、微妙なピーチ、ラベンダー、ダスティ グリーンのウォッシュが施されています。製品 UI は、グラデーションの内側ではなく上部に配置されます。
• 白地に巨大なナス型表示タイプ (90% / 43 / 87%) でレンダリングされた統計カード — スケールのみによる定量的強調。

色

> **ソース ページ:** ホーム (`/`)、__CODEBCK_563___、__CODEBCK_564___、__CODEBCK_565___.

ブランドとアクセント

• **Aubergine** (`` — ``): ブランドの主要な表面と CTA カラー。ルビーの香りを伴う深くて温かみのある紫 — 塗りつぶされたボタン、注目の価格帯、フッター バンド、およびブランドのワードマークに使用されます。
• **Aubergine Deep** (`` — ``): 別のサーフェスから抽出された `` のほぼ同一の兄弟。機能的に同等のものとして扱います。
• **Aubergine Press** (`` — ``): プライマリのプレス状態のリフト、わずかに軽くて暖かい。
• **ナスの色合い** (`` — ``): ナスとナスの表面の境界線のアクセント。
• **リンク ブルー** (`` — ``): インライン リンクの色 — 飽和した、わずかに暖かい青。 ボディタイプにおいてナスに代わる唯一の有彩色。
• **リンク ホバー** (`` — ``): リンク ホバー状態で使用される、より飽和した青。

サーフェス

• **キャンバス ホワイト** (`` — ``): デフォルトのコンテンツ サーフェス。
• **キャンバス クリーム** (`` — ``): ヒーロー グラデーションとフィーチャー バンドに使用される温かみのあるオフホワイト。編集上の温かみを加えます。
• **キャンバス ラベンダー** (`` — ``): 二次ボタンの表面およびソフト セクション バンドとして使用される淡いラベンダーの色合い。
• **サーフェス Aubergine** (`` — ``): プライマリ Aubergine がサーフェスとして再利用され、価格帯、フッター、ダーク機能バンドが表示されます。
• **ヘアライン** (`` — ``): カードとテーブルの仕切りの 1 ピクセルの境界線。

テキスト

• **インク** (`` — ``): ライト サーフェス上の主要な本文テキスト。純粋な黒には少し届かない。
• **インクミュート** (`` — ``): セカンダリ テキスト、キャプション、ヘルパー コピー。
• **プライマリ** (`` — ``): ナスの表面と塗りつぶされた CTA 上のテキスト。
• **Aubergine Mute 上** (`` — ``): Aubergine 表面のセカンダリ テキスト — ミュートライトとして読み取れる彩度の低い藤色。

セマンティック

• **エラー** (`` — ``): フォーム エラーと破壊的なアクションの色。
• **成功** (`` — ``): インライン成功インジケーター。

タイポグラフィ

フォント ファミリー

表示層は **Salesforce Avant Garde** です。これは、広い開口部とわずかに幾何学的な特徴を備えた独自のヒューマニストです。使用できない場合は、システム フォント スタック (`system-ui, -apple-system, BlinkMacSystemFont`) にフォールバックします。

_UI 層は **Salesforce Sans** です。これは、本文、キャプション、ボタンのラベルに使用される個別の独自のフェイスです。同じフォールバック チェーン。

どちらの顔も独自のものであり、自由に利用することはできません。 ディスプレイとボディの両方のウェイトを一致させて **Inter** (Google Fonts 経由のオープンソース) に置き換えます。Inter は、両方の層にわたって最も近いオープン アナログです。

階層_

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

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

| `` | 64ピクセル | 700 | 1.12 | -0.768ピクセル |マーケティング ヒーローの見出し |

| `` | 58ピクセル | 600 | 1.25 | -0.464ピクセル |セクション オープナー |

| `` | 50ピクセル | 700 | 1.12 | -0.6ピクセル |統計コールアウト |

| `` | 32ピクセル | 700 | 1.25 | -0.256ピクセル |カード / 機能のタイトル |

| `` | 24ピクセル | 700 | 1.33 | -0.096ピクセル |価格帯の名前 |

| `` | 22ピクセル | 600 | 1.4 | 0 |サブセクションの見出し |

| `` | 18ピクセル | 600 | 1.56 | -0.0216ピクセル |コンパクトなカードのタイトル |

| `` | 18ピクセル | 400 | 1.55 | -0.0216ピクセル |マーケティング団体のリーダー |

| `` | 16ピクセル | 400 | 1.55 | 0 |デフォルトの UI 本文 |

| `` | 16ピクセル | 700 | 1.5 | 0.16ピクセル |強調された本文 |

| `` | 18ピクセル | 700 | 1.0 | 0 |ヒーローのピル ボタン ラベル |

| `` | 16ピクセル | 700 | 1.38 | 0.2ピクセル |標準のピル ボタン ラベル |

| `` | 14.4ピクセル | 700 | 1.0 | 0.144ピクセル |コンパクトな錠剤ラベル |

| `` | 14ピクセル | 400 | 1.43 | 0.1ピクセル |ヘルパー、脚注 |

| `` | 12ピクセル | 700 | 1.0 | 0.96ピクセル |すべて大文字の眉 |

原則

• **表示上の厳密な追跡。** 32 ～ 64 ピクセルのサイズにわたる負の文字間隔。独自のフェイスはデフォルトで幅が広く、ネガティブ トラッキングにより編集上の密度が高まります。
• **本文は先頭の 1.55 です。** 軽やかな/1.7 以上の領域に入ることなく、マーケティングの読みやすさを考慮してわずかに緩和されています。
• **眉毛用のキャップ。** すべての眉毛は、サイズに応じて正の 0.96 ～ 0.144 ピクセルのトラッキングで大文字をレンダリングします。

フォントの代替に関する注意

ディスプレイ層と UI 層の両方に **Inter** (オープンソース Google Fonts) を使用します。__CODEBCK_617___ 文字間隔でウェイト 700 の Inter は、ブランドの表示動作に非常に似ています。ブランドの忠実性を最大限に高めるため、**Lato** は、体のサイズによく合う、よりソフトでヒューマニストな代替品です。 ボディにシステム UI フォントを使用しないでください。デフォルトのウェイトでは、ブランドの微妙な暖かさが消えてしまいます。

レイアウト

間隔システム_

• **基本単位**: 8 ピクセル (細かい垂直リズムのための 4 / 12 / 16 / 20 / 24 / 28 個のサブトークン付き)。
• **トークン**: `` 4px · `` 8px · `` 12px · `` 16px · `` 20px · `` 24px · `` 28px.
• **セクション パディング**: マーケティング サーフェイス上では 64 ～ 96 ピクセル。トランザクション ページでは 48 ピクセルに狭まります。
• **カードの内部パディング**: 価格カードでは 32 ピクセル。ナスのバンド カードでは 48 ピクセル。

グリッドとコンテナ

• マーケティング ページは、約 1240 ピクセルのコンテナの中央に配置され、エッジがにじみ出るパステル メッシュのグラデーションがコンテナから抜け出ています。
• 価格は 992 / 768 ブレークポイントで 4 アップ → 2 アップ → 1 アップと崩壊します。
• 統計行: 50 ピクセルの巨大なナス表示数字を含む 3 列グリッド。

ホワイトスペースの哲学

_パステル メッシュのグラデーションは、マーケティング ページのネガティブ スペースのほとんどを埋めています。セクションは文字通り空ではなく、広大に感じられます。トランザクション ページでは、グラデーションが低下し、空白は従来の 48 ピクセル セクションの余裕のあるスペースに戻ります。

標高と深さ

|レベル |治療 | |

を使用します

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

| 0 |フラット |デフォルトのサーフェス |

| 1 | `box-shadow: rgba(0,0,0,0.1) 0 5px 20px 0` |ヒーローのフローティング ボタン |

| 2 | `box-shadow: rgba(0,0,0,0.1) 0 0 32px 0` |製品 UI モックアップ コンポジット |

| 3 | `box-shadow: rgba(0,0,0,0.2) 0 1px 10px 0` |トースト / 通知クロム |

| 4 | `box-shadow: rgb(97,31,105) 0 0 0 1px inset` | Aubergine はめ込み枠 (ボタン フォーカス、特別なクロム) |

装飾の深さ

_ブランドの深度言語は **パステル メッシュ グラデーション**です。ピーチ、ラベンダー、ダスティ グリーンのストップが大きな半径でぼかされて、製品 UI スクリーンショットの背後に柔らかな雰囲気の背景を作成します。グラデーションは、ブランドの「影のない奥行き」の特徴です。目は、製品のモックアップが文字通りの揚力なしに、明るい背景の上に浮かんでいるように認識します。

図形

境界線の半径スケール

|トークン |値 | |

を使用します

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

| `` | 2ピクセル |ヘアライン タグ、ステータス ピル (レア) |

| `` | 4ピクセル |フォーム入力 |

| `` | 8ピクセル |コンパクト カード クロム、ビデオ フレーム |

| `` | 12ピクセル |中型カード、二次面 |

| `` | 16ピクセル |価格カード、機能カード |

| `` | 48ピクセル |統計バッジの背景 |

| `` | 90ピクセル |すべてのボタン |

写真の幾何学

このブランドでは、写真よりも **製品 UI のスクリーンショット**を多く使用しています。 UI モックアップは、およそ 4:3 のアスペクトでパステル メッシュ グラデーションの上に配置され、影はありませんが、目が期待する「リフト」を提供するグラデーションが付いています。 実際の写真は、顧客のロゴ ストリップと時折のケーススタディ カードに表示され、__CODEBCK_636___ コンテナ内のフルブリードとして扱われます。

コンポーネント

ボタン

**`button-primary-pill`** — システム全体で支配的な CTA。

• 背景__CODEBCK_638___、テキスト__CODEBCK_639___、入力__CODEBCK_640___、パディング__CODEBCK_641___、丸め__CODEBCK_642___ 90ピクセル。
• 押された状態__CODEBCK_643___は、背景を__CODEBCK_644___に移動します。

**`button-secondary-pill`** — ソフトなラベンダーの代替品。

• 背景__CODEBCK_646___、テキスト__CODEBCK_647___、パディング__CODEBCK_648___、同じ錠剤のジオメトリ。主要なナスの錠剤の横にある 2 番目のアクションとして使用されます。

**`button-outline-aubergine`** — 白い表面のアウトライン バリアント。

• 背景__CODEBCK_650___、テキスト__CODEBCK_651___、2ピクセルの実線__CODEBCK_652___境界線、同じ錠剤の形状。

**`button-outline-on-aubergine`** — ナスのキャンバス上のアウトライン。

• 背景__CODEBCK_654___（表面透明）、テキスト__CODEBCK_655___、2ピクセルの実線__CODEBCK_656___境界線、同じ錠剤の形状。

カードとコンテナ

_**`card-pricing`** — 標準価格帯カード。

• 背景__CODEBCK_658___、パディング__CODEBCK_659___ (32ピクセル)、角丸__CODEBCK_660___ 16ピクセル、1ピクセル__CODEBCK_661___の境界線。タイトルは__CODEBCK_662___、価格は__CODEBCK_663___、本文は__CODEBCK_664___、CTAは__CODEBCK_665___として下部に固定されています。

**`card-pricing-featured`** — 逆ナスの注目層。

• 背景__CODEBCK_667___、テキスト__CODEBCK_668___、それ以外は__CODEBCK_669___と同一です。ナスのフィリングは、ブランドを代表する目玉商品です。

_**`card-feature-cream`** — クリーム トラックの機能説明カード。

• 背景__CODEBCK_671___、テキスト__CODEBCK_672___、角丸__CODEBCK_673___、パディング32px.

**`card-aubergine-band`** — ナスの塗りつぶしを含む大きな水平バンド カード。多くの場合、マーケティング ページの最後の CTA が含まれます。

• 背景__CODEBCK_675___、テキスト__CODEBCK_676___、パディング48ピクセル、丸め__CODEBCK_677___ 16ピクセル。

_**`card-stat`** — 統計コールアウト カード。

• 背景__CODEBCK_679___、テキスト__CODEBCK_680___は__CODEBCK_681___(50ピクセルのナス数字)でレンダリングされます。単一のパーセント/数値とその下に小さなキャプションが表示されます。

入力とフォーム

_**`text-input`** — 標準フォーム フィールド。

• 背景__CODEBCK_683___、テキスト__CODEBCK_684___、入力__CODEBCK_685___、パディング__CODEBCK_686___、丸め__CODEBCK_687___ 4ピクセル、1ピクセル__CODEBCK_688___境界線。

ナビゲーション

**`nav-bar-light`** — すべてのマーケティング ページのトップ ナビゲーション。

• 背景__CODEBCK_690___、テキスト__CODEBCK_691___、パディング__CODEBCK_692___。 左側にロゴのワードマーク、ナビゲーション項目が中央、右側に 2 つのピル ボタン (「サインイン」の場合は`button-secondary-pill`、「無料で試す」の場合は`button-primary-pill`)。

錠剤、タグ、チップ

**`pill-cap-shade`** — 価格帯のタイトルの上に眉毛として使用される、すべて大文字の小さな錠剤。

• 背景__CODEBCK_696___、テキスト__CODEBCK_697___、入力__CODEBCK_698___、パディング__CODEBCK_699___、丸め__CODEBCK_700___.

署名コンポーネント

**パステル メッシュ グラデーション背景** — ピーチ (`` っぽい) + ラベンダー (``) + ダスティ グリーンのストップがヒーロー バンドの後ろで一緒にぼかされています。単一の画像ではなく、CSS 放射状グラデーション スタックとして実装されます。文字どおりの影を付けずに、ブランドの深みと明るさを提供します。

**フローティング製品 UI モックアップ** — `` (12 ピクセル) コンテナーでフレーム化された製品のスクリーンショット。境界線や影のないパステル メッシュ グラデーションの上に配置されます。グラデーションがリフティングを行います。

**Aubergine Footer Band** — すべてのマーケティング ページは、白い文字で終了 CTA を含むフルブリード `card-aubergine-band` で閉じられます。バンドの高さは十分であり (デスクトップでは約 480 ～ 600 ピクセル)、ページの署名として読み取られます。

**`link-on-light`** — ライト サーフェス上のボディ コピーのインライン リンク。

• テキスト__CODEBCK_706___は__CODEBCK_707___でレンダリングされます。デフォルトでは下線はありません。リンクホバー動作によりホバーすると下線が表示されます。

**`link-on-aubergine`** — ナスの表面内のリンク。

• テキスト `` に継続的な下線が付きます。

**`footer-aubergine`** — サイト全体のフッター。

• 背景__CODEBCK_711___、テキスト__CODEBCK_712___は__CODEBCK_713___でレンダリングされ、パディング__CODEBCK_714___ (32ピクセル 24ピクセル)。 `` リンク グループ、ソーシャル アイコン、および下部に小さな法的/著作権行の 4 ～ 5 列が含まれます。

推奨事項と禁止事項

_行動

• __CODEBCK_716___ のナスを、記入された CTA、注目の価格帯、および最後のナスのバンド用に予約してください。これは、ブランドの色彩一神教です。
• システム全体のすべてのボタンに__CODEBCK_717___ (90ピクセル)を使用します。角丸長方形のボタンは決して使用しないでください。
• 表示層を負の文字間隔でペアにします (64 ピクセルで`-0.768px`)。独自のフェイスにはトラッキング プルが必要です。
• パステル メッシュのグラデーション背景 + フローティング製品 UI モックアップでヒーロー バンドを構成します。グラデーションは深さです。
• インライン リンクには `` を使用します。これは、aubergine からの唯一の色変化であり、ブランド ボイスの一部です。

しないでください

• システムに 3 番目のアクセント カラーを追加しないでください。ナスと青のリンクの組み合わせは網羅的です。
• __CODEBCK_720___ より下のボタンのパディングを縮小しないでください — 過剰にパッドされたピルはブランドの雰囲気の一部です。
• デフォルトのトラッキング (0) で表示層をレンダリングしないでください。負の文字間隔を設定しないと、見出しが編集されずに緩く読み取られます。
• 製品 UI のスクリーンショットをカード内に配置しないでください。カードはパステル メッシュ グラデーションの上に配置され、クロムの内側には決して配置されません。
• 本文テキストに茄子を使用しないでください。これは表面と CTA の色であり、本文サイズのタイプの色ではありません。
• 錠剤の形を四角いボタンに置き換えないでください。

応答動作

ブレークポイント

|名前 |幅 |主な変更点 |

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

|ワイド | ≥ 1440 ピクセル |フルブリードのパステルメッシュのヒーロー。価格設定 4 アップ |

|デスクトップ | 1024–1440ピクセル |デフォルトのコンテンツの最大幅。価格設定 4 アップ |

|タブレット | 768–1023ピクセル |価格は2倍。製品 UI モックアップを焦点パネルにトリミング |

|モバイル | < 768px | Pricing 1-up; hamburger nav; display-xxl drops 64 → 40px |

タッチターゲット

• オーバーパッドされたジオメトリのため、ピル ボタンは 48×48 ピクセル以上に達します。 WCAG AAA 準拠。
• フォーム フィールドは最小の高さ 44 ピクセルのままです。

戦略の崩壊

• ブレークポイントをまたいで段階 64 → 50 → 32 → 28 → 24 を表示します。
• ウォッシュが完全に消えないように、モバイルではパステル メッシュ グラデーションが再タイル化されます。
• フローティング製品 UI モックアップは、モバイル上で最も実用的な内部パネルにトリミングされます。
• 価格段階は 4 → 2 → 1 です。ナスの注目層は引き続き傑出しています。
• _トップナビゲーションは 768 ピクセル以下でハンバーガーに折りたたまれます。メニューはキャンバスの色を継承します。

画像の動作

製品 UI モックアップでは、デスクトップ / タブレット / モバイル クロップに `srcset` を使用します。モバイル クロップは、合成全体を縮小するのではなく、最も実用的な内側のパネルを中心にしています。

反復ガイド

1.一度に 1 つのコンポーネントに集中します。

2.コンポーネント名とトークンを直接参照します (``、__CODEBCK_723___、__CODEBCK_724___)。

3. 編集後に__CODEBCK_725___を実行します。

4.新しいバリアントを別のエントリとして追加します。

5.デフォルトの本文は `` です。 `` をマーケティング リード用に予約してください。

6.ナスの数を少なくしてください — ビューポートごとに 1 つの塗りつぶされたナスのボタン。

7.すべてのヒーロー バンドをパステル メッシュのグラデーションの背景と組み合わせます。裸のキャンバスのヒーローは、ブランド外のものとして読み取られます。

Color Strategy Analysis

With 160 documented color tokens, Slack balances brand consistency with functional hierarchy. The primary palette (#0a0a0a) serves as the dominant visual cue, appearing on CTAs, navigation highlights, and key brand accents. The supporting neutrals and accents are calibrated to keep the brand color from overwhelming the interface — a common pitfall that Slack avoids through careful saturation management and deliberate negative space.

Color Strategy Analysis

With 160 documented color tokens, Slack balances brand consistency with functional hierarchy. The primary palette (#0a0a0a) serves as the dominant visual cue, appearing on CTAs, navigation highlights, and key brand accents. The supporting neutrals and accents are calibrated to keep the brand color from overwhelming the interface — a common pitfall that Slack avoids through careful saturation management and deliberate negative space.

Color Strategy Analysis

With 160 documented color tokens, Slack balances brand consistency with functional hierarchy. The primary palette (#0a0a0a) serves as the dominant visual cue, appearing on CTAs, navigation highlights, and key brand accents. The supporting neutrals and accents are calibrated to keep the brand color from overwhelming the interface — a common pitfall that Slack avoids through careful saturation management and deliberate negative space.

Related Design Systems

Explore similar design languages from the same category:

• Cal Design System
• Zapier Design System
• Airtable Design System
• Airbnb Design System