④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
This commit is contained in:
admin committed
1 parent
fa0a9026c8
commit
5afeb6b78a
4184 files changed
+326
-70
No files matched your search
@@ -0,0 +1,259 @@
|
||||
# Design System Inspired by PostHog
|
||||
|
||||
> Category: Backend & Data
|
||||
> Product analytics. Playful hedgehog branding, developer-friendly dark UI.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
PostHog's website feels like a startup's internal wiki that escaped into the wild — warm, irreverent, and deliberately anti-corporate. The background isn't the expected crisp white or dark void of developer tools; it's a warm, sage-tinted cream (`#fdfdf8`) that gives every surface a handmade, paper-like quality. Colors lean into earthy olive greens and muted sage rather than the conventional blues and purples of the SaaS world. It's as if someone designed a developer analytics platform inside a cozy garden shed.
|
||||
|
||||
The personality is the star: hand-drawn hedgehog illustrations, quirky action figures, and playful imagery replace the stock photography and abstract gradients typical of B2B SaaS. IBM Plex Sans Variable serves as the typographic foundation — a font with genuine technical credibility (created by IBM, widely used in developer contexts) deployed here with bold weights (700, 800) on headings and generous line-heights on body text. The typography says "we're serious engineers" while everything around it says "but we don't take ourselves too seriously."
|
||||
|
||||
The interaction design carries the same spirit: hover states flash PostHog Orange (`#F54E00`) text — a hidden brand color that doesn't appear at rest but surprises on interaction. Dark near-black buttons (`#1e1f23`) use opacity reduction on hover rather than color shifts, and active states scale slightly. The border system uses sage-tinted grays (`#bfc1b7`) that harmonize with the olive text palette. Built on Tailwind CSS with Radix UI and shadcn/ui primitives, the technical foundation is modern and component-driven, but the visual output is stubbornly unique.
|
||||
|
||||
**Key Characteristics:**
|
||||
- Warm sage/olive color palette instead of conventional blues — earthy and approachable
|
||||
- IBM Plex Sans Variable font at bold weights (700/800) for headings with generous 1.50+ line-heights
|
||||
- Hidden brand orange (`#F54E00`) that only appears on hover interactions — a delightful surprise
|
||||
- Hand-drawn hedgehog illustrations and playful imagery — deliberately anti-corporate
|
||||
- Sage-tinted borders (`#bfc1b7`) and backgrounds (`#eeefe9`) creating a unified warm-green system
|
||||
- Dark near-black CTAs (`#1e1f23`) with opacity-based hover states
|
||||
- Content-heavy editorial layout — the site reads like a magazine, not a typical landing page
|
||||
- Tailwind CSS + Radix UI + shadcn/ui component architecture
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Olive Ink** (`#4d4f46`): Primary text color — a distinctive olive-gray that gives all text a warm, earthy tone
|
||||
- **Deep Olive** (`#23251d`): Link text and high-emphasis headings — near-black with green undertone
|
||||
- **PostHog Orange** (`#F54E00`): Hidden brand accent — appears only on hover states, a vibrant orange that surprises
|
||||
|
||||
### Secondary & Accent
|
||||
- **Amber Gold** (`#F7A501`): Secondary hover accent on dark buttons — warm gold that pairs with the orange
|
||||
- **Gold Border** (`#b17816`): Special button borders — an amber-gold for featured CTAs
|
||||
- **Focus Blue** (`#3b82f6`): Focus ring color (Tailwind default) — the only blue in the system, reserved for accessibility
|
||||
|
||||
### Surface & Background
|
||||
- **Warm Parchment** (`#fdfdf8`): Primary page background — warm near-white with yellow-green undertone
|
||||
- **Sage Cream** (`#eeefe9`): Input backgrounds, secondary surfaces — light sage tint
|
||||
- **Light Sage** (`#e5e7e0`): Button backgrounds, tertiary surfaces — muted sage-green
|
||||
- **Warm Tan** (`#d4c9b8`): Featured button backgrounds — warm tan/khaki for emphasis
|
||||
- **Hover White** (`#f4f4f4`): Universal hover background state
|
||||
|
||||
### Neutrals & Text
|
||||
- **Olive Ink** (`#4d4f46`): Primary body and UI text
|
||||
- **Muted Olive** (`#65675e`): Secondary text, button labels on light backgrounds
|
||||
- **Sage Placeholder** (`#9ea096`): Placeholder text, disabled states — warm sage-green
|
||||
- **Sage Border** (`#bfc1b7`): Primary border color — olive-tinted gray for all borders
|
||||
- **Light Border** (`#b6b7af`): Secondary border, toolbar borders — slightly darker sage
|
||||
|
||||
### Semantic & Accent
|
||||
- **PostHog Orange** (`#F54E00`): Hover text accent — signals interactivity and brand personality
|
||||
- **Amber Gold** (`#F7A501`): Dark button hover accent — warmth signal
|
||||
- **Focus Blue** (`#3b82f6` at 50% opacity): Keyboard focus rings — accessibility-only color
|
||||
- **Dark Text** (`#111827`): High-contrast link text — near-black for important links
|
||||
|
||||
### Gradient System
|
||||
- No gradients on the marketing site — PostHog's visual language is deliberately flat and warm
|
||||
- Depth is achieved through layered surfaces and border containment, not color transitions
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Display & Body**: `IBM Plex Sans Variable` — variable font (100–700+ weight range). Fallbacks: `IBM Plex Sans, -apple-system, system-ui, Avenir Next, Avenir, Segoe UI, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Arial`
|
||||
- **Monospace**: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New` — system monospace stack
|
||||
- **Code Display**: `Source Code Pro` — with fallbacks: `Menlo, Consolas, Monaco`
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|
||||
|------|------|------|--------|-------------|----------------|-------|
|
||||
| Display Hero | IBM Plex Sans Variable | 30px | 800 | 1.20 | -0.75px | Extra-bold, tight, maximum impact |
|
||||
| Section Heading | IBM Plex Sans Variable | 36px | 700 | 1.50 | 0px | Large but generous line-height |
|
||||
| Feature Heading | IBM Plex Sans Variable | 24px | 700 | 1.33 | 0px | Feature section titles |
|
||||
| Card Heading | IBM Plex Sans Variable | 21.4px | 700 | 1.40 | -0.54px | Slightly unusual size (scaled) |
|
||||
| Sub-heading | IBM Plex Sans Variable | 20px | 700 | 1.40 | -0.5px | Content sub-sections |
|
||||
| Sub-heading Uppercase | IBM Plex Sans Variable | 20px | 700 | 1.40 | 0px | Uppercase transform for labels |
|
||||
| Body Emphasis | IBM Plex Sans Variable | 19.3px | 600 | 1.56 | -0.48px | Semi-bold callout text |
|
||||
| Label Uppercase | IBM Plex Sans Variable | 18px | 700 | 1.50 | 0px | Uppercase category labels |
|
||||
| Body Semi | IBM Plex Sans Variable | 18px | 600 | 1.56 | 0px | Semi-bold body text |
|
||||
| Body | IBM Plex Sans Variable | 16px | 400 | 1.50 | 0px | Standard reading text |
|
||||
| Body Medium | IBM Plex Sans Variable | 16px | 500 | 1.50 | 0px | Medium-weight body |
|
||||
| Body Relaxed | IBM Plex Sans Variable | 15px | 400 | 1.71 | 0px | Relaxed line-height for long reads |
|
||||
| Nav / UI | IBM Plex Sans Variable | 15px | 600 | 1.50 | 0px | Navigation and UI labels |
|
||||
| Caption | IBM Plex Sans Variable | 14px | 400–700 | 1.43 | 0px | Small text, various weights |
|
||||
| Small Label | IBM Plex Sans Variable | 13px | 500–700 | 1.00–1.50 | 0px | Tags, badges, micro labels |
|
||||
| Micro | IBM Plex Sans Variable | 12px | 400–700 | 1.33 | 0px | Smallest text, some uppercase |
|
||||
| Code | Source Code Pro | 14px | 500 | 1.43 | 0px | Code snippets and terminal |
|
||||
|
||||
### Principles
|
||||
- **Bold heading dominance**: Headings use 700–800 weight — PostHog's typography is confident and assertive, not whispery
|
||||
- **Generous body line-heights**: Body text at 1.50–1.71 line-height creates extremely comfortable reading — the site is content-heavy and optimized for long sessions
|
||||
- **Fractional sizes**: Several sizes (21.4px, 19.3px, 13.7px) suggest a fluid/scaled type system rather than fixed stops — likely computed from Tailwind's rem scale at non-standard base
|
||||
- **Uppercase as category signal**: Bold uppercase labels (18px–20px weight 700) are used for product category headings — a magazine-editorial convention
|
||||
- **Selective negative tracking**: Letter-spacing tightens on display text (-0.75px at 30px) but relaxes to 0px on body — headlines compress, body breathes
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
- **Dark Primary**: `#1e1f23` background, white text, 6px radius, `10px 12px` padding. Hover: opacity 0.7 with Amber Gold text. Active: opacity 0.8 with slight scale transform. The main CTA — dark and confident
|
||||
- **Sage Light**: `#e5e7e0` background, Olive Ink (`#4d4f46`) text, 4px radius, `4px` padding. Hover: `#f4f4f4` bg with PostHog Orange text. Compact utility button
|
||||
- **Warm Tan Featured**: `#d4c9b8` background, black text, no visible radius. Hover: same orange text flash. Featured/premium actions
|
||||
- **Input-style**: `#eeefe9` background, Sage Placeholder (`#9ea096`) text, 4px radius, 1px `#b6b7af` border. Looks like a search/filter control
|
||||
- **Near-white Ghost**: `#fdfdf8` background, Olive Ink text, 4px radius, transparent 1px border. Minimal presence
|
||||
- **Hover pattern**: All buttons flash PostHog Orange (`#F54E00`) or Amber Gold (`#F7A501`) text on hover — the brand's signature interaction surprise
|
||||
|
||||
### Cards & Containers
|
||||
- **Bordered Card**: Warm Parchment (`#fdfdf8`) or white background, 1px `#bfc1b7` border, 4px–6px radius — clean and minimal
|
||||
- **Sage Surface Card**: `#eeefe9` background for secondary content containers
|
||||
- **Shadow Card**: `0px 25px 50px -12px rgba(0, 0, 0, 0.25)` — a single deep shadow for elevated content (modals, dropdowns)
|
||||
- **Hover**: Orange text flash on interactive cards — consistent with button behavior
|
||||
|
||||
### Inputs & Forms
|
||||
- **Default**: `#eeefe9` background, `#9ea096` placeholder text, 1px `#b6b7af` border, 4px radius, `2px 0px 2px 8px` padding
|
||||
- **Focus**: `#3b82f6` ring at 50% opacity (Tailwind blue focus ring)
|
||||
- **Text color**: `#374151` for input values — darker than primary text for readability
|
||||
- **Border variations**: Multiple border patterns — some inputs use compound borders (top, left, bottom-only)
|
||||
|
||||
### Navigation
|
||||
- **Top nav**: Warm background, IBM Plex Sans at 15px weight 600
|
||||
- **Dropdown menus**: Rich mega-menu structure with product categories
|
||||
- **Link color**: Deep Olive (`#23251d`) for nav links, underline on hover
|
||||
- **CTA**: Dark Primary button (#1e1f23) in the nav — "Get started - free"
|
||||
- **Mobile**: Collapses to hamburger with simplified menu
|
||||
|
||||
### Image Treatment
|
||||
- **Hand-drawn illustrations**: Hedgehog mascot and quirky illustrations — the signature visual element
|
||||
- **Product screenshots**: UI screenshots embedded in device frames or clean containers
|
||||
- **Action figures**: Playful product photography of hedgehog figurines — anti-corporate
|
||||
- **Trust logos**: Enterprise logos (Airbus, GOV.UK) displayed in a muted trust bar
|
||||
- **Aspect ratios**: Mixed — illustrations are irregular, screenshots are 16:9 or widescreen
|
||||
|
||||
### AI Chat Widget
|
||||
- Floating PostHog AI assistant with speech bubble — an interactive product demo embedded in the marketing site
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- **Base unit**: 8px
|
||||
- **Scale**: 2px, 4px, 6px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 34px
|
||||
- **Section padding**: 32px–48px vertical between sections (compact for a content-heavy site)
|
||||
- **Card padding**: 4px–12px internal (notably compact)
|
||||
- **Component gaps**: 4px–8px between related elements
|
||||
|
||||
### Grid & Container
|
||||
- **Max width**: 1536px (largest breakpoint), with content containers likely 1200px–1280px
|
||||
- **Column patterns**: Varied — single column for text content, 2-3 column grids for feature cards, asymmetric layouts for product demos
|
||||
- **Breakpoints**: 13 defined — 1px, 425px, 482px, 640px, 768px, 767px, 800px, 900px, 1024px, 1076px, 1160px, 1280px, 1536px
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Content-dense by design**: PostHog's site is information-rich — whitespace is measured, not lavish
|
||||
- **Editorial pacing**: Content sections flow like a magazine with varied layouts keeping the eye moving
|
||||
- **Illustrations as breathing room**: Hand-drawn hedgehog art breaks up dense content sections naturally
|
||||
|
||||
### Border Radius Scale
|
||||
- **2px**: Small inline elements, tags (`span`)
|
||||
- **4px**: Primary UI components — buttons, inputs, dropdowns, menu items (`button`, `div`, `combobox`)
|
||||
- **6px**: Secondary containers — larger buttons, list items, card variants (`button`, `div`, `li`)
|
||||
- **9999px**: Pill shape — badges, status indicators, rounded tags (`span`, `div`)
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Level 0 (Flat) | No shadow, warm parchment background | Page canvas, most surfaces |
|
||||
| Level 1 (Border) | `1px solid #bfc1b7` (Sage Border) | Card containment, input borders, section dividers |
|
||||
| Level 2 (Compound Border) | Multiple 1px borders on different sides | Input groupings, toolbar elements |
|
||||
| Level 3 (Deep Shadow) | `0px 25px 50px -12px rgba(0, 0, 0, 0.25)` | Modals, floating elements, mega-menu dropdowns |
|
||||
|
||||
### Shadow Philosophy
|
||||
PostHog's elevation system is remarkably minimal — only one shadow definition exists in the entire system. Depth is communicated through:
|
||||
- **Border containment**: Sage-tinted borders (`#bfc1b7`) at 1px create gentle warm separation
|
||||
- **Surface color shifts**: Moving from `#fdfdf8` to `#eeefe9` to `#e5e7e0` creates layered depth without shadows
|
||||
- **The single shadow**: The one defined shadow (`0 25px 50px -12px`) is reserved for floating elements — modals, dropdowns, popovers. It's a deep, dramatic shadow that creates clear separation when needed
|
||||
|
||||
### Decorative Depth
|
||||
- **Illustration layering**: Hand-drawn hedgehog art creates visual depth naturally
|
||||
- **No gradients or glow**: The flat, warm surface system relies entirely on border and surface-color differentiation
|
||||
- **No glassmorphism**: Fully opaque surfaces throughout
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use the olive/sage color family (#4d4f46, #23251d, #bfc1b7) for text and borders — the warm green undertone is essential to the brand
|
||||
- Flash PostHog Orange (#F54E00) on hover states — it's the hidden brand signature
|
||||
- Use IBM Plex Sans at bold weights (700/800) for headings — the font carries technical credibility
|
||||
- Keep body text at generous line-heights (1.50–1.71) — the content-heavy site demands readability
|
||||
- Maintain the warm parchment background (#fdfdf8) — not pure white, never cold
|
||||
- Use 4px border-radius for most UI elements — keep corners subtle and functional
|
||||
- Include playful, hand-drawn illustration elements — the personality is the differentiator
|
||||
- Apply opacity-based hover states (0.7 opacity) on dark buttons rather than color shifts
|
||||
|
||||
### Don't
|
||||
- Use blue, purple, or typical tech-SaaS colors — PostHog's palette is deliberately olive/sage
|
||||
- Add heavy shadows — the system uses one shadow for floating elements only; everything else uses borders
|
||||
- Make the design look "polished" or "premium" in a conventional sense — PostHog's charm is its irreverent, scrappy energy
|
||||
- Use tight line-heights on body text — the generous 1.50+ spacing is essential for the content-heavy layout
|
||||
- Apply large border-radius (12px+) on cards — PostHog uses 4px–6px, keeping things tight and functional
|
||||
- Remove the orange hover flash — it's a core interaction pattern, not decoration
|
||||
- Replace illustrations with stock photography — the hand-drawn hedgehog art is the brand
|
||||
- Use pure white (#ffffff) as page background — the warm sage-cream (#fdfdf8) tint is foundational
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile Small | <425px | Single column, compact padding, stacked cards |
|
||||
| Mobile | 425px–640px | Slight layout adjustments, larger touch targets |
|
||||
| Tablet | 640px–768px | 2-column grids begin, nav partially visible |
|
||||
| Tablet Large | 768px–1024px | Multi-column layouts, expanded navigation |
|
||||
| Desktop | 1024px–1280px | Full layout, 3-column feature grids, expanded mega-menu |
|
||||
| Large Desktop | 1280px–1536px | Max-width container, generous margins |
|
||||
| Extra Large | >1536px | Centered container at max-width |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons: 4px–6px radius with `4px–12px` padding — compact but usable
|
||||
- Nav links: 15px text at weight 600 with adequate padding
|
||||
- Mobile: Hamburger menu with simplified navigation
|
||||
- Inputs: Generous vertical padding for thumb-friendly forms
|
||||
|
||||
### Collapsing Strategy
|
||||
- **Navigation**: Full mega-menu with dropdowns → hamburger menu on mobile
|
||||
- **Feature grids**: 3-column → 2-column → single column stacked
|
||||
- **Typography**: Display sizes reduce across breakpoints (30px → smaller)
|
||||
- **Illustrations**: Scale within containers, some may hide on mobile for space
|
||||
- **Section spacing**: Reduces proportionally while maintaining readability
|
||||
|
||||
### Image Behavior
|
||||
- Illustrations scale responsively within containers
|
||||
- Product screenshots maintain aspect ratios
|
||||
- Trust logos reflow into multi-row grids on mobile
|
||||
- AI chat widget may reposition or simplify on small screens
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary Text: Olive Ink (`#4d4f46`)
|
||||
- Dark Text: Deep Olive (`#23251d`)
|
||||
- Hover Accent: PostHog Orange (`#F54E00`)
|
||||
- Dark CTA: Near-Black (`#1e1f23`)
|
||||
- Button Surface: Light Sage (`#e5e7e0`)
|
||||
- Page Background: Warm Parchment (`#fdfdf8`)
|
||||
- Border: Sage Border (`#bfc1b7`)
|
||||
- Placeholder: Sage Placeholder (`#9ea096`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on warm parchment background (#fdfdf8) with 30px IBM Plex Sans heading at weight 800, line-height 1.20, letter-spacing -0.75px, olive ink text (#4d4f46), and a dark CTA button (#1e1f23, 6px radius, white text, opacity 0.7 on hover)"
|
||||
- "Design a feature card with #fdfdf8 background, 1px #bfc1b7 border, 4px radius, IBM Plex Sans heading at 20px weight 700, and 16px body text at weight 400 with 1.50 line-height in olive ink (#4d4f46)"
|
||||
- "Build a navigation bar with warm background, IBM Plex Sans links at 15px weight 600 in deep olive (#23251d), underline on hover, and a dark CTA button (#1e1f23) at the right"
|
||||
- "Create a button group: primary dark (#1e1f23, white text, 6px radius), secondary sage (#e5e7e0, #4d4f46 text, 4px radius), and ghost/text button — all flash #F54E00 orange text on hover"
|
||||
- "Design an input field with #eeefe9 background, 1px #b6b7af border, 4px radius, #9ea096 placeholder text, focus ring in #3b82f6 at 50% opacity"
|
||||
|
||||
### Iteration Guide
|
||||
When refining existing screens generated with this design system:
|
||||
1. Verify the background is warm parchment (#fdfdf8) not pure white — the sage-cream warmth is essential
|
||||
2. Check that all text uses the olive family (#4d4f46, #23251d) not pure black or neutral gray
|
||||
3. Ensure hover states flash PostHog Orange (#F54E00) — if hovering feels bland, you're missing this
|
||||
4. Confirm borders use sage-tinted gray (#bfc1b7) not neutral gray — warmth runs through every element
|
||||
5. The overall tone should feel like a fun, scrappy startup wiki — never corporate-polished or sterile
|
||||
@@ -0,0 +1,32 @@
|
||||
# PostHog Usage
|
||||
|
||||
Design System 2.0 package guide for OpenDesign agents and reviewers.
|
||||
|
||||
## Read Order
|
||||
|
||||
1. Read this file first to understand the package contract.
|
||||
2. Read `DESIGN.md` for visual intent, constraints, and anti-patterns.
|
||||
3. Paste `tokens.css` into the first artifact `<style>` block before writing component CSS.
|
||||
4. Use `components.manifest.json` for the compact component inventory; open `components.html` when exact selectors or states matter.
|
||||
5. Inspect `preview/` pages when a visual sanity check is useful.
|
||||
|
||||
## Design Highlights
|
||||
|
||||
- Warm sage/olive color palette instead of conventional blues — earthy and approachable
|
||||
- IBM Plex Sans Variable font at bold weights (700/800) for headings with generous 1.50+ line-heights
|
||||
- Hidden brand orange (`#F54E00`) that only appears on hover interactions — a delightful surprise
|
||||
- Hand-drawn hedgehog illustrations and playful imagery — deliberately anti-corporate
|
||||
|
||||
## Do
|
||||
|
||||
- Preserve the schema token names exactly so cross-brand switching stays reliable.
|
||||
- Use `--accent` for primary actions, links, focus states, and one clear focal element.
|
||||
- Reuse component groups from `components.manifest.json` before inventing new controls.
|
||||
- Treat `source/` files as audit evidence for the bundled fixture backfill.
|
||||
|
||||
## Avoid
|
||||
|
||||
- Avoid raw hex values outside the copied `:root` token block.
|
||||
- Avoid redefining Tailwind or design-token values independently of `tokens.css`.
|
||||
- Avoid claiming original upstream source evidence; this package is based on the curated bundled fixture.
|
||||
- Avoid adding new component recipes that are not represented in `components.html` or `DESIGN.md`.
|
||||
@@ -0,0 +1,827 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>PostHog — reference components</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Reference fixture for design-systems/posthog. Every visible
|
||||
value comes from tokens.css; the page itself honors PostHog's
|
||||
rules — warm parchment surfaces, olive-tinted text, IBM Plex
|
||||
Sans bold headings, sage-bordered cards with no shadow, and the
|
||||
signature hover orange (#F54E00) that flashes on interaction."
|
||||
/>
|
||||
|
||||
<style>
|
||||
/* :root paste — sourced verbatim from design-systems/posthog/tokens.css.
|
||||
Comments stripped per the design-system token-fixture sync contract. */
|
||||
:root {
|
||||
--bg: #fdfdf8;
|
||||
--surface: #eeefe9;
|
||||
--surface-warm: #e5e7e0;
|
||||
|
||||
--fg: #4d4f46;
|
||||
--fg-2: #23251d;
|
||||
--muted: #65675e;
|
||||
--meta: #9ea096;
|
||||
|
||||
--border: #bfc1b7;
|
||||
--border-soft: color-mix(in oklab, var(--border), var(--bg) 50%);
|
||||
|
||||
--accent: #F54E00;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
|
||||
--success: #16a34a;
|
||||
--warn: #F7A501;
|
||||
--danger: #dc2626;
|
||||
|
||||
--font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-xl: 24px;
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 44px;
|
||||
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--tracking-display: -0.025em;
|
||||
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
--section-y-desktop: 48px;
|
||||
--section-y-tablet: 32px;
|
||||
--section-y-phone: 24px;
|
||||
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
--container-max: 1280px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 12px;
|
||||
}
|
||||
|
||||
/* ─── Reset (minimal) ───────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 400;
|
||||
line-height: var(--leading-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* ─── Layout primitives ─────────────────────────────────────── */
|
||||
.container {
|
||||
max-width: var(--container-max);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--container-gutter-desktop);
|
||||
}
|
||||
section { padding-block: var(--section-y-desktop); }
|
||||
section + section { border-top: 1px solid var(--border); }
|
||||
@media (max-width: 1023px) {
|
||||
.container { padding-inline: var(--container-gutter-tablet); }
|
||||
section { padding-block: var(--section-y-tablet); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.container { padding-inline: var(--container-gutter-phone); }
|
||||
section { padding-block: var(--section-y-phone); }
|
||||
}
|
||||
|
||||
/* ─── Typography ────────────────────────────────────────────── */
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-display);
|
||||
margin: 0;
|
||||
color: var(--fg-2);
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
h1 {
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: 800;
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
h2 {
|
||||
font-size: var(--text-3xl);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
h3 {
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
p { margin: 0; }
|
||||
|
||||
.lede {
|
||||
font-size: var(--text-lg);
|
||||
line-height: 1.5;
|
||||
color: var(--fg);
|
||||
font-weight: 400;
|
||||
}
|
||||
.body-muted { color: var(--muted); }
|
||||
.body-meta { color: var(--meta); font-size: var(--text-sm); }
|
||||
.body-sm { font-size: var(--text-sm); }
|
||||
|
||||
.eyebrow {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
line-height: 1.33;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.stack-2 > * + * { margin-block-start: var(--space-2); }
|
||||
.stack-3 > * + * { margin-block-start: var(--space-3); }
|
||||
.stack-4 > * + * { margin-block-start: var(--space-4); }
|
||||
.stack-6 > * + * { margin-block-start: var(--space-6); }
|
||||
|
||||
/* ─── Buttons ───────────────────────────────────────────────────
|
||||
* Primary CTA is the Dark Primary from DESIGN.md §4 — near-black
|
||||
* (--fg-2 territory) with white text and the brand's signature
|
||||
* opacity-based hover (0.7) plus an Amber Gold text flash. Active
|
||||
* scales slightly. Sage button uses --surface-warm and flashes
|
||||
* PostHog Orange text on hover — the hidden brand signature. */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
padding: 10px 14px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
background-color var(--motion-fast) var(--ease-standard),
|
||||
color var(--motion-fast) var(--ease-standard),
|
||||
opacity var(--motion-fast) var(--ease-standard),
|
||||
transform var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
.btn:active { transform: scale(0.98); }
|
||||
|
||||
.btn-primary {
|
||||
background: var(--fg-2);
|
||||
color: var(--bg);
|
||||
padding: 10px 16px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.btn-primary:hover { opacity: 0.7; color: var(--warn); }
|
||||
.btn-primary:active { opacity: 0.85; transform: scale(0.97); }
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--surface-warm);
|
||||
color: var(--fg);
|
||||
border-color: transparent;
|
||||
}
|
||||
.btn-secondary:hover { background: var(--surface); color: var(--accent); }
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--fg);
|
||||
border-color: var(--border);
|
||||
}
|
||||
.btn-ghost:hover { color: var(--accent); border-color: var(--fg); }
|
||||
|
||||
/* Hidden-orange link — the brand's signature interaction surprise.
|
||||
Body links rest in --fg-2 with a sage underline that swaps to
|
||||
orange on hover. DESIGN.md §1: "hover states flash PostHog
|
||||
Orange — a hidden brand color that doesn't appear at rest". */
|
||||
a {
|
||||
color: var(--fg-2);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
text-decoration-thickness: 1px;
|
||||
text-decoration-color: var(--border);
|
||||
transition:
|
||||
color var(--motion-fast) var(--ease-standard),
|
||||
text-decoration-color var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
a:hover {
|
||||
color: var(--accent);
|
||||
text-decoration-color: var(--accent);
|
||||
}
|
||||
a:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
/* ─── Badges / pills ───────────────────────────────────────── */
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
line-height: 1.33;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.pill-soft {
|
||||
background: var(--surface);
|
||||
color: var(--fg-2);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.pill-warn {
|
||||
background: var(--surface);
|
||||
color: var(--warn);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.pill-status {
|
||||
background: var(--surface-warm);
|
||||
color: var(--fg-2);
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.pill-status .dot {
|
||||
width: 6px; height: 6px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
/* ─── Cards ─────────────────────────────────────────────────────
|
||||
* Bordered cards per DESIGN.md §4 — Warm Parchment background,
|
||||
* 1px Sage Border, 6px radius (--radius-md). No shadow at rest:
|
||||
* DESIGN.md §6 reserves the only shadow for floating elements.
|
||||
* Hover swaps the heading color to PostHog Orange to keep the
|
||||
* "flash on interact" pattern alive across the system. */
|
||||
.card {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
transition:
|
||||
border-color var(--motion-fast) var(--ease-standard),
|
||||
color var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.card:hover { border-color: var(--fg); }
|
||||
.card:hover h3 { color: var(--accent); }
|
||||
.card-warm { background: var(--surface); border-color: var(--border); }
|
||||
|
||||
/* Floating panel — the ONE sanctioned shadow per DESIGN.md §6.
|
||||
Used for the hero status panel and any modal/dropdown. */
|
||||
.panel {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--elev-raised);
|
||||
padding: var(--space-5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
/* ─── Inputs ────────────────────────────────────────────────────
|
||||
* Default per DESIGN.md §4 Inputs & Forms: --surface (#eeefe9)
|
||||
* background, sage placeholder, 1px sage border, 4px radius
|
||||
* (--radius-sm). Focus swaps in the Focus Blue ring at 50%
|
||||
* opacity from --focus-ring. Field value text uses --fg-2 for
|
||||
* readability on the warm surface. */
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.field label {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: var(--fg-2);
|
||||
}
|
||||
.field input,
|
||||
.field select,
|
||||
.field textarea {
|
||||
background: var(--surface);
|
||||
color: var(--fg-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 10px 12px;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.4;
|
||||
outline: none;
|
||||
transition:
|
||||
border-color var(--motion-fast) var(--ease-standard),
|
||||
box-shadow var(--motion-fast) var(--ease-standard);
|
||||
}
|
||||
.field input::placeholder { color: var(--meta); }
|
||||
.field input:focus-visible,
|
||||
.field select:focus-visible,
|
||||
.field textarea:focus-visible {
|
||||
border-color: var(--fg);
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
.field-help {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ─── Code / kbd ───────────────────────────────────────────── */
|
||||
code, kbd, .mono {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--fg-2);
|
||||
line-height: 1.2;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 500;
|
||||
}
|
||||
.code-block {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.5;
|
||||
color: var(--fg-2);
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
.code-block .tok-cmt { color: var(--meta); }
|
||||
.code-block .tok-fn { color: var(--accent); }
|
||||
.code-block .tok-str { color: var(--fg); }
|
||||
|
||||
/* ─── Distinctive: hedgehog mark ────────────────────────────────
|
||||
* Hand-drawn Max-style hedgehog rendered as a thick-stroke SVG
|
||||
* — the brand's anti-corporate signature per DESIGN.md §4 Image
|
||||
* Treatment. Sketchy, deliberate, never polished. Reused in the
|
||||
* hero panel, the nav lockup, and the empty-state form copy. */
|
||||
.hedgehog {
|
||||
color: var(--fg-2);
|
||||
}
|
||||
|
||||
/* ─── Section-specific layout ──────────────────────────────── */
|
||||
.nav-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-block: var(--space-4);
|
||||
gap: var(--space-4);
|
||||
}
|
||||
.nav-logo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 800;
|
||||
color: var(--fg-2);
|
||||
letter-spacing: -0.01em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-logo:hover { color: var(--accent); text-decoration: none; }
|
||||
.nav-links {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
.nav-links a {
|
||||
font-family: var(--font-display);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--fg-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-links a:hover { color: var(--accent); }
|
||||
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
|
||||
gap: var(--space-12);
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
|
||||
}
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
margin-block-start: var(--space-6);
|
||||
}
|
||||
.hero-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
margin-block-start: var(--space-4);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--muted);
|
||||
}
|
||||
.hero-meta .dot {
|
||||
width: 4px; height: 4px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--meta);
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: var(--space-4);
|
||||
margin-block-start: var(--space-6);
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
@media (max-width: 639px) {
|
||||
.features-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
.feature-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
.feature-tag::before {
|
||||
content: "";
|
||||
width: 6px; height: 6px;
|
||||
background: var(--accent);
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
|
||||
gap: var(--space-12);
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 1023px) {
|
||||
.form-row { grid-template-columns: 1fr; }
|
||||
}
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-6);
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.row-between {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.row-cluster {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.divider-soft {
|
||||
height: 1px;
|
||||
background: var(--border-soft);
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
.icon { width: 16px; height: 16px; flex-shrink: 0; }
|
||||
.trust-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-6);
|
||||
flex-wrap: wrap;
|
||||
color: var(--meta);
|
||||
font-family: var(--font-display);
|
||||
font-weight: 700;
|
||||
font-size: var(--text-sm);
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
NAV — exercises: .nav-logo (hedgehog mark + wordmark with
|
||||
orange hover), .nav-links (15px·600 with orange flash),
|
||||
.btn-primary (Dark CTA per DESIGN.md §4 Navigation).
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<nav class="nav-row" aria-label="Primary">
|
||||
<a href="./DESIGN.md" class="nav-logo">
|
||||
<svg class="hedgehog" width="28" height="28" viewBox="0 0 32 32"
|
||||
fill="none" stroke="currentColor" stroke-width="1.75"
|
||||
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M5 22c0-5 4-9 9-9s9 4 9 9" />
|
||||
<path d="M3 22h22" />
|
||||
<path d="M9 13l-2-3M12 11l-1-3M15 10l0-3M18 10l1-3M21 11l2-3M24 13l3-2" />
|
||||
<circle cx="19" cy="18" r="0.9" fill="currentColor" />
|
||||
<path d="M23 19l3 0M25 18l1 0.5" />
|
||||
</svg>
|
||||
PostHog
|
||||
</a>
|
||||
<div class="nav-links" role="navigation">
|
||||
<a href="./tokens.css">Product</a>
|
||||
<a href="./DESIGN.md">Docs</a>
|
||||
<a href="./tokens.css">Pricing</a>
|
||||
<a href="./DESIGN.md">Community</a>
|
||||
</div>
|
||||
<div class="row-cluster">
|
||||
<a href="./tokens.css" class="btn btn-secondary">Log in</a>
|
||||
<a href="./tokens.css" class="btn btn-primary">
|
||||
Get started — free
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
HERO — exercises: .eyebrow, h1 (44px·800, -0.025em tracking),
|
||||
.lede, .btn-primary / .btn-ghost / hidden-orange link hover,
|
||||
hero status .panel (the one sanctioned shadow), .pill-status
|
||||
with success dot, .pill-warn for the "1.0 incoming" pill,
|
||||
kbd inline keyboard cues, .trust-row enterprise muted bar.
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section data-od-id="hero">
|
||||
<div class="hero-grid">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Reference fixture · posthog</p>
|
||||
<h1 style="max-width: 18ch">
|
||||
How engineers build better products.
|
||||
</h1>
|
||||
<p class="lede body-muted" style="max-width: 56ch">
|
||||
PostHog is the open-source all-in-one platform for product
|
||||
analytics, session replay, feature flags, A/B tests, and
|
||||
the surveys you keep meaning to send. Built by engineers
|
||||
who got tired of stitching together six SaaS dashboards
|
||||
that all charge per-seat for the privilege.
|
||||
</p>
|
||||
|
||||
<div class="hero-actions">
|
||||
<a href="./tokens.css" class="btn btn-primary">
|
||||
Get started — free
|
||||
<svg class="icon" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="1.75"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
aria-hidden="true">
|
||||
<path d="M5 12h14M13 6l6 6-6 6" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="./DESIGN.md" class="btn btn-ghost">
|
||||
Read the docs
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="hero-meta">
|
||||
<span>Self-host with <kbd>docker compose up</kbd></span>
|
||||
<span class="dot" aria-hidden="true"></span>
|
||||
<span>1M events/mo free</span>
|
||||
<span class="dot" aria-hidden="true"></span>
|
||||
<span>No credit card</span>
|
||||
</div>
|
||||
|
||||
<hr class="divider-soft" style="margin-block: var(--space-6)" />
|
||||
|
||||
<p class="eyebrow">Trusted by engineering teams at</p>
|
||||
<div class="trust-row" aria-label="Trusted by">
|
||||
<span>Airbus</span>
|
||||
<span>GOV.UK</span>
|
||||
<span>Y Combinator</span>
|
||||
<span>Hasura</span>
|
||||
<span>Raycast</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="panel" aria-label="Live event stream">
|
||||
<div class="row-between">
|
||||
<span class="pill pill-soft">Live · last 60s</span>
|
||||
<span class="pill pill-status">
|
||||
<span class="dot" aria-hidden="true"></span>
|
||||
Ingesting
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="stack-2">
|
||||
<h3 style="line-height: 1.3">12,418 events</h3>
|
||||
<p class="body-muted body-sm">
|
||||
Across <strong style="color: var(--fg-2)">2,107</strong>
|
||||
anonymous people, 38 countries, and one suspicious cron
|
||||
in <code style="color: var(--accent)">us-east-1</code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre class="code-block" aria-label="Event payload"><span class="tok-cmt"># last event seen 0.4s ago</span>
|
||||
posthog.<span class="tok-fn">capture</span>(
|
||||
distinct_id=<span class="tok-str">"[email protected]"</span>,
|
||||
event=<span class="tok-str">"button_clicked"</span>,
|
||||
properties={
|
||||
<span class="tok-str">"label"</span>: <span class="tok-str">"get_started"</span>,
|
||||
<span class="tok-str">"$session_id"</span>: <span class="tok-str">"01HX…"</span>
|
||||
}
|
||||
)</pre>
|
||||
|
||||
<div class="row-between">
|
||||
<span class="body-sm body-muted">
|
||||
<kbd>⌘</kbd> <kbd>K</kbd> to jump
|
||||
</span>
|
||||
<a href="./tokens.css" class="body-sm">View replay →</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
FEATURES — exercises: .card (bordered, no shadow, 6px radius,
|
||||
hover swaps title to PostHog Orange — the hidden brand
|
||||
signature), .feature-tag (orange dot eyebrow), nested links
|
||||
with sage-to-orange underline swap, .body-meta footer line.
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section data-od-id="features">
|
||||
<div class="stack-3">
|
||||
<p class="eyebrow">What's in the box</p>
|
||||
<h2 style="max-width: 28ch">
|
||||
Every analytics tool a product engineer actually needs.
|
||||
</h2>
|
||||
<p class="body-muted" style="max-width: 60ch">
|
||||
One database, one billing line, one set of definitions for
|
||||
what an “active user” is. Hover any card to flash
|
||||
the hidden brand orange — DESIGN.md §1 calls it the
|
||||
signature interaction surprise.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
<article class="card">
|
||||
<span class="feature-tag">Analytics</span>
|
||||
<h3>Product analytics that don't lie</h3>
|
||||
<p class="body-muted body-sm">
|
||||
Funnels, retention, paths, lifecycle — all built on
|
||||
raw events you actually own. No sampling, no aggregated
|
||||
hand-waving, no “trust us, the dashboard is
|
||||
right.”
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Explore funnels →</a>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<span class="feature-tag">Replay</span>
|
||||
<h3>Watch what your users actually did</h3>
|
||||
<p class="body-muted body-sm">
|
||||
Session replay with console logs, network requests, and
|
||||
the rage clicks your support team have been complaining
|
||||
about all week. Privacy masking on by default.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">See a session →</a>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<span class="feature-tag">Experiments</span>
|
||||
<h3>Feature flags & A/B tests</h3>
|
||||
<p class="body-muted body-sm">
|
||||
Ship a flag in five minutes, run an experiment in five
|
||||
days, kill the bad arm in five seconds. Same data
|
||||
warehouse as your analytics — the results never
|
||||
disagree with the funnel.
|
||||
</p>
|
||||
<a href="./tokens.css" class="body-sm">Roll one out →</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
FORM — exercises: .field (sage-cream bg, sage border, Focus
|
||||
Blue ring at 50%), .field-help, .btn-primary submit, code
|
||||
inline, .pill-warn footer note. The right column reuses
|
||||
.panel to show the email confirmation preview.
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section data-od-id="form">
|
||||
<div class="form-row">
|
||||
<div class="stack-4">
|
||||
<p class="eyebrow">Self-host or hosted</p>
|
||||
<h2 style="max-width: 22ch">
|
||||
Two clicks from zero to first event.
|
||||
</h2>
|
||||
<p class="body-muted" style="max-width: 52ch">
|
||||
Drop us your work email and we'll send the install
|
||||
command that fits your stack — <code>npm</code>,
|
||||
<code>pnpm</code>, <code>pip</code>, <code>go get</code>,
|
||||
or one truly heroic <code>curl | bash</code>. No
|
||||
calendars, no “quick chat” bookings.
|
||||
</p>
|
||||
|
||||
<hr class="divider-soft" />
|
||||
|
||||
<p class="body-meta">
|
||||
By the way: PostHog is open source under MIT. The
|
||||
hosted plan exists because someone has to pay the
|
||||
S3 bill. Read the
|
||||
<a href="./DESIGN.md">design spec</a> or
|
||||
<a href="./tokens.css">browse the tokens</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form class="form" onsubmit="event.preventDefault();">
|
||||
<div class="row-between">
|
||||
<p class="eyebrow" style="color: var(--fg-2)">Start free</p>
|
||||
<span class="pill pill-warn">1M events / mo</span>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="email">Work email</label>
|
||||
<input id="email" type="email"
|
||||
placeholder="[email protected]"
|
||||
autocomplete="email" required />
|
||||
<p class="field-help">
|
||||
We'll never sell it. We'll barely even use it.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="company">Company</label>
|
||||
<input id="company" type="text"
|
||||
placeholder="The Cottage Garden Co."
|
||||
autocomplete="organization" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="stack">Where should we point you?</label>
|
||||
<select id="stack">
|
||||
<option>JavaScript / TypeScript</option>
|
||||
<option>Python</option>
|
||||
<option>Go</option>
|
||||
<option>Ruby</option>
|
||||
<option>iOS · Android</option>
|
||||
<option>Just curious, send the marketing</option>
|
||||
</select>
|
||||
<p class="field-help">
|
||||
We'll match the install snippet to your runtime.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="row-cluster" style="margin-block-start: var(--space-2)">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Send the install command
|
||||
</button>
|
||||
<button type="button" class="btn btn-ghost">
|
||||
Or self-host instead
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="body-sm body-muted" style="margin-block-start: var(--space-2)">
|
||||
No credit card. No marketing automation gauntlet.
|
||||
The hedgehog approves.
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,574 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"brandId": "posthog",
|
||||
"source": {
|
||||
"componentsHtml": "components.html",
|
||||
"tokensCss": "tokens.css"
|
||||
},
|
||||
"fixture": {
|
||||
"title": "PostHog — reference components",
|
||||
"description": "Reference fixture for design-systems/posthog. Every visible value comes from tokens.css; the page itself honors PostHog's rules — warm parchment surfaces, olive-tinted text, IBM Plex Sans bold headings, sage-bordered cards with no shadow, and the signature hover orange (#F54E00) that flashes on interaction.",
|
||||
"styleBlockCount": 1,
|
||||
"selectorCount": 82,
|
||||
"classCount": 42,
|
||||
"elementCount": 32
|
||||
},
|
||||
"tokens": {
|
||||
"declared": [
|
||||
"--accent",
|
||||
"--accent-active",
|
||||
"--accent-hover",
|
||||
"--accent-on",
|
||||
"--bg",
|
||||
"--border",
|
||||
"--border-soft",
|
||||
"--container-gutter-desktop",
|
||||
"--container-gutter-phone",
|
||||
"--container-gutter-tablet",
|
||||
"--container-max",
|
||||
"--danger",
|
||||
"--ease-standard",
|
||||
"--elev-flat",
|
||||
"--elev-raised",
|
||||
"--elev-ring",
|
||||
"--fg",
|
||||
"--fg-2",
|
||||
"--focus-ring",
|
||||
"--font-body",
|
||||
"--font-display",
|
||||
"--font-mono",
|
||||
"--leading-body",
|
||||
"--leading-tight",
|
||||
"--meta",
|
||||
"--motion-base",
|
||||
"--motion-fast",
|
||||
"--muted",
|
||||
"--radius-lg",
|
||||
"--radius-md",
|
||||
"--radius-pill",
|
||||
"--radius-sm",
|
||||
"--section-y-desktop",
|
||||
"--section-y-phone",
|
||||
"--section-y-tablet",
|
||||
"--space-1",
|
||||
"--space-12",
|
||||
"--space-2",
|
||||
"--space-3",
|
||||
"--space-4",
|
||||
"--space-5",
|
||||
"--space-6",
|
||||
"--space-8",
|
||||
"--success",
|
||||
"--surface",
|
||||
"--surface-warm",
|
||||
"--text-2xl",
|
||||
"--text-3xl",
|
||||
"--text-4xl",
|
||||
"--text-base",
|
||||
"--text-lg",
|
||||
"--text-sm",
|
||||
"--text-xl",
|
||||
"--text-xs",
|
||||
"--tracking-display",
|
||||
"--warn"
|
||||
],
|
||||
"referenced": [
|
||||
"--accent",
|
||||
"--bg",
|
||||
"--border",
|
||||
"--border-soft",
|
||||
"--container-gutter-desktop",
|
||||
"--container-gutter-phone",
|
||||
"--container-gutter-tablet",
|
||||
"--container-max",
|
||||
"--ease-standard",
|
||||
"--elev-raised",
|
||||
"--fg",
|
||||
"--fg-2",
|
||||
"--focus-ring",
|
||||
"--font-body",
|
||||
"--font-display",
|
||||
"--font-mono",
|
||||
"--leading-body",
|
||||
"--leading-tight",
|
||||
"--meta",
|
||||
"--motion-fast",
|
||||
"--muted",
|
||||
"--radius-md",
|
||||
"--radius-pill",
|
||||
"--radius-sm",
|
||||
"--section-y-desktop",
|
||||
"--section-y-phone",
|
||||
"--section-y-tablet",
|
||||
"--space-12",
|
||||
"--space-2",
|
||||
"--space-3",
|
||||
"--space-4",
|
||||
"--space-5",
|
||||
"--space-6",
|
||||
"--space-8",
|
||||
"--success",
|
||||
"--surface",
|
||||
"--surface-warm",
|
||||
"--text-3xl",
|
||||
"--text-4xl",
|
||||
"--text-base",
|
||||
"--text-lg",
|
||||
"--text-sm",
|
||||
"--text-xs",
|
||||
"--tracking-display",
|
||||
"--warn"
|
||||
],
|
||||
"unusedDeclared": [
|
||||
"--accent-active",
|
||||
"--accent-hover",
|
||||
"--accent-on",
|
||||
"--danger",
|
||||
"--elev-flat",
|
||||
"--elev-ring",
|
||||
"--motion-base",
|
||||
"--radius-lg",
|
||||
"--space-1",
|
||||
"--text-2xl",
|
||||
"--text-xl"
|
||||
],
|
||||
"undeclaredReferenced": []
|
||||
},
|
||||
"selectors": [
|
||||
".body-meta",
|
||||
".body-muted",
|
||||
".body-sm",
|
||||
".btn",
|
||||
".btn-ghost",
|
||||
".btn-ghost:hover",
|
||||
".btn-primary",
|
||||
".btn-primary:active",
|
||||
".btn-primary:hover",
|
||||
".btn-secondary",
|
||||
".btn-secondary:hover",
|
||||
".btn:active",
|
||||
".btn:focus-visible",
|
||||
".card",
|
||||
".card-warm",
|
||||
".card:hover",
|
||||
".card:hover h3",
|
||||
".code-block",
|
||||
".code-block .tok-cmt",
|
||||
".code-block .tok-fn",
|
||||
".code-block .tok-str",
|
||||
".container",
|
||||
".divider-soft",
|
||||
".eyebrow",
|
||||
".feature-tag",
|
||||
".feature-tag::before",
|
||||
".features-grid",
|
||||
".field",
|
||||
".field input",
|
||||
".field input::placeholder",
|
||||
".field input:focus-visible",
|
||||
".field label",
|
||||
".field select",
|
||||
".field select:focus-visible",
|
||||
".field textarea",
|
||||
".field textarea:focus-visible",
|
||||
".field-help",
|
||||
".form",
|
||||
".form-row",
|
||||
".hedgehog",
|
||||
".hero-actions",
|
||||
".hero-grid",
|
||||
".hero-meta",
|
||||
".hero-meta .dot",
|
||||
".icon",
|
||||
".lede",
|
||||
".mono",
|
||||
".nav-links",
|
||||
".nav-links a",
|
||||
".nav-links a:hover",
|
||||
".nav-logo",
|
||||
".nav-logo:hover",
|
||||
".nav-row",
|
||||
".panel",
|
||||
".pill",
|
||||
".pill-soft",
|
||||
".pill-status",
|
||||
".pill-status .dot",
|
||||
".pill-warn",
|
||||
".row-between",
|
||||
".row-cluster",
|
||||
".stack-2 > * + *",
|
||||
".stack-3 > * + *",
|
||||
".stack-4 > * + *",
|
||||
".stack-6 > * + *",
|
||||
".trust-row",
|
||||
"*",
|
||||
"*::after",
|
||||
"*::before",
|
||||
"a",
|
||||
"a:focus-visible",
|
||||
"a:hover",
|
||||
"body",
|
||||
"code",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"html",
|
||||
"kbd",
|
||||
"p",
|
||||
"section",
|
||||
"section + section"
|
||||
],
|
||||
"classes": [
|
||||
"body-meta",
|
||||
"body-muted",
|
||||
"body-sm",
|
||||
"btn",
|
||||
"btn-ghost",
|
||||
"btn-primary",
|
||||
"btn-secondary",
|
||||
"card",
|
||||
"code-block",
|
||||
"container",
|
||||
"divider-soft",
|
||||
"dot",
|
||||
"eyebrow",
|
||||
"feature-tag",
|
||||
"features-grid",
|
||||
"field",
|
||||
"field-help",
|
||||
"form",
|
||||
"form-row",
|
||||
"hedgehog",
|
||||
"hero-actions",
|
||||
"hero-grid",
|
||||
"hero-meta",
|
||||
"icon",
|
||||
"lede",
|
||||
"nav-links",
|
||||
"nav-logo",
|
||||
"nav-row",
|
||||
"panel",
|
||||
"pill",
|
||||
"pill-soft",
|
||||
"pill-status",
|
||||
"pill-warn",
|
||||
"row-between",
|
||||
"row-cluster",
|
||||
"stack-2",
|
||||
"stack-3",
|
||||
"stack-4",
|
||||
"tok-cmt",
|
||||
"tok-fn",
|
||||
"tok-str",
|
||||
"trust-row"
|
||||
],
|
||||
"elements": [
|
||||
"a",
|
||||
"article",
|
||||
"aside",
|
||||
"body",
|
||||
"button",
|
||||
"circle",
|
||||
"code",
|
||||
"div",
|
||||
"form",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"head",
|
||||
"hr",
|
||||
"html",
|
||||
"input",
|
||||
"kbd",
|
||||
"label",
|
||||
"main",
|
||||
"meta",
|
||||
"nav",
|
||||
"option",
|
||||
"p",
|
||||
"path",
|
||||
"pre",
|
||||
"section",
|
||||
"select",
|
||||
"span",
|
||||
"strong",
|
||||
"style",
|
||||
"svg",
|
||||
"title"
|
||||
],
|
||||
"groups": [
|
||||
{
|
||||
"id": "buttons",
|
||||
"label": "Buttons and calls to action",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".btn",
|
||||
".btn-ghost",
|
||||
".btn-ghost:hover",
|
||||
".btn-primary",
|
||||
".btn-primary:active",
|
||||
".btn-primary:hover",
|
||||
".btn-secondary",
|
||||
".btn-secondary:hover",
|
||||
".btn:active",
|
||||
".btn:focus-visible"
|
||||
],
|
||||
"classes": [
|
||||
"btn",
|
||||
"btn-ghost",
|
||||
"btn-primary",
|
||||
"btn-secondary"
|
||||
],
|
||||
"elements": [
|
||||
"button"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--border",
|
||||
"--ease-standard",
|
||||
"--fg",
|
||||
"--font-display",
|
||||
"--motion-fast",
|
||||
"--radius-sm",
|
||||
"--space-2",
|
||||
"--surface-warm",
|
||||
"--text-sm",
|
||||
"--warn"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "inputs",
|
||||
"label": "Form fields and controls",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".field",
|
||||
".field input",
|
||||
".field input::placeholder",
|
||||
".field input:focus-visible",
|
||||
".field label",
|
||||
".field select",
|
||||
".field select:focus-visible",
|
||||
".field textarea",
|
||||
".field textarea:focus-visible",
|
||||
".field-help"
|
||||
],
|
||||
"classes": [
|
||||
"field",
|
||||
"field-help",
|
||||
"form",
|
||||
"form-row"
|
||||
],
|
||||
"elements": [
|
||||
"form",
|
||||
"input",
|
||||
"label",
|
||||
"select"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--fg-2",
|
||||
"--font-display",
|
||||
"--meta",
|
||||
"--muted",
|
||||
"--text-sm",
|
||||
"--text-xs"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "cards",
|
||||
"label": "Cards and panels",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".card",
|
||||
".card-warm",
|
||||
".card:hover",
|
||||
".card:hover h3",
|
||||
".panel"
|
||||
],
|
||||
"classes": [
|
||||
"card",
|
||||
"panel"
|
||||
],
|
||||
"elements": [],
|
||||
"tokenReferences": [
|
||||
"--accent",
|
||||
"--bg",
|
||||
"--border",
|
||||
"--ease-standard",
|
||||
"--elev-raised",
|
||||
"--motion-fast",
|
||||
"--radius-md",
|
||||
"--space-3",
|
||||
"--space-4",
|
||||
"--space-5"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "badges",
|
||||
"label": "Badges, chips, and status labels",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".pill",
|
||||
".pill-soft",
|
||||
".pill-status",
|
||||
".pill-status .dot",
|
||||
".pill-warn"
|
||||
],
|
||||
"classes": [
|
||||
"pill",
|
||||
"pill-soft",
|
||||
"pill-status",
|
||||
"pill-warn"
|
||||
],
|
||||
"elements": [],
|
||||
"tokenReferences": [
|
||||
"--border",
|
||||
"--fg-2",
|
||||
"--surface",
|
||||
"--surface-warm"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "links",
|
||||
"label": "Links and inline actions",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".nav-links a",
|
||||
".nav-links a:hover",
|
||||
"a",
|
||||
"a:focus-visible",
|
||||
"a:hover"
|
||||
],
|
||||
"classes": [],
|
||||
"elements": [
|
||||
"a"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--border",
|
||||
"--ease-standard",
|
||||
"--fg-2",
|
||||
"--focus-ring",
|
||||
"--font-display",
|
||||
"--motion-fast",
|
||||
"--radius-sm"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "keyboard",
|
||||
"label": "Keyboard hints",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
"kbd"
|
||||
],
|
||||
"classes": [],
|
||||
"elements": [
|
||||
"kbd"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--border",
|
||||
"--fg-2",
|
||||
"--radius-sm",
|
||||
"--surface"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "icons",
|
||||
"label": "Icon slots",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".icon"
|
||||
],
|
||||
"classes": [
|
||||
"icon"
|
||||
],
|
||||
"elements": [
|
||||
"svg"
|
||||
],
|
||||
"tokenReferences": []
|
||||
},
|
||||
{
|
||||
"id": "typography",
|
||||
"label": "Typography scale and text utilities",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".body-muted",
|
||||
".body-sm",
|
||||
".card:hover h3",
|
||||
".eyebrow",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3"
|
||||
],
|
||||
"classes": [
|
||||
"body-muted",
|
||||
"body-sm",
|
||||
"eyebrow"
|
||||
],
|
||||
"elements": [
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"p"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--accent",
|
||||
"--fg-2",
|
||||
"--font-display",
|
||||
"--leading-tight",
|
||||
"--muted",
|
||||
"--text-3xl",
|
||||
"--text-sm"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "layout",
|
||||
"label": "Layout primitives",
|
||||
"present": true,
|
||||
"selectors": [
|
||||
".container",
|
||||
".nav-links",
|
||||
".nav-links a",
|
||||
".nav-links a:hover",
|
||||
".nav-logo",
|
||||
".nav-logo:hover",
|
||||
".nav-row",
|
||||
".row-between",
|
||||
".stack-2 > * + *",
|
||||
".stack-3 > * + *",
|
||||
".stack-4 > * + *",
|
||||
".stack-6 > * + *",
|
||||
"section",
|
||||
"section + section"
|
||||
],
|
||||
"classes": [
|
||||
"container",
|
||||
"features-grid",
|
||||
"hero-grid",
|
||||
"row-between",
|
||||
"stack-2",
|
||||
"stack-3",
|
||||
"stack-4"
|
||||
],
|
||||
"elements": [
|
||||
"main",
|
||||
"nav",
|
||||
"section"
|
||||
],
|
||||
"tokenReferences": [
|
||||
"--accent",
|
||||
"--border",
|
||||
"--container-gutter-desktop",
|
||||
"--container-gutter-phone",
|
||||
"--container-gutter-tablet",
|
||||
"--container-max",
|
||||
"--fg-2",
|
||||
"--font-display",
|
||||
"--space-2",
|
||||
"--space-4"
|
||||
]
|
||||
}
|
||||
],
|
||||
"literals": {
|
||||
"colorExpressions": 0,
|
||||
"pixelValues": 38,
|
||||
"hardcodedFontFamilies": 13
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,701 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"format": "od-design-tokens/v1",
|
||||
"contract": "TOKEN_SCHEMA",
|
||||
"generatedAt": "2026-06-06T00:00:00.000Z",
|
||||
"source": {
|
||||
"tokensCss": "tokens.css",
|
||||
"tokenContractReport": "source/token-contract.report.json"
|
||||
},
|
||||
"summary": {
|
||||
"totalTokens": 56,
|
||||
"declaredTokens": 56,
|
||||
"sourceBackedTokens": 56,
|
||||
"sourceBackedA1": 26,
|
||||
"fallbackTokens": 26,
|
||||
"aliasTokens": 0,
|
||||
"layerCounts": {
|
||||
"A1-identity": 8,
|
||||
"B-slot": 4,
|
||||
"A2": 26,
|
||||
"A1-structure": 18
|
||||
},
|
||||
"score": 100,
|
||||
"grade": "excellent",
|
||||
"recommendRebuild": false
|
||||
},
|
||||
"tokens": [
|
||||
{
|
||||
"name": "--bg",
|
||||
"value": "#fdfdf8",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:111"
|
||||
],
|
||||
"sourceName": "--bg"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"value": "#eeefe9",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:112"
|
||||
],
|
||||
"sourceName": "--surface"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"value": "#e5e7e0",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:113"
|
||||
],
|
||||
"sourceName": "--surface-warm"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"value": "#4d4f46",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:123"
|
||||
],
|
||||
"sourceName": "--fg"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"value": "#23251d",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:124"
|
||||
],
|
||||
"sourceName": "--fg-2"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"value": "#65675e",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:125"
|
||||
],
|
||||
"sourceName": "--muted"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"value": "#9ea096",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:126"
|
||||
],
|
||||
"sourceName": "--meta"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"value": "#bfc1b7",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:135"
|
||||
],
|
||||
"sourceName": "--border"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"value": "color-mix(in oklab, var(--border), var(--bg) 50%)",
|
||||
"type": "color",
|
||||
"layer": "B-slot",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:136"
|
||||
],
|
||||
"sourceName": "--border-soft"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"value": "#F54E00",
|
||||
"type": "color",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:146"
|
||||
],
|
||||
"sourceName": "--accent"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"value": "#ffffff",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:147"
|
||||
],
|
||||
"sourceName": "--accent-on"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"value": "color-mix(in oklab, var(--accent), black 8%)",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:148"
|
||||
],
|
||||
"sourceName": "--accent-hover"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"value": "color-mix(in oklab, var(--accent), black 14%)",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:149"
|
||||
],
|
||||
"sourceName": "--accent-active"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"value": "#16a34a",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:158"
|
||||
],
|
||||
"sourceName": "--success"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"value": "#F7A501",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:159"
|
||||
],
|
||||
"sourceName": "--warn"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"value": "#dc2626",
|
||||
"type": "color",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:160"
|
||||
],
|
||||
"sourceName": "--danger"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"value": "\"IBM Plex Sans Variable\", \"IBM Plex Sans\", -apple-system, system-ui, \"Avenir Next\", Avenir, \"Segoe UI\", \"Helvetica Neue\", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif",
|
||||
"type": "fontFamily",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:169"
|
||||
],
|
||||
"sourceName": "--font-display"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"value": "\"IBM Plex Sans Variable\", \"IBM Plex Sans\", -apple-system, system-ui, \"Avenir Next\", Avenir, \"Segoe UI\", \"Helvetica Neue\", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif",
|
||||
"type": "fontFamily",
|
||||
"layer": "A1-identity",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:170"
|
||||
],
|
||||
"sourceName": "--font-body"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"value": "\"Source Code Pro\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
|
||||
"type": "fontFamily",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:171"
|
||||
],
|
||||
"sourceName": "--font-mono"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"value": "12px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:180"
|
||||
],
|
||||
"sourceName": "--text-xs"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"value": "14px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:181"
|
||||
],
|
||||
"sourceName": "--text-sm"
|
||||
},
|
||||
{
|
||||
"name": "--text-base",
|
||||
"value": "16px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:182"
|
||||
],
|
||||
"sourceName": "--text-base"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"value": "20px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:183"
|
||||
],
|
||||
"sourceName": "--text-lg"
|
||||
},
|
||||
{
|
||||
"name": "--text-xl",
|
||||
"value": "24px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:184"
|
||||
],
|
||||
"sourceName": "--text-xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"value": "30px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:185"
|
||||
],
|
||||
"sourceName": "--text-2xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"value": "36px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:186"
|
||||
],
|
||||
"sourceName": "--text-3xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"value": "44px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:187"
|
||||
],
|
||||
"sourceName": "--text-4xl"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"value": "1.5",
|
||||
"type": "number",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:195"
|
||||
],
|
||||
"sourceName": "--leading-body"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"value": "1.2",
|
||||
"type": "number",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:196"
|
||||
],
|
||||
"sourceName": "--leading-tight"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"value": "-0.025em",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:197"
|
||||
],
|
||||
"sourceName": "--tracking-display"
|
||||
},
|
||||
{
|
||||
"name": "--space-1",
|
||||
"value": "4px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:205"
|
||||
],
|
||||
"sourceName": "--space-1"
|
||||
},
|
||||
{
|
||||
"name": "--space-2",
|
||||
"value": "8px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:206"
|
||||
],
|
||||
"sourceName": "--space-2"
|
||||
},
|
||||
{
|
||||
"name": "--space-3",
|
||||
"value": "12px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:207"
|
||||
],
|
||||
"sourceName": "--space-3"
|
||||
},
|
||||
{
|
||||
"name": "--space-4",
|
||||
"value": "16px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:208"
|
||||
],
|
||||
"sourceName": "--space-4"
|
||||
},
|
||||
{
|
||||
"name": "--space-5",
|
||||
"value": "20px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:209"
|
||||
],
|
||||
"sourceName": "--space-5"
|
||||
},
|
||||
{
|
||||
"name": "--space-6",
|
||||
"value": "24px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:210"
|
||||
],
|
||||
"sourceName": "--space-6"
|
||||
},
|
||||
{
|
||||
"name": "--space-8",
|
||||
"value": "32px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:211"
|
||||
],
|
||||
"sourceName": "--space-8"
|
||||
},
|
||||
{
|
||||
"name": "--space-12",
|
||||
"value": "48px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:212"
|
||||
],
|
||||
"sourceName": "--space-12"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"value": "48px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:219"
|
||||
],
|
||||
"sourceName": "--section-y-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"value": "32px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:220"
|
||||
],
|
||||
"sourceName": "--section-y-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"value": "24px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:221"
|
||||
],
|
||||
"sourceName": "--section-y-phone"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"value": "4px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:229"
|
||||
],
|
||||
"sourceName": "--radius-sm"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"value": "6px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:230"
|
||||
],
|
||||
"sourceName": "--radius-md"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"value": "8px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:231"
|
||||
],
|
||||
"sourceName": "--radius-lg"
|
||||
},
|
||||
{
|
||||
"name": "--radius-pill",
|
||||
"value": "9999px",
|
||||
"type": "dimension",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:232"
|
||||
],
|
||||
"sourceName": "--radius-pill"
|
||||
},
|
||||
{
|
||||
"name": "--elev-flat",
|
||||
"value": "none",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-flat; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:241"
|
||||
],
|
||||
"sourceName": "--elev-flat"
|
||||
},
|
||||
{
|
||||
"name": "--elev-ring",
|
||||
"value": "0 0 0 1px var(--border)",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:242"
|
||||
],
|
||||
"sourceName": "--elev-ring"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"value": "0px 25px 50px -12px rgba(0, 0, 0, 0.25)",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:243"
|
||||
],
|
||||
"sourceName": "--elev-raised"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"value": "0 0 0 3px rgba(59, 130, 246, 0.5)",
|
||||
"type": "shadow",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:251"
|
||||
],
|
||||
"sourceName": "--focus-ring"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"value": "150ms",
|
||||
"type": "duration",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:259"
|
||||
],
|
||||
"sourceName": "--motion-fast"
|
||||
},
|
||||
{
|
||||
"name": "--motion-base",
|
||||
"value": "200ms",
|
||||
"type": "duration",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:260"
|
||||
],
|
||||
"sourceName": "--motion-base"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"value": "cubic-bezier(0.2, 0, 0, 1)",
|
||||
"type": "cubicBezier",
|
||||
"layer": "A2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:261"
|
||||
],
|
||||
"sourceName": "--ease-standard"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"value": "1280px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:268"
|
||||
],
|
||||
"sourceName": "--container-max"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"value": "24px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:269"
|
||||
],
|
||||
"sourceName": "--container-gutter-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"value": "16px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:270"
|
||||
],
|
||||
"sourceName": "--container-gutter-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"value": "12px",
|
||||
"type": "dimension",
|
||||
"layer": "A1-structure",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:271"
|
||||
],
|
||||
"sourceName": "--container-gutter-phone"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
{
|
||||
"schemaVersion": "od-design-system-project/v1",
|
||||
"id": "posthog",
|
||||
"name": "PostHog",
|
||||
"category": "Backend & Data",
|
||||
"description": "Bundled OpenDesign package for PostHog, derived from curated DESIGN.md, tokens.css, and components.html fixtures.",
|
||||
"source": {
|
||||
"type": "bundled",
|
||||
"origin": "OpenDesign curated bundled fixture"
|
||||
},
|
||||
"files": {
|
||||
"design": "DESIGN.md",
|
||||
"tokens": "tokens.css",
|
||||
"designTokens": "design-tokens.json",
|
||||
"tailwind": "tailwind-v4.css",
|
||||
"components": "components.html"
|
||||
},
|
||||
"usage": "USAGE.md",
|
||||
"componentsManifest": "components.manifest.json",
|
||||
"importMode": "normalized",
|
||||
"craft": {
|
||||
"applies": [],
|
||||
"suggested": [
|
||||
"color",
|
||||
"accessibility-baseline"
|
||||
],
|
||||
"exemptions": []
|
||||
},
|
||||
"preview": {
|
||||
"dir": "preview",
|
||||
"pages": [
|
||||
{
|
||||
"path": "preview/colors.html",
|
||||
"role": "colors",
|
||||
"title": "Colors"
|
||||
},
|
||||
{
|
||||
"path": "preview/typography.html",
|
||||
"role": "typography",
|
||||
"title": "Typography"
|
||||
},
|
||||
{
|
||||
"path": "preview/spacing.html",
|
||||
"role": "spacing",
|
||||
"title": "Spacing"
|
||||
}
|
||||
]
|
||||
},
|
||||
"sourceFiles": {
|
||||
"evidence": "source/evidence.md",
|
||||
"tokens": "source/tokens.source.json",
|
||||
"report": "source/token-contract.report.json"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>PostHog colors</title>
|
||||
<link rel="stylesheet" href="../tokens.css" />
|
||||
<style>
|
||||
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
|
||||
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
|
||||
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
|
||||
|
||||
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
|
||||
.swatch { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; box-shadow: var(--elev-ring); }
|
||||
.color { height: 88px; background: var(--value); }
|
||||
.meta { padding: var(--space-3); color: var(--muted); font-size: var(--text-sm); }
|
||||
strong { display: block; margin-bottom: var(--space-1); color: var(--fg); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Color roles</h1>
|
||||
|
||||
<section class="grid">
|
||||
<article class="swatch" style="--value: var(--bg)"><div class="color"></div><div class="meta"><strong>Background</strong>--bg</div></article>
|
||||
<article class="swatch" style="--value: var(--surface)"><div class="color"></div><div class="meta"><strong>Surface</strong>--surface</div></article>
|
||||
<article class="swatch" style="--value: var(--fg)"><div class="color"></div><div class="meta"><strong>Foreground</strong>--fg</div></article>
|
||||
<article class="swatch" style="--value: var(--muted)"><div class="color"></div><div class="meta"><strong>Muted</strong>--muted</div></article>
|
||||
<article class="swatch" style="--value: var(--border)"><div class="color"></div><div class="meta"><strong>Border</strong>--border</div></article>
|
||||
<article class="swatch" style="--value: var(--accent)"><div class="color"></div><div class="meta"><strong>Accent</strong>--accent</div></article>
|
||||
<article class="swatch" style="--value: var(--success)"><div class="color"></div><div class="meta"><strong>Success</strong>--success</div></article>
|
||||
<article class="swatch" style="--value: var(--warn)"><div class="color"></div><div class="meta"><strong>Warning</strong>--warn</div></article>
|
||||
<article class="swatch" style="--value: var(--danger)"><div class="color"></div><div class="meta"><strong>Danger</strong>--danger</div></article>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>PostHog spacing</title>
|
||||
<link rel="stylesheet" href="../tokens.css" />
|
||||
<style>
|
||||
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
|
||||
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
|
||||
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
|
||||
|
||||
.stack { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
|
||||
.row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
|
||||
.bar { height: var(--space-4); min-width: 2px; background: var(--accent); }
|
||||
.radii { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }
|
||||
.radii article { min-height: 88px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--fg-2); font-size: var(--text-sm); box-shadow: var(--elev-ring); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Spacing and radius</h1>
|
||||
|
||||
<section class="stack">
|
||||
<div class="row"><span>--space-2</span><div class="bar" style="width: var(--space-2)"></div></div>
|
||||
<div class="row"><span>--space-4</span><div class="bar" style="width: var(--space-4)"></div></div>
|
||||
<div class="row"><span>--space-6</span><div class="bar" style="width: var(--space-6)"></div></div>
|
||||
<div class="row"><span>--space-8</span><div class="bar" style="width: var(--space-8)"></div></div>
|
||||
<div class="row"><span>--space-12</span><div class="bar" style="width: var(--space-12)"></div></div>
|
||||
</section>
|
||||
<section class="radii">
|
||||
<article style="border-radius: var(--radius-sm)">--radius-sm</article>
|
||||
<article style="border-radius: var(--radius-md)">--radius-md</article>
|
||||
<article style="border-radius: var(--radius-lg)">--radius-lg</article>
|
||||
<article style="border-radius: var(--radius-pill)">--radius-pill</article>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>PostHog typography</title>
|
||||
<link rel="stylesheet" href="../tokens.css" />
|
||||
<style>
|
||||
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); }
|
||||
main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
|
||||
h1 { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
|
||||
|
||||
.type-stack { display: grid; gap: var(--space-4); max-width: 760px; }
|
||||
.eyebrow { margin: 0; color: var(--accent); font-size: var(--text-xs); letter-spacing: var(--tracking-display); text-transform: uppercase; }
|
||||
h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
|
||||
.lede { margin: 0; color: var(--fg-2); font-size: var(--text-lg); line-height: var(--leading-body); }
|
||||
.body { margin: 0; color: var(--muted); font-size: var(--text-base); line-height: var(--leading-body); }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Typography</h1>
|
||||
|
||||
<section class="type-stack">
|
||||
<p class="eyebrow">Backend & Data</p>
|
||||
<h2>Display sample for PostHog</h2>
|
||||
<p class="lede">Body rhythm, heading scale, and muted metadata all resolve through the committed token contract.</p>
|
||||
<p class="body">The preview intentionally uses only schema tokens so reviewers can confirm the package remains portable across OpenDesign artifacts.</p>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
# PostHog Source Evidence
|
||||
|
||||
## Source Scope
|
||||
|
||||
This Design System 2.0 backfill is derived from the curated OpenDesign bundled fixture.
|
||||
It does not claim a fresh crawl of the original upstream brand repository or website.
|
||||
|
||||
## Included Fixture Files
|
||||
|
||||
- design-systems/posthog/DESIGN.md
|
||||
- design-systems/posthog/tokens.css
|
||||
- design-systems/posthog/components.html
|
||||
|
||||
## Token Contract
|
||||
|
||||
`source/token-contract.report.json` maps every TOKEN_SCHEMA binding back to the committed `tokens.css` declaration line.
|
||||
`design-tokens.json` and `tailwind-v4.css` are derived outputs and should be regenerated from the report and token stylesheet rather than edited by hand.
|
||||
@@ -0,0 +1,641 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"contract": "TOKEN_SCHEMA",
|
||||
"generatedAt": "2026-06-06T00:00:00.000Z",
|
||||
"sourceScope": "open-design-bundled-fixture",
|
||||
"summary": {
|
||||
"totalTokens": 56,
|
||||
"declaredTokens": 56,
|
||||
"sourceBackedTokens": 56,
|
||||
"sourceBackedA1": 26,
|
||||
"fallbackTokens": 26,
|
||||
"aliasTokens": 0,
|
||||
"layerCounts": {
|
||||
"A1-identity": 8,
|
||||
"B-slot": 4,
|
||||
"A2": 26,
|
||||
"A1-structure": 18
|
||||
},
|
||||
"score": 100,
|
||||
"grade": "excellent",
|
||||
"recommendRebuild": false
|
||||
},
|
||||
"tokens": [
|
||||
{
|
||||
"name": "--bg",
|
||||
"layer": "A1-identity",
|
||||
"value": "#fdfdf8",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --bg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:111"
|
||||
],
|
||||
"sourceName": "--bg"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"layer": "A1-identity",
|
||||
"value": "#eeefe9",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:112"
|
||||
],
|
||||
"sourceName": "--surface"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"layer": "B-slot",
|
||||
"value": "#e5e7e0",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --surface-warm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:113"
|
||||
],
|
||||
"sourceName": "--surface-warm"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"layer": "A1-identity",
|
||||
"value": "#4d4f46",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:123"
|
||||
],
|
||||
"sourceName": "--fg"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"layer": "B-slot",
|
||||
"value": "#23251d",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --fg-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:124"
|
||||
],
|
||||
"sourceName": "--fg-2"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"layer": "A1-identity",
|
||||
"value": "#65675e",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --muted; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:125"
|
||||
],
|
||||
"sourceName": "--muted"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"layer": "B-slot",
|
||||
"value": "#9ea096",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --meta; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:126"
|
||||
],
|
||||
"sourceName": "--meta"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"layer": "A1-identity",
|
||||
"value": "#bfc1b7",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:135"
|
||||
],
|
||||
"sourceName": "--border"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"layer": "B-slot",
|
||||
"value": "color-mix(in oklab, var(--border), var(--bg) 50%)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --border-soft; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:136"
|
||||
],
|
||||
"sourceName": "--border-soft"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"layer": "A1-identity",
|
||||
"value": "#F54E00",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:146"
|
||||
],
|
||||
"sourceName": "--accent"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"layer": "A2",
|
||||
"value": "#ffffff",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-on; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:147"
|
||||
],
|
||||
"sourceName": "--accent-on"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"layer": "A2",
|
||||
"value": "color-mix(in oklab, var(--accent), black 8%)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-hover; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:148"
|
||||
],
|
||||
"sourceName": "--accent-hover"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"layer": "A2",
|
||||
"value": "color-mix(in oklab, var(--accent), black 14%)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --accent-active; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:149"
|
||||
],
|
||||
"sourceName": "--accent-active"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"layer": "A2",
|
||||
"value": "#16a34a",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --success; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:158"
|
||||
],
|
||||
"sourceName": "--success"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"layer": "A2",
|
||||
"value": "#F7A501",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --warn; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:159"
|
||||
],
|
||||
"sourceName": "--warn"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"layer": "A2",
|
||||
"value": "#dc2626",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --danger; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:160"
|
||||
],
|
||||
"sourceName": "--danger"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"layer": "A1-identity",
|
||||
"value": "\"IBM Plex Sans Variable\", \"IBM Plex Sans\", -apple-system, system-ui, \"Avenir Next\", Avenir, \"Segoe UI\", \"Helvetica Neue\", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:169"
|
||||
],
|
||||
"sourceName": "--font-display"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"layer": "A1-identity",
|
||||
"value": "\"IBM Plex Sans Variable\", \"IBM Plex Sans\", -apple-system, system-ui, \"Avenir Next\", Avenir, \"Segoe UI\", \"Helvetica Neue\", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:170"
|
||||
],
|
||||
"sourceName": "--font-body"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"layer": "A2",
|
||||
"value": "\"Source Code Pro\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --font-mono; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:171"
|
||||
],
|
||||
"sourceName": "--font-mono"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"layer": "A1-structure",
|
||||
"value": "12px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xs; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:180"
|
||||
],
|
||||
"sourceName": "--text-xs"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"layer": "A1-structure",
|
||||
"value": "14px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:181"
|
||||
],
|
||||
"sourceName": "--text-sm"
|
||||
},
|
||||
{
|
||||
"name": "--text-base",
|
||||
"layer": "A1-structure",
|
||||
"value": "16px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-base; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:182"
|
||||
],
|
||||
"sourceName": "--text-base"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"layer": "A1-structure",
|
||||
"value": "20px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:183"
|
||||
],
|
||||
"sourceName": "--text-lg"
|
||||
},
|
||||
{
|
||||
"name": "--text-xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "24px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:184"
|
||||
],
|
||||
"sourceName": "--text-xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "30px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-2xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:185"
|
||||
],
|
||||
"sourceName": "--text-2xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "36px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-3xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:186"
|
||||
],
|
||||
"sourceName": "--text-3xl"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"layer": "A1-structure",
|
||||
"value": "44px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --text-4xl; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:187"
|
||||
],
|
||||
"sourceName": "--text-4xl"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"layer": "A1-structure",
|
||||
"value": "1.5",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-body; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:195"
|
||||
],
|
||||
"sourceName": "--leading-body"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"layer": "A1-structure",
|
||||
"value": "1.2",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --leading-tight; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:196"
|
||||
],
|
||||
"sourceName": "--leading-tight"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"layer": "A1-structure",
|
||||
"value": "-0.025em",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --tracking-display; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:197"
|
||||
],
|
||||
"sourceName": "--tracking-display"
|
||||
},
|
||||
{
|
||||
"name": "--space-1",
|
||||
"layer": "A2",
|
||||
"value": "4px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-1; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:205"
|
||||
],
|
||||
"sourceName": "--space-1"
|
||||
},
|
||||
{
|
||||
"name": "--space-2",
|
||||
"layer": "A2",
|
||||
"value": "8px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-2; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:206"
|
||||
],
|
||||
"sourceName": "--space-2"
|
||||
},
|
||||
{
|
||||
"name": "--space-3",
|
||||
"layer": "A2",
|
||||
"value": "12px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-3; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:207"
|
||||
],
|
||||
"sourceName": "--space-3"
|
||||
},
|
||||
{
|
||||
"name": "--space-4",
|
||||
"layer": "A2",
|
||||
"value": "16px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-4; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:208"
|
||||
],
|
||||
"sourceName": "--space-4"
|
||||
},
|
||||
{
|
||||
"name": "--space-5",
|
||||
"layer": "A2",
|
||||
"value": "20px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-5; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:209"
|
||||
],
|
||||
"sourceName": "--space-5"
|
||||
},
|
||||
{
|
||||
"name": "--space-6",
|
||||
"layer": "A2",
|
||||
"value": "24px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-6; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:210"
|
||||
],
|
||||
"sourceName": "--space-6"
|
||||
},
|
||||
{
|
||||
"name": "--space-8",
|
||||
"layer": "A2",
|
||||
"value": "32px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-8; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:211"
|
||||
],
|
||||
"sourceName": "--space-8"
|
||||
},
|
||||
{
|
||||
"name": "--space-12",
|
||||
"layer": "A2",
|
||||
"value": "48px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --space-12; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:212"
|
||||
],
|
||||
"sourceName": "--space-12"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"layer": "A1-structure",
|
||||
"value": "48px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:219"
|
||||
],
|
||||
"sourceName": "--section-y-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"layer": "A1-structure",
|
||||
"value": "32px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:220"
|
||||
],
|
||||
"sourceName": "--section-y-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"layer": "A1-structure",
|
||||
"value": "24px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --section-y-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:221"
|
||||
],
|
||||
"sourceName": "--section-y-phone"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"layer": "A2",
|
||||
"value": "4px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-sm; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:229"
|
||||
],
|
||||
"sourceName": "--radius-sm"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"layer": "A2",
|
||||
"value": "6px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-md; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:230"
|
||||
],
|
||||
"sourceName": "--radius-md"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"layer": "A2",
|
||||
"value": "8px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-lg; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:231"
|
||||
],
|
||||
"sourceName": "--radius-lg"
|
||||
},
|
||||
{
|
||||
"name": "--radius-pill",
|
||||
"layer": "A2",
|
||||
"value": "9999px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --radius-pill; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:232"
|
||||
],
|
||||
"sourceName": "--radius-pill"
|
||||
},
|
||||
{
|
||||
"name": "--elev-flat",
|
||||
"layer": "A2",
|
||||
"value": "none",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-flat; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:241"
|
||||
],
|
||||
"sourceName": "--elev-flat"
|
||||
},
|
||||
{
|
||||
"name": "--elev-ring",
|
||||
"layer": "A2",
|
||||
"value": "0 0 0 1px var(--border)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:242"
|
||||
],
|
||||
"sourceName": "--elev-ring"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"layer": "A2",
|
||||
"value": "0px 25px 50px -12px rgba(0, 0, 0, 0.25)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --elev-raised; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:243"
|
||||
],
|
||||
"sourceName": "--elev-raised"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"layer": "A2",
|
||||
"value": "0 0 0 3px rgba(59, 130, 246, 0.5)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --focus-ring; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:251"
|
||||
],
|
||||
"sourceName": "--focus-ring"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"layer": "A2",
|
||||
"value": "150ms",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-fast; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:259"
|
||||
],
|
||||
"sourceName": "--motion-fast"
|
||||
},
|
||||
{
|
||||
"name": "--motion-base",
|
||||
"layer": "A2",
|
||||
"value": "200ms",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --motion-base; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:260"
|
||||
],
|
||||
"sourceName": "--motion-base"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"layer": "A2",
|
||||
"value": "cubic-bezier(0.2, 0, 0, 1)",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --ease-standard; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:261"
|
||||
],
|
||||
"sourceName": "--ease-standard"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"layer": "A1-structure",
|
||||
"value": "1280px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-max; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:268"
|
||||
],
|
||||
"sourceName": "--container-max"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"layer": "A1-structure",
|
||||
"value": "24px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-desktop; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:269"
|
||||
],
|
||||
"sourceName": "--container-gutter-desktop"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"layer": "A1-structure",
|
||||
"value": "16px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-tablet; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:270"
|
||||
],
|
||||
"sourceName": "--container-gutter-tablet"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"layer": "A1-structure",
|
||||
"value": "12px",
|
||||
"confidence": "high",
|
||||
"reason": "Bundled tokens.css declares --container-gutter-phone; no upstream recrawl was performed for this backfill.",
|
||||
"sources": [
|
||||
"tokens.css:271"
|
||||
],
|
||||
"sourceName": "--container-gutter-phone"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,349 @@
|
||||
{
|
||||
"schemaVersion": 1,
|
||||
"sourceScope": "open-design-bundled-fixture",
|
||||
"brandId": "posthog",
|
||||
"files": [
|
||||
"DESIGN.md",
|
||||
"tokens.css",
|
||||
"components.html"
|
||||
],
|
||||
"generatedAt": "2026-06-06T00:00:00.000Z",
|
||||
"tokens": [
|
||||
{
|
||||
"name": "--bg",
|
||||
"value": "#fdfdf8",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:111"
|
||||
},
|
||||
{
|
||||
"name": "--surface",
|
||||
"value": "#eeefe9",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:112"
|
||||
},
|
||||
{
|
||||
"name": "--surface-warm",
|
||||
"value": "#e5e7e0",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:113"
|
||||
},
|
||||
{
|
||||
"name": "--fg",
|
||||
"value": "#4d4f46",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:123"
|
||||
},
|
||||
{
|
||||
"name": "--fg-2",
|
||||
"value": "#23251d",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:124"
|
||||
},
|
||||
{
|
||||
"name": "--muted",
|
||||
"value": "#65675e",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:125"
|
||||
},
|
||||
{
|
||||
"name": "--meta",
|
||||
"value": "#9ea096",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:126"
|
||||
},
|
||||
{
|
||||
"name": "--border",
|
||||
"value": "#bfc1b7",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:135"
|
||||
},
|
||||
{
|
||||
"name": "--border-soft",
|
||||
"value": "color-mix(in oklab, var(--border), var(--bg) 50%)",
|
||||
"layer": "B-slot",
|
||||
"source": "tokens.css:136"
|
||||
},
|
||||
{
|
||||
"name": "--accent",
|
||||
"value": "#F54E00",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:146"
|
||||
},
|
||||
{
|
||||
"name": "--accent-on",
|
||||
"value": "#ffffff",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:147"
|
||||
},
|
||||
{
|
||||
"name": "--accent-hover",
|
||||
"value": "color-mix(in oklab, var(--accent), black 8%)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:148"
|
||||
},
|
||||
{
|
||||
"name": "--accent-active",
|
||||
"value": "color-mix(in oklab, var(--accent), black 14%)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:149"
|
||||
},
|
||||
{
|
||||
"name": "--success",
|
||||
"value": "#16a34a",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:158"
|
||||
},
|
||||
{
|
||||
"name": "--warn",
|
||||
"value": "#F7A501",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:159"
|
||||
},
|
||||
{
|
||||
"name": "--danger",
|
||||
"value": "#dc2626",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:160"
|
||||
},
|
||||
{
|
||||
"name": "--font-display",
|
||||
"value": "\"IBM Plex Sans Variable\", \"IBM Plex Sans\", -apple-system, system-ui, \"Avenir Next\", Avenir, \"Segoe UI\", \"Helvetica Neue\", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:169"
|
||||
},
|
||||
{
|
||||
"name": "--font-body",
|
||||
"value": "\"IBM Plex Sans Variable\", \"IBM Plex Sans\", -apple-system, system-ui, \"Avenir Next\", Avenir, \"Segoe UI\", \"Helvetica Neue\", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif",
|
||||
"layer": "A1-identity",
|
||||
"source": "tokens.css:170"
|
||||
},
|
||||
{
|
||||
"name": "--font-mono",
|
||||
"value": "\"Source Code Pro\", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:171"
|
||||
},
|
||||
{
|
||||
"name": "--text-xs",
|
||||
"value": "12px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:180"
|
||||
},
|
||||
{
|
||||
"name": "--text-sm",
|
||||
"value": "14px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:181"
|
||||
},
|
||||
{
|
||||
"name": "--text-base",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:182"
|
||||
},
|
||||
{
|
||||
"name": "--text-lg",
|
||||
"value": "20px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:183"
|
||||
},
|
||||
{
|
||||
"name": "--text-xl",
|
||||
"value": "24px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:184"
|
||||
},
|
||||
{
|
||||
"name": "--text-2xl",
|
||||
"value": "30px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:185"
|
||||
},
|
||||
{
|
||||
"name": "--text-3xl",
|
||||
"value": "36px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:186"
|
||||
},
|
||||
{
|
||||
"name": "--text-4xl",
|
||||
"value": "44px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:187"
|
||||
},
|
||||
{
|
||||
"name": "--leading-body",
|
||||
"value": "1.5",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:195"
|
||||
},
|
||||
{
|
||||
"name": "--leading-tight",
|
||||
"value": "1.2",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:196"
|
||||
},
|
||||
{
|
||||
"name": "--tracking-display",
|
||||
"value": "-0.025em",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:197"
|
||||
},
|
||||
{
|
||||
"name": "--space-1",
|
||||
"value": "4px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:205"
|
||||
},
|
||||
{
|
||||
"name": "--space-2",
|
||||
"value": "8px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:206"
|
||||
},
|
||||
{
|
||||
"name": "--space-3",
|
||||
"value": "12px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:207"
|
||||
},
|
||||
{
|
||||
"name": "--space-4",
|
||||
"value": "16px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:208"
|
||||
},
|
||||
{
|
||||
"name": "--space-5",
|
||||
"value": "20px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:209"
|
||||
},
|
||||
{
|
||||
"name": "--space-6",
|
||||
"value": "24px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:210"
|
||||
},
|
||||
{
|
||||
"name": "--space-8",
|
||||
"value": "32px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:211"
|
||||
},
|
||||
{
|
||||
"name": "--space-12",
|
||||
"value": "48px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:212"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-desktop",
|
||||
"value": "48px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:219"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-tablet",
|
||||
"value": "32px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:220"
|
||||
},
|
||||
{
|
||||
"name": "--section-y-phone",
|
||||
"value": "24px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:221"
|
||||
},
|
||||
{
|
||||
"name": "--radius-sm",
|
||||
"value": "4px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:229"
|
||||
},
|
||||
{
|
||||
"name": "--radius-md",
|
||||
"value": "6px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:230"
|
||||
},
|
||||
{
|
||||
"name": "--radius-lg",
|
||||
"value": "8px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:231"
|
||||
},
|
||||
{
|
||||
"name": "--radius-pill",
|
||||
"value": "9999px",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:232"
|
||||
},
|
||||
{
|
||||
"name": "--elev-flat",
|
||||
"value": "none",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:241"
|
||||
},
|
||||
{
|
||||
"name": "--elev-ring",
|
||||
"value": "0 0 0 1px var(--border)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:242"
|
||||
},
|
||||
{
|
||||
"name": "--elev-raised",
|
||||
"value": "0px 25px 50px -12px rgba(0, 0, 0, 0.25)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:243"
|
||||
},
|
||||
{
|
||||
"name": "--focus-ring",
|
||||
"value": "0 0 0 3px rgba(59, 130, 246, 0.5)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:251"
|
||||
},
|
||||
{
|
||||
"name": "--motion-fast",
|
||||
"value": "150ms",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:259"
|
||||
},
|
||||
{
|
||||
"name": "--motion-base",
|
||||
"value": "200ms",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:260"
|
||||
},
|
||||
{
|
||||
"name": "--ease-standard",
|
||||
"value": "cubic-bezier(0.2, 0, 0, 1)",
|
||||
"layer": "A2",
|
||||
"source": "tokens.css:261"
|
||||
},
|
||||
{
|
||||
"name": "--container-max",
|
||||
"value": "1280px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:268"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-desktop",
|
||||
"value": "24px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:269"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-tablet",
|
||||
"value": "16px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:270"
|
||||
},
|
||||
{
|
||||
"name": "--container-gutter-phone",
|
||||
"value": "12px",
|
||||
"layer": "A1-structure",
|
||||
"source": "tokens.css:271"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>PostHog - Pitch deck</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #F54E00;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-on: #ffffff;
|
||||
--bg: #fdfdf8;
|
||||
--border: #bfc1b7;
|
||||
--border-soft: color-mix(in oklab, var(--border), var(--bg) 50%);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #4d4f46;
|
||||
--fg-2: #23251d;
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
--font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--meta: #9ea096;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #65675e;
|
||||
--radius-lg: 8px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 4px;
|
||||
--section-y-desktop: 48px;
|
||||
--section-y-phone: 24px;
|
||||
--section-y-tablet: 32px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #16a34a;
|
||||
--surface: #eeefe9;
|
||||
--surface-warm: #e5e7e0;
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 44px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.025em;
|
||||
--warn: #F7A501;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #fdfdf8;
|
||||
--od-surface: #eeefe9;
|
||||
--od-text: #4d4f46;
|
||||
--od-muted: #65675e;
|
||||
--od-border: #bfc1b7;
|
||||
--od-accent: #F54E00;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--od-font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Deck module</p>
|
||||
<h1>PostHog Executive deck</h1>
|
||||
<p class="lead">Slide-scale title, metric, and section patterns for presentation work.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Pitch deck</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for PostHog, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="PostHog" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>PostHog - Email</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #F54E00;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-on: #ffffff;
|
||||
--bg: #fdfdf8;
|
||||
--border: #bfc1b7;
|
||||
--border-soft: color-mix(in oklab, var(--border), var(--bg) 50%);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #4d4f46;
|
||||
--fg-2: #23251d;
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
--font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--meta: #9ea096;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #65675e;
|
||||
--radius-lg: 8px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 4px;
|
||||
--section-y-desktop: 48px;
|
||||
--section-y-phone: 24px;
|
||||
--section-y-tablet: 32px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #16a34a;
|
||||
--surface: #eeefe9;
|
||||
--surface-warm: #e5e7e0;
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 44px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.025em;
|
||||
--warn: #F7A501;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #fdfdf8;
|
||||
--od-surface: #eeefe9;
|
||||
--od-text: #4d4f46;
|
||||
--od-muted: #65675e;
|
||||
--od-border: #bfc1b7;
|
||||
--od-accent: #F54E00;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--od-font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Email module</p>
|
||||
<h1>PostHog Email module</h1>
|
||||
<p class="lead">Transactional header, body copy, and primary call-to-action treatment.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Email</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for PostHog, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="PostHog" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>PostHog - Form page</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #F54E00;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-on: #ffffff;
|
||||
--bg: #fdfdf8;
|
||||
--border: #bfc1b7;
|
||||
--border-soft: color-mix(in oklab, var(--border), var(--bg) 50%);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #4d4f46;
|
||||
--fg-2: #23251d;
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
--font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--meta: #9ea096;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #65675e;
|
||||
--radius-lg: 8px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 4px;
|
||||
--section-y-desktop: 48px;
|
||||
--section-y-phone: 24px;
|
||||
--section-y-tablet: 32px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #16a34a;
|
||||
--surface: #eeefe9;
|
||||
--surface-warm: #e5e7e0;
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 44px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.025em;
|
||||
--warn: #F7A501;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #fdfdf8;
|
||||
--od-surface: #eeefe9;
|
||||
--od-text: #4d4f46;
|
||||
--od-muted: #65675e;
|
||||
--od-border: #bfc1b7;
|
||||
--od-accent: #F54E00;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--od-font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Form module</p>
|
||||
<h1>PostHog Capture form</h1>
|
||||
<p class="lead">Input, selection, helper text, and submission states in one focused page.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Form page</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for PostHog, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="PostHog" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>PostHog - Landing page</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #F54E00;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-on: #ffffff;
|
||||
--bg: #fdfdf8;
|
||||
--border: #bfc1b7;
|
||||
--border-soft: color-mix(in oklab, var(--border), var(--bg) 50%);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #4d4f46;
|
||||
--fg-2: #23251d;
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
--font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--meta: #9ea096;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #65675e;
|
||||
--radius-lg: 8px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 4px;
|
||||
--section-y-desktop: 48px;
|
||||
--section-y-phone: 24px;
|
||||
--section-y-tablet: 32px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #16a34a;
|
||||
--surface: #eeefe9;
|
||||
--surface-warm: #e5e7e0;
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 44px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.025em;
|
||||
--warn: #F7A501;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #fdfdf8;
|
||||
--od-surface: #eeefe9;
|
||||
--od-text: #4d4f46;
|
||||
--od-muted: #65675e;
|
||||
--od-border: #bfc1b7;
|
||||
--od-accent: #F54E00;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--od-font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Landing module</p>
|
||||
<h1>PostHog Launch narrative</h1>
|
||||
<p class="lead">Hero, proof points, and conversion actions composed from the design system tokens.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Landing page</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for PostHog, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="PostHog" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>PostHog - Newsletter</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #F54E00;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-on: #ffffff;
|
||||
--bg: #fdfdf8;
|
||||
--border: #bfc1b7;
|
||||
--border-soft: color-mix(in oklab, var(--border), var(--bg) 50%);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #4d4f46;
|
||||
--fg-2: #23251d;
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
--font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--meta: #9ea096;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #65675e;
|
||||
--radius-lg: 8px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 4px;
|
||||
--section-y-desktop: 48px;
|
||||
--section-y-phone: 24px;
|
||||
--section-y-tablet: 32px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #16a34a;
|
||||
--surface: #eeefe9;
|
||||
--surface-warm: #e5e7e0;
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 44px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.025em;
|
||||
--warn: #F7A501;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #fdfdf8;
|
||||
--od-surface: #eeefe9;
|
||||
--od-text: #4d4f46;
|
||||
--od-muted: #65675e;
|
||||
--od-border: #bfc1b7;
|
||||
--od-accent: #F54E00;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--od-font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Newsletter module</p>
|
||||
<h1>PostHog Editorial issue</h1>
|
||||
<p class="lead">Readable long-form layout with heading hierarchy and compact story modules.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Newsletter</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for PostHog, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="PostHog" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>PostHog - Poster</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #F54E00;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-on: #ffffff;
|
||||
--bg: #fdfdf8;
|
||||
--border: #bfc1b7;
|
||||
--border-soft: color-mix(in oklab, var(--border), var(--bg) 50%);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #4d4f46;
|
||||
--fg-2: #23251d;
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
--font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--meta: #9ea096;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #65675e;
|
||||
--radius-lg: 8px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 4px;
|
||||
--section-y-desktop: 48px;
|
||||
--section-y-phone: 24px;
|
||||
--section-y-tablet: 32px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #16a34a;
|
||||
--surface: #eeefe9;
|
||||
--surface-warm: #e5e7e0;
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 44px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.025em;
|
||||
--warn: #F7A501;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #fdfdf8;
|
||||
--od-surface: #eeefe9;
|
||||
--od-text: #4d4f46;
|
||||
--od-muted: #65675e;
|
||||
--od-border: #bfc1b7;
|
||||
--od-accent: #F54E00;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--od-font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Poster module</p>
|
||||
<h1>PostHog Campaign poster</h1>
|
||||
<p class="lead">High-impact display composition using the system color, type, and spacing rhythm.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Continue</a>
|
||||
<a class="button secondary" href="#">View details</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Preview</p>
|
||||
<h3>Poster</h3>
|
||||
<p class="lead" style="font-size:16px">Bundled OpenDesign package for PostHog, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
||||
<div class="field"><label>Primary input<input value="PostHog" /></label></div>
|
||||
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,128 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>PostHog - system assets</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #F54E00;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-on: #ffffff;
|
||||
--bg: #fdfdf8;
|
||||
--border: #bfc1b7;
|
||||
--border-soft: color-mix(in oklab, var(--border), var(--bg) 50%);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #4d4f46;
|
||||
--fg-2: #23251d;
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
--font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--meta: #9ea096;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #65675e;
|
||||
--radius-lg: 8px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 4px;
|
||||
--section-y-desktop: 48px;
|
||||
--section-y-phone: 24px;
|
||||
--section-y-tablet: 32px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #16a34a;
|
||||
--surface: #eeefe9;
|
||||
--surface-warm: #e5e7e0;
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 44px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.025em;
|
||||
--warn: #F7A501;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #fdfdf8;
|
||||
--od-surface: #eeefe9;
|
||||
--od-text: #4d4f46;
|
||||
--od-muted: #65675e;
|
||||
--od-border: #bfc1b7;
|
||||
--od-accent: #F54E00;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--od-font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<p class="eyebrow">Backend & Data</p>
|
||||
<h1>PostHog system assets</h1>
|
||||
<p class="lead">Generated preview modules for bundled official presets.</p>
|
||||
<section class="card-grid"><a class="card" href="kit.html"><h3>Component kit</h3><p>kit.html</p></a>
|
||||
<a class="card" href="kit.dark.html"><h3>Dark component kit</h3><p>kit.dark.html</p></a>
|
||||
<a class="card" href="artifacts/landing.html"><h3>Landing page</h3><p>artifacts/landing.html</p></a>
|
||||
<a class="card" href="artifacts/deck.html"><h3>Pitch deck</h3><p>artifacts/deck.html</p></a>
|
||||
<a class="card" href="artifacts/poster.html"><h3>Poster</h3><p>artifacts/poster.html</p></a>
|
||||
<a class="card" href="artifacts/email.html"><h3>Email</h3><p>artifacts/email.html</p></a>
|
||||
<a class="card" href="artifacts/newsletter.html"><h3>Newsletter</h3><p>artifacts/newsletter.html</p></a>
|
||||
<a class="card" href="artifacts/form.html"><h3>Form page</h3><p>artifacts/form.html</p></a></section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,149 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>PostHog - dark component kit</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #F54E00;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-on: #ffffff;
|
||||
--bg: #fdfdf8;
|
||||
--border: #bfc1b7;
|
||||
--border-soft: color-mix(in oklab, var(--border), var(--bg) 50%);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #4d4f46;
|
||||
--fg-2: #23251d;
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
--font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--meta: #9ea096;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #65675e;
|
||||
--radius-lg: 8px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 4px;
|
||||
--section-y-desktop: 48px;
|
||||
--section-y-phone: 24px;
|
||||
--section-y-tablet: 32px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #16a34a;
|
||||
--surface: #eeefe9;
|
||||
--surface-warm: #e5e7e0;
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 44px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.025em;
|
||||
--warn: #F7A501;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #0f1115;
|
||||
--od-surface: #171a21;
|
||||
--od-text: #f8fafc;
|
||||
--od-muted: #a7adba;
|
||||
--od-border: #2a2f3a;
|
||||
--od-accent: #F54E00;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--od-font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #0b0b0b; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.32); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Backend & Data system</p>
|
||||
<h1>PostHog component kit</h1>
|
||||
<p class="lead">Bundled OpenDesign package for PostHog, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Primary</a>
|
||||
<a class="button secondary" href="#">Default</a>
|
||||
<a class="button secondary" href="#">Dashed</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Reference module</p>
|
||||
<h3>Token-driven surface</h3>
|
||||
<div class="metric-grid">
|
||||
<div class="metric"><strong>12</strong><span>Components</span></div>
|
||||
<div class="metric"><strong>4</strong><span>States</span></div>
|
||||
<div class="metric"><strong>1</strong><span>Token contract</span></div>
|
||||
</div>
|
||||
<div class="chip-row">
|
||||
<span class="chip">Hover</span>
|
||||
<span class="chip">Focus</span>
|
||||
<span class="chip">Active</span>
|
||||
<span class="chip">Disabled</span>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<section class="card-grid" aria-label="Component examples">
|
||||
<article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
|
||||
<article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
|
||||
<article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,149 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>PostHog - component kit</title>
|
||||
<style>
|
||||
:root {
|
||||
--accent: #F54E00;
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-on: #ffffff;
|
||||
--bg: #fdfdf8;
|
||||
--border: #bfc1b7;
|
||||
--border-soft: color-mix(in oklab, var(--border), var(--bg) 50%);
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-phone: 12px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-max: 1280px;
|
||||
--danger: #dc2626;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--elev-flat: none;
|
||||
--elev-raised: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--fg: #4d4f46;
|
||||
--fg-2: #23251d;
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
--font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--meta: #9ea096;
|
||||
--motion-base: 200ms;
|
||||
--motion-fast: 150ms;
|
||||
--muted: #65675e;
|
||||
--radius-lg: 8px;
|
||||
--radius-md: 6px;
|
||||
--radius-pill: 9999px;
|
||||
--radius-sm: 4px;
|
||||
--section-y-desktop: 48px;
|
||||
--section-y-phone: 24px;
|
||||
--section-y-tablet: 32px;
|
||||
--space-1: 4px;
|
||||
--space-12: 48px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--success: #16a34a;
|
||||
--surface: #eeefe9;
|
||||
--surface-warm: #e5e7e0;
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 44px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-sm: 14px;
|
||||
--text-xl: 24px;
|
||||
--text-xs: 12px;
|
||||
--tracking-display: -0.025em;
|
||||
--warn: #F7A501;
|
||||
}
|
||||
:root {
|
||||
--od-page-bg: #fdfdf8;
|
||||
--od-surface: #eeefe9;
|
||||
--od-text: #4d4f46;
|
||||
--od-muted: #65675e;
|
||||
--od-border: #bfc1b7;
|
||||
--od-accent: #F54E00;
|
||||
--od-radius: 6px;
|
||||
--od-font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--od-font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: var(--od-page-bg);
|
||||
color: var(--od-text);
|
||||
font-family: var(--od-font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
a { color: inherit; }
|
||||
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
||||
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
||||
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
||||
h1, h2, h3, p { margin: 0; }
|
||||
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
||||
h1 { margin-top: 12px; font-size: 64px; }
|
||||
h2 { font-size: 40px; }
|
||||
h3 { font-size: 22px; }
|
||||
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
||||
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
||||
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
||||
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
||||
.button.secondary { background: var(--od-surface); }
|
||||
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
||||
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
||||
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
||||
.metric, .card { padding: 18px; }
|
||||
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
||||
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
||||
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
||||
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
||||
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
||||
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Backend & Data system</p>
|
||||
<h1>PostHog component kit</h1>
|
||||
<p class="lead">Bundled OpenDesign package for PostHog, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="#">Primary</a>
|
||||
<a class="button secondary" href="#">Default</a>
|
||||
<a class="button secondary" href="#">Dashed</a>
|
||||
</div>
|
||||
</div>
|
||||
<article class="panel">
|
||||
<p class="eyebrow">Reference module</p>
|
||||
<h3>Token-driven surface</h3>
|
||||
<div class="metric-grid">
|
||||
<div class="metric"><strong>12</strong><span>Components</span></div>
|
||||
<div class="metric"><strong>4</strong><span>States</span></div>
|
||||
<div class="metric"><strong>1</strong><span>Token contract</span></div>
|
||||
</div>
|
||||
<div class="chip-row">
|
||||
<span class="chip">Hover</span>
|
||||
<span class="chip">Focus</span>
|
||||
<span class="chip">Active</span>
|
||||
<span class="chip">Disabled</span>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<section class="card-grid" aria-label="Component examples">
|
||||
<article class="card"><h3>Buttons</h3><p>Primary, secondary, text, and destructive treatments resolve through shared color tokens.</p></article>
|
||||
<article class="card"><h3>Inputs</h3><p>Labels, helper text, and focus state use the same spacing and radius scale.</p></article>
|
||||
<article class="card"><h3>Cards</h3><p>Information modules keep elevation, border, and padding consistent across breakpoints.</p></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"colorPrimary": "#F54E00",
|
||||
"colorPrimaryBg": "#e5e7e0",
|
||||
"colorPrimaryHover": "color-mix(in oklab, var(--accent), black 8%)",
|
||||
"colorPrimaryActive": "color-mix(in oklab, var(--accent), black 14%)",
|
||||
"fontSize": 16,
|
||||
"borderRadius": 6
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/* Derived from tokens.css. Keep tokens.css as the source of truth. */
|
||||
@import "tailwindcss";
|
||||
@import "./tokens.css";
|
||||
|
||||
@theme {
|
||||
--color-bg: var(--bg);
|
||||
--color-surface: var(--surface);
|
||||
--color-surface-warm: var(--surface-warm);
|
||||
--color-fg: var(--fg);
|
||||
--color-fg-2: var(--fg-2);
|
||||
--color-muted: var(--muted);
|
||||
--color-meta: var(--meta);
|
||||
--color-border: var(--border);
|
||||
--color-border-soft: var(--border-soft);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-on: var(--accent-on);
|
||||
--color-accent-hover: var(--accent-hover);
|
||||
--color-accent-active: var(--accent-active);
|
||||
--color-success: var(--success);
|
||||
--color-warn: var(--warn);
|
||||
--color-danger: var(--danger);
|
||||
--font-display: var(--font-display);
|
||||
--font-body: var(--font-body);
|
||||
--font-sans: var(--font-body);
|
||||
--font-mono: var(--font-mono);
|
||||
--text-xs: var(--text-xs);
|
||||
--text-sm: var(--text-sm);
|
||||
--text-base: var(--text-base);
|
||||
--text-lg: var(--text-lg);
|
||||
--text-xl: var(--text-xl);
|
||||
--text-2xl: var(--text-2xl);
|
||||
--text-3xl: var(--text-3xl);
|
||||
--text-4xl: var(--text-4xl);
|
||||
--leading-body: var(--leading-body);
|
||||
--leading-tight: var(--leading-tight);
|
||||
--tracking-display: var(--tracking-display);
|
||||
--spacing-1: var(--space-1);
|
||||
--spacing-2: var(--space-2);
|
||||
--spacing-3: var(--space-3);
|
||||
--spacing-4: var(--space-4);
|
||||
--spacing-5: var(--space-5);
|
||||
--spacing-6: var(--space-6);
|
||||
--spacing-8: var(--space-8);
|
||||
--spacing-12: var(--space-12);
|
||||
--spacing-section-desktop: var(--section-y-desktop);
|
||||
--spacing-section-tablet: var(--section-y-tablet);
|
||||
--spacing-section-phone: var(--section-y-phone);
|
||||
--radius-sm: var(--radius-sm);
|
||||
--radius-md: var(--radius-md);
|
||||
--radius-lg: var(--radius-lg);
|
||||
--radius-pill: var(--radius-pill);
|
||||
--shadow-flat: var(--elev-flat);
|
||||
--shadow-ring: var(--elev-ring);
|
||||
--shadow-raised: var(--elev-raised);
|
||||
--shadow-focus-ring: var(--focus-ring);
|
||||
--duration-fast: var(--motion-fast);
|
||||
--duration-base: var(--motion-base);
|
||||
--ease-standard: var(--ease-standard);
|
||||
--container-max: var(--container-max);
|
||||
--spacing-container-desktop: var(--container-gutter-desktop);
|
||||
--spacing-container-tablet: var(--container-gutter-tablet);
|
||||
--spacing-container-phone: var(--container-gutter-phone);
|
||||
}
|
||||
@@ -0,0 +1,272 @@
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
* design-systems/posthog/tokens.css
|
||||
*
|
||||
* Structured token bindings for the PostHog design system — the
|
||||
* open-source product analytics brand whose marketing surface reads
|
||||
* like a startup's internal wiki that escaped into the wild. Warm
|
||||
* sage-cream surfaces, olive-tinted text, IBM Plex Sans at bold
|
||||
* weights for headings, and a single PostHog Orange (#F54E00) that
|
||||
* lives almost entirely on hover — a hidden brand signature that
|
||||
* surprises on interaction rather than shouting at rest.
|
||||
*
|
||||
* This file pre-compiles the values described in `DESIGN.md` into the
|
||||
* shared schema. Agents should paste the `:root { … }` block verbatim
|
||||
* into the first `<style>` of any artifact, then resolve every value
|
||||
* via `var(--*)` from that point on.
|
||||
*
|
||||
* Schema notes (brand-specific bindings worth flagging — section
|
||||
* references point into `DESIGN.md`):
|
||||
*
|
||||
* #Bind 1 — --bg is Warm Parchment (#fdfdf8), never pure white.
|
||||
* DESIGN.md §7 forbids #ffffff outright; the warm
|
||||
* yellow-green undertone is foundational and the
|
||||
* "don't use pure white" rule is in the Don'ts list.
|
||||
* --surface steps once to Sage Cream (#eeefe9) for
|
||||
* input fields and secondary containers, then
|
||||
* --surface-warm steps once more to Light Sage
|
||||
* (#e5e7e0) for button surfaces and tertiary tiers
|
||||
* (§2 Surface & Background).
|
||||
*
|
||||
* #Bind 2 — --fg ramp is olive, not neutral gray. Olive Ink
|
||||
* (#4d4f46) carries body text; Deep Olive (#23251d)
|
||||
* steps darker for headings and high-emphasis links;
|
||||
* Muted Olive (#65675e) is the standard subtext tier;
|
||||
* Sage Placeholder (#9ea096) is the disabled / meta
|
||||
* tier. DESIGN.md §7 mandates the olive family — pure
|
||||
* black or neutral gray reads as the wrong brand.
|
||||
*
|
||||
* #Bind 3 — --accent is PostHog Orange (#F54E00) — a hidden
|
||||
* signature. DESIGN.md §1 describes it as "a vibrant
|
||||
* orange that surprises on hover" — the marketing
|
||||
* surface uses it almost exclusively as TEXT color on
|
||||
* hover, not as a CTA fill. The token still binds the
|
||||
* brand color so components can opt into orange fills
|
||||
* when truly appropriate; primary CTAs render dark
|
||||
* (--fg-2) per §4 Buttons. Accent-on/hover/active use
|
||||
* the schema's color-mix defaults — DESIGN.md does not
|
||||
* publish orange pressed-state hex values.
|
||||
*
|
||||
* #Bind 4 — --warn binds to Amber Gold (#F7A501) — DESIGN.md §2
|
||||
* names this as the dark-button hover accent and the
|
||||
* warmth-signal sibling to PostHog Orange. Mapping it
|
||||
* to the warn slot keeps the gold reachable to
|
||||
* components without inventing a brand-specific token.
|
||||
* --success and --danger stay on schema defaults since
|
||||
* DESIGN.md publishes no greens or reds.
|
||||
*
|
||||
* #Bind 5 — Radius scale stays deliberately tight per DESIGN.md
|
||||
* §5 / §7 — 4px is the workhorse for buttons and
|
||||
* inputs, 6px for cards (DESIGN.md §4 Cards), 8px
|
||||
* caps the lg tier. The Don'ts list explicitly
|
||||
* forbids 12px+ on cards; the system reads as
|
||||
* functional-scrappy, never plush. Pill stays 9999px
|
||||
* for badges and status dots.
|
||||
*
|
||||
* #Bind 6 — --elev-raised is THE single sanctioned shadow per
|
||||
* DESIGN.md §6 ("only one shadow definition exists in
|
||||
* the entire system"). Reserved for floating elements
|
||||
* — modals, dropdowns, mega-menus. Every other depth
|
||||
* cue comes from sage borders and surface-color
|
||||
* shifts. Cards must not reach for this shadow.
|
||||
*
|
||||
* #Bind 7 — --focus-ring is Focus Blue (#3b82f6) at 50% opacity,
|
||||
* the one cool color in the system. DESIGN.md §2 and
|
||||
* §4 mandate this Tailwind-derived ring as an
|
||||
* accessibility-only color; reserving it to focus
|
||||
* keeps the warm sage/olive identity uncompromised
|
||||
* while still passing keyboard-navigation contrast.
|
||||
*
|
||||
* #Bind 8 — Type scale tops out modestly. DESIGN.md §3 publishes
|
||||
* 30px as the display hero ceiling (--text-2xl) and
|
||||
* 36px as the section heading (--text-3xl); --text-4xl
|
||||
* extrapolates to 44px for fixture-scale hero copy.
|
||||
* Tracking compresses on display sizes (-0.025em
|
||||
* normalizes -0.75px at 30px) and relaxes to 0 on
|
||||
* body. Leading is generous everywhere — 1.50 body,
|
||||
* 1.20 tight — because the marketing surface is
|
||||
* content-heavy and optimized for long reading
|
||||
* sessions (§3 Principles).
|
||||
*
|
||||
* #Bind 9 — --container-max is 1280px per DESIGN.md §5 ("content
|
||||
* containers likely 1200px–1280px"). Gutters tighten
|
||||
* progressively: 24/16/12 desktop/tablet/phone — tight
|
||||
* but not cramped, matching PostHog's content-dense
|
||||
* editorial pacing.
|
||||
*
|
||||
* Brand-specific extensions: none in this revision. The Warm Tan
|
||||
* (#d4c9b8) featured-button background and Hover White (#f4f4f4)
|
||||
* universal hover state stay inline at the components that need
|
||||
* them; neither earns a shared slot.
|
||||
* ─────────────────────────────────────────────────────────────────── */
|
||||
|
||||
:root {
|
||||
/* ─── Surface (3 levels) ────────────────────────────────────────
|
||||
* Warm Parchment is the page; Sage Cream is the secondary
|
||||
* container (input backgrounds, hover/feature sections); Light
|
||||
* Sage is the tertiary tier for button surfaces and quiet card
|
||||
* fills. Three steps create depth WITHOUT shadows — DESIGN.md §6
|
||||
* notes that "moving from #fdfdf8 to #eeefe9 to #e5e7e0 creates
|
||||
* layered depth without shadows", and the whole brand depends on
|
||||
* that surface-color rhythm rather than blur. */
|
||||
--bg: #fdfdf8;
|
||||
--surface: #eeefe9;
|
||||
--surface-warm: #e5e7e0;
|
||||
|
||||
/* ─── Foreground ramp (4 levels) ────────────────────────────────
|
||||
* Olive Ink anchors roughly every body paragraph, every nav
|
||||
* label, every button text token on light surfaces. Deep Olive
|
||||
* steps darker for headings and high-emphasis links — the
|
||||
* near-black with green undertone that signals "click me". Muted
|
||||
* Olive is the secondary subtext tier. Sage Placeholder is the
|
||||
* disabled / meta tier and pulls double duty as input
|
||||
* placeholder color. */
|
||||
--fg: #4d4f46;
|
||||
--fg-2: #23251d;
|
||||
--muted: #65675e;
|
||||
--meta: #9ea096;
|
||||
|
||||
/* ─── Border (2 levels) ─────────────────────────────────────────
|
||||
* Sage Border (#bfc1b7) is the workhorse — every card edge,
|
||||
* every input outline, every divider rule. The soft tier is a
|
||||
* lighter sage tint used for inner row separators that should
|
||||
* not visually compete with the primary card edge; derived as a
|
||||
* 50% mix back toward --bg so it stays in the same warm-green
|
||||
* family without inventing a new hex. */
|
||||
--border: #bfc1b7;
|
||||
--border-soft: color-mix(in oklab, var(--border), var(--bg) 50%);
|
||||
|
||||
/* ─── Accent ────────────────────────────────────────────────────
|
||||
* PostHog Orange — the single signature color. Per DESIGN.md §1
|
||||
* it lives almost exclusively on hover as text color, not as a
|
||||
* CTA fill, but the token still binds the brand color so any
|
||||
* component opting into orange surfaces can do so consistently.
|
||||
* Primary CTAs render dark (#1e1f23 ≈ --fg-2 territory) with
|
||||
* opacity-based hover states; that treatment lives inline at
|
||||
* the button component, not as a shared accent. */
|
||||
--accent: #F54E00;
|
||||
--accent-on: #ffffff;
|
||||
--accent-hover: color-mix(in oklab, var(--accent), black 8%);
|
||||
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
||||
|
||||
/* ─── Semantic ──────────────────────────────────────────────────
|
||||
* --warn binds to Amber Gold (DESIGN.md §2's "warmth signal")
|
||||
* because the brand publishes that exact value as the secondary
|
||||
* hover accent. --success and --danger stay on schema defaults
|
||||
* — DESIGN.md does not specify brand greens or reds and the
|
||||
* marketing surface almost never renders status. Keep semantic
|
||||
* pixels well under 5% of any page. */
|
||||
--success: #16a34a;
|
||||
--warn: #F7A501;
|
||||
--danger: #dc2626;
|
||||
|
||||
/* ─── Typography — fonts ────────────────────────────────────────
|
||||
* IBM Plex Sans Variable is the single voice — display and body
|
||||
* share the family (DESIGN.md §3). The fallback chain matches
|
||||
* the brand's documented order: IBM Plex Sans static, then the
|
||||
* platform fallbacks, then the broad sans-serif catch-all. Mono
|
||||
* is Source Code Pro with the standard system fallbacks per
|
||||
* DESIGN.md §3 Font Family. */
|
||||
--font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
|
||||
/* ─── Typography — type scale (px) ──────────────────────────────
|
||||
* Derived from DESIGN.md §3 Hierarchy table. The scale tops out
|
||||
* modestly — 30px for the display hero, 36px for section
|
||||
* headings — because PostHog's editorial pacing favors confident
|
||||
* mid-weight headings over giant ones. --text-4xl extrapolates
|
||||
* to 44px for fixture-scale hero copy; the production site
|
||||
* rarely goes that big. */
|
||||
--text-xs: 12px;
|
||||
--text-sm: 14px;
|
||||
--text-base: 16px;
|
||||
--text-lg: 20px;
|
||||
--text-xl: 24px;
|
||||
--text-2xl: 30px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 44px;
|
||||
|
||||
/* ─── Typography — leading & tracking ───────────────────────────
|
||||
* Body leads 1.50 (DESIGN.md §3 — body sizes 1.50–1.71 for the
|
||||
* content-heavy editorial layout); display compresses to 1.20
|
||||
* for the 30px hero per the same table. Tracking compresses
|
||||
* negatively on display sizes (-0.025em normalizes the brand's
|
||||
* -0.75px at 30px) and relaxes to 0 on body. */
|
||||
--leading-body: 1.5;
|
||||
--leading-tight: 1.2;
|
||||
--tracking-display: -0.025em;
|
||||
|
||||
/* ─── Spacing — base scale ──────────────────────────────────────
|
||||
* 8px base unit per DESIGN.md §5. PostHog's published scale
|
||||
* includes off-grid values (2, 6, 10, 18, 34) for fine-grained
|
||||
* icon and padding adjustments; the shared scale stays on the
|
||||
* standard 4px grid — off-grid spacing belongs inline at the
|
||||
* component level, not in shared tokens. */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-12: 48px;
|
||||
|
||||
/* ─── Section rhythm ────────────────────────────────────────────
|
||||
* Section padding 32–48px desktop per DESIGN.md §5 ("compact for
|
||||
* a content-heavy site"). We bind the upper bound on desktop so
|
||||
* the rhythm reads as deliberate spacing rather than crowding;
|
||||
* tablet and phone step down to keep small screens tight. */
|
||||
--section-y-desktop: 48px;
|
||||
--section-y-tablet: 32px;
|
||||
--section-y-phone: 24px;
|
||||
|
||||
/* ─── Radius ────────────────────────────────────────────────────
|
||||
* Deliberately tight — DESIGN.md §7's Don'ts forbid 12px+ on
|
||||
* cards. 4px is the workhorse (buttons, inputs, dropdowns,
|
||||
* menus); 6px is the card tier (§4 Cards "4px–6px radius");
|
||||
* 8px caps the lg tier for slightly larger containers; pill
|
||||
* stays 9999px for badges and status dots. */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-pill: 9999px;
|
||||
|
||||
/* ─── Elevation ─────────────────────────────────────────────────
|
||||
* THE single sanctioned shadow per DESIGN.md §6 — "only one
|
||||
* shadow definition exists in the entire system". Reserved for
|
||||
* floating elements (modals, dropdowns, mega-menus, popovers).
|
||||
* Every other depth cue comes from sage borders and surface
|
||||
* color shifts. Cards must NOT reach for this shadow — DESIGN.md
|
||||
* §7 specifically forbids adding heavy shadows beyond this one. */
|
||||
--elev-flat: none;
|
||||
--elev-ring: 0 0 0 1px var(--border);
|
||||
--elev-raised: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
|
||||
/* ─── Focus ring ────────────────────────────────────────────────
|
||||
* Focus Blue (#3b82f6) at 50% opacity — the lone cool color in
|
||||
* the system, reserved for accessibility per DESIGN.md §2 / §4.
|
||||
* Implementing as a 3px box-shadow keeps focus indication
|
||||
* outside the layout box; the warm sage/olive identity stays
|
||||
* uncompromised at rest. */
|
||||
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
|
||||
/* ─── Motion ────────────────────────────────────────────────────
|
||||
* Default schema timings. DESIGN.md does not publish transition
|
||||
* specs (static extraction scope); we bind defaults consistent
|
||||
* with the brand's tactile feel — 150ms for micro-states (the
|
||||
* famous opacity flash on dark buttons) and 200ms for general
|
||||
* state changes. Standard easing curve, no overshoot. */
|
||||
--motion-fast: 150ms;
|
||||
--motion-base: 200ms;
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
|
||||
/* ─── Layout ────────────────────────────────────────────────────
|
||||
* Container caps at 1280px per DESIGN.md §5 ("content containers
|
||||
* likely 1200px–1280px"). Gutters tighten progressively: 24px
|
||||
* desktop, 16px tablet, 12px phone — tight but not cramped,
|
||||
* matching PostHog's content-dense editorial pacing. */
|
||||
--container-max: 1280px;
|
||||
--container-gutter-desktop: 24px;
|
||||
--container-gutter-tablet: 16px;
|
||||
--container-gutter-phone: 12px;
|
||||
}
|
||||
Reference in new issue
Block a user