{"id":"5732c2df-67b9-4042-97ef-ca20ff2905b7","shortId":"Yq3BeW","kind":"skill","title":"design-md-clay","tagline":"Design system reference for design md clay.","description":"# Design System: Clay\n\n## 1. Visual Theme & Atmosphere\n\nClay's website is a warm, playful celebration of color that treats B2B data enrichment like a craft rather than an enterprise chore. The design language is built on a foundation of warm cream backgrounds (`#faf9f7`) and oat-toned borders (`#dad4c8`, `#eee9df`) that give every surface the tactile quality of handmade paper. Against this artisanal canvas, a vivid swatch palette explodes with personality  Matcha green, Slushie cyan, Lemon gold, Ube purple, Pomegranate pink, Blueberry navy, and Dragonfruit magenta  each named like flavors at a juice bar, not colors in an enterprise UI kit.\n\nThe typography is anchored by Roobert, a geometric sans-serif with character, loaded with an extensive set of OpenType stylistic sets (`\"ss01\"`, `\"ss03\"`, `\"ss10\"`, `\"ss11\"`, `\"ss12\"`) that give the text a distinctive, slightly quirky personality. At display scale (80px, weight 600), Roobert uses aggressive negative letter-spacing (-3.2px) that compresses headlines into punchy, billboard-like statements. Space Mono serves as the monospace companion for code and technical labels, completing the craft-meets-tech duality.\n\nWhat makes Clay truly distinctive is its hover micro-animations: buttons on hover rotate slightly (`rotateZ(-8deg)`), translate upward (`translateY(-80%)`), change background to a contrasting swatch color, and cast a hard offset shadow (`rgb(0,0,0) -7px 7px`). This playful hover behavior  where a button literally tilts and jumps on interaction  creates a sense of physical delight that's rare in B2B software. Combined with generously rounded containers (24px40px radius), dashed borders alongside solid ones, and a multi-layer shadow system that includes inset highlights, Clay feels like a design system that was made by people who genuinely enjoy making things.\n\n**Key Characteristics:**\n- Warm cream canvas (`#faf9f7`) with oat-toned borders (`#dad4c8`)  artisanal, not clinical\n- Named swatch palette: Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry, Dragonfruit\n- Roobert font with 5 OpenType stylistic sets  quirky geometric character\n- Playful hover animations: rotateZ(-8deg) + translateY(-80%) + hard offset shadow\n- Space Mono for code and technical labels\n- Generous border radius: 24px cards, 40px sections, 1584px pills\n- Mixed border styles: solid + dashed in the same interface\n- Multi-layer shadow with inset highlight: `0px 1px 1px` + `-1px inset` + `-0.5px`\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Clay Black** (`#000000`): Text, headings, pricing card text, `--_theme--pricing-cards---text`\n- **Pure White** (`#ffffff`): Card backgrounds, button backgrounds, inverse text\n- **Warm Cream** (`#faf9f7`): Page background  the warm, paper-like canvas\n\n### Swatch Palette  Named Colors\n\n**Matcha (Green)**\n- **Matcha 300** (`#84e7a5`): `--_swatches---color--matcha-300`, light green accent\n- **Matcha 600** (`#078a52`): `--_swatches---color--matcha-600`, mid green\n- **Matcha 800** (`#02492a`): `--_swatches---color--matcha-800`, deep green for dark sections\n\n**Slushie (Cyan)**\n- **Slushie 500** (`#3bd3fd`): `--_swatches---color--slushie-500`, bright cyan accent\n- **Slushie 800** (`#0089ad`): `--_swatches---color--slushie-800`, deep teal\n\n**Lemon (Gold)**\n- **Lemon 400** (`#f8cc65`): `--_swatches---color--lemon-400`, warm pale gold\n- **Lemon 500** (`#fbbd41`): `--_swatches---color--lemon-500`, primary gold\n- **Lemon 700** (`#d08a11`): `--_swatches---color--lemon-700`, deep amber\n- **Lemon 800** (`#9d6a09`): `--_swatches---color--lemon-800`, dark amber\n\n**Ube (Purple)**\n- **Ube 300** (`#c1b0ff`): `--_swatches---color--ube-300`, soft lavender\n- **Ube 800** (`#43089f`): `--_swatches---color--ube-800`, deep purple\n- **Ube 900** (`#32037d`): `--_swatches---color--ube-900`, darkest purple\n\n**Pomegranate (Pink/Red)**\n- **Pomegranate 400** (`#fc7981`): `--_swatches---color--pomegranate-400`, warm coral-pink\n\n**Blueberry (Navy Blue)**\n- **Blueberry 800** (`#01418d`): `--_swatches---color--blueberry-800`, deep navy\n\n### Neutral Scale (Warm)\n- **Warm Silver** (`#9f9b93`): Secondary/muted text, footer links\n- **Warm Charcoal** (`#55534e`): Tertiary text, dark muted links\n- **Dark Charcoal** (`#333333`): Link text on light backgrounds\n\n### Surface & Border\n- **Oat Border** (`#dad4c8`): Primary border  warm, cream-toned structural lines\n- **Oat Light** (`#eee9df`): Secondary lighter border\n- **Cool Border** (`#e6e8ec`): Cool-toned border for contrast sections\n- **Dark Border** (`#525a69`): Border on dark sections\n- **Light Frost** (`#eff1f3`): Subtle button background (at 0% opacity on hover)\n\n### Badges\n- **Badge Blue Bg** (`#f0f8ff`): Blue-tinted badge surface\n- **Badge Blue Text** (`#3859f9`): Vivid blue badge text\n- **Focus Ring** (`rgb(20, 110, 245) solid 2px`): Accessibility focus indicator\n\n### Shadows\n- **Clay Shadow** (`rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`): Multi-layer with inset highlight  the signature\n- **Hard Offset** (`rgb(0,0,0) -7px 7px`): Hover state  playful hard shadow\n\n## 3. Typography Rules\n\n### Font Families\n- **Primary**: `Roobert`, fallback: `Arial`\n- **Monospace**: `Space Mono`\n- **OpenType Features**: `\"ss01\"`, `\"ss03\"`, `\"ss10\"`, `\"ss11\"`, `\"ss12\"` on all Roobert text (display uses all 5; body/UI uses `\"ss03\"`, `\"ss10\"`, `\"ss11\"`, `\"ss12\"`)\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Roobert | 80px (5.00rem) | 600 | 1.00 (tight) | -3.2px | All 5 stylistic sets |\n| Display Secondary | Roobert | 60px (3.75rem) | 600 | 1.00 (tight) | -2.4px | All 5 stylistic sets |\n| Section Heading | Roobert | 44px (2.75rem) | 600 | 1.10 (tight) | -0.88px to -1.32px | All 5 stylistic sets |\n| Card Heading | Roobert | 32px (2.00rem) | 600 | 1.10 (tight) | -0.64px | All 5 stylistic sets |\n| Feature Title | Roobert | 20px (1.25rem) | 600 | 1.40 | -0.4px | All 5 stylistic sets |\n| Sub-heading | Roobert | 20px (1.25rem) | 500 | 1.50 | -0.16px | 4 stylistic sets (no ss01) |\n| Body Large | Roobert | 20px (1.25rem) | 400 | 1.40 | normal | 4 stylistic sets |\n| Body | Roobert | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.36px | 4 stylistic sets |\n| Body Standard | Roobert | 16px (1.00rem) | 400 | 1.50 | normal | 4 stylistic sets |\n| Body Medium | Roobert | 16px (1.00rem) | 500 | 1.201.40 | -0.16px to -0.32px | 45 stylistic sets |\n| Button | Roobert | 16px (1.00rem) | 500 | 1.50 | -0.16px | 4 stylistic sets |\n| Button Large | Roobert | 24px (1.50rem) | 400 | 1.50 | normal | 4 stylistic sets |\n| Button Small | Roobert | 12.8px (0.80rem) | 500 | 1.50 | -0.128px | 4 stylistic sets |\n| Nav Link | Roobert | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | 4 stylistic sets |\n| Caption | Roobert | 14px (0.88rem) | 400 | 1.501.60 | -0.14px | 4 stylistic sets |\n| Small | Roobert | 12px (0.75rem) | 400 | 1.50 | normal | 4 stylistic sets |\n| Uppercase Label | Roobert | 12px (0.75rem) | 600 | 1.20 (tight) | 1.08px | `text-transform: uppercase`, 4 sets |\n| Badge | Roobert | 9.6px | 600 |  |  | Pill badges |\n\n### Principles\n- **Five stylistic sets as identity**: The combination of `\"ss01\"`, `\"ss03\"`, `\"ss10\"`, `\"ss11\"`, `\"ss12\"` on Roobert creates a distinctive typographic personality. `ss01` is reserved for headings and emphasis  body text omits it, creating a subtle hierarchy through glyph variation.\n- **Aggressive display compression**: -3.2px at 80px, -2.4px at 60px  the most compressed display tracking alongside the most generous body spacing (1.60 line-height), creating dramatic contrast.\n- **Weight 600 for headings, 500 for UI, 400 for body**: Clean three-tier system where each weight has a strict role.\n- **Uppercase labels with positive tracking**: 12px uppercase at 1.08px letter-spacing creates the systematic wayfinding pattern.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary (Transparent with Hover Animation)**\n- Background: transparent (`rgba(239, 241, 243, 0)`)\n- Text: `#000000`\n- Padding: 6.4px 12.8px\n- Border: none (or `1px solid #717989` for outlined variant)\n- Hover: background shifts to swatch color (e.g., `#434346`), text to white, `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `rgb(0,0,0) -7px 7px`\n- Focus: `rgb(20, 110, 245) solid 2px` outline\n\n**White Solid**\n- Background: `#ffffff`\n- Text: `#000000`\n- Padding: 6.4px\n- Hover: oat-200 swatch color, animated rotation + shadow\n- Use: Primary CTA on colored sections\n\n**Ghost Outlined**\n- Background: transparent\n- Text: `#000000`\n- Padding: 8px\n- Border: `1px solid #717989`\n- Radius: 4px\n- Hover: dragonfruit swatch color, white text, animated rotation\n\n### Cards & Containers\n- Background: `#ffffff` on cream canvas\n- Border: `1px solid #dad4c8` (warm oat) or `1px dashed #dad4c8`\n- Radius: 12px (standard cards), 24px (feature cards/images), 40px (section containers/footer)\n- Shadow: `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`\n- Colorful section backgrounds using swatch palette (matcha, slushie, ube, lemon)\n\n### Inputs & Forms\n- Text: `#000000`\n- Border: `1px solid #717989`\n- Radius: 4px\n- Focus: `rgb(20, 110, 245) solid 2px` outline\n\n### Navigation\n- Sticky top nav on cream background\n- Roobert 15px weight 500 for nav links\n- Clay logo left-aligned\n- CTA buttons right-aligned with pill radius\n- Border bottom: `1px solid #dad4c8`\n- Mobile: hamburger collapse at 767px\n\n### Image Treatment\n- Product screenshots in white cards with oat borders\n- Colorful illustrated sections with swatch background colors\n- 8px24px radius on images\n- Full-width colorful section backgrounds\n\n### Distinctive Components\n\n**Swatch Color Sections**\n- Full-width sections with swatch-colored backgrounds (matcha green, slushie cyan, ube purple, lemon gold)\n- White text on dark swatches, black text on light swatches\n- Each section tells a distinct product story through its color\n\n**Playful Hover Buttons**\n- Rotate -8deg + translate upward on hover\n- Hard offset shadow (`-7px 7px`) instead of soft blur\n- Background transitions to contrasting swatch color\n- Creates a physical, toy-like interaction quality\n\n**Dashed Border Elements**\n- Dashed borders (`1px dashed #dad4c8`) alongside solid borders\n- Used for secondary containers and decorative elements\n- Adds a hand-drawn, craft-like quality\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 2px, 4px, 6.4px, 8px, 12px, 12.8px, 16px, 18px, 20px, 24px\n\n### Grid & Container\n- Max content width centered\n- Feature sections alternate between white cards and colorful swatch backgrounds\n- Card grids: 23 columns on desktop\n- Full-width colorful sections break the grid\n- Footer with generous 40px radius container\n\n### Whitespace Philosophy\n- **Warm, generous breathing**: The cream background provides a warm rest between content blocks. Spacing is generous but not austere  it feels inviting, like a well-set table.\n- **Color as spatial rhythm**: The alternating swatch-colored sections create visual rhythm through hue rather than just whitespace. Each color section is its own \"room.\"\n- **Craft-like density inside cards**: Within cards, content is compact and well-organized, contrasting with the generous outer spacing.\n\n### Border Radius Scale\n- Sharp (4px): Ghost buttons, inputs\n- Standard (8px): Small cards, images, links\n- Badge (11px): Tag badges\n- Card (12px): Standard cards, buttons\n- Feature (24px): Feature cards, images, panels\n- Section (40px): Large sections, footer, containers\n- Pill (1584px): CTAs, pill-shaped buttons\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, cream canvas | Page background |\n| Clay Shadow (Level 1) | `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px inset, rgba(0,0,0,0.05) 0px -0.5px` | Cards, buttons  multi-layer with inset highlight |\n| Hover Hard (Level 2) | `rgb(0,0,0) -7px 7px` | Hover state  playful hard offset shadow |\n| Focus (Level 3) | `rgb(20, 110, 245) solid 2px` | Keyboard focus ring |\n\n**Shadow Philosophy**: Clay's shadow system is uniquely three-layered: a downward cast (`0px 1px 1px`), an upward inset highlight (`0px -1px 1px inset`), and a subtle edge (`0px -0.5px 1px`). This creates a \"pressed into clay\" quality where elements feel both raised AND embedded  like a clay tablet where content is stamped into the surface. The hover hard shadow (`-7px 7px`) is deliberately retro-graphic, referencing print-era drop shadows and adding physical playfulness.\n\n### Decorative Depth\n- Full-width swatch-colored sections create dramatic depth through color contrast\n- Dashed borders add visual texture alongside solid borders\n- Product illustrations with warm, organic art style\n\n## 7. Do's and Don'ts\n\n### Do\n- Use warm cream (`#faf9f7`) as the page background  the warmth is the identity\n- Apply all 5 OpenType stylistic sets on Roobert headings: `\"ss01\", \"ss03\", \"ss10\", \"ss11\", \"ss12\"`\n- Use the named swatch palette (Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry) for section backgrounds\n- Apply the playful hover animation: `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `-7px 7px`\n- Use warm oat borders (`#dad4c8`)  not neutral gray\n- Mix solid and dashed borders for visual variety\n- Use generous radius: 24px for cards, 40px for sections\n- Use weight 600 exclusively for headings, 500 for UI, 400 for body\n\n### Don't\n- Don't use cool gray backgrounds  the warm cream (`#faf9f7`) is non-negotiable\n- Don't use neutral gray borders (`#ccc`, `#ddd`)  always use the warm oat tones\n- Don't mix more than 2 swatch colors in the same section\n- Don't skip the OpenType stylistic sets  they define Roobert's character\n- Don't use subtle hover effects  the rotation + hard shadow is the signature interaction\n- Don't use small border radius (<12px) on feature cards  the generous rounding is structural\n- Don't use standard shadows (blur-based)  Clay uses hard offset and multi-layer inset\n- Don't forget the uppercase labels with 1.08px tracking  they're the wayfinding system\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <479px | Single column, tight padding |\n| Mobile | 479767px | Standard mobile, stacked layout |\n| Tablet | 768991px | 2-column grids, condensed nav |\n| Desktop | 992px+ | Full layout, 3-column grids, expanded sections |\n\n### Touch Targets\n- Buttons: minimum 6.4px + 12.8px padding for adequate touch area\n- Nav links: 15px font with generous spacing\n- Mobile: full-width buttons for easy tapping\n\n### Collapsing Strategy\n- Hero: 80px  60px  smaller display text\n- Navigation: horizontal  hamburger at 767px\n- Feature sections: multi-column  stacked\n- Colorful sections: maintain full-width but compress padding\n- Card grids: 3-column  2-column  single column\n\n### Image Behavior\n- Product screenshots scale proportionally\n- Colorful section illustrations adapt to viewport width\n- Rounded corners maintained across breakpoints\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Background: Warm Cream (`#faf9f7`)\n- Text: Clay Black (`#000000`)\n- Secondary text: Warm Silver (`#9f9b93`)\n- Border: Oat Border (`#dad4c8`)\n- Green accent: Matcha 600 (`#078a52`)\n- Cyan accent: Slushie 500 (`#3bd3fd`)\n- Gold accent: Lemon 500 (`#fbbd41`)\n- Purple accent: Ube 800 (`#43089f`)\n- Pink accent: Pomegranate 400 (`#fc7981`)\n\n### Example Component Prompts\n- \"Create a hero on warm cream (#faf9f7) background. Headline at 80px Roobert weight 600, line-height 1.00, letter-spacing -3.2px, OpenType 'ss01 ss03 ss10 ss11 ss12', black text. Subtitle at 20px weight 400, line-height 1.40, #9f9b93 text. Two buttons: white solid pill (12px radius) and ghost outlined (4px radius, 1px solid #717989).\"\n- \"Design a colorful section with Matcha 800 (#02492a) background. Heading at 44px Roobert weight 600, letter-spacing -1.32px, white text. Body at 18px weight 400, line-height 1.60, #84e7a5 text. White card inset with oat border (#dad4c8), 24px radius.\"\n- \"Build a button with playful hover: default transparent background, black text, 16px Roobert weight 500. On hover: background #434346, text white, transform rotateZ(-8deg) translateY(-80%), hard shadow rgb(0,0,0) -7px 7px.\"\n- \"Create a card: white background, 1px solid #dad4c8 border, 24px radius. Shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset. Title at 32px Roobert weight 600, letter-spacing -0.64px.\"\n- \"Design an uppercase label: 12px Roobert weight 600, text-transform uppercase, letter-spacing 1.08px, OpenType 'ss03 ss10 ss11 ss12'.\"\n\n### Iteration Guide\n1. Start with warm cream (#faf9f7)  never cool white\n2. Swatch colors are for full sections, not small accents  go bold with matcha, slushie, ube\n3. Oat borders (#dad4c8) everywhere  dashed variants for decoration\n4. OpenType stylistic sets are mandatory  they make Roobert look like Roobert\n5. Hover animations are the signature  rotation + hard shadow, not subtle fades\n6. Generous radius: 24px cards, 40px sections  nothing looks sharp or corporate\n7. Three weights: 600 (headings), 500 (UI), 400 (body)  strict roles","tags":["design","clay","galyarder","framework","galyarderlabs","agent-skills","agentic-framework","agents","ai-agents","automation","claude-code-plugin","codex-skills"],"capabilities":["skill","source-galyarderlabs","skill-design-md-clay","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-clay","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 (17,170 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:46.051Z","embedding":null,"createdAt":"2026-05-10T01:06:44.118Z","updatedAt":"2026-05-18T19:07:46.051Z","lastSeenAt":"2026-05-18T19:07:46.051Z","tsv":"'-0.128':951 '-0.14':976 '-0.16':858,910,925 '-0.32':913 '-0.36':885 '-0.4':843 '-0.5':383,704,1286,1703,1773 '-0.64':829,2414 '-0.88':811 '-1':380,694,1276,1694,1764,2401 '-1.32':814,2314 '-2.4':796,1062 '-200':1200 '-3.2':162,781,1058,2260 '-300':436,529 '-400':490,558 '-500':469,500 '-600':446 '-7':232,721,1178,1436,1721,1805,1913,2372 '-700':509 '-8':209,338,1168,1427,1907,2362 '-80':214,341,1171,1910,2365 '-800':455,479,518,538,572 '-900':547 '0':229,230,231,644,681,682,683,689,690,691,699,700,701,718,719,720,1139,1175,1176,1177,1263,1264,1265,1271,1272,1273,1281,1282,1283,1669,1681,1682,1683,1689,1690,1691,1698,1699,1700,1718,1719,1720,2369,2370,2371,2388,2389,2390,2396,2397,2398 '0.04':692,1274,1692,2399 '0.05':702,1284,1701 '0.1':684,1266,1684,2391 '0.75':984,996 '0.80':947 '0.88':972 '0.94':960 '000000':392,1141,1194,1217,1302,2201 '0089ad':475 '01418d':568 '02492a':451,2303 '078a52':442,2215 '0px':377,685,693,703,1267,1275,1285,1685,1693,1702,1756,1763,1772,2392,2400 '1':15,1679,2440 '1.00':779,794,894,906,921,2256 '1.08':1001,1114,2060,2431 '1.10':809,827 '1.13':880 '1.20':999 '1.201.40':909 '1.25':839,854,869 '1.40':842,872,2278 '1.50':857,897,924,934,937,950,987 '1.501.60':975 '1.60':883,963,1077,2326 '110':670,1184,1312,1735 '11px':1634 '12.8':945,1145,1500,2111 '12px':983,995,1111,1252,1499,1638,2027,2286,2420 '14px':971 '1584px':359,1655 '15px':959,1325,2120 '16px':893,905,920,1502,2350 '18px':879,1503,2320 '1px':378,379,686,687,696,706,1150,1221,1242,1248,1268,1269,1278,1288,1304,1346,1462,1493,1686,1687,1757,1758,1766,1775,2293,2380,2393,2394,2403 '2':385,1716,1988,2091,2165,2449 '2.00':824 '2.75':806 '20':669,1183,1311,1734 '20px':838,853,868,1504,2272 '23':1524 '239':1136 '241':1137 '243':1138 '245':671,1185,1313,1736 '24px':355,933,1255,1505,1643,1935,2337,2384,2501 '24px40px':265 '2px':673,1187,1315,1494,1738 '3':729,1732,2100,2163,2465 '3.75':791 '300':430,524 '32037d':543 '32px':823,2407 '333333':595 '3859f9':661 '3bd3fd':465,2220 '4':860,874,887,899,927,939,953,966,978,989,1007,1124,2474 '400':485,553,871,882,896,936,974,986,1091,1950,2234,2274,2322,2517 '40px':357,1258,1539,1649,1938,2503 '43089f':534,2230 '434346':1163,2357 '44px':805,2307 '45':915 '479767px':2084 '479px':2078 '4px':1225,1308,1495,1623,2291 '5':327,755,784,799,817,832,846,1484,1875,2486 '5.00':776 '500':464,495,856,908,923,949,962,1088,1327,1947,2219,2224,2353,2515 '525a69':632 '55534e':587 '6':1661,2498 '6.4':1143,1196,1496,2109 '600':154,441,778,793,808,826,841,998,1013,1085,1943,2214,2252,2310,2410,2423,2513 '60px':790,1065,2137 '7':1853,2510 '700':504 '717989':1152,1223,1306,2295 '767px':1353,2145 '768991px':2090 '7px':234,723,1180,1438,1723,1807,1915,2374 '8':2068 '800':450,474,513,533,567,2229,2302 '80px':152,775,1061,2136,2249 '84e7':431,2327 '8px':1219,1491,1498,1628 '8px24px':1371 '9':2187 '9.6':1011 '900':542 '992px':2097 '9d6a09':514 '9f9b93':580,2206,2279 'a5':432,2328 'accent':439,472,2212,2217,2222,2227,2232,2458 'access':674 'across':2185 'ad':1820 'adapt':2178 'add':1475,1840 'adequ':2115 'agent':2188 'aggress':157,1055 'align':1335,1340 'alongsid':269,1071,1465,1843 'altern':1514,1577 'alway':1977 'amber':511,520 'anchor':116 'anim':202,336,1132,1203,1232,1905,2488 'appli':1873,1901 'area':2117 'arial':737 'art':1851 'artisan':74,311 'atmospher':18 'auster':1562 'b2b':31,258 'background':53,216,407,409,416,600,642,1133,1157,1191,1214,1236,1291,1323,1369,1380,1394,1443,1521,1549,1675,1867,1900,1960,2194,2246,2304,2347,2356,2379 'badg':648,649,656,658,664,1009,1015,1633,1636 'bar':105 'base':1489,2043 'behavior':238,2070,2170 'bg':651 'billboard':170 'billboard-lik':169 'black':391,1408,2200,2268,2348 'block':1556 'blue':565,650,654,659,663 'blue-tint':653 'blueberri':93,322,563,566,571,1897 'blur':1442,2042 'blur-bas':2041 'bodi':865,877,890,902,1044,1075,1093,1952,2318,2518 'body/ui':756 'bold':2460 'border':59,268,309,353,362,602,604,607,619,621,626,631,633,1147,1220,1241,1303,1344,1363,1458,1461,1467,1619,1839,1845,1919,1928,1974,2025,2207,2209,2335,2383,2467 'bottom':1345 'break':1533 'breakpoint':2071,2186 'breath':1546 'bright':470 'build':2339 'built':46 'button':203,241,408,641,918,930,942,1127,1337,1425,1625,1641,1660,1706,2107,2129,2282,2341 'c1b0ff':525 'canva':75,303,422,1240,1673 'caption':969 'card':356,396,401,406,820,1234,1254,1360,1517,1522,1603,1605,1630,1637,1640,1645,1705,1937,2030,2161,2331,2377,2502 'cards/images':1257 'cast':223,1755 'ccc':1975 'celebr':26 'center':1511 'chang':215,2075 'charact':125,333,2006 'characterist':300 'charcoal':586,594 'chore':41 'clay':4,11,14,19,194,283,390,678,1331,1676,1744,1781,1792,2044,2199 'clean':1094 'clinic':313 'code':181,348 'collaps':1351,2133 'color':28,107,221,386,426,434,444,453,467,477,488,498,507,516,527,536,545,556,570,1161,1202,1210,1229,1289,1364,1370,1378,1384,1393,1422,1448,1519,1531,1572,1580,1592,1830,1836,1990,2152,2175,2192,2298,2451 'column':1525,2080,2092,2101,2150,2164,2166,2168 'combin':260,1023 'compact':1608 'companion':179 'complet':185 'compon':1125,1382,2237 'compress':165,1057,1068,2159 'condens':2094 'contain':264,1235,1471,1507,1541,1653 'containers/footer':1260 'content':1509,1555,1606,1795 'contrast':219,628,1083,1446,1613,1837 'cool':620,624,1958,2447 'cool-ton':623 'coral':561 'coral-pink':560 'corner':2183 'corpor':2509 'craft':36,188,1481,1599 'craft-lik':1480,1598 'craft-meets-tech':187 'cream':52,302,413,610,1239,1322,1548,1672,1862,1963,2196,2244,2444 'cream-ton':609 'creat':248,1032,1048,1081,1119,1449,1582,1777,1832,2239,2375 'cta':1208,1336 'ctas':1656 'cyan':86,462,471,1398,2216 'd08a11':505 'dad4c8':60,310,605,1244,1250,1348,1464,1920,2210,2336,2382,2468 'dark':459,519,590,593,630,635,1406 'darkest':548 'dash':267,365,1249,1457,1460,1463,1838,1927,2470 'data':32 'ddd':1976 'decor':1473,1823,2473 'deep':456,480,510,539,573 'default':2345 'defin':2003 'deg':210,339,1169,1428,1908,2363 'deliber':1809 'delight':253 'densiti':1601 'depth':1662,1824,1834 'design':2,5,9,12,43,287,2296,2416 'design-md-clay':1 'desktop':1527,2096 'display':150,752,772,787,1056,1069,2139 'distinct':145,196,1034,1381,1417 'downward':1754 'dragonfruit':96,323,1227 'dramat':1082,1833 'drawn':1479 'drop':1817 'dualiti':191 'e.g':1162 'e6e8ec':622 'easi':2131 'edg':1771 'eee9df':61,616 'eff1f3':639 'effect':2012 'element':1459,1474,1784 'elev':1663 'embed':1789 'emphasi':1043 'enjoy':296 'enrich':33 'enterpris':40,110 'era':1816 'everi':64 'everywher':2469 'exampl':2236 'exclus':1944 'expand':2103 'explod':80 'extens':129 'f0f8ff':652 'f8cc65':486 'fade':2497 'faf9f7':54,304,414,1863,1964,2197,2245,2445 'fallback':736 'famili':733 'fbbd41':496,2225 'fc7981':554,2235 'featur':742,835,1256,1512,1642,1644,2029,2146 'feel':284,1564,1785 'ffffff':405,1192,1237 'five':1017 'flat':1667 'flavor':101 'focus':666,675,1181,1309,1730,1740 'font':325,732,764,2121 'footer':583,1536,1652 'forget':2055 'form':1300 'foundat':49 'frost':638 'full':1376,1387,1529,1826,2098,2127,2156,2454 'full-width':1375,1386,1528,1825,2126,2155 'generous':262,352,1074,1538,1545,1559,1616,1933,2032,2123,2499 'genuin':295 'geometr':120,332 'ghost':1212,1624,2289 'give':63,141 'glyph':1053 'go':2459 'gold':88,483,493,502,1402,2221 'graphic':1812 'gray':1923,1959,1973 'green':84,428,438,448,457,1396,2211 'grid':1506,1523,1535,2093,2102,2162 'guid':2190,2439 'hamburg':1350,2143 'hand':1478 'hand-drawn':1477 'handmad':70 'hard':225,342,715,727,1172,1433,1714,1727,1803,1911,2015,2046,2366,2493 'head':394,803,821,851,1041,1087,1881,1946,2305,2514 'headlin':166,2247 'height':768,1080,2255,2277,2325 'hero':773,2135,2241 'hierarchi':762,1051 'highlight':282,376,712,1712,1762 'horizont':2142 'hover':199,205,237,335,647,724,1131,1156,1198,1226,1424,1432,1713,1724,1802,1904,2011,2344,2355,2487 'hue':1586 'ident':1021,1872 'illustr':1365,1847,2177 'imag':1354,1374,1631,1646,2169 'includ':280 'indic':676 'input':1299,1626 'inset':281,375,382,697,711,1279,1696,1711,1761,1767,2052,2332,2404 'insid':1602 'instead':1439 'interact':247,1455,2020 'interfac':369 'invers':410 'invit':1565 'iter':2438 'juic':104 'jump':245 'key':299,2074 'keyboard':1739 'kit':112 'label':184,351,993,1107,2058,2419 'languag':44 'larg':866,931,1650 'lavend':531 'layer':276,372,709,1709,1752,2051 'layout':1485,2088,2099 'left':1334 'left-align':1333 'lemon':87,319,482,484,489,494,499,503,508,512,517,1298,1401,1894,2223 'letter':160,769,1117,2258,2312,2412,2429 'letter-spac':159,1116,2257,2311,2411,2428 'level':1664,1668,1678,1715,1731 'light':437,599,615,637,1411 'lighter':618 'like':34,100,171,285,421,1454,1482,1566,1600,1790,2484 'line':613,767,1079,2254,2276,2324 'line-height':1078,2253,2275,2323 'link':584,592,596,957,1330,1632,2119 'liter':242 'load':126 'logo':1332 'look':2483,2506 'made':291 'magenta':97 'maintain':2154,2184 'make':193,297,2481 'mandatori':2479 'matcha':83,317,427,429,435,440,445,449,454,1295,1395,1892,2213,2301,2462 'max':1508 'md':3,10 'medium':903 'meet':189 'micro':201 'micro-anim':200 'mid':447 'minimum':2108 'mix':361,1924,1985 'mobil':1349,2076,2083,2086,2125 'mono':174,346,740 'monospac':178,738 'multi':275,371,708,1708,2050,2149 'multi-column':2148 'multi-lay':274,370,707,1707,2049 'mute':591 'name':99,314,425,1889,2072 'nav':956,1320,1329,2095,2118 'navi':94,564,574 'navig':1317,2141 'negat':158 'negoti':1968 'neutral':575,1922,1972 'never':2446 'non':1967 'non-negoti':1966 'none':1148 'normal':873,898,938,965,988 'note':771 'noth':2505 'oat':57,307,603,614,1199,1246,1362,1918,1981,2208,2334,2466 'oat-ton':56,306 'offset':226,343,716,1434,1728,2047 'omit':1046 'one':271 'opac':645 'opentyp':132,328,741,1876,1999,2262,2433,2475 'organ':1612,1850 'outer':1617 'outlin':1154,1188,1213,1316,2290 'pad':1142,1195,1218,2082,2113,2160 'page':415,1674,1866 'pale':492 'palett':79,316,387,424,1294,1891 'panel':1647 'paper':71,420 'paper-lik':419 'pattern':1123 'peopl':293 'person':82,148,1036 'philosophi':1543,1743 'physic':252,1451,1821 'pill':360,1014,1342,1654,1658,2285 'pill-shap':1657 'pink':92,562,2231 'pink/red':551 'play':25,236,334,726,1423,1726,1822,1903,2343 'pomegran':91,321,550,552,557,1896,2233 'posit':1109 'press':1779 'price':395,400 'pricing-card':399 'primari':389,501,606,734,1128,1207 'principl':1016,1486 'print':1815 'print-era':1814 'product':1356,1418,1846,2171 'prompt':2189,2238 'proport':2174 'provid':1550 'punchi':168 'pure':403 'purpl':90,522,540,549,1400,2226 'px':163,233,381,384,695,705,722,782,797,812,815,830,844,859,886,911,914,926,946,952,977,1002,1012,1059,1063,1115,1144,1146,1179,1197,1277,1287,1437,1497,1501,1695,1704,1722,1765,1774,1806,1914,2061,2110,2112,2261,2315,2373,2402,2415,2432 'qualiti':68,1456,1483,1782 'quick':2191 'quirki':147,331 'radius':266,354,1224,1251,1307,1343,1372,1540,1620,1934,2026,2287,2292,2338,2385,2500 'rais':1787 'rare':256 'rather':37,1587 're':2064 'refer':7,2193 'referenc':1813 'relax':884,964 'rem':777,792,807,825,840,855,870,881,895,907,922,935,948,961,973,985,997 'reserv':1039 'respons':2069 'rest':1553 'retro':1811 'retro-graph':1810 'rgb':228,668,717,1174,1182,1310,1717,1733,2368 'rgba':680,688,698,1135,1262,1270,1280,1680,1688,1697,2387,2395 'rhythm':1575,1584 'right':1339 'right-align':1338 'ring':667,1741 'role':388,763,1105,2520 'roobert':118,155,324,735,750,774,789,804,822,837,852,867,878,892,904,919,932,944,958,970,982,994,1010,1031,1324,1880,2004,2250,2308,2351,2408,2421,2482,2485 'room':1597 'rotat':206,1204,1233,1426,2014,2492 'rotatez':208,337,1167,1906,2361 'round':263,2033,2182 'rule':731 'san':122 'sans-serif':121 'scale':151,576,1492,1621,2173 'screenshot':1357,2172 'secondari':617,788,1470,2202 'secondary/muted':581 'section':358,460,629,636,802,1211,1259,1290,1366,1379,1385,1389,1414,1513,1532,1581,1593,1648,1651,1831,1899,1940,1994,2104,2147,2153,2176,2299,2455,2504 'sens':250 'serif':123 'serv':175 'set':130,134,330,786,801,819,834,848,862,876,889,901,917,929,941,955,968,980,991,1008,1019,1570,1878,2001,2477 'shadow':227,277,344,373,677,679,728,1173,1205,1261,1435,1671,1677,1729,1742,1746,1804,1818,1912,2016,2040,2367,2386,2494 'shape':1659 'sharp':1622,2507 'shift':1158 'signatur':714,2019,2491 'silver':579,2205 'singl':2079,2167 'size':765 'skill' 'skill-design-md-clay' 'skip':1997 'slight':146,207 'slushi':85,318,461,463,468,473,478,1296,1397,1893,2218,2463 'small':943,981,1629,2024,2077,2457 'smaller':2138 'soft':530,1441 'softwar':259 'solid':270,364,672,1151,1186,1190,1222,1243,1305,1314,1347,1466,1737,1844,1925,2284,2294,2381 'source-galyarderlabs' 'space':161,173,345,739,770,1076,1118,1487,1557,1618,2124,2259,2313,2413,2430 'spatial':1574 'ss01':135,743,864,1025,1037,1882,2263 'ss03':136,744,758,1026,1883,2264,2434 'ss10':137,745,759,1027,1884,2265,2435 'ss11':138,746,760,1028,1885,2266,2436 'ss12':139,747,761,1029,1886,2267,2437 'stack':2087,2151 'stamp':1797 'standard':891,1253,1627,1639,2039,2085 'start':2441 'state':725,1725 'statement':172 'sticki':1318 'stori':1419 'strategi':2134 'strict':1104,2519 'structur':612,2035 'style':363,1126,1852 'stylist':133,329,785,800,818,833,847,861,875,888,900,916,928,940,954,967,979,990,1018,1877,2000,2476 'sub':850 'sub-head':849 'subtitl':2270 'subtl':640,1050,1770,2010,2496 'surfac':65,601,657,1800 'swatch':78,220,315,423,433,443,452,466,476,487,497,506,515,526,535,544,555,569,1160,1201,1228,1293,1368,1383,1392,1407,1412,1447,1520,1579,1829,1890,1989,2450 'swatch-color':1391,1578,1828 'system':6,13,278,288,1098,1488,1747,2067 'systemat':1121 'tabl':1571 'tablet':1793,2089 'tactil':67 'tag':1635 'tap':2132 'target':2106 'teal':481 'tech':190 'technic':183,350 'tell':1415 'tertiari':588 'text':143,393,397,402,411,582,589,597,660,665,751,1004,1045,1140,1164,1193,1216,1231,1301,1404,1409,2140,2198,2203,2269,2280,2317,2329,2349,2358,2425 'text-transform':1003,2424 'textur':1842 'theme':17,398 'thing':298 'three':1096,1751,2511 'three-lay':1750 'three-tier':1095 'tier':1097 'tight':780,795,810,828,1000,2081 'tilt':243 'tint':655 'titl':836,2405 'tone':58,308,611,625,1982 'top':1319 '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':2105,2116 'toy':1453 'toy-lik':1452 'track':1070,1110,2062 'transform':1005,2360,2426 'transit':1444 'translat':211,1429 'translatey':213,340,1170,1909,2364 'transpar':1129,1134,1215,2346 'treat':30 'treatment':1355,1665 'truli':195 'ts':1858 'two':2281 'typograph':1035 'typographi':114,730 'ube':89,320,521,523,528,532,537,541,546,1297,1399,1895,2228,2464 'ui':111,1090,1949,2516 'uniqu':1749 'unit':1490 'uppercas':992,1006,1106,1112,2057,2418,2427 'upward':212,1430,1760 'use':156,753,757,1206,1292,1468,1666,1860,1887,1916,1932,1941,1957,1971,1978,2009,2023,2038,2045 'variant':1155,2471 'variat':1054 'varieti':1931 'viewport':2180 'visual':16,1583,1841,1930 'vivid':77,662 'warm':24,51,301,412,418,491,559,577,578,585,608,1245,1544,1552,1849,1861,1917,1962,1980,2195,2204,2243,2443 'warmth':1869 'wayfind':1122,2066 'websit':21 'weight':153,766,1084,1101,1326,1942,2251,2273,2309,2321,2352,2409,2422,2512 'well':1569,1611 'well-organ':1610 'well-set':1568 'white':404,1166,1189,1230,1359,1403,1516,2283,2316,2330,2359,2378,2448 'whitespac':1542,1590 'width':1377,1388,1510,1530,1827,2073,2128,2157,2181 'within':1604","prices":[{"id":"a2318ac7-01f9-4d5b-adb3-81cafa1a31eb","listingId":"5732c2df-67b9-4042-97ef-ca20ff2905b7","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:44.118Z"}],"sources":[{"listingId":"5732c2df-67b9-4042-97ef-ca20ff2905b7","source":"github","sourceId":"galyarderlabs/galyarder-framework/design-md-clay","sourceUrl":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-clay","isPrimary":false,"firstSeenAt":"2026-05-10T01:06:44.118Z","lastSeenAt":"2026-05-18T19:07:46.051Z"}],"details":{"listingId":"5732c2df-67b9-4042-97ef-ca20ff2905b7","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"galyarderlabs","slug":"design-md-clay","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":"0a126279a1ffc11bddebb3534dd242203961701b","skill_md_path":"skills/design-md-clay/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-clay"},"layout":"multi","source":"github","category":"galyarder-framework","frontmatter":{"name":"design-md-clay","description":"Design system reference for design md clay."},"skills_sh_url":"https://skills.sh/galyarderlabs/galyarder-framework/design-md-clay"},"updatedAt":"2026-05-18T19:07:46.051Z"}}