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

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

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

**주요 특징:**

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

색상

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

브랜드 및 액센트

• **Aubergine** (`{colors.primary}` — `#4a154b`): 브랜드의 기본 표면 및 CTA 색상입니다. 루비가 살짝 가미된 깊고 따뜻한 보라색 - 채워진 버튼, 주요 가격 책정 계층, 바닥글 밴드 및 브랜드 워드마크에 사용됩니다.
• **Aubergine Deep** (`{colors.primary-deep}` — `#481a54`): 다른 표면에서 추출된 `{colors.primary}`의 거의 동일한 형제입니다. 기능적으로 동등한 것으로 취급합니다.
• **Aubergine Press** (`{colors.primary-press}` — `#611f69`): 1차의 눌린 상태 리프트, 약간 더 가볍고 따뜻함.
• **가지 색조** (`{colors.primary-tint}` — `#592466`): 가지 표면의 테두리 강조입니다.
• **링크 파란색** (`{colors.link-blue}` — `#1264a3`): 인라인 링크 색상 — 채도가 높고 약간 따뜻한 파란색입니다. 가지의 체형에 대한 유일한 색채 대안입니다.
• **링크 호버** (`{colors.link-hover}` — `#3860be`): 링크 호버 상태에 사용되는 채도가 높은 파란색입니다.

표면

• **캔버스 흰색** (`{colors.canvas}` — `#ffffff`): 기본 콘텐츠 표면.
• **캔버스 크림**(`{colors.canvas-cream}` — `#f4ede4`): 히어로 그라데이션 및 피처 밴드에 사용되는 따뜻한 황백색입니다. 편집의 따뜻함을 더해줍니다.
• **캔버스 라벤더**(`{colors.canvas-lavender}` — `#f9f0ff`): 보조 버튼 표면과 부드러운 섹션 밴드로 사용되는 연한 라벤더 색조입니다.
• **Surface Aubergine** (`{colors.surface-aubergine}` — `#4a154b`): 표면으로 재사용되는 기본 가지 — 주요 가격 책정 계층, 바닥글, 어두운 기능 밴드.
• **헤어라인**(`{colors.hairline}` — `#e6e6e6`): 카드 및 테이블 구분선에 1px 테두리가 있습니다.

텍스트

• **잉크**(`{colors.ink}` — `#1d1d1d`): 밝은 표면의 기본 본문 텍스트입니다. 그냥 순수한 검정색이 부끄러워요.
• **잉크 음소거**(`{colors.ink-mute}` — `#696969`): 보조 텍스트, 캡션, 도우미 사본.
• **On Primary** (`{colors.on-primary}` — `#ffffff`): 가지 표면의 텍스트와 채워진 CTA입니다.
• **가지 음소거에서** (`{colors.on-aubergine-mute}` — `#d9bdde`): 가지 표면의 보조 텍스트 — 음소거된 빛으로 읽히는 채도가 낮은 연보라입니다.

의미론

• **오류** (`{colors.semantic-error}` — `#cc4117`): 양식 오류 및 파괴 작업 색상입니다.
• **성공** (`{colors.semantic-success}` — `#007a5a`): 인라인 성공 표시기입니다.

타이포그래피

글꼴 계열

디스플레이 계층은 **Salesforce Avant Garde**입니다. 이는 넓은 조리개와 약간의 기하학적 특성을 지닌 독점적인 인문주의적 산세입니다. 사용할 수 없는 경우 Sy로 돌아갑니다.

概要

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

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

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

**主な特徴:**

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

色

> **ソース ページ:** ホーム (`/`)、`/features/channels`、`/pricing`、`/contact-sales`。

ブランドとアクセント

• **Aubergine** (`{colors.primary}` — `#4a154b`): ブランドのプライマリ サーフェスと CTA カラー。ルビーの香りを伴う深くて温かみのある紫色。塗りつぶされたボタン、注目の価格帯、フッター バンド、およびブランドのワードマークに使用されます。
• **Aubergine Deep** (`{colors.primary-deep}` — `#481a54`): 別のサーフェスから抽出された `{colors.primary}` のほぼ同一の兄弟。機能的に同等のものとして扱います。
• **Aubergine Press** (`{colors.primary-press}` — `#611f69`): プライマリーのプレス状態のリフト、わずかに軽くて暖かい。
• **Aubergine Tint** (`{colors.primary-tint}` — `#592466`): 茄子と茄子の表面の境界線のアクセント。
• **リンク ブルー** (`{colors.link-blue}` — `#1264a3`): インライン リンクの色 — 飽和した、わずかに暖かい青。ボディタイプにおいてナスに代わる唯一のクロマチックです。
• **リンク ホバー** (`{colors.link-hover}` — `#3860be`): リンク ホバー状態で使用される、より飽和した青。

表面

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

テキスト

• **インク** (`{colors.ink}` — `#1d1d1d`): 明るい表面上の主要な本文テキスト。真っ黒にはちょっと恥ずかしい。
• **インク ミュート** (`{colors.ink-mute}` — `#696969`): 二次テキスト、キャプション、ヘルパー コピー。
• **プライマリ上** (`{colors.on-primary}` — `#ffffff`): ナスの表面と塗りつぶされた CTA 上のテキスト。
• **On Aubergine Mute** (`{colors.on-aubergine-mute}` — `#d9bdde`): 茄子表面の二次テキスト — ミュートライトとして読み取れる彩度の低い藤色。

セマンティック

• **エラー** (`{colors.semantic-error}` — `#cc4117`): フォーム エラーと破壊的なアクションの色。
• **成功** (`{colors.semantic-success}` — `#007a5a`): インライン成功インジケーター。

タイポグラフィー

フォントファミリー

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