Overview
PostHog's marketing system is built on the visual contradiction at the heart of the brand: a serious open-source product analytics platform rendered as if it were a friendly engineering sketchbook. The chrome runs on a warm cream canvas (`{colors.canvas}` — `#eeefe9`) — not white — and every page is dotted with hand-drawn hedgehog mascots in lab coats, lounge chairs, terminals, and reading glasses, scattered across the layout like marginalia in a textbook. Type sits in IBM Plex Sans Variable at olive-gray (`{colors.body}` — `#4d4f46`) for body and deep olive-charcoal (`{colors.ink}` — `#23251d`) for headlines, with weights stepped tightly between 400, 600, 700, and 800 to create hierarchy without color. The single saturated yellow-orange pill (`{colors.primary}` — `#f7a501`) is the brand's only loud chromatic moment; everything else is cream, olive, white card, and the occasional pastel callout band.
The system has a distinctive **two-mode body layout**: marketing pages (home, workflows, pricing) lean on alternating-pastel callout bands and feature tiles in white cards on cream, while documentation pages add a sticky 240px left sidebar with a rounded outline-icon section list. Code samples are full-width dark blocks on `{colors.surface-dark}` (the same olive-charcoal that carries body ink, used inverted) inside white doc cards, creating the system's most distinctive visual moment: a dark-on-dark code island floating inside a white card on a cream canvas, with a hedgehog mascot doodled in the margin.
Sections stack at `{spacing.section}` (80px) rhythm with cream canvas continuing edge-to-edge between them. The only color bands that interrupt the cream are pastel `{component.banner-tip-blue}` / `-green` / `-red` / `-purple` callout panels inside doc articles — soft tinted boxes that carry "💡 Tip", "✅ Success", "⚠️ Warning", "📘 Info" inline annotations. There are no decorative gradients, no atmospheric mesh backgrounds, and no full-bleed dark hero chapters; the cream canvas runs uninterrupted top to bottom and the hedgehogs are the entire visual identity.
**Key Characteristics:**
- Warm cream canvas (`{colors.canvas}` — #eeefe9) end-to-end with no surface alternation between sections — the page is one continuous sheet
- Single yellow-orange CTA pill (`{colors.primary}` — #f7a501) with deep olive text (`{colors.on-primary}`) — the brand's only saturated color
- IBM Plex Sans Variable across every text role with weights 400/500/600/700/800 — no other typeface in the system
- Hand-drawn hedgehog mascots scattered across the layout as the entire decorative system — no gradients, no mesh, no atmospheric backgrounds
- 4–8px radius card vocabulary: `{rounded.md}` (6px) for most components, `{rounded.lg}` (8px) for select containers, fully rounded for pill chips
- Pastel callout banners (`{colors.accent-blue-soft}`, `{colors.accent-green-soft}`, `{colors.accent-red-soft}`, `{colors.accent-purple-soft}`) break up doc article body with soft tinted side rails for tips/warnings/info
- Documentation pages add a sticky 240px `{component.doc-sidebar}` with rounded outline-icon section nav and an "Ask PostHog AI" CTA at the top
Colors
> **Source pages:** `/` (home), `/pricing` (pricing detail), `/docs/product-analytics` (docs article), `/workflows` (product feature page). The chrome palette is identical across all four pages — only doc-specific accents (callout-banner pastels, code-block dark surface) appear exclusively inside the docs experience.
Brand & Accent
- **PostHog Yellow** (`{colors.primary}` — `#f7a501`): the universal primary CTA. Sticky "Get started — free" pill in the top-right of every nav, hero CTAs, pricing-tier subscribe buttons, footer signup pill. The system's only saturated chromatic moment.
- **Yellow Pressed** (`{colors.primary-pressed}` — `#dd9001`): pressed state for the primary pill.
- **Yellow Active** (`{colors.primary-active}` — `#b17816`): deeply-pressed yellow + the system's gold-toned border accent (rare 1px gold rule on inline form elements).
Surface
- **Canvas** (`{colors.canvas}` — `#eeefe9`): the warm cream page background. End-to-end on every page; the brand's most distinctive surface choice.
- **Soft Surface** (`{colors.surface-soft}` — `#e5e7e0`): button-secondary fill, sub-nav strip background, inline-code chip background.
- **Surface Card** (`{colors.surface-card}` — `#ffffff`): true white card and tile background sitting on top of the cream canvas. The dominant card surface.
- **Surface Doc** (`{colors.surface-doc}` — `#fcfcfa`): a faintly cream-warm white used inside doc article body cards — slightly softer than pure white to keep the page tonally unified.
- **Surface Dark** (`{colors.surface-dark}` — `#23251d`): the deep olive-charcoal used inverted as code-block background. The same hex as `{colors.ink}` — the brand uses one olive-near-black for both text and dark code surfaces.
- **Hairline** (`{colors.hairline}` — `#bfc1b7`): 1px card border, table rule, footer column dividers.
- **Hairline Soft** (`{colors.hairline-soft}` — `#dcdfd2`): in-card row divider, soft inset rule.
- **On Dark** (`{colors.on-dark}` — `#ffffff`): primary text on `{colors.surface-dark}` code blocks.
Text
- **Ink** (`{colors.ink}` — `#23251d`): headlines, button text on light, primary nav links — deep olive-charcoal that reads near-black against cream.
- **Body** (`{colors.body}` — `#4d4f46`): default paragraph text, doc article body, inline link color before hover. The brand's most-used text color.
- **Charcoal** (`{colors.charcoal}` — `#33342d`): emphasized body text where body is too soft.
- **Mute** (`{colors.mute}` — `#6c6e63`): metadata, footer link text, in-list secondary annotations.
- **Ash** (`{colors.ash}` — `#9b9c92`): disabled-state text and lowest-emphasis utility.
- **Stone** (`{colors.stone}` — `#b6b7af`): least-emphasis caption text and disabled icon color.
Semantic
- **Link Blue** (`{colors.link-blue}` — `#1d4ed8`): inline anchor link inside body prose. The system's primary informational link color.
- **Link Teal** (`{colors.link-teal}` — `#1078a3`): doc-article inline link variant, paired with body text.
- **Accent Blue** (`{colors.accent-blue}` — `#2c84e0`) + **Accent Blue Soft** (`{colors.accent-blue-soft}` — `#dceaf6`): "💡 Tip / Info" callout banner inside docs.
- **Accent Red** (`{colors.accent-red}` — `#cd4239`) + **Accent Red Soft** (`{colors.accent-red-soft}` — `#f7d6d3`): "⚠️ Warning / Caution" callout banner.
- **Accent Green** (`{colors.accent-green}` — `#2c8c66`) + **Accent Green Soft** (`{colors.accent-green-soft}` — `#d9eddf`): "✅ Success / Positive" callout banner.
- **Accent Purple** (`{colors.accent-purple}` — `#7c44a6`) + **Accent Purple Soft** (`{colors.accent-purple-soft}` — `#e7d8ee`): "📘 Note / Reference" callout banner.
- **Focus Ring** (`{colors.focus-ring}` — `rgba(59,130,246,0.5)`): translucent blue browser-default focus ring around interactive elements.
Typography
Font Family
**IBM Plex Sans Variable** is the system's primary face — used across every text role on every page at weights 400 (regular), 500 (medium), 600 (semibold), 700 (bold), and 800 (extra-bold). Falls back through `IBM Plex Sans` → `-apple-system` → `system-ui` → broad cross-platform sans stack.
**ui-monospace** + **Source Code Pro** carry code samples and inline-code chips at 14px / 1.43 line-height. Source Code Pro is the explicit display monospace; ui-monospace handles inline `<code>` chips.
The brand-distinctive choice is the **mixed weight ladder** (400 / 500 / 600 / 700 / 800) — most chrome lives in the 400–700 band, with weight 800 reserved exclusively for the larger display headlines on home and pricing. This gives the system its "engineering blog" feel: hierarchy is built from weight contrast much more than from size.
Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 36px | 700 | 1.5 | 0 | Hero headline ("The new way to build products") |
| `{typography.display-lg}` | 24px | 800 | 1.33 | -0.6px | Section headline, pricing tier name |
| `{typography.heading-lg}` | 21px | 700 | 1.4 | -0.5px | Sub-section heading, doc-article H2 |
| `{typography.heading-md}` | 20px | 700 | 1.4 | 0 | Card group title, in-grid heading |
| `{typography.heading-sm}` | 18px | 700 | 1.5 | 0 (uppercase) | Section eyebrow ("UNDERSTAND PRODUCT USAGE") |
| `{typography.heading-sm-mixed}` | 18px | 600 | 1.56 | 0 | Card title in mixed-case (no uppercase transform) |
| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Body copy, default paragraph |
| `{typography.body-strong}` | 16px | 600 | 1.5 | 0 | Inline emphasis, primary nav link, in-card label |
| `{typography.body-sm}` | 15px | 400 | 1.71 | 0 | Doc article body, marketing card description |
| `{typography.body-sm-strong}` | 15px | 600 | 1.71 | 0 | Sub-section emphasis inside doc article |
| `{typography.body-xs}` | 14px | 500 | 1.43 | 0 | Doc sidebar item, metadata, in-list caption |
| `{typography.caption-md}` | 14px | 700 | 1.71 | 0 | Card eyebrow, link cluster header |
| `{typography.caption-sm}` | 13px | 500 | 1.5 | 0 | Compact metadata caption |
| `{typography.caption-xs}` | 12px | 600 | 1.33 | 0 (uppercase) | Inline badge label |
| `{typography.utility-xs}` | 12px | 700 | 1.33 | 0 (uppercase) | Section-eyebrow utility text, footer category header |
| `{typography.link-md}` | 16px | 400 | 1.5 | 0 | Inline body anchor link |
| `{typography.button-md}` | 14px | 700 | 1.5 | 0 | Standard primary/secondary button label |
| `{typography.button-sm}` | 13px | 500 | 1 | 0 | Pill chip / compact CTA |
| `{typography.code-sm}` | 14px | 400 | 1.43 | 0 | Code block content |
| `{typography.code-xs}` | 14px | 500 | 1.43 | 0 | Inline code chip |
Principles
The hierarchy is explicitly built from weight + size + occasional uppercase transform — there is no italic style, no decorative display variant, no proprietary face. The biggest display moments use weight 800 with -0.6px tracking, and the body settles at 400 with 1.5 line-height; everything else fills the band between. Section eyebrows (`{typography.heading-sm}` and `{typography.utility-xs}`) consistently render uppercase, which gives the doc layout its textbook-chapter feel.
Note on Font Substitutes
IBM Plex Sans Variable is open-source and Google-Fonts-hosted. There is no need for a substitute — load it directly. If a substitute is genuinely needed, **Inter** is the closest geometric match at all five weights; pair with Inter's letter-spacing -0.5 to -0.6px on display sizes to approximate Plex's display tracking. For monospace, **JetBrains Mono** is a near-perfect substitute for Source Code Pro at body sizes.
Layout
Spacing System
- **Base unit:** 8px (with finer 2/4/6px steps for tight inline gaps in callout banners and pill buttons).
- **Tokens (front matter):** `{spacing.xxs}` (2px) · `{spacing.xs}` (4px) · `{spacing.sm}` (8px) · `{spacing.md}` (12px) · `{spacing.lg}` (16px) · `{spacing.xl}` (24px) · `{spacing.xxl}` (32px) · `{spacing.section}` (80px).
- **Universal section rhythm:** every page in the set uses `{spacing.section}` (80px) as the vertical gap between major content blocks. Card grids use `{spacing.lg}` (16px) gutters; card internal padding sits at `{spacing.xl}` (24px) for product cards and `{spacing.xxl}` (32px) for pricing tier cards.
Grid & Container
- **Max width:** ~1280px content area at desktop with 24px gutters (~48px at ultrawide). Doc article body sits at ~720px max width with the 240px sidebar pushing the article column right of center.
- **Marketing card grid:** 4-up at desktop, 3-up at 1024px, 2-up at 768px, 1-up at 480px. Cards preserve a fixed 1:1 or 4:3 ratio.
- **Pricing tier grid:** 3-up at desktop with a left rail of plan info, collapsing to 2-up + 1 at tablet and 1-up at mobile.
- **Doc layout:** desktop 240px sticky left sidebar + ~720px article body + (optional) 200px right TOC rail = ~1160px content width.
- **Footer:** 6-column horizontal link grid at desktop, 3-up at tablet, 2-up at mobile.
Whitespace Philosophy
Whitespace is generous on marketing pages and tight on doc pages. The home and workflows pages stack feature tiles with `{spacing.lg}` (16px) gutters and 24px internal padding, while doc articles tighten internal spacing to `{spacing.md}` (12px) between paragraphs to maximize information density. The cream canvas runs continuously through every section — there are no decorative dividers, no shaded section bands; only the 1px hairline beneath section eyebrows and footer column rules separate content blocks.
Elevation & Depth
| Level | Treatment | Use |
|---|---|---|
| 0 — Flat | No border, no shadow | Default for canvas-on-canvas blocks, hero text, body sections |
| 1 — Hairline border | 1px solid `{colors.hairline}` | Marketing cards, pricing tier cards, doc sidebar items, footer column rules |
| 2 — Hairline soft | 1px solid `{colors.hairline-soft}` | In-card row divider between adjacent rows |
| 3 — Inverted dark code block | `{colors.surface-dark}` fill | Code samples inside doc cards — the system's only "elevated" surface uses color, not shadow |
The system has no drop-shadow elevation in marketing or product chrome. Cards sit flat on cream with thin olive borders. The single inverted moment is the dark code-block surface used inside doc article body cards.
Decorative Depth
Depth comes entirely from illustration and the pastel callout band system, not from CSS effects:
- **Hand-drawn hedgehog mascots** — characters in various costumes (lab coat, terminal, lounge chair, magnifying glass, hammock, hat) scattered across pages as marginalia. Always rendered as flat color illustrations, never photographs.
- **Pastel callout banners** — `{component.banner-tip-blue}` / `-green` / `-red` / `-purple` soft tinted side-rail panels inside doc articles, each prefixed with an emoji icon (💡 ✅ ⚠️ 📘) and carrying tip/warning/note copy.
- **Code blocks** — full-width dark olive-charcoal panels on `{colors.surface-dark}` with white code text. The system's most cinematic surface, used inside white doc cards.
- **Outline product icons** in the doc sidebar — small rounded-square mini-illustrations (chart icon, funnel, session-replay icon) mark each major product section.
Shapes
Border Radius Scale
| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 0px | Sub-nav strip, footer, doc sidebar, primary nav — flat structural surfaces |
| `{rounded.xs}` | 2px | Inline `<code>` chips, micro-rule highlights |
| `{rounded.sm}` | 4px | Inline buttons, form inputs, micro chips |
| `{rounded.md}` | 6px | Marketing cards, pricing cards, doc cards, code blocks, every standard CTA |
| `{rounded.lg}` | 8px | Tab top corners (`6px 6px 0 0` on active tab) and rare large containers |
| `{rounded.full}` | 9999px | Pill chips and pill-style CTAs ("Get started — free" sticky CTA in nav) |
The radius vocabulary clusters around 4–6px for nearly everything; the only fully-rounded element is the pill-style sticky nav CTA and inline pill chips.
Photography Geometry
There is no photography. Visual elements are limited to:
- **Hedgehog character illustrations** — flat-color cartoon hedgehogs ranging from ~80px (in-card mascot) to ~240px (hero illustration). Always at native aspect, never cropped to a frame.
- **Outline product icons** in the doc sidebar — 20–24px rounded-square illustrations.
- **Inline emoji** at 14–16px inside callout banners (💡 ✅ ⚠️ 📘) — used as functional iconography rather than decoration.
- **Section illustrations** on the home page — small hedgehog vignettes paired with each "Understand product usage" / "Build sticky habits" / "Test before launch" feature row.
Components
> **No hover states documented** per system policy. Each spec covers Default and Active/Pressed only.
Buttons
**`button-primary`** — the universal PostHog CTA
- Background `{colors.primary}` (yellow-orange), text `{colors.on-primary}` (deep olive), type `{typography.button-md}`, padding `8px 16px`, height `40px`, rounded `{rounded.md}`.
- Used for "Get started — free" (sticky top-nav CTA), "Sign up", "Try it free", "Subscribe" — every primary action.
- Pressed state lives in `button-primary-pressed` — background drops to `{colors.primary-pressed}`.
**`button-secondary`** — soft alternative on cream canvas
- Background `{colors.surface-soft}` (`#e5e7e0`), text `{colors.ink}`, type `{typography.button-md}`, padding `8px 16px`, height `40px`, rounded `{rounded.md}`.
- "Talk to sales", "Read docs", "Watch demo" — second-tier actions paired with the yellow primary.
**`button-tertiary`** — ghost text button
- Background transparent, text `{colors.ink}`, type `{typography.button-md}`, padding `8px 12px`, rounded `{rounded.md}`.
- Lowest-emphasis action: "See all docs →", "Browse all features".
**`button-disabled`**
- Background `{colors.surface-soft}`, text `{colors.ash}` — flat soft cream-gray.
Tabs & Chips
**`product-tab`** + **`product-tab-active`** — major product section tabs
- Default: transparent background, text `{colors.body}`, type `{typography.body-strong}`, padding `8px 12px`, rounded `{rounded.md}`.
- Active: background flips to `{colors.surface-card}` (white), text `{colors.ink}` — the tab card lifts off the cream canvas as the visual signal of selection.
**`pill-tab`** + **`pill-tab-active`** — compact filter pill
- Default: transparent background, text `{colors.body}`, type `{typography.button-sm}`, padding `6px 14px`, rounded `{rounded.full}`.
- Active: background flips to `{colors.ink}`, text `{colors.on-dark}` — the chip flips fully inverted on selection.
**`badge-uppercase`** — text-only utility label
- Background transparent, text `{colors.body}` in `{typography.utility-xs}` (uppercase) — used as in-list category prefix ("FEATURE FLAG", "EXPERIMENT", "HEATMAP").
**`badge-promo`** — small inline pill chip
- Background `{colors.accent-blue-soft}`, text `{colors.link-blue}`, type `{typography.caption-xs}`, padding `2px 8px`, rounded `{rounded.full}`.
- "New", "Beta", "Coming soon" pill labels overlaid on cards.
Inputs & Forms
**`text-input`** + **`text-input-focused`**
- Default: background `{colors.surface-card}`, text `{colors.ink}`, 1px solid `{colors.hairline}`, type `{typography.body-md}`, padding `8px 12px`, height `36px`, rounded `{rounded.md}`.
- Focused: same surface; 2px solid `{colors.accent-blue}` border replaces the 1px hairline + a translucent `{colors.focus-ring}` outline.
**`search-input`** — utility search field (doc sidebar, "Ask PostHog AI")
- Same dimensions as `text-input` with a magnifier glyph at the left edge in `{colors.mute}`.
Cards & Containers
**`product-card`** — marketing tile / feature card
- Container: background `{colors.surface-card}` (white), 1px solid `{colors.hairline}`, padding `{spacing.xl}` (24px), rounded `{rounded.md}`.
- Layout: small hedgehog illustration at top-left, `{typography.heading-sm-mixed}` title, `{typography.body-sm}` description, optional `{component.button-tertiary}` "Learn more →" link.
**`doc-card`** — doc article body card
- Container: background `{colors.surface-doc}` (`#fcfcfa` warm-white), 1px solid `{colors.hairline}`, padding `{spacing.xl}` (24px), rounded `{rounded.md}`.
- Carries article body sections, code blocks, callout banners, and tables inside doc pages.
**`feature-tile`** — small marketing feature tile
- Container: background `{colors.surface-card}`, 1px solid `{colors.hairline}`, padding `{spacing.lg}` (20px), rounded `{rounded.md}`.
- Used in 3-up or 4-up grids on home and workflows pages — paired with a small icon and a 1-line description.
**`pricing-tier-card`** — pricing plan card
- Container: background `{colors.surface-card}`, 1px solid `{colors.hairline}`, padding `{spacing.xxl}` (32px), rounded `{rounded.md}`.
- Layout: tier name in `{typography.display-lg}` (24px / 800 / -0.6px), large price + period, feature checklist with check-icon bullets, primary or secondary CTA at bottom.
**`hedgehog-mascot-card`** — feature card with margin-anchored hedgehog
- Same chrome as `{component.product-card}` but with a hand-drawn hedgehog illustration anchored in the right margin or top-right corner — the brand's signature card variant.
Callout Banners
**`banner-tip-blue`** + **`banner-tip-green`** + **`banner-tip-red`** + **`banner-tip-purple`**
- Background `{colors.accent-blue-soft}` / `{colors.accent-green-soft}` / `{colors.accent-red-soft}` / `{colors.accent-purple-soft}`, text `{colors.ink}`, type `{typography.body-md}`, padding `16px 20px`, rounded `{rounded.md}`.
- Each prefixed with an inline emoji icon (💡 / ✅ / ⚠️ / 📘) followed by an inline label and body copy.
- Only appear inside doc article body. The four-color callout family is the brand's information-architecture vocabulary for inline tips/warnings/info inside long-form documentation.
Code
**`code-block`** — dark code sample inside doc card
- Container: background `{colors.surface-dark}` (deep olive-charcoal), text `{colors.on-dark}` in `{typography.code-sm}`, padding `16px 20px`, rounded `{rounded.md}`.
- Syntax highlighting uses muted accent colors (blue for keywords, green for strings, purple for numbers) — never the bright accent colors used in callout banners.
**`inline-code`** — small inline `<code>` chip
- Background `{colors.surface-soft}`, text `{colors.ink}` in `{typography.code-xs}`, padding `2px 6px`, rounded `{rounded.xs}` (2px).
- Used inside body prose to mark code snippets and identifiers.
Navigation
**`primary-nav`**
- Background `{colors.canvas}` (cream — same as the page), text `{colors.ink}`, height `56px`, type `{typography.body-strong}`, rounded `{rounded.none}`.
- Layout (desktop): PostHog wordmark + hedgehog logo at left, nav menu cluster ("Pricing · Docs · Community · Company"), right cluster with a search-glyph, "Login" link, and the always-yellow `{component.button-primary}` "Get started — free" pill anchored to the far right.
**`sub-nav-strip`** — secondary nav bar (under primary)
- Background `{colors.surface-soft}`, text `{colors.body}` in `{typography.body-xs}`, height `40px`, rounded `{rounded.none}`.
- Sits directly below the primary nav on workflows / product pages with section anchor links and a contextual "Get started →" link at the right.
**`doc-sidebar`** — sticky doc-page left sidebar
- Background `{colors.canvas}`, text `{colors.body}` in `{typography.body-xs}`, width `240px`, rounded `{rounded.none}`.
- Layout: search-input "Ask PostHog AI" at top, then a vertical list of section headers each with a small rounded outline-icon mini-illustration, then nested item links indented under the active header.
**Top Nav (Mobile)**
- Hamburger menu icon at left, PostHog wordmark + hedgehog at center, search + sticky yellow "Get started — free" CTA at right. Primary nav collapses into a full-height drawer that slides from the left.
Footer
**`footer-section`**
- Background `{colors.canvas}`, text `{colors.body}` in `{typography.body-xs}`, padding `32px 24px`, rounded `{rounded.none}`, with a 1px `{colors.hairline}` top rule.
- Layout: 6-column horizontal link grid (Product · Resources · Company · Community · Pricing · Legal), each column with a `{typography.utility-xs}` (uppercase) header and a vertical list of links in `{typography.body-xs}` `{colors.body}`.
- Bottom row: PostHog wordmark + small hedgehog illustration, copyright in `{typography.caption-xs}` `{colors.mute}`, social-icon row at far-right.
Inline
**`link-inline`** — body-prose anchor link
- `{colors.link-teal}` (`#1078a3`) in body prose with no underline by default; underline appears on focus. The brand's primary inline link color.
Do's and Don'ts
Do
- Use `{colors.canvas}` (cream — `#eeefe9`) as the page body. Never substitute pure white as the canvas.
- Reserve `{colors.primary}` (yellow-orange) for the primary CTA pill only. The "Get started — free" treatment is the brand's anchor.
- Render the brand wordmark with the hedgehog illustration alongside it, not as a stand-alone wordmark. The hedgehog IS the brand identity.
- Use IBM Plex Sans Variable across every text role — body 400, emphasis 600/700, display 800.
- Stack content sections at `{spacing.section}` (80px) rhythm with no decorative dividers between them; let the cream canvas continue uninterrupted.
- Use `{component.banner-tip-blue}` / `-green` / `-red` / `-purple` only inside doc article body for tip/warning/note panels — keep marketing chrome out of the four-color callout family.
- Pair every code sample with the dark `{component.code-block}` surface; inline `<code>` chips use `{component.inline-code}` (cream surface-soft chip).
- Anchor a hedgehog mascot illustration in feature tile margins on home and workflows pages — the system's signature decoration.
Don't
- Don't introduce drop shadows on cards. Cards sit flat on cream with thin olive borders only.
- Don't add a second saturated chromatic CTA. Yellow-orange is the only loud color in the system.
- Don't replace the cream canvas with pure white or full-bleed dark hero bands. The cream is the brand.
- Don't use the four-color callout banner pastels (`{colors.accent-blue-soft}`, `-green`, `-red`, `-purple`) as marketing-card backgrounds. They belong to inline doc content only.
- Don't substitute the hedgehog illustration with a generic icon set. The character system is the brand.
- Don't use uppercase transform outside of `{typography.heading-sm}`, `{typography.utility-xs}`, and `{typography.caption-xs}`. Uppercase is reserved for eyebrows and footer category headers.
- Don't pad cards with 32px+ on all sides except for `{component.pricing-tier-card}`. Standard cards sit at 24px internal padding.
Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| ultrawide | 1920px+ | Content max-width holds at 1280px; outer gutters grow to ~80px |
| desktop-large | 1440px | Default — 4-up feature tile grid, 240px sticky doc sidebar visible |
| desktop | 1280px | Same layout with narrower outer gutters |
| desktop-small | 1024px | 4-up tiles collapse to 3-up; doc sidebar remains visible |
| tablet | 768px | 3-up tiles collapse to 2-up; doc sidebar collapses into a top accordion; primary nav becomes hamburger |
| mobile | 480px | Single-column everything; hero `{typography.display-xl}` scales 36px → ~28px |
| mobile-narrow | 320px | Section padding tightens to 32px |
Touch Targets
All interactive elements meet WCAG AA (≥ 40×40px). `{component.button-primary}` and `{component.button-secondary}` sit at 40px height with 16px padding. `{component.text-input}` sits at 36px (just under AAA but above AA at this size). `{component.pill-tab}` is ~32–36px height with 14px padding extending to ~44px tappable via inline padding. Doc-sidebar items use 14px text with ~32px line-height + 6px vertical padding for ~44px tap rows.
Collapsing Strategy
- **Primary nav:** desktop horizontal cluster → tablet hamburger drawer at 768px. The yellow "Get started — free" CTA stays visible at every breakpoint.
- **Sub-nav strip:** desktop horizontal anchor row → tablet horizontal scroll → mobile select dropdown.
- **Marketing card grid:** 4-up → 3-up → 2-up → 1-up at 1024, 768, and 480px; gutters drop from 16px to 12px on mobile.
- **Pricing grid:** 3-up → 2+1 → 1-up stacked at tablet and below.
- **Doc layout:** desktop 240px sidebar + 720px article → tablet sidebar collapses to a top accordion → mobile fully collapsed accordion.
- **Footer:** 6-up link columns → 3-up at tablet → 2-up at mobile.
- **Section padding:** `{spacing.section}` (80px) desktop → 64px tablet → 48px mobile.
- **Hero headline:** `{typography.display-xl}` (36px) at desktop, scaling to ~28px at mobile, line-height holding at 1.5.
Image Behavior
The only "imagery" in the system is hand-drawn hedgehog illustrations rendered as inline SVG. They preserve their natural aspect at every breakpoint and scale via CSS `width: auto; max-width: 100%`. There is no responsive art-direction needed because there is no photography.
Iteration Guide
1. Focus on ONE component at a time. Pull its YAML entry and verify every property resolves.
2. Reference component names and tokens directly (`{colors.primary}`, `{component.button-primary-pressed}`, `{rounded.md}`) — do not paraphrase.
3. Run `npx @google/design.md lint DESIGN.md` after edits — `broken-ref`, `contrast-ratio`, and `orphaned-tokens` warnings flag issues automatically.
4. Add new variants as separate component entries (`-pressed`, `-disabled`, `-focused`) — do not bury them inside prose.
5. Default body to `{typography.body-md}` (16px / 400 / 1.5); reach for `{typography.body-strong}` for emphasis; reserve `{typography.display-lg}` (24px / 800) strictly for marketing display moments.
6. Keep `{colors.primary}` scarce per viewport — at most one yellow-orange pill per fold.
7. When introducing a new component, ask whether it can be expressed with the existing card + 6px-radius + cream-canvas vocabulary before adding new tokens. The system's strength is that it almost never needs new ones.
Known Gaps
- **Mobile screenshots not captured** — responsive behavior synthesizes PostHog's mobile pattern (hamburger drawer, single-column grid, doc sidebar accordion) from desktop evidence and the breakpoint stack.
- **Hover states not documented** by system policy.
- **In-product app chrome** (PostHog dashboard, charts, session replay player) not in the captured set — the marketing site is documented here, not the in-product analytics interface.
- **Authenticated chrome** (login modal, account dashboard, billing settings) not in the captured pages.
- **Form validation states** beyond the focused-state input not present in the captured surfaces.
- **Marketing illustration set** — the full library of hedgehog character poses is not enumerated here; specific poses (lab coat hedgehog, terminal hedgehog, hammock hedgehog) are noted as visible in screenshots but the full asset library is page-specific.
개요
PostHog의 마케팅 시스템은 브랜드 중심에 있는 시각적 모순, 즉 친숙한 엔지니어링 스케치북인 것처럼 렌더링된 진지한 오픈 소스 제품 분석 플랫폼을 기반으로 구축되었습니다. 크롬은 흰색이 아닌 따뜻한 크림색 캔버스(`` — ``) 위에 실행되며 모든 페이지에는 교과서의 여백처럼 레이아웃 전체에 실험실 가운, 라운지 의자, 터미널 및 돋보기 안경을 착용한 손으로 그린 고슴도치 마스코트가 점선으로 표시되어 있습니다. 유형은 본문의 경우 올리브 회색(`` — ``), 헤드라인의 경우 진한 올리브색(`` — ``)의 IBM Plex Sans 변수에 위치하며 가중치는 400, 600, 700 및 800 사이에서 단단하게 조정되어 색상 없는 계층 구조를 만듭니다. 단일 포화 노란색-주황색 알약(`` — ``)은 브랜드의 유일한 시끄러운 반음계 순간입니다. 그 밖의 모든 것은 크림색, 올리브색, 흰색 카드 및 가끔 파스텔 색상의 콜아웃 밴드입니다.
시스템에는 고유한 **2가지 모드 본문 레이아웃**이 있습니다. 마케팅 페이지(홈, 워크플로, 가격 책정)는 교대 파스텔 설명선 밴드와 크림색 흰색 카드의 기능 타일에 의존하는 반면, 문서 페이지에는 둥근 개요 아이콘 섹션 목록이 있는 끈끈한 240픽셀 왼쪽 사이드바가 추가됩니다. 코드 샘플은 흰색 문서 카드 내부의 ``(바디 잉크를 전달하는 동일한 올리브 숯, 거꾸로 사용)의 전폭 어두운 블록으로, 시스템의 가장 독특한 시각적 순간을 만들어냅니다. 여백에 고슴도치 마스코트가 낙서되어 있는 크림색 캔버스의 흰색 카드 내부에 떠 있는 암흑 위의 코드 섬입니다.
섹션은 ``(80px) 리듬으로 스택되며 크림 캔버스가 섹션 사이에서 가장자리까지 이어집니다. 크림을 방해하는 유일한 색상 밴드는 문서 기사 내부의 파스텔 `` / `-green` / `-red` / `-purple` 콜아웃 패널입니다. "💡 팁", "✅ 성공", "⚠️ 경고", "📘 정보" 인라인 주석이 포함된 부드러운 색조 상자입니다. 장식적인 그라디언트도 없고, 분위기 있는 메쉬 배경도 없고, 완전한 다크 히어로 챕터도 없습니다. 크림색 캔버스는 위에서 아래로 중단 없이 이어져 있으며 고슴도치는 전체 시각적 아이덴티티입니다.
**주요 특성:**
- 따뜻한 크림색 캔버스(`` — #eeefe9) 섹션 간 표면 교체 없이 끝부터 끝까지 — 페이지는 하나의 연속 시트입니다.
- 진한 올리브색 텍스트(``)가 포함된 단일 노란색-주황색 CTA 알약(`` — #f7a501) — 브랜드의 유일한 포화 색상
- IBM Plex Sans 가중치가 400/500/600/700/800인 모든 텍스트 역할에 대한 변수 — 시스템에 다른 서체 없음
- 손으로 그린 고슴도치 마스코트가 전체 장식 시스템으로 레이아웃 전체에 흩어져 있습니다. 그라데이션도 없고, 메시도 없고, 대기 배경도 없습니다
- 4–8px 반경 카드 어휘: 대부분의 구성 요소의 경우 ``(6px), 일부 컨테이너의 경우 ``(8px), 알약 칩의 경우 완전히 반올림
- 파스텔 콜아웃 배너(``, ``, ``, ``)는 도움말/경고/정보를 위한 부드러운 색상의 측면 레일로 문서 기사 본문을 나눕니다
- 문서 페이지는 둥근 윤곽선 아이콘 섹션 탐색 기능과 상단에 "PostHog AI에 문의" CTA가 있는 고정 240px ``을 추가합니다
색상
> **소스 페이지:** `/`(홈), `/pricing`(가격 세부 정보), `/docs/product-analytics`(문서 문서), `/workflows`(제품 기능 페이지). 크롬 팔레트는 4개 페이지 모두에서 동일합니다. 문서 관련 강조(콜아웃 배너 파스텔, 코드 블록 어두운 표면)만 문서 환경 내에만 나타납니다.
브랜드 및 액센트
- **PostHog Yellow** (`` — ``): 범용 기본 CTA. 모든 탐색 오른쪽 상단에 고정된 "시작하기 - 무료" 알약, 주요 CTA, 가격 등급 구독 버튼, 바닥글 가입 알약. 시스템의 유일한 포화 색채 모멘트입니다.
- **노란색 누름**(`` — ``): 기본 알약의 눌린 상태.
- **노란색 활성**(`` — ``): 깊게 눌러진 노란색 + 시스템의 금색 테두리 강조(인라인 양식 요소의 드문 1px 금색 규칙).
표면
- **캔버스** (`` — ``): 따뜻한 크림색 페이지 배경. 모든 페이지에서 엔드 투 엔드; 브랜드의 가장 독특한 표면 선택.
- **부드러운 표면** (`` — ``): 버튼-보조 채우기, 하위 탐색 스트립 배경, 인라인 코드 칩 배경.
- **표면 카드** (`` — ``): 크림색 캔버스 위에 놓인 실제 흰색 카드와 타일 배경입니다. 주요 카드 표면.
- **Surface Doc** (`` — ``): 문서 기사 본문 카드 내부에 사용되는 희미한 크림색 따뜻한 흰색 — 페이지의 톤을 통일되게 유지하기 위해 순백색보다 약간 더 부드럽습니다.
- **Surface Dark** (`` — ``): 코드 블록 배경으로 반전되어 사용되는 진한 올리브 숯입니다. ``과 동일한 16진수 — 브랜드는 텍스트와 어두운 코드 표면 모두에 올리브색에 가까운 검정색을 사용합니다.
- **가는 선** (`` — ``): 1px 카드 테두리, 표 규칙, 바닥글 열 구분선.
- **헤어라인 소프트**(`` — ``): 카드 내 행 구분선, 소프트 삽입 규칙.
- **어두운 부분** (`` — ``): `` 코드 블록의 기본 텍스트.
텍스트
- **잉크** (`` — ``): 헤드라인, 밝은 버튼 텍스트, 기본 탐색 링크 — 크림색 대비 검정색에 가까운 진한 올리브색 숯색.
- **본문**(`` — ``): 기본 단락 텍스트, 문서 기사 본문, 마우스를 올리기 전 인라인 링크 색상. 브랜드에서 가장 많이 사용되는 텍스트 색상입니다.
- **차콜**(`` — ``): 본문이 너무 부드러운 강조된 본문 텍스트.
- **음소거**(`` — ``): 메타데이터, 바닥글 링크 텍스트, 목록 내 보조 주석.
- **Ash** (`` — ``): 비활성화 상태 텍스트 및 가장 낮은 강조 유틸리티.
- **스톤** (`` — ``): 최소 강조 캡션 텍스트 및 비활성화된 아이콘 색상.
의미
- **링크 블루** (`` — ``): 본문 산문 내부의 인라인 앵커 링크. 시스템의 기본 정보 링크 색상입니다.
- **링크 청록색** (`` — ``): 문서-문서 인라인 링크 변형, 본문 텍스트와 쌍을 이룹니다.
- **액센트 블루** (`` — ``) + **액센트 블루 소프트** (`` — ``): 문서 내부의 "💡 팁/정보" 콜아웃 배너.
- **액센트 레드** (`` — ``) + **액센트 레드 소프트** (`` — ``): "⚠️ 경고/주의" 콜아웃 배너.
- **액센트 그린** (`` — ``) + **액센트 그린 소프트** (`` — ``): "✅ 성공/긍정" 콜아웃 배너.
- **액센트 퍼플**(`` — ``) + **액센트 퍼플 소프트**(`` — ``): "📘 참고/참조" 콜아웃 배너.
- **초점 링**(`` — `rgba(59,130,246,0.5)`): 대화형 요소 주변의 반투명 파란색 브라우저-기본 초점 링.
타이포그래피
글꼴군
**IBM Plex Sans Variable**은 시스템의 기본 면으로 모든 페이지의 모든 텍스트 역할에 걸쳐 가중치 400(일반), 500(중간), 600(세미볼드), 700(굵게) 및 800(매우 굵게)으로 사용됩니다. `IBM Plex Sans` → `-apple-system` → `system-ui` → 광범위한 크로스 플랫폼 산스 스택으로 대체됩니다.
**ui-monospace** + **소스 코드 프로**는 14px/1.43 줄 높이의 코드 샘플과 인라인 코드 칩을 전달합니다. Source Code Pro는 명시적 디스플레이 고정폭입니다. ui-monospace는 인라인 `` 칩을 처리합니다.
브랜드 고유의 선택은 **혼합 무게 사다리**(400/500/600/700/800)입니다. 대부분의 크롬은 400~700 대역에 속하며 무게 800은 가정의 더 큰 디스플레이 헤드라인과 가격에만 예약되어 있습니다. 이는 시스템에 "엔지니어링 블로그" 느낌을 줍니다. 계층 구조는 크기보다 무게 대비를 통해 구축됩니다.
계층
| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |
사용
|---|---|---|---|---|---|
| _`` | 36px | 700 | 1.5 | 0 | 히어로 헤드라인("제품을 만드는 새로운 방법") |
| _`` | 24px | 800 | 1.33 | -0.6px | 섹션 헤드라인, 가격 책정 계층 이름 |
| _`` | 21px | 700 | 1.4 | -0.5px | 하위 섹션 제목, 문서 기사 H2 |
| _`` | 20픽셀 | 700 | 1.4 | 0 | 카드 그룹 제목, 그리드 내 제목 |
| _`` | 18px | 700 | 1.5 | 0(대문자) | 섹션 눈썹("제품 사용법 이해") |
| _`` | 18px | 600 | 1.56 | 0 | 대소문자 혼합(대문자 변환 없음)의 카드 제목 |
| _`` | 16px | 400 | 1.5 | 0 | 본문 문구, 기본 단락 |
| _`` | 16px | 600 | 1.5 | 0 | 인라인 강조, 기본 탐색 링크, 인카드 라벨 |
| _`` | 15px | 400 | 1.71 | 0 | 문서 기사 본문, 마케팅 카드 설명 |
| _`` | 15px | 600 | 1.71 | 0 | 문서 기사 내부의 하위 섹션 강조 |
| _`` | 14px | 500 | 1.43 | 0 | 문서 사이드바 항목, 메타데이터, 목록 내 캡션 |
| _`` | 14px | 700 | 1.71 | 0 | 카드 눈썹, 링크 클러스터 헤더 |
| _`` | 13px | 500 | 1.5 | 0 | 압축 메타데이터 캡션 |
| _`` | 12px | 600 | 1.33 | 0(대문자) | 인라인 배지 라벨 |
| _`` | 12px | 700 | 1.33 | 0(대문자) | 섹션-눈썹 유틸리티 텍스트, 바닥글 카테고리 헤더 |
| _`` | 16px | 400 | 1.5 | 0 | 인라인 본문 앵커 링크 |
| _`` | 14px | 700 | 1.5 | 0 | 표준 기본/보조 버튼 라벨 |
| _`` | 13px | 500 | 1 | 0 | 알약칩/콤팩트 CTA |
| _`` | 14px | 400 | 1.43 | 0 | 코드 블록 내용 |
| _`` | 14px | 500 | 1.43 | 0 | 인라인 코드 칩 |
원칙
계층 구조는 가중치 + 크기 + 가끔 대문자 변환을 통해 명시적으로 구축됩니다. 기울임꼴 스타일, 장식 디스플레이 변형, 독점 문자가 없습니다. 가장 큰 디스플레이 순간은 -0.6px 추적으로 가중치 800을 사용하고 본문은 1.5 라인 높이로 400에 고정됩니다. 다른 모든 것은 밴드 사이를 채웁니다. 섹션 눈썹(`` 및 ``)은 일관되게 대문자를 렌더링하여 문서 레이아웃에 교과서 장의 느낌을 줍니다.
글꼴 대체에 대한 참고사항
IBM Plex Sans Variable은 오픈 소스이며 Google-Fonts에서 호스팅됩니다. 대체품이 필요하지 않습니다. 직접 로드하세요. 대체품이 정말로 필요한 경우 **Inter**는 다섯 가지 가중치 모두에서 가장 가까운 기하학적 일치입니다. 디스플레이 크기에 대해 Inter의 문자 간격 -0.5~-0.6px와 쌍을 이루어 Plex의 디스플레이 추적과 유사하게 만듭니다. 고정 폭의 경우 **JetBrains Mono**는 본체 크기에서 Source Code Pro를 거의 완벽하게 대체합니다.
레이아웃
간격 시스템
- **기본 단위:** 8px(콜아웃 배너 및 알약 버튼의 인라인 간격을 좁히기 위해 더 미세한 2/4/6px 단계 포함).
- **토큰(머리말):** ``(2px) · ``(4px) · ``(8px) · ``(12px) · ``(16px) · ``(24px) · ``(32px) · ``(80px).
- **범용 섹션 리듬:** 세트의 모든 페이지는 주요 콘텐츠 블록 사이의 수직 간격으로 ``(80px)을 사용합니다. 카드 그리드는 ``(16px) 거터를 사용합니다. 카드 내부 패딩은 제품 카드의 경우 ``(24px)이고 가격 등급 카드의 경우 ``(32px)입니다.
그리드 및 컨테이너
- **최대 너비:** 24px 여백이 있는 데스크톱의 콘텐츠 영역 ~1280px(울트라와이드에서는 ~48px) 문서 본문은 최대 720px 너비에 위치하며 240px 사이드바는 기사 열을 중앙 오른쪽으로 밀고 있습니다.
- **마케팅 카드 그리드:** 데스크톱에서 4등분, 1024px에서 3등분, 768px에서 2등분, 480px에서 1등분. 카드는 고정된 1:1 또는 4:3 비율을 유지합니다.
- **가격 등급 그리드:** 요금제 정보의 왼쪽 레일이 있는 데스크톱의 경우 3-up, 태블릿의 경우 2-up + 1, 모바일의 경우 1-up으로 축소됩니다.
- **문서 레이아웃:** 데스크톱 240px 고정 왼쪽 사이드바 + ~720px 기사 본문 + (선택 사항) 200px 오른쪽 TOC 레일 = ~1160px 콘텐츠 너비.
- **바닥글:** 데스크탑의 6열 수평 링크 그리드, 태블릿의 경우 3열, 모바일의 경우 2열.
공백 철학
마케팅 페이지에서는 공백이 넉넉하고 문서 페이지에서는 공백이 적습니다. 홈 및 워크플로 페이지에는 ``(16px) 여백과 24px 내부 패딩이 포함된 기능 타일이 쌓이고, 문서 기사는 정보 밀도를 최대화하기 위해 단락 사이의 내부 간격을 ``(12px)로 좁힙니다. 크림색 캔버스는 모든 섹션을 통해 연속적으로 이어집니다. 장식용 칸막이도 없고 음영 처리된 섹션 밴드도 없습니다. 섹션 눈썹과 바닥글 열 규칙 아래의 1픽셀 가는선만 콘텐츠 블록을 구분합니다.
고도 및 깊이
| 레벨 | 치료 | |
사용
|---|---|---|
| 0 - 플랫 | 테두리 없음, 그림자 없음 | 캔버스 위 블록, 히어로 텍스트, 본문 섹션의 기본값 |
| 1 - 가는선 테두리 | 1px 솔리드 `` | 마케팅 카드, 가격 등급 카드, 문서 사이드바 항목, 바닥글 열 규칙 |
| 2 - 부드러운 헤어라인 | 1px 솔리드 `` | 인접한 행 사이의 카드 내 행 구분선 |
| 3 — 반전된 어두운 코드 블록 | _`` 채우기 | 문서 카드 내부의 코드 샘플 — 시스템의 유일한 "높은" 표면은 그림자가 아닌 색상을 사용합니다 |
시스템의 마케팅 또는 제품 크롬에는 그림자 높이가 없습니다. 카드는 얇은 올리브색 테두리가 있는 크림색 위에 평평하게 놓여 있습니다. 단일 반전 모멘트는 문서 기사 본문 카드 내부에 사용되는 어두운 코드 블록 표면입니다.
장식적 깊이
깊이는 CSS 효과가 아닌 전적으로 일러스트레이션과 파스텔 콜아웃 밴드 시스템에서 나옵니다.
- **손으로 그린 고슴도치 마스코트** — 다양한 의상(실험복, 터미널, 라운지 의자, 돋보기, 해먹, 모자)을 입은 캐릭터가 여백으로 페이지 전체에 흩어져 있습니다. 항상 평면 컬러 일러스트레이션으로 렌더링되며 사진은 사용하지 않습니다.
- **파스텔 콜아웃 배너** — `` / `-green` / `-red` / `-purple` 문서 기사 내부의 부드러운 색조 측면 레일 패널, 각 접두사에는 이모티콘 아이콘(💡 ✅ ⚠️ 📘)이 붙고 휴대 가능 팁/경고/참고 사본.
- **코드 블록** — 흰색 코드 텍스트가 있는 ``의 전체 너비 짙은 올리브색 차콜 패널입니다. 흰색 문서 카드 내부에 사용되는 시스템의 가장 영화적인 표면입니다.
- **문서 사이드바의 제품 아이콘 개요** - 작고 둥근 사각형의 미니 그림(차트 아이콘, 유입경로, 세션 재생 아이콘)으로 각 주요 제품 섹션을 표시합니다.
도형
테두리 반경 배율
| 토큰 | 가치 | |
사용
|---|---|---|
| _`` | 0픽셀 | 하위 탐색 스트립, 바닥글, 문서 사이드바, 기본 탐색 — 평평한 구조 표면 |
| _`` | 2픽셀 | 인라인 `` 칩, 마이크로 규칙 하이라이트 |
| _`` | 4픽셀 | 인라인 버튼, 양식 입력, 마이크로 칩 |
| _`` | 6픽셀 | 마케팅 카드, 가격 카드, 문서 카드, 코드 블록, 모든 표준 CTA |
| _`` | 8픽셀 | 탭 상단 모서리(활성 탭의`6px 6px 0 0`) 및 드물게 큰 컨테이너 |
| _`` | 9999px | 알약 칩 및 알약 스타일 CTA('시작하기 — 탐색의 무료' 고정 CTA) |
반경 어휘는 거의 모든 항목에 대해 약 4~6픽셀로 구성됩니다. 유일하게 다재다능한 요소는 알약 스타일의 끈적한 탐색 CTA와 인라인 알약 칩입니다.
사진 기하학
사진이 없습니다. 시각적 요소는 다음으로 제한됩니다.
- **고슴도치 캐릭터 일러스트레이션** — ~80px(카드 내 마스코트)에서 ~240px(영웅 일러스트레이션) 범위의 평면 컬러 만화 고슴도치입니다. 항상 기본 측면에서, 프레임에 맞게 잘리지 않습니다.
- **문서 사이드바의 제품 아이콘 개요** — 20~24픽셀의 둥근 사각형 그림.
- **콜아웃 배너 내부 14~16픽셀의 인라인 이모티콘**(💡 ✅ ⚠️ 📘) — 장식이 아닌 기능적 아이콘으로 사용됩니다.
- **홈 페이지의 섹션 그림** — 각 "제품 사용법 이해" / "끈적끈적한 습관 형성" / "출시 전 테스트" 기능 행과 쌍을 이루는 작은 고슴도치 삽화**
구성요소
> 시스템 정책에 따라 **호버 상태가 문서화되지 않았습니다**. 각 사양에는 기본 및 활성/누름만 포함됩니다.
버튼
**`button-primary`** — 범용 PostHog CTA
- 배경 ``(노란색-주황색), 텍스트 ``(진한 올리브색), 유형 ``, 패딩 `8px 16px`, 높이 `40px`, 둥근형 ``.
- "시작하기 — 무료"(고정 상단 탐색 CTA), "가입", "무료로 사용해 보기", "구독" — 모든 기본 작업에 사용됩니다.
- 누른 상태는 `button-primary-pressed`에 있습니다. 배경은 ``으로 떨어집니다.
**`button-secondary`** — 크림 캔버스의 부드러운 대안
- 배경 ``(``), 텍스트 ``, 유형 ``, 패딩 `8px 16px`, 높이 `40px`, 반올림 ``.
- "영업 담당자에게 문의", "문서 읽기", "데모 보기" — 노란색 기본 요소와 쌍을 이루는 두 번째 단계 작업입니다.
**`button-tertiary`** — 고스트 텍스트 버튼
- 배경 투명, 텍스트 ``, 유형 ``, 패딩 `8px 12px`, 반올림 ``.
- 최저 강조 작업: "모든 문서 보기 →", "모든 기능 찾아보기".
**`button-disabled`**
- 배경 ``, 텍스트 `` — 납작하고 부드러운 크림색 회색.
탭 및 칩
**`product-tab`** + **`product-tab-active`** — 주요 제품 섹션 탭
- 기본값: 투명한 배경, 텍스트 ``, 유형 ``, 패딩 `8px 12px`, 반올림 ``.
- 활성: 배경이 ``(흰색), 텍스트 ``로 뒤집힙니다. 탭 카드는 선택의 시각적 신호로 크림 캔버스에서 들어 올려집니다.
**`pill-tab`** + **`pill-tab-active`** — 소형 필터 알약
- 기본값: 투명 배경, 텍스트 ``, 유형 ``, 패딩 `6px 14px`, 반올림 ``.
- 활성: 배경이 ``로 뒤집히고 텍스트 `` — 선택 시 칩이 완전히 반전됩니다.
**`badge-uppercase`** — 텍스트 전용 유틸리티 라벨
- 배경 투명, ``(대문자)의 텍스트 `` — 목록 내 범주 접두사로 사용됩니다("FEATURE FLAG", "EXPERIMENT", "HEATMAP").
**`badge-promo`** — 소형 인라인 알약 칩
- 배경 ``, 텍스트 ``, 유형 ``, 패딩 `2px 8px`, 반올림 ``.
- "신규", "베타", "출시 예정" 알약 라벨이 카드에 오버레이되어 있습니다.
입력 및 양식
**`text-input`** + **`text-input-focused`**
- 기본값: 배경 ``, 텍스트 ``, 1px 단색 ``, 유형 ``, 패딩 `8px 12px`, 높이 `36px`, 반올림 ``.
- 초점: 동일한 표면; 2px 실선 `` 테두리는 1px 가는선 + 반투명 `` 윤곽선을 대체합니다.
_**`search-input`** — 유틸리티 검색 필드(문서 사이드바, "PostHog AI에 문의")
- ``의 왼쪽 가장자리에 돋보기 문자가 있는 `text-input`과 동일한 크기.
카드 및 용기
**`product-card`** — 마케팅 타일/기능 카드
- 컨테이너: 배경 ``(흰색), 1px 단색 ``, 패딩 ``(24px), 둥근 ``.
- 레이아웃: 왼쪽 상단의 작은 고슴도치 그림, `` 제목, `` 설명, 선택 ional `` "자세히 알아보기 →" 링크.
**`doc-card`** — 문서 기사 본문 카드
- 컨테이너: 배경 ``(`` 따뜻한 흰색), 1px 단색 ``, 패딩 ``(24px), 둥근 ``.
- 문서 페이지 내부에 기사 본문 섹션, 코드 블록, 콜아웃 배너 및 표를 포함합니다.
**`feature-tile`** — 작은 마케팅 기능 타일
- 컨테이너: 배경 ``, 1px 단색 ``, 패딩 ``(20px), 반올림 ``.
- 홈 및 워크플로 페이지의 3-up 또는 4-up 그리드에 사용되며 작은 아이콘 및 한 줄 설명과 함께 사용됩니다.
**`pricing-tier-card`** — 가격 계획 카드
- 컨테이너: 배경 ``, 1px 단색 ``, 패딩 ``(32px), 반올림 ``.
- 레이아웃: ``(24px / 800 / -0.6px)의 계층 이름, 큰 가격 + 마침표, 체크 아이콘 글머리 기호가 있는 기능 체크리스트, 하단의 기본 또는 보조 CTA.
**`hedgehog-mascot-card`** — 여백 고정 고슴도치가 있는 기능 카드
- __CODEBCK_1075___와 동일한 크롬이지만 손으로 그린 고슴도치 그림이 오른쪽 여백 또는 오른쪽 상단에 고정되어 있습니다. 브랜드의 시그니처 카드 변형입니다.
콜아웃 배너
**`banner-tip-blue`** + **`banner-tip-green`** + **`banner-tip-red`** + **`banner-tip-purple`**
- 배경 `` / `` / `` / ``, 텍스트 ``, 유형 ``, 패딩 `16px 20px`, 반올림 ``.
- 각 항목에는 인라인 이모티콘 아이콘(💡 / ✅ / ⚠️ / 📘)이 접두사로 붙고 그 뒤에 인라인 라벨과 본문 문구가 옵니다.
- 문서 기사 본문 내부에만 표시됩니다. 4색 콜아웃 제품군은 긴 형식 문서 내의 인라인 팁/경고/정보에 대한 브랜드의 정보 아키텍처 어휘입니다.
코드
**`code-block`** — 문서 카드 내부의 어두운 코드 샘플
- 컨테이너: 배경 ``(진한 올리브 차콜), 텍스트 ``(``), 패딩 `16px 20px`, 반올림 ``.
- 구문 강조는 음소거된 강조 색상(키워드는 파란색, 문자열은 녹색, 숫자는 보라색)을 사용하며 콜아웃 배너에 사용되는 밝은 강조 색상은 사용하지 않습니다.
**`inline-code`** — 작은 인라인 `` 칩
- 배경 ``, ``의 텍스트 ``, 패딩 `2px 6px`, 반올림 ``(2px).
- 본문 내에서 코드 조각 및 식별자를 표시하는 데 사용됩니다.
탐색
**`primary-nav`**
- 배경 ``(크림색 — 페이지와 동일), 텍스트 ``, 높이 `56px`, 유형 ``, 반올림 ``.
- 레이아웃(데스크탑): 왼쪽의 PostHog 워드마크 + 고슴도치 로고, 탐색 메뉴 클러스터("가격 · 문서 · 커뮤니티 · 회사"), 검색 문자가 있는 오른쪽 클러스터, "로그인" 링크 및 항상 노란색인 `` "시작하기 — 무료" 알약이 맨 오른쪽에 고정되어 있습니다.
**`sub-nav-strip`** — 보조 탐색 모음(기본 아래)
- 배경 ``, 텍스트 ``(``, 높이 `40px`, 반올림됨 ``.
)
- 섹션 앵커 링크와 상황별 '시작하기 →' 링크가 오른쪽에 있는 워크플로/제품 페이지의 기본 탐색 메뉴 바로 아래에 있습니다.
**`doc-sidebar`** — 고정 문서 페이지 왼쪽 사이드바
- 배경 ``, 텍스트 `` in ``, 너비 `240px`, 반올림 ``.
- 레이아웃: 상단에 검색 입력 "Ask PostHog AI", 작은 둥근 개요 아이콘 미니 그림이 있는 섹션 헤더의 수직 목록, 활성 헤더 아래에 들여쓰기된 중첩된 항목 링크.
**상단 탐색(모바일)**
- 왼쪽의 햄버거 메뉴 아이콘, 중앙의 PostHog 워드마크 + 고슴도치, 오른쪽의 검색 + 끈적끈적한 노란색 "시작하기 — 무료" CTA. 기본 탐색 메뉴는 왼쪽에서 미끄러지는 전체 높이 서랍으로 축소됩니다.
바닥글
**`footer-section`**
- 배경 ``, ``의 텍스트 ``, 패딩 `32px 24px`, 반올림 ``, 1px `` 상단 규칙.
- 레이아웃: 6열 가로 링크 그리드(제품 · 자원 · 회사 · 커뮤니티 · 가격 · 법률), 각 열에는 ``(대문자) 헤더와 `` ``.
의 세로 링크 목록이 포함됩니다.
- 하단 행: PostHog 워드마크 + 작은 고슴도치 그림, 저작권 `` ``, 소셜 아이콘 행 맨 오른쪽.
인라인
**`link-inline`** — 본문-산문 앵커 링크
기본적으로 밑줄이 없는 본문 산문의 _- `` (``); 초점에 밑줄이 나타납니다. 브랜드의 기본 인라인 링크 색상입니다.
해야 할 일과 하지 말아야 할 일
하라
- 페이지 본문으로 ``(크림 — ``)을 사용하세요. 절대 흰색을 캔버스로 대체하지 마세요.
- 기본 CTA 알약 전용으로 ``(노란색-주황색)을 예약하세요. "시작하기 - 무료" 서비스가 브랜드의 핵심입니다.
- 독립형 워드마크가 아닌 고슴도치 일러스트와 함께 브랜드 워드마크를 렌더링합니다. 고슴도치는 브랜드 아이덴티티입니다.
- 모든 텍스트 역할(본문 400, 강조 600/700, 디스플레이 800)에서 IBM Plex Sans Variable을 사용하세요.
- 콘텐츠 섹션을 사이에 장식 구분선 없이 ``(80px) 리듬으로 쌓으세요. 크림색 캔버스가 중단 없이 계속되도록 하세요.
- 팁/경고/참고 패널에 대한 문서 기사 본문 내에서만 `` / `-green` / `-red` / `-purple`를 사용하세요. 마케팅 크롬을 4색 설명선 제품군에서 제외하세요.
- 모든 코드 샘플을 어두운 `` 표면과 페어링합니다. 인라인 `` 칩은 ``(크림 표면 소프트 칩)을 사용합니다.
- 홈 및 워크플로 페이지의 기능 타일 여백에 고슴도치 마스코트 그림을 고정합니다. 이는 시스템의 시그니처 장식입니다.
하지 마세요
- 카드에 그림자를 추가하지 마세요. 카드는 얇은 올리브 테두리만 있는 크림색 위에 평평하게 놓여 있습니다.
- 두 번째 채도가 높은 색채 CTA를 추가하지 마세요. 노란색-주황색은 시스템에서 유일하게 큰 소리를 내는 색상입니다.
- 크림색 캔버스를 순백색 또는 풀블리드 다크 히어로 밴드로 교체하지 마세요. 크림이 바로 브랜드입니다.
- 4색 설명선 배너 파스텔(``, `-green`, `-red`, `-purple`)을 마케팅 카드 배경으로 사용하지 마세요. 인라인 문서 콘텐츠에만 속합니다.
- 고슴도치 그림을 일반 아이콘 세트로 대체하지 마세요. 캐릭터 시스템이 곧 브랜드입니다.
- ``, `` 및 `` 외부에서는 대문자 변환을 사용하지 마세요. 대문자는 눈썹 및 바닥글 카테고리 헤더용으로 예약되어 있습니다.
- ``을 제외한 모든 면에 32px 이상으로 카드를 채우지 마세요. 표준 카드는 24px 내부 패딩으로 배치됩니다.
반응적 행동
중단점
| 이름 | 폭 | 주요 변경 사항 |
|---|---|---|
| 울트라와이드 | 1920px+ | 콘텐츠 최대 너비는 1280px로 유지됩니다. 외부 홈통은 ~80px까지 커집니다 |
| 데스크탑 대형 | 1440px | 기본값 — 4업 기능 타일 그리드, 240px 고정 문서 사이드바 표시 |
| 데스크탑 | 1280px | 외부 홈통이 더 좁은 동일한 레이아웃 |
| 데스크톱 소형 | 1024px | 4개 타일이 3개 타일로 축소됩니다. 문서 사이드바는 계속 표시됩니다 |
| 태블릿 | 768px | 3개 타일이 2개 타일로 축소됩니다. 문서 사이드바가 상단 아코디언으로 축소됩니다. 기본 탐색이 햄버거가 됩니다 |
| 모바일 | 480px | 단일 열의 모든 것; 영웅 `` 크기는 36px → ~28px |
| 모바일 좁은 | 320px | 섹션 패딩이 32px로 조여짐 |
터치 대상
모든 대화형 요소는 WCAG AA(≥ 40×40px)를 충족합니다. _`` 및 ``은 16px 패딩을 사용하여 높이 40px에 위치합니다. ``은 36px(AAA 바로 아래, 이 크기에서는 AA 위)에 위치합니다. ``은 높이가 ~32~36px이고 인라인 패딩을 통해 탭할 수 있는 14px 패딩이 ~44px까지 확장됩니다. 문서 사이드바 항목은 ~44px 탭 행에 대해 ~32px 줄 높이 + 6px 세로 패딩이 있는 14px 텍스트를 사용합니다.
축소 전략
- **기본 탐색:** 데스크톱 수평 클러스터 → 768px의 태블릿 햄버거 서랍. 노란색 '시작하기 - 무료' CTA는 모든 중단점에 계속 표시됩니다.
- **하위 탐색 스트립:** 데스크톱 가로 앵커 행 → 태블릿 가로 스크롤 → 모바일 선택 드롭다운.
- **마케팅 카드 그리드:** 4등분 → 3등분 → 2등분 → 1등분(1024, 768 및 480px); 모바일에서는 여백이 16픽셀에서 12픽셀로 줄어듭니다.
- **가격표:** 3개 → 2+1 → 1개(태블릿 이하에 스택)
- **문서 레이아웃:** 데스크톱 240px 사이드바 + 720px 기사 → 태블릿 사이드바가 상단 아코디언으로 접힘 → 모바일이 완전히 접힌 아코디언.
- **바닥글:** 6개 링크 열 → 태블릿에서 3개 → 모바일에서 2개.
- **섹션 패딩:** ``(80px) 데스크톱 → 64px 태블릿 → 48px 모바일.
- **히어로 헤드라인:** 데스크톱에서 ``(36px), 모바일에서 최대 28px로 크기 조정, 줄 높이는 1.5.
로 유지
이미지 동작
시스템의 유일한 "이미지"는 인라인 SVG로 렌더링된 손으로 그린 고슴도치 그림입니다. CSS `width: auto; max-width: 100%`을 통해 모든 중단점과 규모에서 자연스러운 측면을 유지합니다. 사진이 없기 때문에 반응형 아트 디렉션이 필요하지 않습니다.
반복 가이드
1. 한 번에 하나의 구성 요소에만 집중하세요. YAML 항목을 가져와서 모든 속성이 확인되는지 확인하세요.
2. 구성 요소 이름 및 토큰을 직접 참조하십시오(``, ``, ``). 다른 말로 표현하지 마세요.
3. 편집 후 _`npx @google/design.md lint DESIGN.md` 실행 — `broken-ref`, `contrast-ratio` 및 `orphaned-tokens` 경고 플래그는 자동으로 문제를 표시합니다.
4. 새 변형을 별도의 구성 요소 항목(`-pressed`, `-disabled`, `-focused`)으로 추가합니다. 산문 안에 묻어두지 마세요.
5. 기본 본문은 ``(16px / 400 / 1.5)입니다. 강조하려면 ``에 도달하세요. ``(24px / 800)은 마케팅 표시 순간을 위해 엄격하게 예약되어 있습니다.
6. 뷰포트당 `` 부족함을 유지하세요. 접힌 부분당 최대 하나의 노란색-주황색 알약입니다.
7. 새로운 컴포넌트를 도입할 때, 새로운 토큰을 추가하기 전에 기존 카드 + 6px 반경 + 크림 캔버스 어휘로 표현할 수 있는지 물어보세요. 시스템의 장점은 새로운 시스템이 거의 필요하지 않다는 것입니다.
알려진 격차
- **캡처되지 않은 모바일 스크린샷** — 반응형 동작은 데스크톱 증거 및 중단점 스택에서 PostHog의 모바일 패턴(햄버거 서랍, 단일 열 그리드, 문서 사이드바 아코디언)을 합성합니다.
- **호버 상태는 시스템 정책에 따라 문서화되지 않았습니다**.
- **캡처된 세트에 없는 제품 내 앱 크롬**(PostHog 대시보드, 차트, 세션 재생 플레이어) - 제품 내 분석 인터페이스가 아닌 마케팅 사이트가 여기에 문서화되어 있습니다.
- **인증된 크롬**(로그인 모달, 계정 대시보드, 결제 설정)이 캡처된 페이지에 없습니다.
- **포커스 상태 입력 이외의 양식 유효성 검사 상태**는 캡처된 표면에 없습니다.
- **마케팅 일러스트레이션 세트** — 고슴도치 캐릭터 포즈의 전체 라이브러리는 여기에 열거되지 않습니다. 특정 포즈(실험실 가운 고슴도치, 터미널 고슴도치, 해먹 고슴도치)는 스크린샷에 표시되지만 전체 자산 라이브러리는 페이지마다 다릅니다.
概要
PostHog のマーケティング システムは、ブランドの中心となる視覚的矛盾に基づいて構築されています。それは、フレンドリーなエンジニアリング スケッチブックであるかのように表現された、本格的なオープンソースの製品分析プラットフォームです。クロムは白ではなく温かみのあるクリーム色のキャンバス (`` — ``) 上で実行され、各ページには白衣を着た手描きのハリネズミのマスコット、ラウンジチェア、端末、老眼鏡が教科書の欄外のようにレイアウト全体に点在しています。 IBM Plex Sans Variable のタイプは、本文の場合はオリーブ グレー (`` — ``)、見出しの場合はディープ オリーブ チャコール (`` — ``) で配置され、重みは 400、600、700、および 800 の間でしっかりと段階的に変化し、色のない階層が作成されます。単一の飽和した黄オレンジ色の錠剤 (`` — ``) は、このブランドの唯一の騒々しい色彩の瞬間です。他はすべてクリーム、オリーブ、白のカードで、時折パステルカラーの吹き出しバンドが入っています。
このシステムには、特徴的な **2 モードの本文レイアウト**があります。マーケティング ページ (ホーム、ワークフロー、価格設定) は、パステル カラーのコールアウト バンドとクリーム色の白いカードのフィーチャー タイルが交互に配置され、ドキュメント ページには、丸いアウトライン アイコン セクション リストを備えた 240 ピクセルの粘着性のある左側のサイドバーが追加されます。コード サンプルは、白いドキュメント カード内の `` (ボディ インクを運ぶのと同じオリーブ炭で、裏返して使用) 上の全幅のダーク ブロックであり、システムの最も特徴的な視覚的瞬間を作り出しています。つまり、クリーム色のキャンバス上の白いカードの内側に、ダークオンダークのコード アイランドが浮かび、余白にハリネズミのマスコットが落書きされています。
セクションは__CODEBCK_852___ (80ピクセル)のリズムで積み重ねられ、その間にクリーム色のキャンバスが端から端まで続きます。クリームを中断する唯一のカラー バンドは、ドキュメント記事内のパステル `` / `-green` / `-red` / `-purple` の吹き出しパネルです。これは、「💡 ヒント」、「✅ 成功」、「⚠️ 警告」、「📘 情報」のインライン注釈が記載された柔らかい色合いのボックスです。装飾的なグラデーション、雰囲気のあるメッシュ背景、フルブリードのダーク ヒーローの章はありません。クリーム色のキャンバスは上から下まで途切れることなく続いており、ハリネズミが視覚的なアイデンティティ全体となっています。
_**主な特徴:**
- ウォーム クリーム キャンバス (`` — #eeefe9) 端から端まで、セクション間の表面の切り替えはありません — ページは 1 枚の連続したシートです
- 単一の黄オレンジ色の CTA 錠剤 (`` — #f7a501) と深いオリーブのテキスト (``) — ブランドの唯一の飽和色
- IBM Plex Sans ウェイト 400/500/600/700/800 のすべてのテキスト ロールにわたる変数 — システム内に他の書体はありません
- 手描きのハリネズミのマスコットが装飾システム全体としてレイアウト全体に散りばめられています — グラデーション、メッシュ、雰囲気のある背景はありません
- 4–8px 半径カードの語彙: ほとんどのコンポーネントの場合は `` (6px)、一部のコンテナの場合は `` (8px)、ピルチップの場合は完全に丸められます
- パステルの吹き出しバナー (``、__CODEBCK_863___、__CODEBCK_864___、__CODEBCK_865___) は、ヒント/警告/情報用の柔らかい色合いのサイド レールでドキュメント記事の本文を分割します
- ドキュメント ページに、丸いアウトライン アイコン セクション ナビゲーションと上部に「Ask PostHog AI」CTA を備えたスティッキー 240 ピクセル `` を追加
色
> **ソース ページ:** `/` (ホーム)、__CODEBCK_868___ (価格詳細)、__CODEBCK_869___ (ドキュメント記事)、__CODEBCK_870___ (製品機能ページ)。クロム パレットは 4 ページすべてで同一です。ドキュメント固有のアクセント (吹き出しバナー パステル、コードブロックのダーク サーフェス) のみがドキュメント エクスペリエンス内にのみ表示されます。
ブランドとアクセント_
- **PostHog Yellow** (`` — ``): ユニバーサル プライマリ CTA。すべてのナビゲーションの右上にあるスティッキーな「はじめましょう - 無料」の錠剤、ヒーロー CTA、価格帯の購読ボタン、フッターのサインアップ錠剤。 システムの唯一の飽和した色彩モーメント。
- **黄色の押下中** (`` — ``): 主要錠剤の押下状態。
- **黄色アクティブ** (`` — ``): 深く押し込まれた黄色 + システムのゴールドトーンの境界線のアクセント (インライン フォーム要素では珍しい 1 ピクセルのゴールド ルール)。
表面
- **キャンバス** (`` — ``): 温かみのあるクリーム色のページ背景。すべてのページでエンドツーエンド。ブランドの最も特徴的な表面の選択。
- **ソフト サーフェス** (`` — ``): ボタンの二次塗りつぶし、サブナビゲーション ストリップの背景、インライン コード チップの背景。
- **表面カード** (`` — ``): クリーム色のキャンバスの上にある真の白いカードとタイルの背景。支配的なカード表面。
- **Surface Doc** (`` — ``): ドキュメント記事の本文カードの内側に使用される、ほのかにクリーム色がかった温かみのある白です。ページの色調を統一するために、純白よりもわずかに柔らかいです。
- **サーフェイス ダーク** (`` — ``): コード ブロックの背景として反転して使用される深いオリーブ チャコール。 `` と同じヘクス — このブランドは、テキストとダーク コード サーフェスの両方に黒に近いオリーブ色を 1 つ使用しています。
- **ヘアライン** (`` — ``): 1 ピクセルのカード枠、テーブル ルール、フッター列の区切り線。
- **ヘアライン ソフト** (`` — ``): カード内の行分割線、ソフト インセット ルール。
- **オンダーク** (`` — ``): `` コード ブロックのプライマリ テキスト。
テキスト
- **インク** (`` — ``): 見出し、ライト上のボタン テキスト、プライマリ ナビゲーション リンク - クリーム色に対して黒に近い濃いオリーブ色炭。
- **本文** (`` — ``): デフォルトの段落テキスト、ドキュメント記事の本文、ホバー前のインライン リンクの色。ブランドで最もよく使用されるテキストの色。
- **チャコール** (`` — ``): 本文が柔らかすぎる箇所の本文テキストを強調しました。
- **ミュート** (`` — ``): メタデータ、フッター リンク テキスト、リスト内の二次注釈。
- **Ash** (`` — ``): 無効状態のテキストと最も強調されたユーティリティ。
- **ストーン** (`` — ``): 最も強調されないキャプション テキストと無効なアイコンの色。
セマンティック
- **リンク青** (`` — ``): 本文の散文内のインライン アンカー リンク。システムの主要な情報リンクの色。
- **リンク ティール** (`` — ``): 本文とペアになったドキュメント記事のインライン リンクのバリアント。
- **アクセント ブルー** (`` — ``) + **アクセント ブルー ソフト** (`` — ``): ドキュメント内の「💡 ヒント/情報」吹き出しバナー。
- **アクセントレッド** (`` — ``) + **アクセントレッドソフト** (`` — ``): 「⚠️ 警告/注意」コールアウトバナー。
- **アクセント グリーン** (`` — ``) + **アクセント グリーン ソフト** (`` — ``): 「✅ 成功 / ポジティブ」コールアウト バナー。
- **アクセント パープル** (`` — ``) + **アクセント パープル ソフト** (`` — ``): 「📘 注/参照」吹き出しバナー。
- **フォーカス リング** (`` — `rgba(59,130,246,0.5)`): インタラクティブ要素の周囲にある半透明の青いブラウザーのデフォルトのフォーカス リング。
タイポグラフィ
フォント ファミリー
**IBM Plex Sans Variable** はシステムの主要な面であり、ウェイト 400 (標準)、500 (中)、600 (セミボールド)、700 (ボールド)、および 800 (エクストラボールド) ですべてのページのすべてのテキスト役割にわたって使用されます。 `IBM Plex Sans` → `-apple-system` → `system-ui` → スタックを持たない広範なクロスプラットフォームを通じてフォールバックします。
**ui-monospace** + **Source Code Pro** には、14 ピクセル / 1.43 行の高さのコード サンプルとインライン コード チップが含まれています。 Source Code Pro は明示的な等幅表示です。 ui-monospace はインライン `` チップを処理します。
_ブランドの特徴的な選択は、**ミックス ウェイト ラダー** (400 / 500 / 600 / 700 / 800) です。ほとんどのクロムは 400 ～ 700 の範囲にあり、ウェイト 800 は、ホームおよび価格設定の大型ディスプレイの見出し専用に予約されています。これにより、システムに「エンジニアリング ブログ」のような雰囲気が与えられます。階層は、サイズよりもはるかに重さのコントラストから構築されます。
階層_
|トークン |サイズ |重量 |行の高さ |文字間隔 | |
を使用します
|---|---|---|---|---|---|
| `` | 36ピクセル | 700 | 1.5 | 0 |ヒーロー見出し (「製品を構築する新しい方法」) |
| `` | 24ピクセル | 800 | 1.33 | -0.6ピクセル |セクションの見出し、価格帯名 |
| `` | 21ピクセル | 700 | 1.4 | -0.5ピクセル |サブセクションの見出し、ドキュメント記事 H2 |
| `` | 20ピクセル | 700 | 1.4 | 0 |カード グループのタイトル、グリッド内の見出し |
| `` | 18ピクセル | 700 | 1.5 | 0 (大文字) |セクション眉毛 (「製品の使用法を理解する」) |
| `` | 18ピクセル | 600 | 1.56 | 0 |大文字と小文字が混在したカード タイトル (大文字変換なし) |
| `` | 16ピクセル | 400 | 1.5 | 0 |本文コピー、デフォルトの段落 |
| `` | 16ピクセル | 600 | 1.5 | 0 |インライン強調、プライマリ ナビゲーション リンク、カード内ラベル |
| `` | 15ピクセル | 400 | 1.71 | 0 |ドキュメントの記事本文、マーケティング カードの説明 |
| `` | 15ピクセル | 600 | 1.71 | 0 |ドキュメント記事内のサブセクションの強調 |
| `` | 14ピクセル | 500 | 1.43 | 0 |ドキュメントのサイドバー項目、メタデータ、リスト内キャプション |
| `` | 14ピクセル | 700 | 1.71 | 0 |カードアイブロウ、リンククラスターヘッダー |
| `` | 13ピクセル | 500 | 1.5 | 0 |コンパクトなメタデータのキャプション |
| `` | 12ピクセル | 600 | 1.33 | 0 (大文字) |インライン バッジ ラベル |
| `` | 12ピクセル | 700 | 1.33 | 0 (大文字) |セクション - 眉毛ユーティリティ テキスト、フッター カテゴリ ヘッダー |
| `` | 16ピクセル | 400 | 1.5 | 0 |インライン本文アンカー リンク |
| `` | 14ピクセル | 700 | 1.5 | 0 |標準の主/副ボタン ラベル |
| `` | 13ピクセル | 500 | 1 | 0 |ピルチップ / コンパクト CTA |
| `` | 14ピクセル | 400 | 1.43 | 0 |コード ブロックのコンテンツ |
| `` | 14ピクセル | 500 | 1.43 | 0 |インライン コード チップ |
原則_
_階層は、重み + サイズ + 時折の大文字変換から明示的に構築されます。斜体スタイル、装飾的な表示バリアント、独自のフェイスはありません。最大の表示瞬間では、-0.6px トラッキングでウェイト 800 が使用され、ボディは 1.5 行の高さで 400 に落ち着きます。他のすべてはその間の帯域を埋めます。セクションの眉毛 (`` および ``) は一貫して大文字でレンダリングされ、ドキュメントのレイアウトに教科書の章のような雰囲気を与えます。
フォントの代替に関する注意
IBM Plex Sans Variable はオープンソースであり、Google Fonts によってホストされています。代わりのものは必要ありません。直接ロードしてください。代替品が本当に必要な場合は、**Inter** が 5 つの重みすべてで最も近い幾何学的一致になります。 Inter のディスプレイ サイズ上の文字間隔 -0.5 ～ -0.6 ピクセルと組み合わせて、Plex のディスプレイ トラッキングを近似します。 等空間の場合、**JetBrains Mono** は、本体サイズの Source Code Pro のほぼ完璧な代替品です。
レイアウト
間隔システム
- **基本単位:** 8 ピクセル (吹き出しバナーやピル ボタンのインライン ギャップを狭くするために、より細かい 2/4/6 ピクセルのステップを使用)。
- **トークン (前付):** `` (2px) · `` (4px) · `` (8px) · `` (12px) · `` (16px) · `` (24 ピクセル) · `` (32 ピクセル) · `` (80 ピクセル).
- **ユニバーサル セクション リズム:** セット内のすべてのページは、主要なコンテンツ ブロック間の垂直方向のギャップとして `` (80 ピクセル) を使用します。カード グリッドは `` (16 ピクセル) の余白を使用します。カードの内部パディングは、製品カードの場合は `` (24 ピクセル)、価格帯カードの場合は `` (32 ピクセル) になります。
グリッドとコンテナ
- **最大幅:** デスクトップでは最大 1280 ピクセルのコンテンツ領域 (24 ピクセルの余白付き) (ウルトラワイドでは最大 48 ピクセル)。ドキュメントの記事本文は最大幅約 720 ピクセルで、240 ピクセルのサイドバーが記事列を中央より右に押し出します。
- **マーケティング カード グリッド:** デスクトップで 4 アップ、1024 ピクセルで 3 アップ、768 ピクセルで 2 アップ、480 ピクセルで 1 アップ。カードは 1:1 または 4:3 の固定比率を保持します。
- **価格階層グリッド:** デスクトップでは 3 アップ、プラン情報の左側のレールがあり、タブレットでは 2 アップ + 1、モバイルでは 1 アップに折りたたまれます。
- **ドキュメントのレイアウト:** デスクトップ 240 ピクセルの固定左側サイドバー + ~720 ピクセルの記事本文 + (オプション) 200 ピクセルの右目次レール = ~1160 ピクセルのコンテンツ幅。
- **フッター:** デスクトップでは 6 列の水平リンク グリッド、タブレットでは 3 列、モバイルでは 2 列。
ホワイトスペースの哲学
ホワイトスペースはマーケティング ページではたっぷりとありますが、ドキュメント ページでは狭くなります。ホーム ページとワークフロー ページは、__CODEBCK_967___ (16 ピクセル) の余白と 24 ピクセルの内部パディングを備えた機能タイルをスタックします。一方、ドキュメント記事は、情報密度を最大化するために段落間の内部スペースを `` (12 ピクセル) に狭めます。クリーム色のキャンバスはすべてのセクションを連続的に通っており、装飾的な仕切りや陰影のあるセクションバンドはありません。セクションの眉の下の 1 ピクセルのヘアラインとフッター列ルールのみがコンテンツ ブロックを区切ります。
標高と深さ
|レベル |治療 | |
を使用します
|---|---|---|
| 0 — フラット |境界線も影もありません |キャンバス オン キャンバス ブロック、ヒーロー テキスト、本文セクションのデフォルト |
| 1 — ヘアラインの境界線 | 1 ピクセルのソリッド `` |マーケティング カード、価格帯カード、ドキュメントのサイドバー項目、フッター列のルール |
| 2 — ヘアラインソフト | 1px ソリッド `` |隣接する行間のカード内の行区切り |
| 3 — 反転されたダーク コード ブロック | `` 塗りつぶし |ドキュメント カード内のコード サンプル — システムの唯一の「高層」サーフェスでは、影ではなく色が使用されます |
_このシステムには、マーケティングまたは製品のクロムにドロップシャドウの標高がありません。カードはクリーム色の上に平らに置かれ、薄いオリーブ色の境界線が付いています。単一の反転モーメントは、ドキュメント記事の本文カード内で使用されるダーク コード ブロックの表面です。
装飾の深さ_
奥行きは、CSS 効果ではなく、完全にイラストとパステルの吹き出しバンド システムから得られます:
- **手描きのハリネズミ マスコット** — さまざまな衣装 (白衣、端末、ラウンジチェア、虫眼鏡、ハンモック、帽子) を着たキャラクターが欄外としてページ全体に散りばめられています。常にフラット カラーのイラストとしてレンダリングされ、写真では表示されません。
- _**パステルの吹き出しバナー** — `` / `-green` / `-red` / `-purple` ドキュメント記事内の柔らかい色合いのサイドレール パネル。それぞれの接頭辞として絵文字アイコン (💡 ✅ ⚠️ 📘) が付けられ、ヒント/警告/メモのコピー。
- _**コード ブロック** — `` 上の全幅のダーク オリーブ チャコール パネルと白いコード テキスト。 システムの最も映画的な表面。白いドキュメント カードの内側で使用されます。
- HTMLTAG_471___**ドキュメント サイドバーの製品アイコンの概要** - 小さな丸い正方形のミニイラスト (グラフ アイコン、ファネル、セッション リプレイ アイコン) が各主要製品セクションをマークします。
図形
境界線の半径スケール
|トークン |値 | |
を使用します
|---|---|---|
| `` | 0ピクセル |サブナビゲーション ストリップ、フッター、ドキュメント サイドバー、プライマリ ナビゲーション — フラットな構造面 |
| `` | 2ピクセル |インライン `` チップ、マイクロルールのハイライト |
| `` | 4ピクセル |インライン ボタン、フォーム入力、マイクロ チップ |
| `` | 6ピクセル |マーケティング カード、価格設定カード、ドキュメント カード、コード ブロック、すべての標準 CTA |
| `` | 8ピクセル |タブ上部の隅 (アクティブなタブでは`6px 6px 0 0`) およびまれに大きなコンテナ |
| `` | 9999ピクセル |錠剤チップと錠剤スタイルの CTA (ナビゲーションの「はじめる — 無料」スティッキー CTA) |
半径ボキャブラリーは、ほぼすべての場合、約 4 ～ 6 ピクセルに集中します。完全に丸められた唯一の要素は、錠剤スタイルのスティッキー ナビゲーション CTA とインライン錠剤チップです。
写真の幾何学
写真撮影はありません。視覚要素は
に制限されます
- **ハリネズミのキャラクター イラスト** — 〜 80 ピクセル (カード内のマスコット) から〜 240 ピクセル (ヒーローのイラスト) までのフラット カラーの漫画のハリネズミ。常にネイティブ アスペクトで、フレームに切り取られることはありません。
- **ドキュメント サイドバーの製品アイコンの概要** — 20 ～ 24 ピクセルの角丸正方形のイラスト。
- **吹き出しバナー内の 14 ～ 16 ピクセルのインライン絵文字** (💡 ✅ ⚠️ 📘) — 装飾ではなく機能的な図像として使用されます。
- **ホームページ上のセクションのイラスト** - 「製品の使用方法を理解する」/「習慣を身に付ける」/「発売前にテストする」の各機能行と組み合わせられた小さなハリネズミのビネット。
コンポーネント
> **システム ポリシーごとにホバー状態が文書化されていません**。 各仕様はデフォルトとアクティブ/押下のみを対象としています。
ボタン
**`button-primary`** — ユニバーサル PostHog CTA
- 背景__CODEBCK_986___(黄オレンジ)、テキスト__CODEBCK_987___(濃いオリーブ)、タイプ__CODEBCK_988___、パディング__CODEBCK_989___、高さ__CODEBCK_990___、丸め__CODEBCK_991___.
- 「無料で始めましょう」(固定トップナビゲーション CTA)、「サインアップ」、「無料で試す」、「購読」など、すべての主要なアクションに使用されます。
- 押された状態は__CODEBCK_992___にあります — バックグラウンドは__CODEBCK_993___に下がります。
**`button-secondary`** — クリーム色のキャンバスのソフトな代替品
- 背景__CODEBCK_995___ (``)、テキスト__CODEBCK_997___、タイプ__CODEBCK_998___、パディング__CODEBCK_999___、高さ__CODEBCK_1000___、丸め__CODEBCK_1001___.
- 「営業担当者と話す」、「ドキュメントを読む」、「デモを見る」 — 黄色の主アクションと組み合わせた第 2 層アクション。
**`button-tertiary`** — ゴースト テキスト ボタン
- 背景透明、テキスト__CODEBCK_1003___、タイプ__CODEBCK_1004___、パディング__CODEBCK_1005___、丸め__CODEBCK_1006___.
- 最も重要度の低いアクション: 「すべてのドキュメントを表示→」、「すべての機能を参照」。
**`button-disabled`**
- 背景__CODEBCK_1008___、テキスト__CODEBCK_1009___ — フラットなソフトクリームグレー。
タブとチップ
**`product-tab`** + **`product-tab-active`** — 主要な製品セクションのタブ
- デフォルト: 透明な背景、テキスト__CODEBCK_1012___、タイプ__CODEBCK_1013___、パディング__CODEBCK_1014___、丸め__CODEBCK_1015___.
- アクティブ: 背景が__CODEBCK_1016___ (白)、テキスト__CODEBCK_1017___に反転 — 選択の視覚的な信号としてタブカードがクリーム色のキャンバスから浮き上がります。
**`pill-tab`** + **`pill-tab-active`** — コンパクト フィルター錠剤
- デフォルト: 透明な背景、テキスト__CODEBCK_1020___、タイプ__CODEBCK_1021___、パディング__CODEBCK_1022___、丸め__CODEBCK_1023___.
- アクティブ: 背景が__CODEBCK_1024___、テキスト__CODEBCK_1025___に反転 — チップは選択時に完全に反転します。
**`badge-uppercase`** — テキストのみのユーティリティ ラベル
- 背景は透明、テキスト__CODEBCK_1027___は__CODEBCK_1028___ (大文字) — リスト内カテゴリの接頭辞 (「FEATURE FLAG」、「EXPERIMENT」、「HEATMAP」) として使用されます。
**`badge-promo`** — 小型インライン錠剤チップ
- 背景__CODEBCK_1030___、テキスト__CODEBCK_1031___、入力__CODEBCK_1032___、パディング__CODEBCK_1033___、丸め__CODEBCK_1034___.
- 「新規」、「ベータ」、「近日発売」の錠剤ラベルがカードに重ねて表示されます。
入力とフォーム
**`text-input`** + **`text-input-focused`**
- デフォルト: 背景__CODEBCK_1037___、テキスト__CODEBCK_1038___、1ピクセル単色__CODEBCK_1039___、タイプ__CODEBCK_1040___、パディング__CODEBCK_1041___、高さ__CODEBCK_1042___、四捨五入``.
- 焦点: 同じ表面。 2 ピクセルの実線__CODEBCK_1044___ の境界線が、1 ピクセルのヘアラインと半透明の__CODEBCK_1045___ アウトラインを置き換えます。
**`search-input`** — ユーティリティ検索フィールド (ドキュメントのサイドバー、「Ask PostHog AI」)
- _`text-input` と同じ寸法で、_`` の左端に拡大鏡のグリフが付いています。
カードとコンテナ
**`product-card`** — マーケティング タイル/フィーチャー カード
- コンテナ: 背景__CODEBCK_1050___ (白)、1ピクセルのソリッド__CODEBCK_1051___、パディング__CODEBCK_1052___ (24ピクセル)、丸め__CODEBCK_1053___.
- レイアウト: 左上に小さなハリネズミのイラスト、__CODEBCK_1054___ タイトル、__CODEBCK_1055___ 説明、オプション ional `` 「詳細はこちら→」リンク。
**`doc-card`** — ドキュメント記事本文カード
- コンテナ: 背景__CODEBCK_1058___ (`` 温白)、1ピクセル単色__CODEBCK_1060___、パディング__CODEBCK_1061___ (24ピクセル)、丸め__CODEBCK_1062___.
- ドキュメント ページ内に記事本文セクション、コード ブロック、吹き出しバナー、表を含めます。
**`feature-tile`** — 小さなマーケティング機能タイル
- コンテナ: 背景__CODEBCK_1064___、1ピクセルのソリッド__CODEBCK_1065___、パディング__CODEBCK_1066___ (20ピクセル)、丸め__CODEBCK_1067___.
- ホーム ページとワークフロー ページの 3 アップまたは 4 アップのグリッドで使用され、小さなアイコンと 1 行の説明と組み合わせられます。
_**`pricing-tier-card`** — 料金プラン カード
- コンテナ: 背景__CODEBCK_1069___、1ピクセルのソリッド__CODEBCK_1070___、パディング__CODEBCK_1071___ (32ピクセル)、丸め__CODEBCK_1072___.
- レイアウト:__CODEBCK_1073___ (24px / 800 / -0.6px) の階層名、大きな価格 + 期間、チェックアイコンの黒丸付き機能チェックリスト、下部にプライマリまたはセカンダリ CTA。
**`hedgehog-mascot-card`** — 余白にアンカーされたハリネズミのフィーチャー カード
- _`` と同じクロムですが、手書きのハリネズミのイラストが右余白または右上隅に固定されています。これは、ブランドの署名カードのバリエーションです。
コールアウト バナー
_**`banner-tip-blue`** + **`banner-tip-green`** + **`banner-tip-red`** + **`banner-tip-purple`**
- 背景__CODEBCK_1080___ / `` / `` / ``、テキスト__CODEBCK_1084___、タイプ__CODEBCK_1085___、パディング__CODEBCK_1086___、丸め``.
- それぞれの先頭にインライン絵文字アイコン (💡 / ✅ / ⚠️ / 📘) が付き、その後にインライン ラベルと本文のコピーが続きます。
- _ドキュメント記事の本文内にのみ表示されます。 4 色の吹き出しファミリーは、長い形式のドキュメント内のインラインのヒント/警告/情報を表す、ブランドの情報アーキテクチャの語彙です。
コード
**`code-block`** — ドキュメント カード内のダーク コード サンプル
- コンテナ: 背景__CODEBCK_1089___ (濃いオリーブ炭)、__CODEBCK_1091___内のテキスト__CODEBCK_1090___、パディング__CODEBCK_1092___、丸め__CODEBCK_1093___.
- 構文の強調表示では、落ち着いたアクセント カラー (キーワードには青、文字列には緑、数値には紫) が使用されます。吹き出しバナーで使用される明るいアクセント カラーは決して使用されません。
**`inline-code`** — 小型インライン `` チップ
- 背景__CODEBCK_1096___、__CODEBCK_1098___内のテキスト__CODEBCK_1097___、パディング__CODEBCK_1099___、丸め__CODEBCK_1100___ (2px)。
- コード スニペットと識別子をマークするために本文の散文内で使用されます。
ナビゲーション
**`primary-nav`**
- 背景__CODEBCK_1102___ (クリーム色 - ページと同じ)、テキスト__CODEBCK_1103___、高さ__CODEBCK_1104___、タイプ__CODEBCK_1105___、丸め__CODEBCK_1106___.
- レイアウト (デスクトップ): 左側に PostHog ワードマーク + ハリネズミのロゴ、ナビゲーション メニュー クラスター (「価格設定 · ドキュメント · コミュニティ · 会社」)、検索グリフのある右クラスター、「ログイン」リンク、および常に黄色の `` 「はじめに — 無料」の錠剤が右端に固定されています。
**`sub-nav-strip`** — セカンダリ ナビゲーション バー (プライマリの下)
- 背景__CODEBCK_1109___、テキスト__CODEBCK_1110___、__CODEBCK_1111___、高さ__CODEBCK_1112___、四捨五入__CODEBCK_1113___.
- ワークフロー/製品ページのプライマリ ナビゲーションの直下に配置され、セクション アンカー リンクと右側にコンテキストの「はじめる →」リンクが表示されます。
_**`doc-sidebar`** — スティッキードキュメントページの左側のサイドバー
- 背景__CODEBCK_1115___、テキスト__CODEBCK_1116___、__CODEBCK_1117___、幅__CODEBCK_1118___、四捨五入__CODEBCK_1119___.
- レイアウト: 上部に「Ask PostHog AI」と検索入力し、次に小さな丸いアウトラインアイコンのミニイラストを備えたセクションヘッダーの垂直リストが表示され、アクティブなヘッダーの下にインデントされたネストされた項目リンクが表示されます。
_**トップナビゲーション (モバイル)**
- 左側にハンバーガー メニュー アイコン、中央に PostHog ワードマーク + ハリネズミ、右側に検索 + 黄色の付箋「Get Started — free」CTA。プライマリ ナビゲーションは、左側からスライドしてフルハイトの引き出しに折りたたまれます。
フッター
**`footer-section`**
- 背景__CODEBCK_1121___、__CODEBCK_1123___内のテキスト__CODEBCK_1122___、パディング__CODEBCK_1124___、丸め__CODEBCK_1125___、1ピクセル__CODEBCK_1126___のトップルール。
- レイアウト: 6 列の水平リンク グリッド (製品、リソース、会社、コミュニティ、価格設定、法務)、各列には `` (大文字) ヘッダーと、__CODEBCK_1128___ ``.
のリンクの垂直リストがあります。
- 下の行: PostHog ワードマーク + 小さなハリネズミのイラスト、著作権は__CODEBCK_1130___ ``、右端のソーシャル アイコン行。
インライン
**`link-inline`** — 本文散文アンカーリンク
- `` (``) 本文はデフォルトで下線なし。フォーカスに下線が表示されます。ブランドの主要なインライン リンクの色。
推奨事項と禁止事項
実行
- __CODEBCK_1135___ (クリーム — ``) をページ本文として使用します。キャンバスを真っ白に置き換えないでください。
- __CODEBCK_1137___ (黄色からオレンジ色) は、CTA の一次錠剤のみに予約してください。 「無料で始めましょう」という扱いがブランドのアンカーです。
- ブランドのワードマークを、独立したワードマークとしてではなく、ハリネズミのイラストとともにレンダリングします。 ハリネズミがブランドのアイデンティティです。
- すべてのテキスト役割で IBM Plex Sans 変数を使用します (本文 400、強調 600/700、表示 800)。
- コンテンツ セクションを__CODEBCK_1138___ (80 ピクセル) のリズムで積み重ね、間に装飾的な仕切りを付けません。クリーム色のキャンバスを中断することなく続けてください。
- __CODEBCK_1139___ / `-green` / `-red` / `-purple` は、ヒント/警告/メモ パネルのドキュメント記事本文内でのみ使用してください。マーケティング クロムを 4 色の吹き出しファミリーから除外してください。
- すべてのコード サンプルを暗い `` サーフェスと組み合わせます。インライン `` チップは `` (表面がクリーム色の柔らかいチップ) を使用します。
- ホーム ページとワークフロー ページの機能タイルの余白にハリネズミのマスコットのイラストを固定します。これは、システムの特徴的な装飾です。
しないでください
- カードにドロップ シャドウを導入しないでください。カードはクリーム色の上に平らに置かれ、細いオリーブの枠線のみが付いています。
- 2 番目の飽和した有彩色の CTA を追加しないでください。システム内で目立つ色は黄色とオレンジだけです。
- クリーム色のキャンバスを純白またはフルブリードのダークヒーロー バンドに置き換えないでください。クリームがブランドです。
- 4 色の吹き出しバナー パステル (``、__CODEBCK_1147___、__CODEBCK_1148___、__CODEBCK_1149___) をマーケティング カードの背景として使用しないでください。これらはインライン ドキュメント コンテンツのみに属します。
- _ハリネズミのイラストを一般的なアイコン セットに置き換えないでください。キャラクター システムがブランドです。
- _``、__CODEBCK_1151___、_`` 以外では大文字変換を使用しないでください。大文字は眉毛とフッター カテゴリ ヘッダーに予約されています。
- `` を除き、カードの四辺を 32 ピクセル以上でパディングしないでください。標準カードは 24 ピクセルの内部パディングに収まります。
応答動作
ブレークポイント_
|名前 |幅 |主な変更点 |
|---|---|---|
|ウルトラワイド | 1920px以上 |コンテンツの最大幅は 1280 ピクセルに保たれます。外側の溝は最大 80 ピクセルまで拡大 |
|デスクトップ-大 | 1440ピクセル |デフォルト — 4 アップ機能タイル グリッド、240 ピクセルのスティッキー ドキュメント サイドバーが表示 |
|デスクトップ | 1280ピクセル |外側の側溝を狭くした同じレイアウト |
|デスクトップ-小型 | 1024ピクセル | 4 アップのタイルは 3 アップに崩壊します。ドキュメントのサイドバーは表示されたままになります |
|タブレット | 768ピクセル | 3 アップのタイルは 2 アップに崩壊します。ドキュメントのサイドバーは上部のアコーディオンに折りたたまれます。プライマリ ナビゲーションがハンバーガーになります |
|モバイル | 480ピクセル |すべてを単一列にします。ヒーロー `` 36 ピクセル → ~28 ピクセル |
|モバイルナロー | 320ピクセル |セクションのパディングが 32 ピクセルに縮小 |
タッチターゲット_
すべてのインタラクティブ要素は WCAG AA (≥ 40×40px) を満たしています。 `` と `` は、高さ 40 ピクセル、パディング 16 ピクセルに配置されます。 `` は 36 ピクセルに位置します (このサイズでは AAA のすぐ下、AA より上)。 `` は高さ約 32 ～ 36 ピクセルで、14 ピクセルのパディングがインライン パディング経由でタップ可能な最大 44 ピクセルまで拡張されます。ドキュメントサイドバー項目は、行の高さ約 32 ピクセルの 14 ピクセルのテキストと、タップ行約 44 ピクセルの垂直パディング 6 ピクセルを使用します。
戦略の崩壊
- **プライマリ ナビゲーション:** デスクトップ水平クラスター → 768 ピクセルのタブレット ハンバーガー ドロワー。 黄色の「無料で始めましょう」CTA は、すべてのブレークポイントで表示されたままになります。
- **サブナビゲーション ストリップ:** デスクトップの水平アンカー行 → タブレットの水平スクロール → モバイル選択ドロップダウン。
- _**マーケティング カード グリッド:** 1024、768、および 480 ピクセルで 4 アップ → 3 アップ → 2 アップ → 1 アップ。モバイルではガターが 16 ピクセルから 12 ピクセルに下がります。
- **価格グリッド:** 3 アップ → 2+1 → 1 アップがタブレット以下に積み重ねられます。
- **ドキュメントのレイアウト:** デスクトップ 240 ピクセルのサイドバー + 720 ピクセルの記事 → タブレットのサイドバーは上部のアコーディオンに折りたたまれます → モバイルは完全に折りたたまれたアコーディオン。
- **フッター:** 6 アップのリンク列 → タブレットで 3 アップ → モバイルで 2 アップ。
- **セクション パディング:** `` (80 ピクセル) デスクトップ → 64 ピクセル タブレット → 48 ピクセル モバイル。
- **ヒーロー見出し:** デスクトップでは `` (36 ピクセル)、モバイルでは最大 28 ピクセルに拡大縮小、行の高さは 1.5 のままです。
画像の動作
システム内の唯一の「画像」は、インライン SVG としてレンダリングされた手描きのハリネズミのイラストです。これらは、CSS `width: auto; max-width: 100%` を介して、あらゆるブレークポイントとスケールで自然な側面を保持します。写真がないため、レスポンシブなアート ディレクションは必要ありません。
反復ガイド
1.一度に 1 つのコンポーネントに焦点を当てます。 YAML エントリを取得し、すべてのプロパティが解決されることを確認します。
2.コンポーネント名とトークンを直接参照します (``、__CODEBCK_1163___、__CODEBCK_1164___) - 言い換えはしないでください。
3.編集後に `npx @google/design.md lint DESIGN.md` を実行します — `broken-ref`、__CODEBCK_1167___、__CODEBCK_1168___ の警告フラグが自動的に発行されます。
4.新しいバリアントを個別のコンポーネント エントリとして追加します (`-pressed`、__CODEBCK_1170___、__CODEBCK_1171___)。散文の中に埋め込まないでください。
5.デフォルトの本文は `` (16px / 400 / 1.5) です。強調したい場合は、__CODEBCK_1173___ に手を伸ばしてください。 `` (24px / 800) は、マーケティング表示用にのみ予約してください。
6.ビューポートごとに `` を少なくしてください。1 つの折り目につき最大 1 つの黄オレンジ色の錠剤です。
7。新しいコンポーネントを導入するときは、新しいトークンを追加する前に、既存のカード + 6px-radius + Cream-Canvas ボキャブラリーで表現できるかどうかを検討してください。このシステムの強みは、新しいシステムがほとんど必要ないことです。
既知のギャップ
- **モバイルのスクリーンショットはキャプチャされません** — 応答動作は、デスクトップの証拠とブレークポイント スタックから PostHog のモバイル パターン (ハンバーガー ドロワー、単一列グリッド、ドキュメント サイドバー アコーディオン) を合成します。
- **ホバー状態はシステム ポリシーによって文書化されていません**。
- **製品内アプリ クロム** (PostHog ダッシュボード、チャート、セッション リプレイ プレーヤー) はキャプチャされたセットには含まれていません。製品内の分析インターフェイスではなく、マーケティング サイトがここに文書化されています。
- **認証されたクロム** (ログイン モーダル、アカウント ダッシュボード、請求設定) がキャプチャされたページにありません。
- **フォーカスされた状態の入力を超えるフォーム検証状態**は、キャプチャされたサーフェスには存在しません。
- **マーケティング イラスト セット** — ハリネズミのキャラクター ポーズの完全なライブラリはここには列挙されていません。特定のポーズ (白衣のハリネズミ、ターミナル ハリネズミ、ハンモック ハリネズミ) がスクリーンショットに表示されていることが示されていますが、完全なアセット ライブラリはページごとに異なります。