{"id":"f03e59e6-5326-4740-af79-8161cdbe1e12","shortId":"QQFVEH","kind":"skill","title":"design-md-posthog","tagline":"Design system reference for design md posthog.","description":"# Design System: PostHog\n\n## 1. Visual Theme & Atmosphere\n\nPostHog'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.\n\nThe 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.\"\n\nThe 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.\n\n**Key Characteristics:**\n- Warm sage/olive color palette instead of conventional blues  earthy and approachable\n- IBM Plex Sans Variable font at bold weights (700/800) for headings with generous 1.50+ line-heights\n- Hidden brand orange (`#F54E00`) that only appears on hover interactions  a delightful surprise\n- Hand-drawn hedgehog illustrations and playful imagery  deliberately anti-corporate\n- Sage-tinted borders (`#bfc1b7`) and backgrounds (`#eeefe9`) creating a unified warm-green system\n- Dark near-black CTAs (`#1e1f23`) with opacity-based hover states\n- Content-heavy editorial layout  the site reads like a magazine, not a typical landing page\n- Tailwind CSS + Radix UI + shadcn/ui component architecture\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Olive Ink** (`#4d4f46`): Primary text color  a distinctive olive-gray that gives all text a warm, earthy tone\n- **Deep Olive** (`#23251d`): Link text and high-emphasis headings  near-black with green undertone\n- **PostHog Orange** (`#F54E00`): Hidden brand accent  appears only on hover states, a vibrant orange that surprises\n\n### Secondary & Accent\n- **Amber Gold** (`#F7A501`): Secondary hover accent on dark buttons  warm gold that pairs with the orange\n- **Gold Border** (`#b17816`): Special button borders  an amber-gold for featured CTAs\n- **Focus Blue** (`#3b82f6`): Focus ring color (Tailwind default)  the only blue in the system, reserved for accessibility\n\n### Surface & Background\n- **Warm Parchment** (`#fdfdf8`): Primary page background  warm near-white with yellow-green undertone\n- **Sage Cream** (`#eeefe9`): Input backgrounds, secondary surfaces  light sage tint\n- **Light Sage** (`#e5e7e0`): Button backgrounds, tertiary surfaces  muted sage-green\n- **Warm Tan** (`#d4c9b8`): Featured button backgrounds  warm tan/khaki for emphasis\n- **Hover White** (`#f4f4f4`): Universal hover background state\n\n### Neutrals & Text\n- **Olive Ink** (`#4d4f46`): Primary body and UI text\n- **Muted Olive** (`#65675e`): Secondary text, button labels on light backgrounds\n- **Sage Placeholder** (`#9ea096`): Placeholder text, disabled states  warm sage-green\n- **Sage Border** (`#bfc1b7`): Primary border color  olive-tinted gray for all borders\n- **Light Border** (`#b6b7af`): Secondary border, toolbar borders  slightly darker sage\n\n### Semantic & Accent\n- **PostHog Orange** (`#F54E00`): Hover text accent  signals interactivity and brand personality\n- **Amber Gold** (`#F7A501`): Dark button hover accent  warmth signal\n- **Focus Blue** (`#3b82f6` at 50% opacity): Keyboard focus rings  accessibility-only color\n- **Dark Text** (`#111827`): High-contrast link text  near-black for important links\n\n### Gradient System\n- No gradients on the marketing site  PostHog's visual language is deliberately flat and warm\n- Depth is achieved through layered surfaces and border containment, not color transitions\n\n## 3. Typography Rules\n\n### Font Family\n- **Display & Body**: `IBM Plex Sans Variable`  variable font (100700+ weight range). Fallbacks: `IBM Plex Sans, -apple-system, system-ui, Avenir Next, Avenir, Segoe UI, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Arial`\n- **Monospace**: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`  system monospace stack\n- **Code Display**: `Source Code Pro`  with fallbacks: `Menlo, Consolas, Monaco`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | IBM Plex Sans Variable | 30px | 800 | 1.20 | -0.75px | Extra-bold, tight, maximum impact |\n| Section Heading | IBM Plex Sans Variable | 36px | 700 | 1.50 | 0px | Large but generous line-height |\n| Feature Heading | IBM Plex Sans Variable | 24px | 700 | 1.33 | 0px | Feature section titles |\n| Card Heading | IBM Plex Sans Variable | 21.4px | 700 | 1.40 | -0.54px | Slightly unusual size (scaled) |\n| Sub-heading | IBM Plex Sans Variable | 20px | 700 | 1.40 | -0.5px | Content sub-sections |\n| Sub-heading Uppercase | IBM Plex Sans Variable | 20px | 700 | 1.40 | 0px | Uppercase transform for labels |\n| Body Emphasis | IBM Plex Sans Variable | 19.3px | 600 | 1.56 | -0.48px | Semi-bold callout text |\n| Label Uppercase | IBM Plex Sans Variable | 18px | 700 | 1.50 | 0px | Uppercase category labels |\n| Body Semi | IBM Plex Sans Variable | 18px | 600 | 1.56 | 0px | Semi-bold body text |\n| Body | IBM Plex Sans Variable | 16px | 400 | 1.50 | 0px | Standard reading text |\n| Body Medium | IBM Plex Sans Variable | 16px | 500 | 1.50 | 0px | Medium-weight body |\n| Body Relaxed | IBM Plex Sans Variable | 15px | 400 | 1.71 | 0px | Relaxed line-height for long reads |\n| Nav / UI | IBM Plex Sans Variable | 15px | 600 | 1.50 | 0px | Navigation and UI labels |\n| Caption | IBM Plex Sans Variable | 14px | 400700 | 1.43 | 0px | Small text, various weights |\n| Small Label | IBM Plex Sans Variable | 13px | 500700 | 1.001.50 | 0px | Tags, badges, micro labels |\n| Micro | IBM Plex Sans Variable | 12px | 400700 | 1.33 | 0px | Smallest text, some uppercase |\n| Code | Source Code Pro | 14px | 500 | 1.43 | 0px | Code snippets and terminal |\n\n### Principles\n- **Bold heading dominance**: Headings use 700800 weight  PostHog's typography is confident and assertive, not whispery\n- **Generous body line-heights**: Body text at 1.501.71 line-height creates extremely comfortable reading  the site is content-heavy and optimized for long sessions\n- **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\n- **Uppercase as category signal**: Bold uppercase labels (18px20px weight 700) are used for product category headings  a magazine-editorial convention\n- **Selective negative tracking**: Letter-spacing tightens on display text (-0.75px at 30px) but relaxes to 0px on body  headlines compress, body breathes\n\n## 4. Component Stylings\n\n### Buttons\n- **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\n- **Sage Light**: `#e5e7e0` background, Olive Ink (`#4d4f46`) text, 4px radius, `4px` padding. Hover: `#f4f4f4` bg with PostHog Orange text. Compact utility button\n- **Warm Tan Featured**: `#d4c9b8` background, black text, no visible radius. Hover: same orange text flash. Featured/premium actions\n- **Input-style**: `#eeefe9` background, Sage Placeholder (`#9ea096`) text, 4px radius, 1px `#b6b7af` border. Looks like a search/filter control\n- **Near-white Ghost**: `#fdfdf8` background, Olive Ink text, 4px radius, transparent 1px border. Minimal presence\n- **Hover pattern**: All buttons flash PostHog Orange (`#F54E00`) or Amber Gold (`#F7A501`) text on hover  the brand's signature interaction surprise\n\n### Cards & Containers\n- **Bordered Card**: Warm Parchment (`#fdfdf8`) or white background, 1px `#bfc1b7` border, 4px6px radius  clean and minimal\n- **Sage Surface Card**: `#eeefe9` background for secondary content containers\n- **Shadow Card**: `0px 25px 50px -12px rgba(0, 0, 0, 0.25)`  a single deep shadow for elevated content (modals, dropdowns)\n- **Hover**: Orange text flash on interactive cards  consistent with button behavior\n\n### Inputs & Forms\n- **Default**: `#eeefe9` background, `#9ea096` placeholder text, 1px `#b6b7af` border, 4px radius, `2px 0px 2px 8px` padding\n- **Focus**: `#3b82f6` ring at 50% opacity (Tailwind blue focus ring)\n- **Text color**: `#374151` for input values  darker than primary text for readability\n- **Border variations**: Multiple border patterns  some inputs use compound borders (top, left, bottom-only)\n\n### Navigation\n- **Top nav**: Warm background, IBM Plex Sans at 15px weight 600\n- **Dropdown menus**: Rich mega-menu structure with product categories\n- **Link color**: Deep Olive (`#23251d`) for nav links, underline on hover\n- **CTA**: Dark Primary button (#1e1f23) in the nav  \"Get started - free\"\n- **Mobile**: Collapses to hamburger with simplified menu\n\n### Image Treatment\n- **Hand-drawn illustrations**: Hedgehog mascot and quirky illustrations  the signature visual element\n- **Product screenshots**: UI screenshots embedded in device frames or clean containers\n- **Action figures**: Playful product photography of hedgehog figurines  anti-corporate\n- **Trust logos**: Enterprise logos (Airbus, GOV.UK) displayed in a muted trust bar\n- **Aspect ratios**: Mixed  illustrations are irregular, screenshots are 16:9 or widescreen\n\n### AI Chat Widget\n- Floating PostHog AI assistant with speech bubble  an interactive product demo embedded in the marketing site\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 2px, 4px, 6px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 34px\n- **Section padding**: 32px48px vertical between sections (compact for a content-heavy site)\n- **Card padding**: 4px12px internal (notably compact)\n- **Component gaps**: 4px8px between related elements\n\n### Grid & Container\n- **Max width**: 1536px (largest breakpoint), with content containers likely 1200px1280px\n- **Column patterns**: Varied  single column for text content, 2-3 column grids for feature cards, asymmetric layouts for product demos\n- **Breakpoints**: 13 defined  1px, 425px, 482px, 640px, 768px, 767px, 800px, 900px, 1024px, 1076px, 1160px, 1280px, 1536px\n\n### Whitespace Philosophy\n- **Content-dense by design**: PostHog's site is information-rich  whitespace is measured, not lavish\n- **Editorial pacing**: Content sections flow like a magazine with varied layouts keeping the eye moving\n- **Illustrations as breathing room**: Hand-drawn hedgehog art breaks up dense content sections naturally\n\n### Border Radius Scale\n- **2px**: Small inline elements, tags (`span`)\n- **4px**: Primary UI components  buttons, inputs, dropdowns, menu items (`button`, `div`, `combobox`)\n- **6px**: Secondary containers  larger buttons, list items, card variants (`button`, `div`, `li`)\n- **9999px**: Pill shape  badges, status indicators, rounded tags (`span`, `div`)\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow, warm parchment background | Page canvas, most surfaces |\n| Level 1 (Border) | `1px solid #bfc1b7` (Sage Border) | Card containment, input borders, section dividers |\n| Level 2 (Compound Border) | Multiple 1px borders on different sides | Input groupings, toolbar elements |\n| Level 3 (Deep Shadow) | `0px 25px 50px -12px rgba(0, 0, 0, 0.25)` | Modals, floating elements, mega-menu dropdowns |\n\n### Shadow Philosophy\nPostHog's elevation system is remarkably minimal  only one shadow definition exists in the entire system. Depth is communicated through:\n- **Border containment**: Sage-tinted borders (`#bfc1b7`) at 1px create gentle warm separation\n- **Surface color shifts**: Moving from `#fdfdf8` to `#eeefe9` to `#e5e7e0` creates layered depth without shadows\n- **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\n\n### Decorative Depth\n- **Illustration layering**: Hand-drawn hedgehog art creates visual depth naturally\n- **No gradients or glow**: The flat, warm surface system relies entirely on border and surface-color differentiation\n- **No glassmorphism**: Fully opaque surfaces throughout\n\n## 7. Do's and Don'ts\n\n### Do\n- Use the olive/sage color family (#4d4f46, #23251d, #bfc1b7) for text and borders  the warm green undertone is essential to the brand\n- Flash PostHog Orange (#F54E00) on hover states  it's the hidden brand signature\n- Use IBM Plex Sans at bold weights (700/800) for headings  the font carries technical credibility\n- Keep body text at generous line-heights (1.501.71)  the content-heavy site demands readability\n- Maintain the warm parchment background (#fdfdf8)  not pure white, never cold\n- Use 4px border-radius for most UI elements  keep corners subtle and functional\n- Include playful, hand-drawn illustration elements  the personality is the differentiator\n- Apply opacity-based hover states (0.7 opacity) on dark buttons rather than color shifts\n\n### Don't\n- Use blue, purple, or typical tech-SaaS colors  PostHog's palette is deliberately olive/sage\n- Add heavy shadows  the system uses one shadow for floating elements only; everything else uses borders\n- Make the design look \"polished\" or \"premium\" in a conventional sense  PostHog's charm is its irreverent, scrappy energy\n- Use tight line-heights on body text  the generous 1.50+ spacing is essential for the content-heavy layout\n- Apply large border-radius (12px+) on cards  PostHog uses 4px6px, keeping things tight and functional\n- Remove the orange hover flash  it's a core interaction pattern, not decoration\n- Replace illustrations with stock photography  the hand-drawn hedgehog art is the brand\n- Use pure white (#ffffff) as page background  the warm sage-cream (#fdfdf8) tint is foundational\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <425px | Single column, compact padding, stacked cards |\n| Mobile | 425px640px | Slight layout adjustments, larger touch targets |\n| Tablet | 640px768px | 2-column grids begin, nav partially visible |\n| Tablet Large | 768px1024px | Multi-column layouts, expanded navigation |\n| Desktop | 1024px1280px | Full layout, 3-column feature grids, expanded mega-menu |\n| Large Desktop | 1280px1536px | Max-width container, generous margins |\n| Extra Large | >1536px | Centered container at max-width |\n\n### Touch Targets\n- Buttons: 4px6px radius with `4px12px` padding  compact but usable\n- Nav links: 15px text at weight 600 with adequate padding\n- Mobile: Hamburger menu with simplified navigation\n- Inputs: Generous vertical padding for thumb-friendly forms\n\n### Collapsing Strategy\n- **Navigation**: Full mega-menu with dropdowns  hamburger menu on mobile\n- **Feature grids**: 3-column  2-column  single column stacked\n- **Typography**: Display sizes reduce across breakpoints (30px  smaller)\n- **Illustrations**: Scale within containers, some may hide on mobile for space\n- **Section spacing**: Reduces proportionally while maintaining readability\n\n### Image Behavior\n- Illustrations scale responsively within containers\n- Product screenshots maintain aspect ratios\n- Trust logos reflow into multi-row grids on mobile\n- AI chat widget may reposition or simplify on small screens\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Text: Olive Ink (`#4d4f46`)\n- Dark Text: Deep Olive (`#23251d`)\n- Hover Accent: PostHog Orange (`#F54E00`)\n- Dark CTA: Near-Black (`#1e1f23`)\n- Button Surface: Light Sage (`#e5e7e0`)\n- Page Background: Warm Parchment (`#fdfdf8`)\n- Border: Sage Border (`#bfc1b7`)\n- Placeholder: Sage Placeholder (`#9ea096`)\n\n### Example Component Prompts\n- \"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)\"\n- \"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)\"\n- \"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\"\n- \"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\"\n- \"Design an input field with #eeefe9 background, 1px #b6b7af border, 4px radius, #9ea096 placeholder text, focus ring in #3b82f6 at 50% opacity\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Verify the background is warm parchment (#fdfdf8) not pure white  the sage-cream warmth is essential\n2. Check that all text uses the olive family (#4d4f46, #23251d) not pure black or neutral gray\n3. Ensure hover states flash PostHog Orange (#F54E00)  if hovering feels bland, you're missing this\n4. Confirm borders use sage-tinted gray (#bfc1b7) not neutral gray  warmth runs through every element\n5. The overall tone should feel like a fun, scrappy startup wiki  never corporate-polished or sterile","tags":["design","posthog","galyarder","framework","galyarderlabs","agent-skills","agentic-framework","agents","ai-agents","automation","claude-code-plugin","codex-skills"],"capabilities":["skill","source-galyarderlabs","skill-design-md-posthog","topic-agent-skills","topic-agentic-framework","topic-agents","topic-ai-agents","topic-automation","topic-claude-code-plugin","topic-codex-skills","topic-copilot-skills","topic-cursor-skills","topic-framework","topic-gemini-skills","topic-hermes-skill"],"categories":["galyarder-framework"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/galyarderlabs/galyarder-framework/design-md-posthog","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add galyarderlabs/galyarder-framework","source_repo":"https://github.com/galyarderlabs/galyarder-framework","install_from":"skills.sh"}},"qualityScore":"0.455","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 11 github stars · SKILL.md body (18,246 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:07:48.441Z","embedding":null,"createdAt":"2026-05-10T01:06:47.284Z","updatedAt":"2026-05-18T19:07:48.441Z","lastSeenAt":"2026-05-18T19:07:48.441Z","tsv":"'-0.48':863 '-0.5':831 '-0.54':815 '-0.75':768,1113,2394 '-12':1290,1742,1816 '-3':1570 '0':1293,1294,1295,1696,1745,1746,1747,1813 '0.25':1296,1748 '0.7':1145,1990,2412 '0.8':1152 '0px':785,801,848,879,892,906,919,933,950,963,977,990,1002,1120,1287,1331,1739 '1':15,1708,2545 '1.001.50':976 '1.20':767,2390 '1.33':800,989 '1.40':814,830,847 '1.43':962,1001 '1.50':313,784,878,905,918,949,2061,2443 '1.501.71':1032,1939 '1.56':862,891 '1.71':932 '100700':697 '1024px':1592 '1024px1280px':2174 '1076px':1593 '10px':1140,1517 '111827':643 '1160px':1594 '1200px1280px':1560 '1280px':1595 '1280px1536px':2187 '12px':987,1141,1518,2076 '13':1582 '13.7':1059 '13px':974 '14px':960,999 '1536px':1553,1596,2196 '15px':930,947,1381,2216,2463 '16':1481 '16px':903,916,1519,2436 '18px':876,889,1520 '18px20px':1089 '19.3':859,1057 '1e1':229,362,1133,1409,2346,2405,2478,2489 '1px':1213,1233,1268,1325,1584,1710,1726,1786,2422,2519 '2':393,1569,1722,2157,2256,2563 '20px':828,845,2432 '21.4':811,1055 '23251d':419,1398,1888,2335,2469,2573 '24px':798,1521 '25px':1288,1740,1814 '2px':1330,1332,1513,1649 '3':684,1736,2177,2254,2580 '30px':765,1116,2267,2379 '32px':1522 '32px48px':1526 '34px':1523 '36px':782 '374151':1347 '3b82f6':482,630,1336,2530 '4':1127,2596 '400':904,931,2441 '400700':961,988 '425px':1585,2140 '425px640px':2148 '482px':1586 '4d4f46':400,556,1169,1887,2330,2399,2450,2498,2572 '4px':1171,1173,1211,1230,1328,1514,1655,1959,2425,2500,2522 '4px12px':1539,2209 '4px6px':1271,2081,2206 '4px8px':1545 '5':1504,2613 '50':632,1339,2532 '500':917,1000 '500700':975 '50px':1289,1741,1815 '6':1689 '600':861,890,948,1383,2220,2465 '640px':1587 '640px768px':2156 '65675e':564 '6px':1138,1515,1667,2407,2493 '7':1875 '700':164,783,799,813,829,846,877,1091,2434 '700/800':308,1923 '700800':1013 '767px':1589 '768px':1588 '768px1024px':2166 '8':2130 '800':165,766,2386 '800px':1590 '8px':1333,1511,1516 '9':1482,2319 '900px':1591 '9999px':1679 '9ea096':574,1209,1322,2365,2524 'abstract':130 'accent':438,450,456,607,613,625,2337 'access':496,638 'accessibility-on':637 'achiev':674 'across':2265 'action':120,1201,1450 'activ':241,1150 'add':2016 'adequ':2222 'adjust':2151 'agent':2320 'ai':1485,1490,2309 'airbus':1465 'amber':451,475,619,1147,1246 'amber-gold':474 'analyt':102 'anti':39,340,1459 'anti-corpor':38,339,1458 'appear':217,323,439 'appl':705 'apple-system':704 'appli':1984,2071 'approach':299 'architectur':392 'arial':721 'around':185 'art':1639,1846,2110 'aspect':1473,2297 'assert':1021 'assist':1491 'asymmetr':1576 'atmospher':18 'avenir':710,712 'b17816':469 'b2b':134 'b6b7af':598,1214,1326,2520 'background':42,348,498,504,518,528,540,550,571,1135,1166,1189,1206,1226,1267,1280,1321,1376,1702,1951,2120,2354,2376,2421,2457,2518,2548 'badg':979,1682 'bar':1472,2454 'base':367,1081,1509,1987 'begin':2160 'behavior':1316,2132,2288 'bfc1b7':253,346,585,1269,1712,1784,1889,2361,2423,2604 'bg':1177 'black':227,360,429,651,1190,2345,2576 'bland':2591 'blue':87,296,481,490,629,1342,2002 'bodi':174,558,690,853,883,896,898,910,923,924,1025,1029,1122,1125,1932,2057,2437 'bold':162,306,772,867,895,1008,1086,1921 'border':246,345,468,472,584,587,595,597,600,602,679,1215,1234,1260,1270,1327,1357,1360,1366,1646,1709,1714,1718,1724,1727,1778,1783,1863,1893,1961,2031,2074,2358,2360,2424,2521,2598 'border-radius':1960,2073 'bottom':1370 'bottom-on':1369 'brand':212,318,437,617,1253,1902,1914,2113 'break':1640 'breakpoint':1555,1581,2133,2266 'breath':1126,1633 'bubbl':1494 'build':2451 'built':261 'button':228,459,471,527,539,567,623,1130,1184,1240,1315,1408,1659,1664,1671,1676,1994,2205,2348,2404,2477,2485,2504 'callout':868 'canva':1704 'caption':955 'card':805,1258,1261,1278,1286,1312,1537,1575,1674,1715,2078,2146,2418 'carri':199,1928 'categori':881,1084,1096,1393 'center':2197 'chang':2137 'characterist':288 'charm':2045 'chat':1486,2310 'check':2564 'clean':1273,1448 'clear':1834 'code':739,742,995,997,1003 'cold':1957 'collaps':1418,2239 'color':74,213,238,291,394,403,485,588,640,682,1346,1395,1792,1867,1885,1997,2009,2324 'column':1561,1565,1571,2142,2158,2169,2178,2255,2257,2259 'combobox':1666 'comfort':1038 'communic':1776 'compact':1182,1530,1542,2143,2211 'compon':278,391,1128,1543,1658,2367 'component-driven':277 'compound':1365,1723 'compress':1124 'comput':1071 'confid':1019,1162 'confirm':2597 'consist':1313 'consola':731,747 'contain':680,1259,1284,1449,1550,1558,1669,1716,1779,2191,2198,2272,2293 'content':371,833,1044,1283,1303,1534,1557,1568,1600,1618,1643,1942,2068 'content-dens':1599 'content-heavi':370,1043,1533,1941,2067 'context':158 'contrast':646 'control':1220 'convent':86,295,1102,2041 'core':2095 'corner':1968 'corpor':40,341,1460,2627 'corporate-polish':2626 'courier':734 'cozi':106 'cream':62,515,2125,2559 'creat':151,350,1036,1787,1801,1833,1847,2369,2483 'credibl':150,1930 'crisp':47 'css':264,387 'cta':1159,1405,2342,2403,2476 'ctas':361,479 'd4c9b8':537,1188 'dark':50,224,357,458,622,641,1131,1160,1406,1993,2331,2341,2402,2475,2488 'darker':604,1351 'decor':1838,2099 'deep':417,1299,1396,1737,1829,2333,2467 'default':487,1319 'defin':1583,1811 'definit':1768 'deliber':37,338,668,2014 'delight':328 'demand':1945 'demo':1498,1580 'dens':1601,1642 'deploy':159 'depth':672,1690,1774,1803,1839,1849 'design':2,5,9,12,99,198,1603,2034,2415,2512,2543 'design-md-posthog':1 'desktop':2173,2186 'develop':53,101,157 'devic':1445 'differ':1729 'differenti':1868,1983 'disabl':577 'display':689,740,759,1111,1467,2262 'distinct':405 'div':1665,1677,1688 'divid':1720 'doesn':215 'domin':1010 'dramat':1830 'drawn':116,332,1428,1637,1844,1976,2108 'driven':279 'dropdown':1305,1384,1661,1755,1824,2247 'e5e7e0':526,1165,1800,2352,2497 'earthi':77,297,415 'editori':373,1101,1616 'eeefe9':349,516,1205,1279,1320,1798,2517 'element':1438,1548,1652,1734,1751,1822,1966,1978,2026,2612 'elev':1302,1691,1760 'els':2029 'embed':1443,1499 'emphasi':425,544,854 'energi':2050 'engin':182 'ensur':2581 'enterpris':1463 'entir':1772,1861 'escap':30 'essenti':1899,2064,2562 'everi':66,2611 'everyth':184,2028 'exampl':2366 'exist':1769,2538 'expand':2171,2181 'expect':46 'extra':771,2194 'extra-bold':770 'extrem':1037 'eye':1629 'f23':230,363,1134,1410,2347,2406,2479,2490 'f4f4f4':547,1176 'f54e00':208,320,435,610,1244,1906,2340,2507,2587 'f7a501':453,621,1248 'fallback':700,745 'famili':688,1886,2571 'fdfdf8':63,501,1225,1264,1796,1952,2126,2357,2377,2420,2552 'featur':478,538,792,802,1187,1574,2179,2252,2417 'featured/premium':1200 'feel':22,2590,2618 'ffffff':2117 'field':2515 'figur':121,1451 'figurin':1457 'fix':1068 'flash':205,1199,1241,1309,1903,2091,2506,2584 'flat':669,1697,1856 'float':1488,1750,1821,2025 'flow':1620 'fluid/scaled':1063 'focus':480,483,628,635,1335,1343,2527 'font':146,304,687,696,751,1927 'form':1318,2238 'foundat':144,273,2129 'fraction':1051 'frame':1446 'free':1416 'friend':2237 'full':2175,2242 'fulli':1871 'fun':2621 'function':1971,2086 'gap':1544 'garden':107 'generat':2540 'generous':169,312,788,1024,1935,2060,2192,2231 'gentl':1788 'genuin':148 'get':1414 'ghost':1224 'ghost/text':2503 'give':65,410 'glassmorph':1870 'glow':1854 'gold':452,461,467,476,620,1148,1247 'gov.uk':1466 'gradient':131,655,658,1852 'gray':252,408,592,2579,2603,2607 'green':79,355,431,512,534,582,1896 'grid':1549,1572,2159,2180,2253,2306 'group':1732,2486 'guid':2322,2535 'hamburg':1420,2225,2248 'hand':115,331,1427,1636,1843,1975,2107 'hand-drawn':114,330,1426,1635,1842,1974,2106 'handmad':69 'harmon':255 'head':167,310,426,777,793,806,823,839,1009,1011,1097,1925,2383,2430 'headlin':1123 'heavi':372,1045,1535,1943,2017,2069 'hedgehog':117,333,1430,1456,1638,1845,2109 'height':172,316,755,791,937,1028,1035,1938,2055,2389,2446 'helvetica':715,717 'hero':760,2371 'hidden':211,317,436,1913 'hide':2275 'hierarchi':749 'high':424,645 'high-contrast':644 'high-emphasi':423 'hover':203,235,325,368,442,455,545,549,611,624,1143,1175,1195,1237,1251,1306,1404,1908,1988,2090,2336,2414,2472,2511,2582,2589 'ibm':136,153,300,691,701,761,778,794,807,824,841,855,872,885,899,912,926,943,956,970,983,1377,1917,2380,2427,2458 'illustr':118,334,1429,1434,1476,1631,1840,1977,2101,2269,2289 'imag':1424,2287 'imageri':124,337 'impact':775 'import':653 'includ':1972 'indic':1684 'inform':1609 'information-rich':1608 'ink':399,555,1168,1228,2329,2397,2449 'inlin':1651 'input':517,1203,1317,1349,1363,1660,1717,1731,2230,2514 'input-styl':1202 'insid':104 'instead':293 'interact':197,223,326,615,1256,1311,1496,2096 'intern':27,1540 'irregular':1478 'irrever':35,2048 'isn':43 'item':1663,1673 'iter':2534 'keep':1627,1931,1967,2082 'key':287,2136 'keyboard':634 'label':568,852,870,882,954,969,981,1088 'land':384 'languag':666 'larg':786,2072,2165,2185,2195 'larger':1670,2152 'largest':1554 'lavish':1615 'layer':676,1802,1841 'layout':374,1505,1577,1626,2070,2150,2170,2176 'lean':75 'left':1368 'letter':756,1107,2392 'letter-spac':1106,2391 'level':1692,1695,1707,1721,1735 'li':1678 'liber':732 'light':521,524,570,596,1164,2350 'like':23,72,378,1070,1217,1559,1621,2619 'line':171,315,754,790,936,1027,1034,1937,2054,2388,2445 'line-height':170,314,789,935,1026,1033,1936,2053,2387,2444 'link':420,647,654,1394,1401,2215,2461 'list':1672 'logo':1462,1464,2300 'long':939,1049 'look':1216,2035 'magazin':380,1100,1623 'magazine-editori':1099 'main':1158 'maintain':1947,2285,2296 'make':2032 'margin':2193 'market':661,1502 'mascot':1431 'max':1551,2189,2201 'max-width':2188,2200 'maximum':774 'may':2274,2312 'md':3,10 'measur':1613 'medium':911,921 'medium-weight':920 'mega':1388,1753,2183,2244 'mega-menu':1387,1752,2182,2243 'menlo':729,746 'menu':1389,1423,1662,1754,2184,2226,2245,2249 'menus':1385 'micro':980,982 'minim':1235,1275,1764 'miss':2594 'mix':1475 'mobil':1417,2138,2147,2224,2251,2277,2308 'modal':1304,1749,1823 'modern':275 'monaco':730,748 'mono':733 'monospac':722,725,737 'move':1630,1794 'multi':2168,2304 'multi-column':2167 'multi-row':2303 'multipl':1359,1725 'mute':81,531,562,1470 'name':2134 'natur':1645,1850 'nav':941,1374,1400,1413,2161,2214 'navig':951,1372,2172,2229,2241,2453 'near':226,359,428,507,650,1222,2344 'near-black':225,358,427,649,2343 'near-whit':506,1221 'need':1837 'negat':1104 'neue':716 'neutral':552,2578,2606 'never':1956,2625 'new':735 'next':711 'non':1079 'non-standard':1078 'notabl':1541 'note':758 'noto':720 'oliv':78,258,398,407,418,554,563,590,1167,1227,1397,2328,2334,2396,2448,2468,2570 'olive-gray':406 'olive-tint':589 'olive/sage':1884,2015 'one':1766,1810,2022 'opac':232,366,633,1144,1151,1340,1986,1991,2411,2533 'opacity-bas':365,1985 'opaqu':1872 'optim':1047 'orang':207,319,434,446,466,609,1180,1197,1243,1307,1905,2089,2339,2508,2586 'output':283 'overal':2615 'pace':1617 'pad':1142,1174,1334,1525,1538,2144,2210,2223,2233 'page':385,503,1703,2119,2353 'pair':463 'palett':260,292,395,2012 'paper':71 'paper-lik':70 'parchment':500,1263,1701,1950,2356,2375,2551 'partial':2162 'pattern':1238,1361,1562,2097 'person':110,618,1980 'philosophi':1598,1757 'photographi':128,1454,2104 'pill':1680 'placehold':573,575,1208,1323,2362,2364,2525 'platform':103 'play':123,336,1452,1973 'plex':137,301,692,702,762,779,795,808,825,842,856,873,886,900,913,927,944,957,971,984,1378,1918,2381,2428,2459 'polish':2036,2628 'popov':1825 'posthog':4,11,14,19,206,433,608,663,1015,1179,1242,1489,1604,1758,1904,2010,2043,2079,2338,2585 'premium':2038 'presenc':1236 'primari':397,401,502,557,586,1132,1353,1407,1656,2326,2487 'primit':270 'principl':1007,1506 'pro':743,998 'product':1095,1392,1439,1453,1497,1579,2294 'prompt':2321,2368 'proport':2283 'pure':1954,2115,2554,2575 'purpl':89,2003 'px':769,812,816,832,860,864,1056,1058,1060,1114,1291,1743,1817,2395 'qualiti':73 'quick':2323 'quirki':119,1433 'radius':1139,1172,1194,1212,1231,1272,1329,1647,1962,2075,2207,2408,2426,2494,2501,2523 'radix':266,388 'rang':699 'rather':83,236,1066,1995 'ratio':1474,2298 're':180,2593 'read':377,908,940,1039 'readabl':1356,1946,2286 'reduc':2264,2282 'reduct':233 'refer':7,2325 'refin':2537 'reflow':2301 'regular':728 'relat':1547 'relax':925,934,1118 'reli':1860 'rem':1075 'remark':1763 'remov':2087 'replac':125,2100 'reposit':2313 'reserv':494,1819 'respons':2131,2291 'rest':219 'rgba':1292,1744 'rich':1386,1610 'right':2482 'ring':484,636,1337,1344,2528 'roboto':719 'role':396,750 'room':1634 'round':1685 'row':2305 'rule':686 'run':2609 'saa':92,135,2008 'sage':60,82,250,343,514,522,525,533,572,581,583,605,1163,1207,1276,1713,1781,2124,2351,2359,2363,2496,2558,2601 'sage-cream':2123,2557 'sage-green':532,580 'sage-tint':59,249,342,1780,2600 'sage/olive':290 'san':138,302,693,703,763,780,796,809,826,843,857,874,887,901,914,928,945,958,972,985,1379,1919,2382,2429,2460 'say':178,187 'scale':243,820,1076,1155,1512,1648,2270,2290 'scrappi':2049,2622 'screen':2318,2539 'screenshot':1440,1442,1479,2295 'search/filter':1219 'secondari':449,454,519,565,599,1282,1668,2495 'section':776,803,836,1524,1529,1619,1644,1719,2280,2372 'sego':713 'select':1103 'semant':606 'semi':866,884,894 'semi-bold':865,893 'sens':2042 'separ':1790,1835 'serious':181,195 'serv':140 'session':1050 'sever':1053 'sfmono':727 'sfmono-regular':726 'shadcn/ui':269,390 'shadow':1285,1300,1699,1738,1756,1767,1805,1808,1812,1831,2018,2023 'shape':1681 'shed':108 'shift':239,1793,1998 'side':1730 'signal':614,627,1085 'signatur':1255,1436,1915 'simplifi':1422,2228,2315 'singl':1298,1564,1807,2141,2258 'site':376,662,1041,1503,1536,1606,1944 'size':752,819,1052,1054,2263 'skill' 'skill-design-md-posthog' 'slight':244,603,817,1154,2149 'small':964,968,1650,2139,2317 'smaller':2268 'smallest':991 'snippet':1004 'solid':1711 'someon':98 'sourc':741,996 'source-galyarderlabs' 'space':757,1108,1507,2062,2279,2281,2393 'span':1654,1687 'special':470 'speech':1493 'spirit':202 'stack':738,2145,2260 'standard':907,1080 'star':113 'start':1415 'startup':25,2623 'state':204,242,369,443,551,578,1909,1989,2583 'status':1683 'steril':2630 'stock':127,2103 'stop':1069 'strategi':2240 'structur':1390 'stubborn':285 'style':1129,1204 'sub':822,835,838 'sub-head':821,837 'sub-sect':834 'subtl':1969 'suggest':1061 'surfac':67,497,520,530,677,1277,1706,1791,1858,1866,1873,2349 'surface-color':1865 'surpris':221,329,448,1257 'system':6,13,247,356,493,656,706,708,736,1065,1508,1761,1773,1859,2020,2544 'system-ui':707 'tablet':2155,2164 'tag':978,1653,1686 'tailwind':263,386,486,1073,1341 'take':192 'tan':536,1186 'tan/khaki':542 'target':2154,2204 'tech':2007 'tech-saa':2006 'technic':149,272,1929 'termin':1006 'tertiari':529 'text':175,209,259,402,412,421,553,561,566,576,612,642,648,869,897,909,965,992,1030,1112,1137,1149,1170,1181,1191,1198,1210,1229,1249,1308,1324,1345,1354,1567,1891,1933,2058,2217,2327,2332,2398,2410,2438,2492,2499,2509,2526,2567 'theme':17 'thing':2083 'throughout':1874 'thumb':2236 'thumb-friend':2235 'tight':773,2052,2084 'tighten':1109 'tint':61,251,344,523,591,1782,2127,2602 'titl':804 'tone':416,2616 'tool':54 'toolbar':601,1733 'top':1367,1373 'topic-agent-skills' 'topic-agentic-framework' 'topic-agents' 'topic-ai-agents' 'topic-automation' 'topic-claude-code-plugin' 'topic-codex-skills' 'topic-copilot-skills' 'topic-cursor-skills' 'topic-framework' 'topic-gemini-skills' 'topic-hermes-skill' 'touch':2153,2203 'track':1105 'transform':850,1156 'transit':683 'transpar':1232 'treatment':1425,1693 'trust':1461,1471,2299 'ts':1880 'type':1064 'typic':132,383,2005 'typograph':143 'typographi':177,685,1017,2261 'ubuntu':718 'ui':267,389,560,709,714,724,942,953,1441,1657,1965 'ui-monospac':723 'underlin':1402,2470 'underton':432,513,1897 'unifi':352 'uniqu':286 'unit':1510 'univers':548 'unusu':818 'uppercas':840,849,871,880,994,1082,1087 'usabl':2213 'use':155,231,248,1012,1093,1364,1694,1882,1916,1958,2001,2021,2030,2051,2080,2114,2568,2599 'util':1183 'valu':1350 'vari':1563,1625 'variabl':139,303,694,695,764,781,797,810,827,844,858,875,888,902,915,929,946,959,973,986 'variant':1675 'variat':1358 'various':966 'verifi':2546 'vertic':1527,2232 'vibrant':445 'visibl':1193,2163 'visual':16,282,665,1437,1848 'void':51 'warm':34,58,289,354,414,460,499,505,535,541,579,671,1185,1262,1375,1700,1789,1857,1895,1949,2122,2355,2374,2456,2550 'warm-green':353 'warmth':626,2560,2608 'websit':21 'weight':163,307,698,753,922,967,1014,1090,1382,1922,2219,2385,2433,2440,2464 'whisperi':1023 'white':48,508,546,1136,1223,1266,1955,2116,2409,2491,2555 'whitespac':1597,1611 'wide':154 'widescreen':1484 'widget':1487,2311 'width':1552,2135,2190,2202 'wiki':28,2624 'wild':33 'within':2271,2292 'without':1804 'world':93 'yellow':511 'yellow-green':510","prices":[{"id":"39361b29-b798-4235-9f91-5254b27ff435","listingId":"f03e59e6-5326-4740-af79-8161cdbe1e12","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"galyarderlabs","category":"galyarder-framework","install_from":"skills.sh"},"createdAt":"2026-05-10T01:06:47.284Z"}],"sources":[{"listingId":"f03e59e6-5326-4740-af79-8161cdbe1e12","source":"github","sourceId":"galyarderlabs/galyarder-framework/design-md-posthog","sourceUrl":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-posthog","isPrimary":false,"firstSeenAt":"2026-05-10T01:06:47.284Z","lastSeenAt":"2026-05-18T19:07:48.441Z"}],"details":{"listingId":"f03e59e6-5326-4740-af79-8161cdbe1e12","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"galyarderlabs","slug":"design-md-posthog","github":{"repo":"galyarderlabs/galyarder-framework","stars":11,"topics":["agent-skills","agentic-framework","agents","ai-agents","automation","claude-code-plugin","codex-skills","copilot-skills","cursor-skills","framework","gemini-skills","hermes-skill","marketing","openclaw-skills","opencode-skills","seo","tdd"],"license":"mit","html_url":"https://github.com/galyarderlabs/galyarder-framework","pushed_at":"2026-05-17T20:44:45Z","description":"An agentic skills framework orchestration for the 1-Man Army. Implementing Autonomous Goal Integration (AGI) to transform vision into deterministic execution.","skill_md_sha":"70abf6d6edba7c63d55dba74cab2006ee32b0b7e","skill_md_path":"skills/design-md-posthog/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-posthog"},"layout":"multi","source":"github","category":"galyarder-framework","frontmatter":{"name":"design-md-posthog","description":"Design system reference for design md posthog."},"skills_sh_url":"https://skills.sh/galyarderlabs/galyarder-framework/design-md-posthog"},"updatedAt":"2026-05-18T19:07:48.441Z"}}