add new designs
This commit is contained in:
necatiozmen
256
design-md/posthog/DESIGN.md
Normal file
256
design-md/posthog/DESIGN.md
Normal file
@@ -0,0 +1,256 @@
|
||||
# Design System: PostHog
|
||||
|
||||
## 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
|
||||
23
design-md/posthog/README.md
Normal file
23
design-md/posthog/README.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Posthog Inspired Design System
|
||||
|
||||
[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/posthog/DESIGN.md) extracted from the public [posthog](https://posthog.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/posthog/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Posthog design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
701
design-md/posthog/preview-dark.html
Normal file
701
design-md/posthog/preview-dark.html
Normal file
@@ -0,0 +1,701 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by PostHog — Dark Mode</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--olive-ink: #4d4f46;
|
||||
--deep-olive: #23251d;
|
||||
--posthog-orange: #F54E00;
|
||||
--amber-gold: #F7A501;
|
||||
--gold-border: #b17816;
|
||||
--focus-blue: #3b82f6;
|
||||
--warm-parchment: #fdfdf8;
|
||||
--sage-cream: #eeefe9;
|
||||
--light-sage: #e5e7e0;
|
||||
--warm-tan: #d4c9b8;
|
||||
--hover-white: #f4f4f4;
|
||||
--muted-olive: #65675e;
|
||||
--sage-placeholder: #9ea096;
|
||||
--sage-border: #bfc1b7;
|
||||
--light-border: #b6b7af;
|
||||
--near-black: #1e1f23;
|
||||
--dark-text: #111827;
|
||||
--white: #ffffff;
|
||||
--font: 'IBM Plex Sans', -apple-system, system-ui, 'Segoe UI', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
|
||||
/* Dark mode */
|
||||
--dk-bg: #151614;
|
||||
--dk-surface: #1c1d1a;
|
||||
--dk-surface-elevated: #252621;
|
||||
--dk-border: #3a3b36;
|
||||
--dk-text-primary: #e5e7e0;
|
||||
--dk-text-secondary: #9ea096;
|
||||
--dk-text-muted: #65675e;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: var(--font);
|
||||
background: var(--dk-bg);
|
||||
color: var(--dk-text-primary);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* DARK MODE BADGE */
|
||||
.dark-badge {
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
z-index: 200;
|
||||
background: var(--posthog-orange);
|
||||
color: var(--white);
|
||||
padding: 5px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 32px;
|
||||
background: rgba(21, 22, 20, 0.92);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid var(--dk-border);
|
||||
}
|
||||
.nav-brand {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--dk-text-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-links a {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--dk-text-secondary);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.nav-links a:hover { color: var(--posthog-orange); }
|
||||
.nav-cta {
|
||||
background: var(--warm-parchment);
|
||||
color: var(--deep-olive);
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.nav-cta:hover { opacity: 0.85; }
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
background: var(--dk-bg);
|
||||
padding: 80px 32px 64px;
|
||||
border-bottom: 1px solid var(--dk-border);
|
||||
}
|
||||
.hero-inner { max-width: 800px; margin: 0 auto; }
|
||||
.hero h1 {
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
line-height: 1.20;
|
||||
letter-spacing: -0.75px;
|
||||
color: var(--dk-text-primary);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.hero .subtitle {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1.56;
|
||||
color: var(--dk-text-secondary);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
.btn-light {
|
||||
background: var(--warm-parchment);
|
||||
color: var(--deep-olive);
|
||||
padding: 10px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
font-family: var(--font);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.btn-light:hover { opacity: 0.85; }
|
||||
.btn-outline-dk {
|
||||
background: transparent;
|
||||
color: var(--dk-text-primary);
|
||||
padding: 10px 16px;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font);
|
||||
border: 1px solid var(--dk-border);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.btn-outline-dk:hover { color: var(--posthog-orange); }
|
||||
|
||||
/* SECTIONS */
|
||||
.section { padding: 64px 32px; max-width: 1100px; margin: 0 auto; }
|
||||
.section-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.33;
|
||||
color: var(--dk-text-primary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.50;
|
||||
color: var(--dk-text-secondary);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
/* COLORS */
|
||||
.color-category { margin-bottom: 32px; }
|
||||
.color-category h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--dk-text-primary);
|
||||
margin-bottom: 16px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.color-swatch {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--dk-border);
|
||||
background: var(--dk-surface);
|
||||
}
|
||||
.swatch-color { height: 80px; width: 100%; }
|
||||
.swatch-info { padding: 10px 12px; }
|
||||
.swatch-name { font-size: 13px; font-weight: 700; color: var(--dk-text-primary); margin-bottom: 2px; }
|
||||
.swatch-hex { font-size: 12px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--mono); margin-bottom: 4px; }
|
||||
.swatch-role { font-size: 11px; color: var(--dk-text-secondary); line-height: 1.4; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample {
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid var(--dk-border);
|
||||
}
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample .type-text { color: var(--dk-text-primary); margin-bottom: 6px; }
|
||||
.type-sample .type-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--posthog-orange);
|
||||
font-family: var(--mono);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
.button-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
|
||||
.button-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
|
||||
.btn-label { font-size: 11px; font-weight: 500; color: var(--dk-text-muted); font-family: var(--mono); }
|
||||
.btn-dk-primary {
|
||||
background: var(--warm-parchment);
|
||||
color: var(--deep-olive);
|
||||
padding: 10px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
font-family: var(--font);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.btn-dk-primary:hover { opacity: 0.85; }
|
||||
.btn-dk-sage {
|
||||
background: var(--dk-surface-elevated);
|
||||
color: var(--dk-text-primary);
|
||||
padding: 10px 16px;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font);
|
||||
border: 1px solid var(--dk-border);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.btn-dk-sage:hover { color: var(--posthog-orange); }
|
||||
.btn-dk-tan {
|
||||
background: #4a3f30;
|
||||
color: var(--warm-tan);
|
||||
padding: 10px 16px;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.btn-dk-tan:hover { color: var(--posthog-orange); }
|
||||
.btn-dk-input {
|
||||
background: var(--dk-surface);
|
||||
color: var(--dk-text-muted);
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
font-family: var(--font);
|
||||
border: 1px solid var(--dk-border);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.btn-dk-input:hover { color: var(--posthog-orange); }
|
||||
.btn-dk-ghost {
|
||||
background: transparent;
|
||||
color: var(--dk-text-secondary);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: var(--font);
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.btn-dk-ghost:hover { color: var(--posthog-orange); }
|
||||
|
||||
/* CARDS */
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.card { border-radius: 6px; padding: 24px; transition: transform 0.15s; }
|
||||
.card-dk-bordered { background: var(--dk-surface); border: 1px solid var(--dk-border); }
|
||||
.card-dk-elevated { background: var(--dk-surface-elevated); border: 1px solid var(--dk-border); }
|
||||
.card-dk-shadow {
|
||||
background: var(--dk-surface);
|
||||
border: 1px solid var(--dk-border);
|
||||
box-shadow: 0px 25px 50px -12px rgba(0,0,0,0.5);
|
||||
}
|
||||
.card-hover:hover { transform: translateY(-2px); }
|
||||
.card h4 { font-size: 20px; font-weight: 700; color: var(--dk-text-primary); margin-bottom: 8px; line-height: 1.40; }
|
||||
.card .card-desc { font-size: 15px; font-weight: 400; line-height: 1.71; color: var(--dk-text-secondary); }
|
||||
.card .card-label { font-size: 11px; font-weight: 500; color: var(--posthog-orange); font-family: var(--mono); margin-top: 12px; }
|
||||
|
||||
/* FORMS */
|
||||
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-group label { font-size: 14px; font-weight: 600; color: var(--dk-text-primary); }
|
||||
.form-group input, .form-group textarea {
|
||||
font-family: var(--font);
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--dk-border);
|
||||
background: var(--dk-surface);
|
||||
color: var(--dk-text-primary);
|
||||
outline: none;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--dk-text-muted); }
|
||||
.form-group input:focus, .form-group textarea:focus {
|
||||
border-color: var(--focus-blue);
|
||||
box-shadow: 0 0 0 2px rgba(59,130,246,0.3);
|
||||
}
|
||||
.form-group input.error { border-color: var(--posthog-orange); }
|
||||
.form-group textarea { resize: vertical; min-height: 80px; }
|
||||
.form-hint { font-size: 11px; color: var(--dk-text-muted); font-family: var(--mono); }
|
||||
.form-error-text { font-size: 11px; color: var(--posthog-orange); }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
|
||||
.spacing-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||||
.spacing-box { background: var(--posthog-orange); border-radius: 2px; height: 40px; opacity: 0.6; }
|
||||
.spacing-label { font-size: 10px; font-weight: 600; color: var(--dk-text-muted); font-family: var(--mono); }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
|
||||
.radius-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
||||
.radius-box { width: 80px; height: 80px; background: var(--dk-surface-elevated); border: 1px solid var(--dk-border); }
|
||||
.radius-label { font-size: 12px; font-weight: 700; color: var(--dk-text-primary); font-family: var(--mono); }
|
||||
.radius-context { font-size: 10px; color: var(--dk-text-muted); text-align: center; }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-section {
|
||||
background: var(--dk-surface);
|
||||
border-radius: 6px;
|
||||
padding: 40px;
|
||||
border: 1px solid var(--dk-border);
|
||||
}
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
|
||||
.elevation-card {
|
||||
background: var(--dk-surface-elevated);
|
||||
border-radius: 6px;
|
||||
padding: 24px;
|
||||
min-height: 120px;
|
||||
}
|
||||
.elevation-card h4 { font-size: 14px; font-weight: 700; color: var(--dk-text-primary); margin-bottom: 6px; }
|
||||
.elevation-card p { font-size: 12px; color: var(--dk-text-secondary); line-height: 1.5; }
|
||||
.elev-flat { box-shadow: none; border: none; }
|
||||
.elev-border { box-shadow: none; border: 1px solid var(--dk-border); }
|
||||
.elev-compound { box-shadow: none; border-top: 1px solid var(--dk-border); border-left: 1px solid var(--dk-border); border-bottom: 1px solid var(--dk-border); }
|
||||
.elev-deep { box-shadow: 0px 25px 50px -12px rgba(0,0,0,0.6); border: none; }
|
||||
|
||||
/* FOOTER */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 40px 32px;
|
||||
border-top: 1px solid var(--dk-border);
|
||||
font-size: 13px;
|
||||
color: var(--dk-text-muted);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
nav { padding: 10px 16px; }
|
||||
.nav-links { display: none; }
|
||||
.hero { padding: 48px 16px 40px; }
|
||||
.hero h1 { font-size: 24px; }
|
||||
.section { padding: 40px 16px; }
|
||||
.section-title { font-size: 20px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.elevation-section { padding: 20px; }
|
||||
.elevation-grid { grid-template-columns: 1fr; }
|
||||
.dark-badge { top: 10px; right: 10px; font-size: 10px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- DARK MODE BADGE -->
|
||||
<div class="dark-badge">Dark Mode</div>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav>
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
<li><a href="#radius">Radius</a></li>
|
||||
<li><a href="#elevation">Elevation</a></li>
|
||||
</ul>
|
||||
<a href="#" class="nav-cta">Get started - free</a>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="hero-inner">
|
||||
<h1>Design System Inspired by PostHog</h1>
|
||||
<p class="subtitle">A visual catalog of design tokens extracted from PostHog's website — warm, earthy, and deliberately anti-corporate.</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-light">Explore Tokens</button>
|
||||
<button class="btn-outline-dk">View DESIGN.md</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 1. COLORS -->
|
||||
<section class="section" id="colors">
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
<p class="section-subtitle">PostHog's warm olive/sage palette on dark surfaces.</p>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#4d4f46;"></div><div class="swatch-info"><div class="swatch-name">Olive Ink</div><div class="swatch-hex">#4d4f46</div><div class="swatch-role">Primary text color</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#23251d;"></div><div class="swatch-info"><div class="swatch-name">Deep Olive</div><div class="swatch-hex">#23251d</div><div class="swatch-role">Links and headings</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#F54E00;"></div><div class="swatch-info"><div class="swatch-name">PostHog Orange</div><div class="swatch-hex">#F54E00</div><div class="swatch-role">Hidden hover accent</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Secondary & Accent</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#F7A501;"></div><div class="swatch-info"><div class="swatch-name">Amber Gold</div><div class="swatch-hex">#F7A501</div><div class="swatch-role">Dark button hover accent</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#b17816;"></div><div class="swatch-info"><div class="swatch-name">Gold Border</div><div class="swatch-hex">#b17816</div><div class="swatch-role">Featured button borders</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#3b82f6;"></div><div class="swatch-info"><div class="swatch-name">Focus Blue</div><div class="swatch-hex">#3b82f6</div><div class="swatch-role">Focus ring (accessibility)</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Surface & Background</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#fdfdf8;"></div><div class="swatch-info"><div class="swatch-name">Warm Parchment</div><div class="swatch-hex">#fdfdf8</div><div class="swatch-role">Page background (light)</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#eeefe9;"></div><div class="swatch-info"><div class="swatch-name">Sage Cream</div><div class="swatch-hex">#eeefe9</div><div class="swatch-role">Input & secondary surfaces</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#e5e7e0;"></div><div class="swatch-info"><div class="swatch-name">Light Sage</div><div class="swatch-hex">#e5e7e0</div><div class="swatch-role">Button backgrounds</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#d4c9b8;"></div><div class="swatch-info"><div class="swatch-name">Warm Tan</div><div class="swatch-hex">#d4c9b8</div><div class="swatch-role">Featured button background</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#f4f4f4;"></div><div class="swatch-info"><div class="swatch-name">Hover White</div><div class="swatch-hex">#f4f4f4</div><div class="swatch-role">Hover background state</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Neutrals & Text</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#65675e;"></div><div class="swatch-info"><div class="swatch-name">Muted Olive</div><div class="swatch-hex">#65675e</div><div class="swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#9ea096;"></div><div class="swatch-info"><div class="swatch-name">Sage Placeholder</div><div class="swatch-hex">#9ea096</div><div class="swatch-role">Placeholder text</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#bfc1b7;"></div><div class="swatch-info"><div class="swatch-name">Sage Border</div><div class="swatch-hex">#bfc1b7</div><div class="swatch-role">Primary borders</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#b6b7af;"></div><div class="swatch-info"><div class="swatch-name">Light Border</div><div class="swatch-hex">#b6b7af</div><div class="swatch-role">Toolbar borders</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#1e1f23;"></div><div class="swatch-info"><div class="swatch-name">Near-Black</div><div class="swatch-hex">#1e1f23</div><div class="swatch-role">Dark CTA button</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2. TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
<p class="section-subtitle">IBM Plex Sans Variable with bold headings and generous body line-heights.</p>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:30px; font-weight:800; line-height:1.20; letter-spacing:-0.75px;">Display Hero</div>
|
||||
<div class="type-label">Display Hero — 30px / 800 / 1.20 / -0.75px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:36px; font-weight:700; line-height:1.50;">Section Heading</div>
|
||||
<div class="type-label">Section Heading — 36px / 700 / 1.50 / 0px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:24px; font-weight:700; line-height:1.33;">Feature Heading</div>
|
||||
<div class="type-label">Feature Heading — 24px / 700 / 1.33 / 0px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:20px; font-weight:700; line-height:1.40; letter-spacing:-0.5px;">Sub-heading</div>
|
||||
<div class="type-label">Sub-heading — 20px / 700 / 1.40 / -0.5px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:20px; font-weight:700; line-height:1.40; text-transform:uppercase;">Sub-heading Uppercase</div>
|
||||
<div class="type-label">Sub-heading Uppercase — 20px / 700 / 1.40 / uppercase</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:18px; font-weight:600; line-height:1.56;">Body Semi — Semi-bold body text for callouts and emphasis</div>
|
||||
<div class="type-label">Body Semi — 18px / 600 / 1.56 / 0px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:16px; font-weight:400; line-height:1.50;">Body — Standard reading text with comfortable line-height for content-heavy pages.</div>
|
||||
<div class="type-label">Body — 16px / 400 / 1.50 / 0px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:15px; font-weight:400; line-height:1.71;">Body Relaxed — Relaxed line-height for long-form reading passages and editorial content.</div>
|
||||
<div class="type-label">Body Relaxed — 15px / 400 / 1.71 / 0px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:15px; font-weight:600; line-height:1.50;">Nav / UI Label</div>
|
||||
<div class="type-label">Nav / UI — 15px / 600 / 1.50 / 0px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:14px; font-weight:600; line-height:1.43;">Caption Semi — Emphasized captions</div>
|
||||
<div class="type-label">Caption Semi — 14px / 600 / 1.43 / 0px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:13px; font-weight:700; line-height:1.50;">Small Label Bold</div>
|
||||
<div class="type-label">Small Label — 13px / 700 / 1.50 / 0px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:12px; font-weight:700; line-height:1.33; text-transform:uppercase;">Micro Uppercase</div>
|
||||
<div class="type-label">Micro Uppercase — 12px / 700 / 1.33 / uppercase</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:14px; font-weight:500; line-height:1.43; font-family:var(--mono);">Code — Source Code Pro monospace</div>
|
||||
<div class="type-label">Code — 14px / 500 / 1.43 / Source Code Pro</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3. BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<p class="section-subtitle">Inverted for dark surfaces — orange hover flash preserved.</p>
|
||||
|
||||
<div class="button-grid">
|
||||
<div class="button-item">
|
||||
<button class="btn-dk-primary">Light Primary</button>
|
||||
<span class="btn-label">#fdfdf8 / #23251d / 6px</span>
|
||||
</div>
|
||||
<div class="button-item">
|
||||
<button class="btn-dk-sage">Sage Outline</button>
|
||||
<span class="btn-label">#252621 / border / 4px</span>
|
||||
</div>
|
||||
<div class="button-item">
|
||||
<button class="btn-dk-tan">Warm Tan</button>
|
||||
<span class="btn-label">dark tan bg / tan text / 4px</span>
|
||||
</div>
|
||||
<div class="button-item">
|
||||
<button class="btn-dk-input">Input Style</button>
|
||||
<span class="btn-label">dark surface / muted / 4px</span>
|
||||
</div>
|
||||
<div class="button-item">
|
||||
<button class="btn-dk-ghost">Ghost</button>
|
||||
<span class="btn-label">transparent / secondary / 4px</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<p class="section-subtitle">Dark surface cards with olive-tinted borders.</p>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-dk-bordered card-hover">
|
||||
<h4>Bordered Card</h4>
|
||||
<p class="card-desc">Dark surface with subtle olive border. Hover to see lift effect.</p>
|
||||
<p class="card-label">bg: #1c1d1a / border: 1px #3a3b36 / radius: 6px</p>
|
||||
</div>
|
||||
<div class="card card-dk-elevated">
|
||||
<h4>Elevated Card</h4>
|
||||
<p class="card-desc">Slightly lighter surface for secondary content groupings.</p>
|
||||
<p class="card-label">bg: #252621 / border: 1px #3a3b36 / radius: 6px</p>
|
||||
</div>
|
||||
<div class="card card-dk-shadow">
|
||||
<h4>Deep Shadow Card</h4>
|
||||
<p class="card-desc">Dramatic shadow for modals and floating elements on dark backgrounds.</p>
|
||||
<p class="card-label">shadow: 0 25px 50px -12px rgba(0,0,0,0.5)</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5. FORMS -->
|
||||
<section class="section" id="forms">
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<p class="section-subtitle">Dark surface inputs with blue focus rings.</p>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label>Default Input</label>
|
||||
<input type="text" placeholder="Search or ask a question...">
|
||||
<span class="form-hint">bg: #1c1d1a / border: #3a3b36 / radius: 4px</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Focus State</label>
|
||||
<input type="text" placeholder="Focused input" style="border-color:#3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.3);">
|
||||
<span class="form-hint">focus: blue ring rgba(59,130,246,0.3)</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Error State</label>
|
||||
<input type="text" class="error" placeholder="Invalid" value="bad input">
|
||||
<span class="form-error-text">Validation error — PostHog Orange border</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Textarea</label>
|
||||
<textarea placeholder="Type your message..."></textarea>
|
||||
<span class="form-hint">Same styles as input, resizable</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6. SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<p class="section-subtitle">8px base unit system.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:2px;"></div><span class="spacing-label">2</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:4px;"></div><span class="spacing-label">4</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:6px;"></div><span class="spacing-label">6</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:8px;"></div><span class="spacing-label">8</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:10px;"></div><span class="spacing-label">10</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:12px;"></div><span class="spacing-label">12</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:16px;"></div><span class="spacing-label">16</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:18px;"></div><span class="spacing-label">18</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:24px;"></div><span class="spacing-label">24</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:32px;"></div><span class="spacing-label">32</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:34px;"></div><span class="spacing-label">34</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 7. BORDER RADIUS -->
|
||||
<section class="section" id="radius">
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<p class="section-subtitle">Tight and functional — 2px to pill (9999px).</p>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius:2px;"></div>
|
||||
<span class="radius-label">2px</span>
|
||||
<span class="radius-context">Tags, inline</span>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius:4px;"></div>
|
||||
<span class="radius-label">4px</span>
|
||||
<span class="radius-context">Buttons, inputs</span>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius:6px;"></div>
|
||||
<span class="radius-label">6px</span>
|
||||
<span class="radius-context">Cards, containers</span>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius:9999px; width:80px; height:40px;"></div>
|
||||
<span class="radius-label">9999px</span>
|
||||
<span class="radius-context">Pill badges</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 8. ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<p class="section-subtitle">Minimal shadows — borders and surface colors do the heavy lifting.</p>
|
||||
|
||||
<div class="elevation-section">
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elev-flat">
|
||||
<h4>Level 0 — Flat</h4>
|
||||
<p>No shadow, dark surface. Default canvas for most elements.</p>
|
||||
</div>
|
||||
<div class="elevation-card elev-border">
|
||||
<h4>Level 1 — Border</h4>
|
||||
<p>1px solid olive-tinted border. Card containment and dividers.</p>
|
||||
</div>
|
||||
<div class="elevation-card elev-compound">
|
||||
<h4>Level 2 — Compound</h4>
|
||||
<p>Multiple borders on different sides. Toolbar and input groupings.</p>
|
||||
</div>
|
||||
<div class="elevation-card elev-deep">
|
||||
<h4>Level 3 — Deep Shadow</h4>
|
||||
<p>Dramatic shadow for modals, dropdowns, and floating elements.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
Generated from DESIGN.md — PostHog Design System Catalog (Dark Mode)
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
751
design-md/posthog/preview.html
Normal file
751
design-md/posthog/preview.html
Normal file
@@ -0,0 +1,751 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Inspired by PostHog</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--olive-ink: #4d4f46;
|
||||
--deep-olive: #23251d;
|
||||
--posthog-orange: #F54E00;
|
||||
--amber-gold: #F7A501;
|
||||
--gold-border: #b17816;
|
||||
--focus-blue: #3b82f6;
|
||||
--warm-parchment: #fdfdf8;
|
||||
--sage-cream: #eeefe9;
|
||||
--light-sage: #e5e7e0;
|
||||
--warm-tan: #d4c9b8;
|
||||
--hover-white: #f4f4f4;
|
||||
--muted-olive: #65675e;
|
||||
--sage-placeholder: #9ea096;
|
||||
--sage-border: #bfc1b7;
|
||||
--light-border: #b6b7af;
|
||||
--near-black: #1e1f23;
|
||||
--dark-text: #111827;
|
||||
--white: #ffffff;
|
||||
--font: 'IBM Plex Sans', -apple-system, system-ui, 'Segoe UI', 'Helvetica Neue', Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
|
||||
--mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: var(--font);
|
||||
background: var(--warm-parchment);
|
||||
color: var(--olive-ink);
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 32px;
|
||||
background: var(--warm-parchment);
|
||||
border-bottom: 1px solid var(--sage-border);
|
||||
}
|
||||
.nav-brand {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--deep-olive);
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-links a {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--olive-ink);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.nav-links a:hover { color: var(--posthog-orange); }
|
||||
.nav-cta {
|
||||
background: var(--near-black);
|
||||
color: var(--white);
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.nav-cta:hover { opacity: 0.7; }
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
background: var(--warm-parchment);
|
||||
padding: 80px 32px 64px;
|
||||
border-bottom: 1px solid var(--sage-border);
|
||||
}
|
||||
.hero-inner {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
line-height: 1.20;
|
||||
letter-spacing: -0.75px;
|
||||
color: var(--deep-olive);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.hero .subtitle {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1.56;
|
||||
color: var(--muted-olive);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.btn-dark {
|
||||
background: var(--near-black);
|
||||
color: var(--white);
|
||||
padding: 10px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
font-family: var(--font);
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.btn-dark:hover { opacity: 0.7; }
|
||||
.btn-sage {
|
||||
background: var(--light-sage);
|
||||
color: var(--olive-ink);
|
||||
padding: 10px 16px;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font);
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--sage-border);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
}
|
||||
.btn-sage:hover { color: var(--posthog-orange); background: var(--hover-white); }
|
||||
|
||||
/* SECTIONS */
|
||||
.section {
|
||||
padding: 64px 32px;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.33;
|
||||
color: var(--deep-olive);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.section-subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.50;
|
||||
color: var(--muted-olive);
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
/* COLORS */
|
||||
.color-category { margin-bottom: 32px; }
|
||||
.color-category h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--deep-olive);
|
||||
margin-bottom: 16px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
.color-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
.color-swatch {
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--sage-border);
|
||||
background: var(--white);
|
||||
}
|
||||
.swatch-color { height: 80px; width: 100%; }
|
||||
.swatch-info { padding: 10px 12px; }
|
||||
.swatch-name { font-size: 13px; font-weight: 700; color: var(--deep-olive); margin-bottom: 2px; }
|
||||
.swatch-hex { font-size: 12px; font-weight: 500; color: var(--sage-placeholder); font-family: var(--mono); margin-bottom: 4px; }
|
||||
.swatch-role { font-size: 11px; color: var(--muted-olive); line-height: 1.4; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample {
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid var(--sage-border);
|
||||
}
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-sample .type-text { color: var(--deep-olive); margin-bottom: 6px; }
|
||||
.type-sample .type-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--posthog-orange);
|
||||
font-family: var(--mono);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
.button-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.button-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
.btn-label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--sage-placeholder);
|
||||
font-family: var(--mono);
|
||||
}
|
||||
.btn-tan {
|
||||
background: var(--warm-tan);
|
||||
color: #000;
|
||||
padding: 10px 16px;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.btn-tan:hover { color: var(--posthog-orange); }
|
||||
.btn-ghost-parchment {
|
||||
background: var(--warm-parchment);
|
||||
color: var(--olive-ink);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: var(--font);
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.btn-ghost-parchment:hover { color: var(--posthog-orange); }
|
||||
.btn-input {
|
||||
background: var(--sage-cream);
|
||||
color: var(--sage-placeholder);
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
font-family: var(--font);
|
||||
border: 1px solid var(--light-border);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.btn-input:hover { color: var(--posthog-orange); }
|
||||
|
||||
/* CARDS */
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.card {
|
||||
border-radius: 6px;
|
||||
padding: 24px;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.card-bordered {
|
||||
background: var(--white);
|
||||
border: 1px solid var(--sage-border);
|
||||
}
|
||||
.card-sage {
|
||||
background: var(--sage-cream);
|
||||
border: 1px solid var(--sage-border);
|
||||
}
|
||||
.card-shadow {
|
||||
background: var(--white);
|
||||
border: 1px solid var(--sage-border);
|
||||
box-shadow: 0px 25px 50px -12px rgba(0,0,0,0.25);
|
||||
}
|
||||
.card-hover:hover { transform: translateY(-2px); }
|
||||
.card h4 {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--deep-olive);
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.40;
|
||||
}
|
||||
.card .card-desc {
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 1.71;
|
||||
color: var(--muted-olive);
|
||||
}
|
||||
.card .card-label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--posthog-orange);
|
||||
font-family: var(--mono);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* FORMS */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.form-group { display: flex; flex-direction: column; gap: 6px; }
|
||||
.form-group label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--deep-olive);
|
||||
}
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
font-family: var(--font);
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--light-border);
|
||||
background: var(--sage-cream);
|
||||
color: var(--deep-olive);
|
||||
outline: none;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.form-group input::placeholder,
|
||||
.form-group textarea::placeholder { color: var(--sage-placeholder); }
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
border-color: var(--focus-blue);
|
||||
box-shadow: 0 0 0 2px rgba(59,130,246,0.3);
|
||||
}
|
||||
.form-group input.error { border-color: var(--posthog-orange); }
|
||||
.form-group textarea { resize: vertical; min-height: 80px; }
|
||||
.form-hint { font-size: 11px; color: var(--sage-placeholder); font-family: var(--mono); }
|
||||
.form-error-text { font-size: 11px; color: var(--posthog-orange); }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.spacing-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.spacing-box {
|
||||
background: var(--posthog-orange);
|
||||
border-radius: 2px;
|
||||
height: 40px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.spacing-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--muted-olive);
|
||||
font-family: var(--mono);
|
||||
}
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
}
|
||||
.radius-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.radius-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: var(--light-sage);
|
||||
border: 1px solid var(--sage-border);
|
||||
}
|
||||
.radius-label { font-size: 12px; font-weight: 700; color: var(--deep-olive); font-family: var(--mono); }
|
||||
.radius-context { font-size: 10px; color: var(--sage-placeholder); text-align: center; }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-section {
|
||||
background: var(--sage-cream);
|
||||
border-radius: 6px;
|
||||
padding: 40px;
|
||||
border: 1px solid var(--sage-border);
|
||||
}
|
||||
.elevation-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.elevation-card {
|
||||
background: var(--white);
|
||||
border-radius: 6px;
|
||||
padding: 24px;
|
||||
min-height: 120px;
|
||||
}
|
||||
.elevation-card h4 { font-size: 14px; font-weight: 700; color: var(--deep-olive); margin-bottom: 6px; }
|
||||
.elevation-card p { font-size: 12px; color: var(--muted-olive); line-height: 1.5; }
|
||||
.elev-flat { box-shadow: none; border: none; }
|
||||
.elev-border { box-shadow: none; border: 1px solid var(--sage-border); }
|
||||
.elev-compound { box-shadow: none; border-top: 1px solid var(--sage-border); border-left: 1px solid var(--sage-border); border-bottom: 1px solid var(--sage-border); }
|
||||
.elev-deep { box-shadow: 0px 25px 50px -12px rgba(0,0,0,0.25); border: none; }
|
||||
|
||||
/* FOOTER */
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 40px 32px;
|
||||
border-top: 1px solid var(--sage-border);
|
||||
font-size: 13px;
|
||||
color: var(--sage-placeholder);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
nav { padding: 10px 16px; }
|
||||
.nav-links { display: none; }
|
||||
.hero { padding: 48px 16px 40px; }
|
||||
.hero h1 { font-size: 24px; }
|
||||
.section { padding: 40px 16px; }
|
||||
.section-title { font-size: 20px; }
|
||||
.color-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.elevation-section { padding: 20px; }
|
||||
.elevation-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav>
|
||||
<span class="nav-brand">awesome-design-md</span>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
<li><a href="#radius">Radius</a></li>
|
||||
<li><a href="#elevation">Elevation</a></li>
|
||||
</ul>
|
||||
<a href="#" class="nav-cta">Get started - free</a>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero">
|
||||
<div class="hero-inner">
|
||||
<h1>Design System Inspired by PostHog</h1>
|
||||
<p class="subtitle">A visual catalog of design tokens extracted from PostHog's website — warm, earthy, and deliberately anti-corporate.</p>
|
||||
<div class="hero-buttons">
|
||||
<button class="btn-dark">Explore Tokens</button>
|
||||
<button class="btn-sage">View DESIGN.md</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 1. COLORS -->
|
||||
<section class="section" id="colors">
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
<p class="section-subtitle">PostHog's warm olive/sage palette — no blues, no purples, just earthy warmth.</p>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Primary</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#4d4f46;"></div><div class="swatch-info"><div class="swatch-name">Olive Ink</div><div class="swatch-hex">#4d4f46</div><div class="swatch-role">Primary text color</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#23251d;"></div><div class="swatch-info"><div class="swatch-name">Deep Olive</div><div class="swatch-hex">#23251d</div><div class="swatch-role">Links and headings</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#F54E00;"></div><div class="swatch-info"><div class="swatch-name">PostHog Orange</div><div class="swatch-hex">#F54E00</div><div class="swatch-role">Hidden hover accent</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Secondary & Accent</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#F7A501;"></div><div class="swatch-info"><div class="swatch-name">Amber Gold</div><div class="swatch-hex">#F7A501</div><div class="swatch-role">Dark button hover accent</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#b17816;"></div><div class="swatch-info"><div class="swatch-name">Gold Border</div><div class="swatch-hex">#b17816</div><div class="swatch-role">Featured button borders</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#3b82f6;"></div><div class="swatch-info"><div class="swatch-name">Focus Blue</div><div class="swatch-hex">#3b82f6</div><div class="swatch-role">Focus ring (accessibility)</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Surface & Background</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#fdfdf8; border-bottom: 1px solid #e5e7e0;"></div><div class="swatch-info"><div class="swatch-name">Warm Parchment</div><div class="swatch-hex">#fdfdf8</div><div class="swatch-role">Page background</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#eeefe9;"></div><div class="swatch-info"><div class="swatch-name">Sage Cream</div><div class="swatch-hex">#eeefe9</div><div class="swatch-role">Input & secondary surfaces</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#e5e7e0;"></div><div class="swatch-info"><div class="swatch-name">Light Sage</div><div class="swatch-hex">#e5e7e0</div><div class="swatch-role">Button backgrounds</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#d4c9b8;"></div><div class="swatch-info"><div class="swatch-name">Warm Tan</div><div class="swatch-hex">#d4c9b8</div><div class="swatch-role">Featured button background</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#f4f4f4;"></div><div class="swatch-info"><div class="swatch-name">Hover White</div><div class="swatch-hex">#f4f4f4</div><div class="swatch-role">Hover background state</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="color-category">
|
||||
<h3>Neutrals & Text</h3>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#65675e;"></div><div class="swatch-info"><div class="swatch-name">Muted Olive</div><div class="swatch-hex">#65675e</div><div class="swatch-role">Secondary text</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#9ea096;"></div><div class="swatch-info"><div class="swatch-name">Sage Placeholder</div><div class="swatch-hex">#9ea096</div><div class="swatch-role">Placeholder text</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#bfc1b7;"></div><div class="swatch-info"><div class="swatch-name">Sage Border</div><div class="swatch-hex">#bfc1b7</div><div class="swatch-role">Primary borders</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#b6b7af;"></div><div class="swatch-info"><div class="swatch-name">Light Border</div><div class="swatch-hex">#b6b7af</div><div class="swatch-role">Toolbar borders</div></div></div>
|
||||
<div class="color-swatch"><div class="swatch-color" style="background:#1e1f23;"></div><div class="swatch-info"><div class="swatch-name">Near-Black</div><div class="swatch-hex">#1e1f23</div><div class="swatch-role">Dark CTA button</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2. TYPOGRAPHY -->
|
||||
<section class="section" id="typography">
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
<p class="section-subtitle">IBM Plex Sans Variable with bold headings and generous body line-heights.</p>
|
||||
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:30px; font-weight:800; line-height:1.20; letter-spacing:-0.75px;">Display Hero</div>
|
||||
<div class="type-label">Display Hero — 30px / 800 / 1.20 / -0.75px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:36px; font-weight:700; line-height:1.50;">Section Heading</div>
|
||||
<div class="type-label">Section Heading — 36px / 700 / 1.50 / 0px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:24px; font-weight:700; line-height:1.33;">Feature Heading</div>
|
||||
<div class="type-label">Feature Heading — 24px / 700 / 1.33 / 0px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:20px; font-weight:700; line-height:1.40; letter-spacing:-0.5px;">Sub-heading</div>
|
||||
<div class="type-label">Sub-heading — 20px / 700 / 1.40 / -0.5px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:20px; font-weight:700; line-height:1.40; text-transform:uppercase;">Sub-heading Uppercase</div>
|
||||
<div class="type-label">Sub-heading Uppercase — 20px / 700 / 1.40 / uppercase</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:18px; font-weight:600; line-height:1.56;">Body Semi — Semi-bold body text for callouts and emphasis</div>
|
||||
<div class="type-label">Body Semi — 18px / 600 / 1.56 / 0px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:16px; font-weight:400; line-height:1.50;">Body — Standard reading text with comfortable line-height for content-heavy pages.</div>
|
||||
<div class="type-label">Body — 16px / 400 / 1.50 / 0px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:15px; font-weight:400; line-height:1.71;">Body Relaxed — Relaxed line-height for long-form reading passages and editorial content.</div>
|
||||
<div class="type-label">Body Relaxed — 15px / 400 / 1.71 / 0px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:15px; font-weight:600; line-height:1.50;">Nav / UI Label</div>
|
||||
<div class="type-label">Nav / UI — 15px / 600 / 1.50 / 0px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:14px; font-weight:600; line-height:1.43;">Caption Semi — Emphasized captions</div>
|
||||
<div class="type-label">Caption Semi — 14px / 600 / 1.43 / 0px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:13px; font-weight:700; line-height:1.50;">Small Label Bold</div>
|
||||
<div class="type-label">Small Label — 13px / 700 / 1.50 / 0px</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:12px; font-weight:700; line-height:1.33; text-transform:uppercase;">Micro Uppercase</div>
|
||||
<div class="type-label">Micro Uppercase — 12px / 700 / 1.33 / uppercase</div>
|
||||
</div>
|
||||
<div class="type-sample">
|
||||
<div class="type-text" style="font-size:14px; font-weight:500; line-height:1.43; font-family:var(--mono);">Code — Source Code Pro monospace</div>
|
||||
<div class="type-label">Code — 14px / 500 / 1.43 / Source Code Pro</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3. BUTTONS -->
|
||||
<section class="section" id="buttons">
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<p class="section-subtitle">All buttons flash PostHog Orange on hover — the brand's signature surprise.</p>
|
||||
|
||||
<div class="button-grid">
|
||||
<div class="button-item">
|
||||
<button class="btn-dark">Dark Primary</button>
|
||||
<span class="btn-label">#1e1f23 / white / 6px / opacity hover</span>
|
||||
</div>
|
||||
<div class="button-item">
|
||||
<button class="btn-sage">Sage Light</button>
|
||||
<span class="btn-label">#e5e7e0 / #4d4f46 / 4px / orange hover</span>
|
||||
</div>
|
||||
<div class="button-item">
|
||||
<button class="btn-tan">Warm Tan</button>
|
||||
<span class="btn-label">#d4c9b8 / black / 4px / featured</span>
|
||||
</div>
|
||||
<div class="button-item">
|
||||
<button class="btn-input">Input Style</button>
|
||||
<span class="btn-label">#eeefe9 / #9ea096 / 4px / bordered</span>
|
||||
</div>
|
||||
<div class="button-item">
|
||||
<button class="btn-ghost-parchment">Ghost</button>
|
||||
<span class="btn-label">#fdfdf8 / #4d4f46 / 4px / minimal</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. CARDS -->
|
||||
<section class="section" id="cards">
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<p class="section-subtitle">Bordered, sage-surface, and deep-shadow card variants.</p>
|
||||
|
||||
<div class="card-grid">
|
||||
<div class="card card-bordered card-hover">
|
||||
<h4>Bordered Card</h4>
|
||||
<p class="card-desc">White background with sage border. Hover to see lift. The standard container pattern.</p>
|
||||
<p class="card-label">bg: #fff / border: 1px #bfc1b7 / radius: 6px</p>
|
||||
</div>
|
||||
<div class="card card-sage">
|
||||
<h4>Sage Surface Card</h4>
|
||||
<p class="card-desc">Sage cream background for secondary content areas and grouped information.</p>
|
||||
<p class="card-label">bg: #eeefe9 / border: 1px #bfc1b7 / radius: 6px</p>
|
||||
</div>
|
||||
<div class="card card-shadow">
|
||||
<h4>Deep Shadow Card</h4>
|
||||
<p class="card-desc">The single dramatic shadow — reserved for modals, dropdowns, and floating elements.</p>
|
||||
<p class="card-label">shadow: 0 25px 50px -12px rgba(0,0,0,0.25)</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5. FORMS -->
|
||||
<section class="section" id="forms">
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<p class="section-subtitle">Sage-tinted inputs with blue focus rings.</p>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label>Default Input</label>
|
||||
<input type="text" placeholder="Search or ask a question...">
|
||||
<span class="form-hint">bg: #eeefe9 / border: #b6b7af / radius: 4px</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Focus State</label>
|
||||
<input type="text" placeholder="Focused input" style="border-color:#3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.3);">
|
||||
<span class="form-hint">focus: blue ring rgba(59,130,246,0.3)</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Error State</label>
|
||||
<input type="text" class="error" placeholder="Invalid" value="bad input">
|
||||
<span class="form-error-text">Validation error — border turns PostHog Orange</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Textarea</label>
|
||||
<textarea placeholder="Type your message..."></textarea>
|
||||
<span class="form-hint">Same styles as input, resizable</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6. SPACING -->
|
||||
<section class="section" id="spacing">
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<p class="section-subtitle">8px base unit system.</p>
|
||||
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:2px;"></div><span class="spacing-label">2</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:4px;"></div><span class="spacing-label">4</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:6px;"></div><span class="spacing-label">6</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:8px;"></div><span class="spacing-label">8</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:10px;"></div><span class="spacing-label">10</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:12px;"></div><span class="spacing-label">12</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:16px;"></div><span class="spacing-label">16</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:18px;"></div><span class="spacing-label">18</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:24px;"></div><span class="spacing-label">24</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:32px;"></div><span class="spacing-label">32</span></div>
|
||||
<div class="spacing-item"><div class="spacing-box" style="width:34px;"></div><span class="spacing-label">34</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 7. BORDER RADIUS -->
|
||||
<section class="section" id="radius">
|
||||
<h2 class="section-title">Border Radius Scale</h2>
|
||||
<p class="section-subtitle">Tight and functional — 2px to pill (9999px).</p>
|
||||
|
||||
<div class="radius-row">
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius:2px;"></div>
|
||||
<span class="radius-label">2px</span>
|
||||
<span class="radius-context">Tags, inline</span>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius:4px;"></div>
|
||||
<span class="radius-label">4px</span>
|
||||
<span class="radius-context">Buttons, inputs</span>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius:6px;"></div>
|
||||
<span class="radius-label">6px</span>
|
||||
<span class="radius-context">Cards, containers</span>
|
||||
</div>
|
||||
<div class="radius-item">
|
||||
<div class="radius-box" style="border-radius:9999px; width:80px; height:40px;"></div>
|
||||
<span class="radius-label">9999px</span>
|
||||
<span class="radius-context">Pill badges</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 8. ELEVATION -->
|
||||
<section class="section" id="elevation">
|
||||
<h2 class="section-title">Elevation & Depth</h2>
|
||||
<p class="section-subtitle">Minimal shadows — borders and surface colors do the heavy lifting.</p>
|
||||
|
||||
<div class="elevation-section">
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card elev-flat">
|
||||
<h4>Level 0 — Flat</h4>
|
||||
<p>No shadow, warm parchment background. The default for most surfaces.</p>
|
||||
</div>
|
||||
<div class="elevation-card elev-border">
|
||||
<h4>Level 1 — Border</h4>
|
||||
<p>1px solid Sage Border (#bfc1b7). Card containment, input borders, section dividers.</p>
|
||||
</div>
|
||||
<div class="elevation-card elev-compound">
|
||||
<h4>Level 2 — Compound</h4>
|
||||
<p>Multiple 1px borders on different sides. Input groupings and toolbar elements.</p>
|
||||
</div>
|
||||
<div class="elevation-card elev-deep">
|
||||
<h4>Level 3 — Deep Shadow</h4>
|
||||
<p>0px 25px 50px -12px rgba(0,0,0,0.25). Reserved for modals, dropdowns, floating elements.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
Generated from DESIGN.md — PostHog Design System Catalog
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user