{"id":"e9eded95-cd7b-437a-a0c1-653e7c9a9687","shortId":"FMHS4q","kind":"skill","title":"design-md-zapier","tagline":"Design system reference for design md zapier.","description":"# Design System: Zapier\n\n## 1. Visual Theme & Atmosphere\n\nZapier's website radiates warm, approachable professionalism. It rejects the cold monochrome minimalism of developer tools in favor of a cream-tinted canvas (`#fffefb`) that feels like unbleached paper -- the digital equivalent of a well-organized notebook. The near-black (`#201515`) text has a faint reddish-brown warmth, creating an atmosphere more human than mechanical. This is automation designed to feel effortless, not technical.\n\nThe typographic system is a deliberate interplay of two distinct personalities. **Degular Display** -- a geometric, wide-set display face -- handles hero-scale headlines at 56-80px with medium weight (500) and extraordinarily tight line-heights (0.90), creating headlines that compress vertically like stacked blocks. **Inter** serves as the workhorse for everything else, from section headings to body text and navigation, with fallbacks to Helvetica and Arial. **GT Alpina**, an elegant thin-weight serif with aggressive negative letter-spacing (-1.6px to -1.92px), makes occasional appearances for softer editorial moments. This three-font system gives Zapier the ability to shift register -- from bold and punchy (Degular) to clean and functional (Inter) to refined and literary (GT Alpina).\n\nThe brand's signature orange (`#ff4f00`) is unmistakable -- a vivid, saturated red-orange that sits precisely between traffic-cone urgency and sunset warmth. It's used sparingly but decisively: primary CTA buttons, active state underlines, and accent borders. Against the warm cream background, this orange creates a color relationship that feels energetic without being aggressive.\n\n**Key Characteristics:**\n- Warm cream canvas (`#fffefb`) instead of pure white -- organic, paper-like warmth\n- Near-black with reddish undertone (`#201515`) -- text that breathes rather than dominates\n- Degular Display for hero headlines at 0.90 line-height -- compressed, impactful, modern\n- Inter as the universal UI font across all functional typography\n- GT Alpina for editorial accents -- thin-weight serif with extreme negative tracking\n- Zapier Orange (`#ff4f00`) as the single accent -- vivid, warm, sparingly applied\n- Warm neutral palette: borders (`#c5c0b1`), muted text (`#939084`), surface tints (`#eceae3`)\n- 8px base spacing system with generous padding on CTAs (20px 24px)\n- Border-forward design: `1px solid` borders in warm grays define structure over shadows\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Zapier Black** (`#201515`): Primary text, headings, dark button backgrounds. A warm near-black with reddish undertones -- never cold.\n- **Cream White** (`#fffefb`): Page background, card surfaces, light button fills. Not pure white; the yellowish warmth is intentional.\n- **Off-White** (`#fffdf9`): Secondary background surface, subtle alternate tint. Nearly indistinguishable from cream white but creates depth.\n\n### Brand Accent\n- **Zapier Orange** (`#ff4f00`): Primary CTA buttons, active underline indicators, accent borders. The signature color -- vivid and warm.\n\n### Neutral Scale\n- **Dark Charcoal** (`#36342e`): Secondary text, footer text, border color for strong dividers. A warm dark gray-brown with 70% opacity variant.\n- **Warm Gray** (`#939084`): Tertiary text, muted labels, timestamp-style content. Mid-range with greenish-warm undertone.\n- **Sand** (`#c5c0b1`): Primary border color, hover state backgrounds, divider lines. The backbone of Zapier's structural elements.\n- **Light Sand** (`#eceae3`): Secondary button backgrounds, light borders, subtle card surfaces.\n- **Mid Warm** (`#b5b2aa`): Alternate border tone, used on specific span elements.\n\n### Interactive\n- **Orange CTA** (`#ff4f00`): Primary action buttons and active tab underlines.\n- **Dark CTA** (`#201515`): Secondary dark buttons with sand hover state.\n- **Light CTA** (`#eceae3`): Tertiary/ghost buttons with sand hover.\n- **Link Default** (`#201515`): Standard link color, matching body text.\n- **Hover Underline**: Links remove `text-decoration: underline` on hover (inverse pattern).\n\n### Overlay & Surface\n- **Semi-transparent Dark** (`rgba(45, 45, 46, 0.5)`): Overlay button variant, backdrop-like elements.\n- **Pill Surface** (`#fffefb`): White pill buttons with sand borders.\n\n### Shadows & Depth\n- **Inset Underline** (`rgb(255, 79, 0) 0px -4px 0px 0px inset`): Active tab indicator -- orange underline using inset box-shadow.\n- **Hover Underline** (`rgb(197, 192, 177) 0px -4px 0px 0px inset`): Inactive tab hover -- sand-colored underline.\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: `Degular Display` -- wide geometric display face for hero headlines\n- **Primary**: `Inter`, with fallbacks: `Helvetica, Arial`\n- **Editorial**: `GT Alpina` -- thin-weight serif for editorial moments\n- **System**: `Arial` -- fallback for form elements and system UI\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero XL | Degular Display | 80px (5.00rem) | 500 | 0.90 (tight) | normal | Maximum impact, compressed block |\n| Display Hero | Degular Display | 56px (3.50rem) | 500 | 0.90-1.10 (tight) | 0-1.12px | Primary hero headlines |\n| Display Hero SM | Degular Display | 40px (2.50rem) | 500 | 0.90 (tight) | normal | Smaller hero variant |\n| Display Button | Degular Display | 24px (1.50rem) | 600 | 1.00 (tight) | 1px | Large CTA button text |\n| Section Heading | Inter | 48px (3.00rem) | 500 | 1.04 (tight) | normal | Major section titles |\n| Editorial Heading | GT Alpina | 48px (3.00rem) | 250 | normal | -1.92px | Thin editorial headlines |\n| Editorial Sub | GT Alpina | 40px (2.50rem) | 300 | 1.08 (tight) | -1.6px | Editorial subheadings |\n| Sub-heading LG | Inter | 36px (2.25rem) | 500 | normal | -1px | Large sub-sections |\n| Sub-heading | Inter | 32px (2.00rem) | 400 | 1.25 (tight) | normal | Standard sub-sections |\n| Sub-heading MD | Inter | 28px (1.75rem) | 500 | normal | normal | Medium sub-headings |\n| Card Title | Inter | 24px (1.50rem) | 600 | normal | -0.48px | Card headings |\n| Body Large | Inter | 20px (1.25rem) | 400-500 | 1.00-1.20 (tight) | -0.2px | Feature descriptions |\n| Body Emphasis | Inter | 18px (1.13rem) | 600 | 1.00 (tight) | normal | Emphasized body text |\n| Body | Inter | 16px (1.00rem) | 400-500 | 1.20-1.25 | -0.16px | Standard reading text |\n| Body Semibold | Inter | 16px (1.00rem) | 600 | 1.16 (tight) | normal | Strong labels |\n| Button | Inter | 16px (1.00rem) | 600 | normal | normal | Standard buttons |\n| Button SM | Inter | 14px (0.88rem) | 600 | normal | normal | Small buttons |\n| Caption | Inter | 14px (0.88rem) | 500 | 1.25-1.43 | normal | Labels, metadata |\n| Caption Upper | Inter | 14px (0.88rem) | 600 | normal | 0.5px | Uppercase section labels |\n| Micro | Inter | 12px (0.75rem) | 600 | 0.90-1.33 | 0.5px | Tiny labels, often uppercase |\n| Micro SM | Inter | 13px (0.81rem) | 500 | 1.00-1.54 | normal | Small metadata text |\n\n### Principles\n- **Three-font system, clear roles**: Degular Display commands attention at hero scale only. Inter handles everything functional. GT Alpina adds editorial warmth sparingly.\n- **Compressed display**: Degular at 0.90 line-height creates vertically compressed headline blocks that feel modern and architectural.\n- **Weight as hierarchy signal**: Inter uses 400 (reading), 500 (navigation/emphasis), 600 (headings/CTAs). Degular uses 500 (display) and 600 (buttons).\n- **Uppercase for labels**: Section labels (like \"01 / Colors\") and small categorization use `text-transform: uppercase` with 0.5px letter-spacing.\n- **Negative tracking for elegance**: GT Alpina uses -1.6px to -1.92px letter-spacing for its thin-weight editorial headlines.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Orange**\n- Background: `#ff4f00`\n- Text: `#fffefb`\n- Padding: 8px 16px\n- Radius: 4px\n- Border: `1px solid #ff4f00`\n- Use: Primary CTA (\"Start free with email\", \"Sign up free\")\n\n**Primary Dark**\n- Background: `#201515`\n- Text: `#fffefb`\n- Padding: 20px 24px\n- Radius: 8px\n- Border: `1px solid #201515`\n- Hover: background shifts to `#c5c0b1`, text to `#201515`\n- Use: Large secondary CTA buttons\n\n**Light / Ghost**\n- Background: `#eceae3`\n- Text: `#36342e`\n- Padding: 20px 24px\n- Radius: 8px\n- Border: `1px solid #c5c0b1`\n- Hover: background shifts to `#c5c0b1`, text to `#201515`\n- Use: Tertiary actions, filter buttons\n\n**Pill Button**\n- Background: `#fffefb`\n- Text: `#36342e`\n- Padding: 0px 16px\n- Radius: 20px\n- Border: `1px solid #c5c0b1`\n- Use: Tag-like selections, filter pills\n\n**Overlay Semi-transparent**\n- Background: `rgba(45, 45, 46, 0.5)`\n- Text: `#fffefb`\n- Radius: 20px\n- Hover: background becomes fully opaque `#2d2d2e`\n- Use: Video play buttons, floating actions\n\n**Tab / Navigation (Inset Shadow)**\n- Background: transparent\n- Text: `#201515`\n- Padding: 12px 16px\n- Shadow: `rgb(255, 79, 0) 0px -4px 0px 0px inset` (active orange underline)\n- Hover shadow: `rgb(197, 192, 177) 0px -4px 0px 0px inset` (sand underline)\n- Use: Horizontal tab navigation\n\n### Cards & Containers\n- Background: `#fffefb`\n- Border: `1px solid #c5c0b1` (warm sand border)\n- Radius: 5px (standard), 8px (featured)\n- No shadow elevation by default -- borders define containment\n- Hover: subtle border color intensification\n\n### Inputs & Forms\n- Background: `#fffefb`\n- Text: `#201515`\n- Border: `1px solid #c5c0b1`\n- Radius: 5px\n- Focus: border color shifts to `#ff4f00` (orange)\n- Placeholder: `#939084`\n\n### Navigation\n- Clean horizontal nav on cream background\n- Zapier logotype left-aligned, 104x28px\n- Links: Inter 16px weight 500, `#201515` text\n- CTA: Orange button (\"Start free with email\")\n- Tab navigation uses inset box-shadow underline technique\n- Mobile: hamburger collapse\n\n### Image Treatment\n- Product screenshots with `1px solid #c5c0b1` border\n- Rounded corners: 5-8px\n- Dashboard/workflow screenshots prominent in feature sections\n- Light gradient backgrounds behind hero content\n\n### Distinctive Components\n\n**Workflow Integration Cards**\n- Display connected app icons in pairs\n- Arrow or connection indicator between apps\n- Sand border containment\n- Inter weight 500 for app names\n\n**Stat Counter**\n- Large display number using Inter 48px weight 500\n- Muted description below in `#36342e`\n- Used for social proof metrics\n\n**Social Proof Icons**\n- Circular icon buttons: 14px radius\n- Sand border: `1px solid #c5c0b1`\n- Used for social media follow links in footer\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 1px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 64px, 72px\n- CTA buttons use generous padding: 20px 24px for large, 8px 16px for standard\n- Section padding: 64px-80px vertical\n\n### Grid & Container\n- Max content width: approximately 1200px\n- Hero: centered single-column with large top padding\n- Feature sections: 2-3 column grids for integration cards\n- Full-width sand-bordered dividers between sections\n- Footer: multi-column dark background (`#201515`)\n\n### Whitespace Philosophy\n- **Warm breathing room**: Generous vertical spacing between sections (64px-80px), but content areas are relatively dense -- Zapier packs information efficiently within its cream canvas.\n- **Architectural compression**: Degular Display headlines at 0.90 line-height compress vertically, contrasting with the open spacing around them.\n- **Section rhythm**: Cream background throughout, with sections separated by sand-colored borders rather than background color changes.\n\n### Border Radius Scale\n- Tight (3px): Small inline spans\n- Standard (4px): Buttons (orange CTA), tags, small elements\n- Content (5px): Cards, links, general containers\n- Comfortable (8px): Featured cards, large buttons, tabs\n- Social (14px): Social icon buttons, pill-like elements\n- Pill (20px): Play buttons, large pill buttons, floating actions\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Page background, text blocks |\n| Bordered (Level 1) | `1px solid #c5c0b1` | Standard cards, containers, inputs |\n| Strong Border (Level 1b) | `1px solid #36342e` | Dark dividers, emphasized sections |\n| Active Tab (Level 2) | `rgb(255, 79, 0) 0px -4px 0px 0px inset` | Active tab underline (orange) |\n| Hover Tab (Level 2b) | `rgb(197, 192, 177) 0px -4px 0px 0px inset` | Hover tab underline (sand) |\n| Focus (Accessibility) | `1px solid #ff4f00` outline | Focus ring on interactive elements |\n\n**Shadow Philosophy**: Zapier deliberately avoids traditional shadow-based elevation. Structure is defined almost entirely through borders -- warm sand (`#c5c0b1`) borders for standard containment, dark charcoal (`#36342e`) borders for emphasis. The only shadow-like technique is the inset box-shadow used for tab underlines, where a `0px -4px 0px 0px inset` shadow creates a bottom-bar indicator. This border-first approach keeps the design grounded and tangible rather than floating.\n\n### Decorative Depth\n- Orange inset underline on active tabs creates visual \"weight\" at the bottom of elements\n- Sand hover underlines provide preview states without layout shifts\n- No background gradients in main content -- the cream canvas is consistent\n- Footer uses full dark background (`#201515`) for contrast reversal\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Degular Display exclusively for hero-scale headlines (40px+) with 0.90 line-height for compressed impact\n- Use Inter for all functional UI -- navigation, body text, buttons, labels\n- Apply warm cream (`#fffefb`) as the background, never pure white\n- Use `#201515` for text, never pure black -- the reddish warmth matters\n- Keep Zapier Orange (`#ff4f00`) reserved for primary CTAs and active state indicators\n- Use sand (`#c5c0b1`) borders as the primary structural element instead of shadows\n- Apply generous button padding (20px 24px) for large CTAs to match Zapier's spacious button style\n- Use inset box-shadow underlines for tab navigation rather than border-bottom\n- Apply uppercase with 0.5px letter-spacing for section labels and micro-categorization\n\n### Don't\n- Don't use Degular Display for body text or UI elements -- it's display-only\n- Don't use pure white (`#ffffff`) or pure black (`#000000`) -- Zapier's palette is warm-shifted\n- Don't apply box-shadow elevation to cards -- use borders instead\n- Don't scatter Zapier Orange across the UI -- it's reserved for CTAs and active states\n- Don't use tight padding on large CTA buttons -- Zapier's buttons are deliberately spacious\n- Don't ignore the warm neutral system -- borders should be `#c5c0b1`, not gray\n- Don't use GT Alpina for functional UI -- it's an editorial accent at thin weights only\n- Don't apply positive letter-spacing to GT Alpina -- it uses aggressive negative tracking (-1.6px to -1.92px)\n- Don't use rounded pill shapes (9999px) for primary buttons -- pills are for tags and social icons\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <450px | Tight single column, reduced hero text |\n| Mobile | 450-600px | Standard mobile, stacked layout |\n| Mobile Large | 600-640px | Slight horizontal breathing room |\n| Tablet Small | 640-680px | 2-column grids begin |\n| Tablet | 680-768px | Card grids expand |\n| Tablet Large | 768-991px | Full card grids, expanded padding |\n| Desktop Small | 991-1024px | Desktop layout initiates |\n| Desktop | 1024-1280px | Full layout, maximum content width |\n| Large Desktop | >1280px | Centered with generous margins |\n\n### Touch Targets\n- Large CTA buttons: 20px 24px padding (comfortable 60px+ height)\n- Standard buttons: 8px 16px padding\n- Navigation links: 16px weight 500 with adequate spacing\n- Social icons: 14px radius circular buttons\n- Tab items: 12px 16px padding\n\n### Collapsing Strategy\n- Hero: Degular 80px display scales to 40-56px on smaller screens\n- Navigation: horizontal links + CTA collapse to hamburger menu\n- Feature cards: 3-column grid to 2-column to single-column stacked\n- Integration workflow illustrations: maintain aspect ratio, may simplify\n- Footer: multi-column dark section collapses to stacked\n- Section spacing: 64-80px reduces to 40-48px on mobile\n\n### Image Behavior\n- Product screenshots maintain sand border treatment at all sizes\n- Integration app icons maintain fixed sizes within responsive containers\n- Hero illustrations scale proportionally\n- Full-width sections maintain edge-to-edge treatment\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary CTA: Zapier Orange (`#ff4f00`)\n- Background: Cream White (`#fffefb`)\n- Heading text: Zapier Black (`#201515`)\n- Body text: Dark Charcoal (`#36342e`)\n- Border: Sand (`#c5c0b1`)\n- Secondary surface: Light Sand (`#eceae3`)\n- Muted text: Warm Gray (`#939084`)\n\n### Example Component Prompts\n- \"Create a hero section on cream background (`#fffefb`). Headline at 56px Degular Display weight 500, line-height 0.90, color `#201515`. Subtitle at 20px Inter weight 400, line-height 1.20, color `#36342e`. Orange CTA button (`#ff4f00`, 4px radius, 8px 16px padding, white text) and dark button (`#201515`, 8px radius, 20px 24px padding, white text).\"\n- \"Design a card: cream background (`#fffefb`), `1px solid #c5c0b1` border, 5px radius. Title at 24px Inter weight 600, letter-spacing -0.48px, `#201515`. Body at 16px weight 400, `#36342e`. No box-shadow.\"\n- \"Build a tab navigation: transparent background. Inter 16px weight 500, `#201515` text. Active tab: `box-shadow: rgb(255, 79, 0) 0px -4px 0px 0px inset`. Hover: `box-shadow: rgb(197, 192, 177) 0px -4px 0px 0px inset`. Padding 12px 16px.\"\n- \"Create navigation: cream sticky header (`#fffefb`). Inter 16px weight 500 for links, `#201515` text. Orange pill CTA 'Start free with email' right-aligned (`#ff4f00`, 4px radius, 8px 16px padding).\"\n- \"Design a footer with dark background (`#201515`). Text `#fffefb`. Links in `#c5c0b1` with hover to `#fffefb`. Multi-column layout. Social icons as 14px-radius circles with sand borders.\"\n\n### Iteration Guide\n1. Always use warm cream (`#fffefb`) background, never pure white -- the warmth defines Zapier\n2. Borders (`1px solid #c5c0b1`) are the structural backbone -- avoid shadow elevation\n3. Zapier Orange (`#ff4f00`) is the only accent color; everything else is warm neutrals\n4. Three fonts, strict roles: Degular Display (hero), Inter (UI), GT Alpina (editorial)\n5. Large CTA buttons need generous padding (20px 24px) -- Zapier buttons feel spacious\n6. Tab navigation uses inset box-shadow underlines, not border-bottom\n7. Text is always warm: `#201515` for dark, `#36342e` for body, `#939084` for muted\n8. Uppercase labels at 12-14px with 0.5px letter-spacing for section categorization","tags":["design","zapier","galyarder","framework","galyarderlabs","agent-skills","agentic-framework","agents","ai-agents","automation","claude-code-plugin","codex-skills"],"capabilities":["skill","source-galyarderlabs","skill-design-md-zapier","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-zapier","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,728 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:50.346Z","embedding":null,"createdAt":"2026-05-10T01:06:49.623Z","updatedAt":"2026-05-18T19:07:50.346Z","lastSeenAt":"2026-05-18T19:07:50.346Z","tsv":"'-0.16':909 '-0.2':883 '-0.48':868,2466 '-1':824 '-1.10':735 '-1.12':738 '-1.20':881 '-1.25':908 '-1.33':978 '-1.43':954 '-1.54':993 '-1.6':171,810,1089,2109 '-1.92':174,795,1092,2112 '-1024':2194 '-1280':2201 '-14':2683 '-3':1524 '-4':626,648,1254,1269,1702,1720,1789,2501,2515 '-48':2310 '-500':879,906 '-56':2259 '-600':2150 '-640':2159 '-680':2168 '-768':2176 '-8':1381 '-80':114,2305 '-991':2184 '0':624,737,1252,1665,1700,2499 '0.5':600,966,979,1077,1220,1974,2686 '0.75':974 '0.81':989 '0.88':940,950,962 '0.90':126,302,719,734,752,977,1027,1579,1878,2408 '000000':2013 '01':1066 '0px':625,628,629,647,650,651,1196,1253,1256,1257,1268,1271,1272,1701,1704,1705,1719,1722,1723,1788,1791,1792,2500,2503,2504,2514,2517,2518 '1':15,1674,2585 '1.00':766,880,894,903,918,929,992 '1.04':780 '1.08':808 '1.13':891 '1.16':921 '1.20':907,2420 '1.25':838,876,953 '1.50':763,864 '1.75':851 '1024':2200 '104x28px':1342 '10px':1475 '12':2682 '1200px':1511 '1280px':2210 '12px':973,1246,1476,2247,2521 '13px':988 '14px':939,949,961,1447,1640,2241,2577 '14px-radius':2576 '16px':902,917,928,1116,1197,1247,1345,1477,1496,2229,2233,2248,2430,2471,2486,2522,2530,2551 '177':646,1267,1718,2513 '18px':890 '192':645,1266,1717,2512 '197':644,1265,1716,2511 '1b':1685 '1px':369,768,1120,1145,1173,1201,1285,1316,1374,1451,1471,1675,1686,1731,2451,2601 '2':379,1523,1696,2170,2278,2599 '2.00':835 '2.25':820 '2.50':749,805 '201515':62,289,386,553,571,1136,1147,1155,1183,1244,1314,1348,1545,1856,1907,2368,2410,2437,2468,2489,2535,2559,2669 '20px':363,875,1140,1168,1199,1224,1478,1491,1649,1945,2220,2413,2440,2645 '24px':364,762,863,1141,1169,1479,1492,1946,2221,2441,2459,2646 '250':793 '255':622,1250,1698,2497 '28px':850 '2b':1714 '2d2d2e':1230 '3':660,2274,2611 '3.00':777,791 '3.50':731 '300':807 '32px':834,1480 '36342e':462,1166,1194,1435,1688,1766,2373,2422,2474,2672 '36px':819 '3px':1614 '4':1104,2625 '40':2258,2309 '400':837,878,905,1047,2416,2473 '40px':748,804,1481,1876 '45':597,598,1217,1218 '450':2149 '450px':2141 '46':599,1219 '48px':776,790,1428,1482 '4px':1118,1472,1619,2427,2548 '5':1380,1462,2638 '5.00':716 '500':119,718,733,751,779,822,853,952,991,1049,1055,1347,1417,1430,2235,2404,2488,2532 '56':113 '56px':730,1483,2400 '5px':1292,1320,1627,2455 '6':1657,2651 '600':765,866,893,920,931,942,964,976,1051,1058,2158,2462 '60px':2224 '64':2304 '640':2167 '64px':1484,1502,1557 '64px-80px':1501,1556 '680':2175 '6px':1473 '7':1860,2664 '70':479 '72px':1485 '768':2183 '79':623,1251,1699,2498 '8':2131,2678 '80px':715,1503,1558,2254 '8px':354,1115,1143,1171,1294,1469,1474,1495,1633,2228,2429,2438,2550 '9':2348 '939084':350,484,1329,2386,2675 '991':2193 '9999px':2120 'abil':191 'accent':249,323,338,440,450,2089,2618 'access':1730 'across':315,2038 'action':545,1186,1236,1656 'activ':245,447,548,631,1259,1693,1707,1821,1926,2047,2491 'add':1019 'adequ':2237 'agent':2349 'aggress':166,267,2106 'align':1341,2546 'almost':1753 'alpina':158,210,320,683,789,803,1018,1087,2081,2103,2636 'altern':429,532 'alway':2586,2667 'app':1402,1411,1419,2326 'appear':178 'appli':342,1896,1941,1971,2023,2096 'approach':24,1805 'approxim':1510 'architectur':1040,1573 'area':1561 'arial':156,680,692 'around':1590 'arrow':1406 'aspect':2289 'atmospher':18,73 'attent':1008 'autom':80 'avoid':1744,2608 'b5b2aa':531 'backbon':512,2607 'backdrop':605 'backdrop-lik':604 'background':255,392,407,426,508,523,1110,1135,1149,1163,1177,1191,1215,1226,1241,1282,1311,1336,1391,1544,1595,1607,1669,1841,1855,1902,2360,2396,2449,2484,2558,2591 'bar':1799 'base':355,1467,1748 'becom':1227 'begin':2173 'behavior':2133,2315 'behind':1392 'black':61,285,385,397,1912,2012,2367 'block':134,725,1035,1671 'bodi':147,576,872,887,898,900,914,1892,1994,2369,2469,2674 'bold':196 'border':250,346,366,371,451,467,504,525,533,616,1119,1144,1172,1200,1284,1290,1301,1306,1315,1322,1377,1413,1450,1535,1604,1610,1672,1683,1756,1760,1767,1803,1932,1969,2031,2071,2320,2374,2454,2582,2600,2662 'border-bottom':1968,2661 'border-first':1802 'border-forward':365 'bottom':1798,1828,1970,2663 'bottom-bar':1797 'box':639,1362,1780,1960,2025,2477,2494,2508,2657 'box-shadow':638,1361,1779,1959,2024,2476,2493,2507,2656 'brand':212,439 'breakpoint':2134 'breath':292,1549,2163 'brown':69,477 'build':2479 'button':244,391,411,446,522,546,556,565,602,613,759,771,926,935,936,946,1059,1107,1160,1188,1190,1234,1352,1446,1487,1620,1637,1643,1651,1654,1894,1943,1955,2057,2060,2123,2219,2227,2244,2425,2436,2641,2648 'c5c0b1':347,502,1152,1175,1180,1203,1287,1318,1376,1453,1677,1759,1931,2074,2376,2453,2564,2603 'canva':42,272,1572,1848 'caption':947,958 'card':408,527,860,870,1280,1399,1529,1628,1635,1679,2029,2178,2187,2273,2447 'categor':1070,1985,2693 'center':1513,2211 'chang':1609,2138 'characterist':269 'charcoal':461,1765,2372 'circl':2579 'circular':1444,2243 'clean':201,1331 'clear':1003 'cold':29,402 'collaps':1368,2250,2268,2299 'color':260,380,454,468,505,574,658,1067,1307,1323,1603,1608,2353,2409,2421,2619 'column':1516,1525,1542,2144,2171,2275,2279,2283,2296,2571 'comfort':1632,2223 'command':1007 'compon':1105,1396,2388 'compress':130,306,724,1023,1033,1574,1583,1883 'cone':231 'connect':1401,1408 'consist':1850 'contain':1281,1303,1414,1506,1631,1680,1763,2333 'content':492,1394,1508,1560,1626,1845,2206 'contrast':1585,1858 'corner':1379 'counter':1422 'cream':40,254,271,403,434,1335,1571,1594,1847,1898,2361,2395,2448,2525,2589 'cream-tint':39 'creat':71,127,258,437,1031,1795,1823,2390,2523 'cta':243,445,542,552,562,770,1125,1159,1350,1486,1622,2056,2218,2267,2356,2424,2539,2640 'ctas':362,1924,1949,2045 'dark':390,460,474,551,555,595,1134,1543,1689,1764,1854,2297,2371,2435,2557,2671 'dashboard/workflow':1383 'decis':241 'decor':584,1815 'default':570,1300 'defin':375,1302,1752,2597 'degular':98,199,296,666,713,728,746,760,1005,1025,1053,1575,1868,1991,2253,2401,2630 'deliber':92,1743,2062 'dens':1564 'depth':438,618,1658,1816 'descript':886,1432 'design':2,5,9,12,81,368,1808,2445,2553 'design-md-zapi':1 'desktop':2191,2196,2199,2209 'develop':33 'digit':50 'display':99,105,297,665,667,670,710,714,726,729,743,747,758,761,1006,1024,1056,1400,1424,1576,1869,1992,2002,2255,2402,2631 'display-on':2001 'distinct':96,1395 'divid':471,509,1536,1690 'domin':295 'eceae3':353,520,563,1164,2381 'edg':2344,2346 'edge-to-edg':2343 'editori':181,322,681,689,786,798,800,812,1020,1102,2088,2637 'effici':1568 'effortless':84 'eleg':160,1085 'element':517,539,607,696,1625,1647,1739,1830,1937,1998 'elev':1298,1659,1749,2027,2610 'els':142,2621 'email':1129,1356,2543 'emphas':897,1691 'emphasi':888,1769 'energet':264 'entir':1754 'equival':51 'everyth':141,1015,2620 'exampl':2387 'exclus':1870 'expand':2180,2189 'extraordinarili':121 'extrem':329 'face':106,671 'faint':66 'fallback':152,678,693 'famili':664 'favor':36 'featur':885,1295,1387,1521,1634,2272 'feel':45,83,263,1037,2649 'ff4f00':216,334,443,543,1111,1122,1326,1733,1920,2359,2426,2547,2614 'fffdf9':424 'fffefb':43,273,405,610,1113,1138,1192,1222,1283,1312,1899,2363,2397,2450,2528,2561,2568,2590 'ffffff':2009 'fill':412 'filter':1187,1209 'first':1804 'fix':2329 'flat':1663 'float':1235,1655,1814 'focus':1321,1729,1735 'follow':1458 'font':186,314,663,702,1001,2627 'footer':465,1461,1539,1851,2293,2555 'form':695,1310 'forward':367 'free':1127,1132,1354,2541 'full':1531,1853,2186,2203,2339 'full-width':1530,2338 'fulli':1228 'function':203,317,1016,1889,2083 'general':1630 'generous':359,1489,1551,1942,2213,2643 'geometr':101,669 'ghost':1162 'give':188 'gradient':1390,1842 'gray':374,476,483,2076,2385 'gray-brown':475 'greenish':498 'greenish-warm':497 'grid':1505,1526,2172,2179,2188,2276 'ground':1809 'gt':157,209,319,682,788,802,1017,1086,2080,2102,2635 'guid':2351,2584 'hamburg':1367,2270 'handl':107,1014 'head':145,389,774,787,816,832,847,859,871,2364 'header':2527 'headings/ctas':1052 'headlin':111,128,300,674,742,799,1034,1103,1577,1875,2398 'height':125,305,706,1030,1582,1881,2225,2407,2419 'helvetica':154,679 'hero':109,299,673,711,727,741,744,756,1010,1393,1512,1873,2146,2252,2334,2392,2632 'hero-scal':108,1872 'hierarchi':700,1043 'horizont':1277,1332,2162,2265 'hover':506,559,568,578,587,641,655,1148,1176,1225,1262,1304,1711,1725,1832,2506,2566 'human':75 'icon':1403,1443,1445,1642,2130,2240,2327,2574 'ignor':2066 'illustr':2287,2335 'imag':1369,2314 'impact':307,723,1884 'inact':653 'indic':449,633,1409,1800,1928 'indistinguish':432 'inform':1567 'initi':2198 'inlin':1616 'input':1309,1681 'inset':619,630,637,652,1239,1258,1273,1360,1706,1724,1778,1793,1818,1958,2505,2519,2655 'instead':274,1938,2032 'integr':1398,1528,2285,2325 'intensif':1308 'intent':420 'inter':135,204,309,676,775,818,833,849,862,874,889,901,916,927,938,948,960,972,987,1013,1045,1344,1415,1427,1886,2414,2460,2485,2529,2633 'interact':540,1738 'interplay':93 'invers':588 'item':2246 'iter':2583 'keep':1806,1917 'key':268,2137 'label':488,925,956,970,982,1062,1064,1895,1981,2680 'larg':769,826,873,1157,1423,1494,1518,1636,1652,1948,2055,2157,2182,2208,2217,2639 'layout':1463,1838,2155,2197,2204,2572 'left':1340 'left-align':1339 'letter':169,707,1080,1095,1977,2099,2464,2689 'letter-spac':168,1079,1094,1976,2098,2463,2688 'level':1660,1664,1673,1684,1695,1713 'lg':817 'light':410,518,524,561,1161,1389,2379 'like':46,132,281,606,1065,1207,1646,1774 'line':124,304,510,705,1029,1581,1880,2406,2418 'line-height':123,303,1028,1580,1879,2405,2417 'link':569,573,580,1343,1459,1629,2232,2266,2534,2562 'literari':208 'logotyp':1338 'main':1844 'maintain':2288,2318,2328,2342 'major':783 'make':176 'margin':2214 'match':575,1951 'matter':1916 'max':1507 'maximum':722,2205 'may':2291 'md':3,10,848 'mechan':77 'media':1457 'medium':117,856 'menu':2271 'metadata':957,996 'metric':1440 'micro':971,985,1984 'micro-categor':1983 'mid':494,529 'mid-rang':493 'minim':31 'mobil':1366,2139,2148,2153,2156,2313 'modern':308,1038 'moment':182,690 'monochrom':30 'multi':1541,2295,2570 'multi-column':1540,2294,2569 'mute':348,487,1431,2382,2677 'name':1420,2135 'nav':1333 'navig':150,1238,1279,1330,1358,1891,1965,2231,2264,2482,2524,2653 'navigation/emphasis':1050 'near':60,284,396,431 'near-black':59,283,395 'need':2642 'negat':167,330,1082,2107 'neutral':344,458,2069,2624 'never':401,1903,1910,2592 'normal':721,754,782,794,823,840,854,855,867,896,923,932,933,943,944,955,965,994 'note':709 'notebook':57 'number':1425 'occasion':177 'off-whit':421 'often':983 'opac':480 'opaqu':1229 'open':1588 'orang':215,224,257,333,442,541,634,1109,1260,1327,1351,1621,1710,1817,1919,2037,2358,2423,2537,2613 'organ':56,278 'outlin':1734 'overlay':590,601,1211 'pack':1566 'pad':360,1114,1139,1167,1195,1245,1490,1500,1520,1944,2053,2190,2222,2230,2249,2431,2442,2520,2552,2644 'page':406,1668 'pair':1405 'palett':345,381,2016 'paper':48,280 'paper-lik':279 'pattern':589 'person':97 'philosophi':1547,1741 'pill':608,612,1189,1210,1645,1648,1653,2118,2124,2538 'pill-lik':1644 'placehold':1328 'play':1233,1650 'posit':2097 'precis':227 'preview':1835 'primari':242,383,387,444,503,544,675,740,1108,1124,1133,1923,1935,2122,2355 'principl':998,1464 'product':1371,2316 'profession':25 'promin':1385 'prompt':2350,2389 'proof':1439,1442 'proport':2337 'provid':1834 'punchi':198 'pure':276,414,1904,1911,2007,2011,2593 'px':115,172,175,627,649,739,796,811,825,869,884,910,967,980,1078,1090,1093,1255,1270,1382,1703,1721,1790,1975,2110,2113,2151,2160,2169,2177,2185,2195,2202,2260,2306,2311,2467,2502,2516,2684,2687 'quick':2352 'radiat':22 'radius':1117,1142,1170,1198,1223,1291,1319,1448,1611,2242,2428,2439,2456,2549,2578 'rang':495 'rather':293,1605,1812,1966 'ratio':2290 'read':912,1048 'red':223 'red-orang':222 'reddish':68,287,399,1914 'reddish-brown':67 'reduc':2145,2307 'refer':7,2354 'refin':206 'regist':194 'reject':27 'relat':1563 'relationship':261 'rem':717,732,750,764,778,792,806,821,836,852,865,877,892,904,919,930,941,951,963,975,990 'remov':581 'reserv':1921,2043 'respons':2132,2332 'revers':1859 'rgb':621,643,1249,1264,1697,1715,2496,2510 'rgba':596,1216 'rhythm':1593 'right':2545 'right-align':2544 'ring':1736 'role':382,701,1004,2629 'room':1550,2164 'round':1378,2117 'rule':662 'sand':501,519,558,567,615,657,1274,1289,1412,1449,1534,1602,1728,1758,1831,1930,2319,2375,2380,2581 'sand-bord':1533 'sand-color':656,1601 'satur':221 'scale':110,459,1011,1470,1612,1874,2256,2336 'scatter':2035 'screen':2263 'screenshot':1372,1384,2317 'secondari':425,463,521,554,1158,2377 'section':144,773,784,829,844,969,1063,1388,1499,1522,1538,1555,1592,1598,1692,1980,2298,2302,2341,2393,2692 'select':1208 'semi':593,1213 'semi-transpar':592,1212 'semibold':915 'separ':1599 'serif':164,327,687 'serv':136 'set':104 'shadow':378,617,640,1240,1248,1263,1297,1363,1667,1740,1747,1773,1781,1794,1940,1961,2026,2478,2495,2509,2609,2658 'shadow-bas':1746 'shadow-lik':1772 'shape':2119 'shift':193,1150,1178,1324,1839,2020 'sign':1130 'signal':1044 'signatur':214,453 'simplifi':2292 'singl':337,1515,2143,2282 'single-column':1514,2281 'sit':226 'size':703,2324,2330 'skill' 'skill-design-md-zapier' 'slight':2161 'sm':745,937,986 'small':945,995,1069,1615,1624,2140,2166,2192 'smaller':755,2262 'social':1438,1441,1456,1639,1641,2129,2239,2573 'softer':180 'solid':370,1121,1146,1174,1202,1286,1317,1375,1452,1676,1687,1732,2452,2602 'source-galyarderlabs' 'space':170,356,708,1081,1096,1465,1553,1589,1978,2100,2238,2303,2465,2690 'spacious':1954,2063,2650 'span':538,1617 'spare':239,341,1022 'specif':537 'stack':133,2154,2284,2301 'standard':572,841,911,934,1293,1498,1618,1678,1762,2152,2226 'start':1126,1353,2540 'stat':1421 'state':246,507,560,1836,1927,2048 'sticki':2526 'strategi':2251 'strict':2628 'strong':470,924,1682 'structur':376,516,1750,1936,2606 'style':491,1106,1956 'sub':801,815,828,831,843,846,858 'sub-head':814,830,845,857 'sub-sect':827,842 'subhead':813 'subtitl':2411 'subtl':428,526,1305 'sunset':234 'surfac':351,409,427,528,591,609,2378 'system':6,13,89,187,357,691,698,1002,1466,2070 'tab':549,632,654,1237,1278,1357,1638,1694,1708,1712,1726,1784,1822,1964,2245,2481,2492,2652 'tablet':2165,2174,2181 'tag':1206,1623,2127 'tag-lik':1205 'tangibl':1811 'target':2216 'technic':86 'techniqu':1365,1775 'tertiari':485,1185 'tertiary/ghost':564 'text':63,148,290,349,388,464,466,486,577,583,772,899,913,997,1073,1112,1137,1153,1165,1181,1193,1221,1243,1313,1349,1670,1893,1909,1995,2147,2365,2370,2383,2433,2444,2490,2536,2560,2665 'text-decor':582 'text-transform':1072 'theme':17 'thin':162,325,685,797,1100,2091 'thin-weight':161,324,684,1099 'three':185,1000,2626 'three-font':184,999 'throughout':1596 'tight':122,720,736,753,767,781,809,839,882,895,922,1613,2052,2142 'timestamp':490 'timestamp-styl':489 'tini':981 'tint':41,352,430 'titl':785,861,2457 'tone':534 'tool':34 'top':1519 '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':2215 'track':331,1083,2108 'tradit':1745 'traffic':230 'traffic-con':229 'transform':1074 'transpar':594,1214,1242,2483 'treatment':1370,1661,2321,2347 'ts':1865 'two':95 'typograph':88 'typographi':318,661 'ui':313,699,1890,1997,2040,2084,2634 'unbleach':47 'underlin':247,448,550,579,585,620,635,642,659,1261,1275,1364,1709,1727,1785,1819,1833,1962,2659 'underton':288,400,500 'unit':1468 'univers':312 'unmistak':218 'upper':959 'uppercas':968,984,1060,1075,1972,2679 'urgenc':232 'use':238,535,636,1046,1054,1071,1088,1123,1156,1184,1204,1231,1276,1359,1426,1436,1454,1488,1662,1782,1852,1867,1885,1906,1929,1957,1990,2006,2030,2051,2079,2105,2116,2587,2654 'variant':481,603,757 'vertic':131,1032,1504,1552,1584 'video':1232 'visual':16,1824 'vivid':220,339,455 'warm':23,253,270,340,343,373,394,457,473,482,499,530,1288,1548,1757,1897,2019,2068,2384,2588,2623,2668 'warm-shift':2018 'warmth':70,235,282,418,1021,1915,2596 'websit':21 'weight':118,163,326,686,704,1041,1101,1346,1416,1429,1825,2092,2234,2403,2415,2461,2472,2487,2531 'well':55 'well-organ':54 'white':277,404,415,423,435,611,1905,2008,2362,2432,2443,2594 'whitespac':1546 'wide':103,668 'wide-set':102 'width':1509,1532,2136,2207,2340 'within':1569,2331 'without':265,1837 'workflow':1397,2286 'workhors':139 'xl':712 'yellowish':417 'zapier':4,11,14,19,189,332,384,441,514,1337,1565,1742,1918,1952,2014,2036,2058,2357,2366,2598,2612,2647","prices":[{"id":"75492ab9-f667-49b0-a5a1-f0238c76e1fb","listingId":"e9eded95-cd7b-437a-a0c1-653e7c9a9687","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:49.623Z"}],"sources":[{"listingId":"e9eded95-cd7b-437a-a0c1-653e7c9a9687","source":"github","sourceId":"galyarderlabs/galyarder-framework/design-md-zapier","sourceUrl":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-zapier","isPrimary":false,"firstSeenAt":"2026-05-10T01:06:49.623Z","lastSeenAt":"2026-05-18T19:07:50.346Z"}],"details":{"listingId":"e9eded95-cd7b-437a-a0c1-653e7c9a9687","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"galyarderlabs","slug":"design-md-zapier","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":"19892a12dacef1e551a35ad50240ec1a2902cfbf","skill_md_path":"skills/design-md-zapier/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-zapier"},"layout":"multi","source":"github","category":"galyarder-framework","frontmatter":{"name":"design-md-zapier","description":"Design system reference for design md zapier."},"skills_sh_url":"https://skills.sh/galyarderlabs/galyarder-framework/design-md-zapier"},"updatedAt":"2026-05-18T19:07:50.346Z"}}