{"id":"10b3de83-3ae5-4597-a206-1cc0df064165","shortId":"NZVTwn","kind":"skill","title":"design-md-warp","tagline":"Design system reference for design md warp.","description":"# Design System: Warp\n\n## 1. Visual Theme & Atmosphere\n\nWarp's website feels like sitting at a campfire in a deep forest  warm, dark, and alive with quiet confidence. Unlike the cold, blue-tinted blacks favored by most developer tools, Warp wraps everything in a warm near-black that feels like charred wood or dark earth. The text isn't pure white either  it's Warm Parchment (`#faf9f6`), a barely-perceptible cream that softens every headline and makes the dark canvas feel inviting rather than austere.\n\nThe typography is the secret weapon: Matter, a geometric sans-serif with distinctive character, deployed at Regular weight across virtually all text. The font choice is unusual for a developer tool  Matter has a softness and humanity that signals \"this terminal is for everyone, not just greybeards.\" Combined with tight line-heights and controlled negative letter-spacing on headlines, the effect is refined and approachable simultaneously. Nature photography is woven between terminal screenshots, creating a visual language that says: this tool brings you closer to flow, to calm productivity.\n\nThe overall design philosophy is restraint through warmth. Minimal color (almost monochromatic warm grays), minimal ornamentation, and a focus on product showcases set against cinematic dark landscapes. It's a terminal company that markets like a lifestyle brand.\n\n**Key Characteristics:**\n- Warm dark background  not cold black, but earthy near-black with warm gray undertones\n- Warm Parchment (`#faf9f6`) text instead of pure white  subtle cream warmth\n- Matter font family (Regular weight)  geometric but approachable, not the typical developer-tool typeface\n- Nature photography interleaved with product screenshots  lifestyle meets developer tool\n- Almost monochromatic warm gray palette  no bold accent colors\n- Uppercase labels with wide letter-spacing (2.4px) for categorization  editorial signaling\n- Pill-shaped dark buttons (`#353534`, 50px radius)  restrained, muted CTAs\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Warm Parchment** (`#faf9f6`): Primary text color  a barely-cream off-white that softens every surface\n- **Earth Gray** (`#353534`): Button backgrounds, dark interactive surfaces  warm, not cold\n- **Deep Void** (near-black, page background): The warm dark canvas derived from the body background\n\n### Secondary & Accent\n- **Stone Gray** (`#868584`): Secondary text, muted descriptions  warm mid-gray\n- **Ash Gray** (`#afaeac`): Body text, button text  the workhorse reading color\n- **Purple-Tint Gray** (`#666469`): Link text with subtle purple undertone  underlined links in content\n\n### Surface & Background\n- **Frosted Veil** (`rgba(255, 255, 255, 0.04)`): Ultra-subtle white overlay for surface differentiation\n- **Mist Border** (`rgba(226, 226, 226, 0.35)` / `rgba(227, 227, 227, 0.337)`): Semi-transparent borders for card containment\n- **Translucent Parchment** (`rgba(250, 249, 246, 0.9)`): Slightly transparent primary surface, allowing depth\n\n### Neutrals & Text\n- **Warm Parchment** (`#faf9f6`): Headlines, high-emphasis text\n- **Ash Gray** (`#afaeac`): Body paragraphs, descriptions\n- **Stone Gray** (`#868584`): Secondary labels, subdued information\n- **Muted Purple** (`#666469`): Underlined links, tertiary content\n- **Dark Charcoal** (`#454545` / `#353534`): Borders, button backgrounds\n\n### Semantic & Accent\n- Warp operates as an almost monochromatic system  no bold accent colors\n- Interactive states are communicated through opacity changes and underline decorations rather than color shifts\n- Any accent color would break the warm, restrained palette\n\n### Gradient System\n- No explicit gradients on the marketing site\n- Depth is created through layered semi-transparent surfaces and photography rather than color gradients\n\n## 3. Typography Rules\n\n### Font Family\n- **Display & Body**: `Matter Regular`  geometric sans-serif with soft character. Fallbacks: `Matter Regular Placeholder`, system sans-serif\n- **Medium**: `Matter Medium`  weight 500 variant for emphasis. Fallbacks: `Matter Medium Placeholder`\n- **Square**: `Matter SQ Regular`  squared variant for select display contexts. Fallbacks: `Matter SQ Regular Placeholder`\n- **UI Supplement**: `Inter`  used for specific UI elements. Fallbacks: `Inter Placeholder`\n- **Monospace Display**: `Geist Mono`  for code/terminal display headings\n- **Monospace Body**: `Matter Mono Regular`  custom mono companion. Fallbacks: `Matter Mono Regular Placeholder`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | Matter Regular | 80px | 400 | 1.00 | -2.4px | Maximum compression, hero impact |\n| Section Display | Matter Regular | 56px | 400 | 1.20 | -0.56px | Feature section headings |\n| Section Heading | Matter Regular | 48px | 400 | 1.20 | -0.48px to -0.96px | Alternate heading weight |\n| Feature Heading | Matter Regular | 40px | 400 | 1.10 | -0.4px | Feature block titles |\n| Sub-heading Large | Matter Regular | 36px | 400 | 1.15 | -0.72px | Sub-section headers |\n| Card Display | Matter SQ Regular | 42px | 400 | 1.00 | 0px | Squared variant for special display |\n| Sub-heading | Matter Regular | 32px | 400 | 1.19 | 0px | Content sub-headings |\n| Body Heading | Matter Regular | 24px | 400 | 1.20 | -0.72px to 0px | Bold content intros |\n| Card Title | Matter Medium | 22px | 500 | 1.14 | 0px | Emphasized card headers |\n| Body Large | Matter Regular | 20px | 400 | 1.40 | -0.2px | Primary body text, relaxed |\n| Body | Matter Regular | 18px | 400 | 1.30 | -0.18px | Standard body paragraphs |\n| Nav/UI | Matter Regular | 16px | 400 | 1.20 | 0px | Navigation links, UI text |\n| Button Text | Matter Medium | 16px | 500 | 1.20 | 0px | Button labels |\n| Caption | Matter Regular | 14px | 400 | 1.00 | 1.4px | Uppercase labels (transform: uppercase) |\n| Small Label | Matter Regular | 12px | 400 | 1.35 | 2.4px | Uppercase micro-labels (transform: uppercase) |\n| Micro | Matter Regular | 11px | 400 | 1.20 | 0px | Smallest text elements |\n| Code UI | Geist Mono | 16px | 400 | 1.00 | 0px | Terminal/code display |\n| Code Body | Matter Mono Regular | 16px | 400 | 1.00 | -0.2px | Code content |\n| UI Supplement | Inter | 16px | 500 | 1.00 | -0.2px | Specific UI elements |\n\n### Principles\n- **Regular weight dominance**: Nearly all text uses weight 400 (Regular)  even headlines. Matter Medium (500) appears only for emphasis moments like card titles and buttons. This creates a remarkably even, calm typographic texture\n- **Uppercase as editorial signal**: Small labels and categories use uppercase transform with wide letter-spacing (1.4px2.4px), creating a magazine-editorial categorization system\n- **Warm legibility**: The combination of Matter's geometric softness + warm text colors (#faf9f6) + controlled negative tracking creates text that reads as effortlessly human on dark surfaces\n- **No bold display**: Zero use of bold (700+) weight anywhere  restraint is the philosophy\n\n## 4. Component Stylings\n\n### Buttons\n- **Dark Pill**: `#353534` background, Ash Gray (`#afaeac`) text, pill shape (50px radius), `10px` padding. The primary CTA  warm, muted, understated\n- **Frosted Tag**: `rgba(255, 255, 255, 0.16)` background, black text (`rgb(0, 0, 0)`), rectangular (6px radius), `1px 6px` padding. Small inline tag-like buttons\n- **Ghost**: No visible background, text-only with underline decoration on hover\n- **Hover**: Subtle opacity or brightness shift  no dramatic color changes\n\n### Cards & Containers\n- **Photography Cards**: Full-bleed nature imagery with overlay text, 8px12px border-radius\n- **Terminal Screenshot Cards**: Product UI embedded in dark containers with rounded corners (8px12px)\n- **Bordered Cards**: Semi-transparent border (`rgba(226, 226, 226, 0.35)`) for containment, 12px14px radius\n- **Hover**: Minimal  content cards don't dramatically change on hover, maintaining the calm aesthetic\n\n### Inputs & Forms\n- Minimal form presence on the marketing site\n- Dark background inputs with warm gray text\n- Focus: Border brightness increase, no colored rings (consistent with the monochromatic palette)\n\n### Navigation\n- **Top nav**: Dark background, warm parchment brand text, Matter Regular at 16px for links\n- **Link color**: Stone Gray (`#868584`) for muted nav, Warm Parchment for active/hover\n- **CTA button**: Dark pill (#353534) at nav end  restrained, not attention-grabbing\n- **Mobile**: Collapses to simplified navigation\n- **Sticky**: Nav stays fixed on scroll\n\n### Image Treatment\n- **Nature photography**: Landscapes, forests, golden-hour scenes  completely unique for a developer tool\n- **Terminal screenshots**: Product UI shown in realistic terminal window frames\n- **Mixed composition**: Nature images and terminal screenshots are interleaved, creating a lifestyle-meets-tool narrative\n- **Full-bleed**: Images often span full container width with 8px radius\n- **Video**: Video elements present with 10px border-radius\n\n### Testimonial Section\n- Social proof area (\"Don't take our word for it\") with quotes\n- Muted styling consistent with overall restraint\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 1px, 4px, 5px, 8px, 10px, 12px, 14px, 15px, 16px, 18px, 24px, 26px, 30px, 32px, 36px\n- **Section padding**: 80px120px vertical between major sections\n- **Card padding**: 16px32px internal spacing\n- **Component gaps**: 8px16px between related elements\n\n### Grid & Container\n- **Max width**: ~1500px container (breakpoint at 1500px), centered\n- **Column patterns**: Full-width hero, 2-column feature sections with photography, single-column testimonials\n- **Cinematic layout**: Wide containers that let photography breathe\n\n### Whitespace Philosophy\n- **Vast and warm**: Generous spacing between sections  the dark background creates a warm void that feels contemplative rather than empty\n- **Photography as whitespace**: Nature images serve as visual breathing room between dense product information\n- **Editorial pacing**: The layout reads like a magazine  each section is a deliberate page-turn moment\n\n### Border Radius Scale\n- **4px**: Small interactive elements  buttons, tags\n- **5px6px**: Standard components  links, small containers\n- **8px**: Images, video containers, standard cards\n- **10px**: Video elements, medium containers\n- **12px**: Feature cards, large images\n- **14px**: Large containers, prominent cards\n- **40px**: Large rounded sections\n- **50px**: Pill buttons  primary CTAs\n- **200px**: Progress bars  full pill shape\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow, dark background | Page canvas, most surfaces |\n| Level 1 (Veil) | `rgba(255, 255, 255, 0.04)` overlay | Subtle surface differentiation |\n| Level 2 (Border) | `rgba(226, 226, 226, 0.35) 1px` border | Card containment, section separation |\n| Level 3 (Ambient) | `rgba(0, 0, 0, 0.2) 0px 5px 15px` (inferred from design) | Image containers, floating elements |\n\n### Shadow Philosophy\nWarp's elevation system is remarkably flat  almost zero shadow usage on the marketing site. Depth is communicated through:\n- **Semi-transparent borders** instead of shadows  borders at 35% opacity create a ghostly containment\n- **Photography layering**  images create natural depth without artificial shadows\n- **Surface opacity shifts**  `rgba(255, 255, 255, 0.04)` overlays create barely-perceptible layer differences\n- The effect is calm and grounded  nothing floats, everything rests\n\n### Decorative Depth\n- **Photography as depth**: Nature images create atmospheric depth that shadows cannot\n- **No glass or blur effects**: The design avoids trendy glassmorphism entirely\n- **Warm ambient**: Any glow comes from the photography's natural lighting, not artificial CSS\n\n## 7. Do's and Don'ts\n\n### Do\n- Use warm off-white (`#faf9f6`) for text instead of pure white  the cream undertone is essential\n- Keep buttons restrained and muted  dark fill (#353534) with muted text (#afaeac), no bright CTAs\n- Apply Matter Regular (weight 400) for nearly everything  even headlines. Reserve Medium (500) for emphasis only\n- Use uppercase labels with wide letter-spacing (1.4px2.4px) for categorization\n- Interleave nature photography with product screenshots  this is core to the brand identity\n- Maintain the almost monochromatic warm gray palette  no bold accent colors\n- Use semi-transparent borders (`rgba(226, 226, 226, 0.35)`) for card containment instead of shadows\n- Keep negative letter-spacing on headlines (-0.4px to -2.4px) for Matter's compressed display treatment\n\n### Don't\n- Use pure white (#ffffff) for text  it's always warm parchment (#faf9f6)\n- Add bold accent colors (blue, red, green)  the system is deliberately monochromatic warm grays\n- Apply bold weight (700+) to any text  Warp never goes above Medium (500)\n- Use heavy drop shadows  depth comes from borders, photography, and opacity shifts\n- Create cold or blue-tinted dark backgrounds  the warmth is essential\n- Add decorative gradients or glow effects  the photography provides all visual interest\n- Use tight, compressed layouts  the editorial spacing is generous and contemplative\n- Mix in additional typefaces beyond the Matter family + Inter supplement\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <810px | Single column, stacked sections, hero text reduces to ~48px, hamburger nav |\n| Tablet | 810px1500px | 2-column features begin, photography scales, nav links partially visible |\n| Desktop | >1500px | Full cinematic layout, 80px hero display, side-by-side photography + text |\n\n### Touch Targets\n- Pill buttons: 50px radius with 10px padding  comfortable touch targets\n- Nav links: 16px text with surrounding padding for accessibility\n- Mobile CTAs: Full-width pills on mobile for easy thumb reach\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav  simplified mobile navigation\n- **Hero text**: 80px display  56px  48px across breakpoints\n- **Feature sections**: Side-by-side photography + text  stacked vertically\n- **Photography**: Scales within containers, maintains cinematic aspect ratios\n- **Section spacing**: Reduces proportionally  generous desktop  compact mobile\n\n### Image Behavior\n- Nature photography scales responsively, maintaining wide cinematic ratios\n- Terminal screenshots maintain aspect ratios within responsive containers\n- Video elements scale with 10px radius maintained\n- No art direction changes  same compositions across breakpoints\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Text: Warm Parchment (`#faf9f6`)\n- Secondary Text: Ash Gray (`#afaeac`)\n- Tertiary Text: Stone Gray (`#868584`)\n- Button Background: Earth Gray (`#353534`)\n- Border: Mist Border (`rgba(226, 226, 226, 0.35)`)\n- Background: Deep warm near-black (page background)\n\n### Example Component Prompts\n- \"Create a hero section on warm dark background with 80px Matter Regular heading in warm parchment (#faf9f6), line-height 1.0, letter-spacing -2.4px, and a dark pill button (#353534, 50px radius, #afaeac text)\"\n- \"Design a feature card with semi-transparent border (rgba(226,226,226,0.35)), 12px radius, warm dark background, Matter Regular heading at 24px, and ash gray (#afaeac) body text at 18px\"\n- \"Build a category label using Matter Regular at 12px, uppercase transform, letter-spacing 2.4px, stone gray (#868584) color  editorial magazine style\"\n- \"Create a testimonial section with warm parchment quotes in Matter Regular 24px, attributed in stone gray (#868584), on dark background with minimal ornamentation\"\n- \"Design a navigation bar with warm dark background, Matter Regular links at 16px in stone gray (#868584), hover to warm parchment (#faf9f6), and a dark pill CTA button (#353534) at the right\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Verify text color is warm parchment (#faf9f6) not pure white  the warmth is subtle but essential\n2. Ensure all buttons use the restrained dark palette (#353534)  no bright or colorful CTAs\n3. Check that Matter Regular (400) is the default weight  Medium (500) only for emphasis\n4. Confirm uppercase labels have wide letter-spacing (1.4px2.4px)  tight uppercase feels wrong here\n5. The overall tone should feel warm and calm, like a well-designed magazine  not aggressive or tech-flashy","tags":["design","warp","galyarder","framework","galyarderlabs","agent-skills","agentic-framework","agents","ai-agents","automation","claude-code-plugin","codex-skills"],"capabilities":["skill","source-galyarderlabs","skill-design-md-warp","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-warp","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 (16,425 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.065Z","embedding":null,"createdAt":"2026-05-10T01:06:49.180Z","updatedAt":"2026-05-18T19:07:50.065Z","lastSeenAt":"2026-05-18T19:07:50.065Z","tsv":"'-0.18':780 '-0.2':768,861,871 '-0.4':689,1730 '-0.48':674 '-0.56':662 '-0.72':703,743 '-0.96':677 '-2.4':649,1733,2065 '0':1010,1011,1012,1454,1494,1495,1496 '0.04':411,1471,1560 '0.16':1005 '0.2':1497 '0.337':431 '0.35':426,1086,1483,1716,2029,2090 '0.9':445 '0px':717,731,746,757,791,803,839,850,1498 '1':15,1465,2198 '1.0':2061 '1.00':648,716,811,849,860,870 '1.10':688 '1.14':756 '1.15':702 '1.19':730 '1.20':661,673,742,790,802,838 '1.30':779 '1.35':824 '1.4':812,926,1679,2254 '1.40':767 '10px':991,1243,1280,1417,1893,1984 '11px':836 '12px':822,1281,1422,2091,2117 '12px14px':1089 '14px':809,1282,1427 '1500px':1313,1317,1873 '15px':1283,1500 '16px':788,800,847,858,868,1145,1284,1900,2167 '16px32px':1300 '18px':777,1285,2108 '1px':1016,1276,1484 '2':315,1325,1477,1862,2215 '2.4':298,825,2123 '200px':1441 '20px':765 '226':423,424,425,1083,1084,1085,1480,1481,1482,1713,1714,1715,2026,2027,2028,2087,2088,2089 '227':428,429,430 '22px':754 '246':444 '249':443 '24px':740,1286,2100,2143 '250':442 '255':408,409,410,1002,1003,1004,1468,1469,1470,1557,1558,1559 '26px':1287 '3':549,1491,2230 '30px':1288 '32px':728,1289 '35':1538 '353534':309,339,485,981,1164,1647,2021,2072,2183,2224 '36px':700,1290 '4':975,2245 '400':647,660,672,687,701,715,729,741,766,778,789,810,823,837,848,859,885,1659,2235 '40px':686,1432 '42px':714 '454545':484 '48px':671,1857,1933 '4px':1277,1399 '5':1267,2261 '500':577,755,801,869,891,1667,1781,2241 '50px':310,989,1436,1890,2073 '56px':659,1932 '5px':1278,1499 '5px6px':1405 '6':1447 '666469':392,477 '6px':1014,1017 '7':1616 '700':968,1772 '8':1839 '80px':646,1877,1930,2050 '80px120px':1293 '810px':1848 '810px1500px':1861 '868584':368,470,1152,2016,2127,2148,2171 '8px':1236,1274,1279,1411 '8px12px':1059,1075 '8px16px':1305 '9':1995 'accent':289,365,490,500,517,1705,1757 'access':1906 'across':118,1934,1993 'active/hover':1159 'add':1755,1806 'addit':1831 'aesthet':1104 'afaeac':379,464,985,1651,2011,2075,2104 'agent':1996 'aggress':2277 'aliv':35 'allow':450 'almost':201,282,495,1517,1698 'altern':679 'alway':1751 'ambient':1492,1603 'anywher':970 'appear':892 'appli':1655,1769 'approach':166,264 'area':1251 'art':1988 'artifici':1551,1614 'ash':377,462,983,2009,2102 'aspect':1952,1975 'atmospher':18,1586 'attent':1171 'attention-grab':1170 'attribut':2144 'auster':98 'avoid':1598 'background':233,341,354,363,404,488,982,1006,1028,1115,1137,1354,1459,1801,2018,2030,2037,2048,2095,2151,2162 'bar':1443,2158 'bare':82,328,1564 'barely-cream':327 'barely-percept':81,1563 'base':1272 'begin':1865 'behavior':1841,1963 'beyond':1833 'black':45,59,236,241,352,1007,2035 'bleed':1053,1228 'block':692 'blue':43,1759,1798 'blue-tint':42,1797 'blur':1594 'bodi':362,380,465,555,620,736,761,771,774,783,854,2105 'bold':288,499,747,962,967,1704,1756,1770 'border':421,435,486,1061,1076,1081,1122,1245,1396,1478,1485,1532,1536,1711,1789,2022,2024,2085 'border-radius':1060,1244 'brand':228,1140,1694 'break':520 'breakpoint':1315,1842,1935,1994 'breath':1342,1373 'bright':1041,1123,1653,2226 'bring':183 'build':2109 'button':308,340,382,487,796,804,901,978,1024,1161,1403,1438,1641,1889,2017,2071,2182,2218 'calm':189,907,1103,1571,2269 'campfir':27 'cannot':1590 'canva':93,358,1461 'caption':806 'card':437,709,750,759,898,1047,1050,1065,1077,1094,1298,1416,1424,1431,1486,1718,2080 'categor':301,933,1682 'categori':917,2111 'center':1318 'chang':508,1046,1098,1846,1990 'char':63 'charact':113,564 'characterist':230 'charcoal':483 'check':2231 'choic':124 'cinemat':215,1335,1875,1951,1970 'closer':185 'code':843,853,863 'code/terminal':616 'cold':41,235,347,1795 'collaps':1174,1919 'color':200,290,316,325,387,501,514,518,547,946,1045,1126,1149,1706,1758,2000,2128,2201,2228 'column':1319,1326,1333,1850,1863 'combin':147,938 'come':1606,1787 'comfort':1895 'communic':505,1527 'compact':1960 'compani':222 'companion':626 'complet':1194 'compon':976,1303,1407,2039 'composit':1211,1992 'compress':652,1738,1820 'confid':38 'confirm':2246 'consist':1128,1263 'contain':438,1048,1071,1088,1233,1310,1314,1338,1410,1414,1421,1429,1487,1505,1543,1719,1949,1979 'contempl':1361,1828 'content':402,481,732,748,864,1093 'context':594 'control':154,948 'core':1691 'corner':1074 'cream':84,255,329,1636 'creat':175,536,903,928,951,1219,1355,1540,1547,1562,1585,1794,2041,2132 'css':1615 'cta':995,1160,2181 'ctas':314,1440,1654,1908,2229 'custom':624 'dark':33,66,92,216,232,307,342,357,482,959,979,1070,1114,1136,1162,1353,1458,1645,1800,2047,2069,2094,2150,2161,2179,2222 'decor':511,1034,1578,1807 'deep':30,348,2031 'default':2238 'deliber':1391,1765 'dens':1376 'deploy':114 'depth':451,534,1448,1525,1549,1579,1582,1587,1786 'deriv':359 'descript':372,467 'design':2,5,9,12,193,1503,1597,2077,2155,2196,2274 'design-md-warp':1 'desktop':1872,1959 'develop':49,129,269,280,1198 'developer-tool':268 'differ':1567 'differenti':419,1475 'direct':1989 'display':554,593,612,617,642,656,710,722,852,963,1739,1879,1931 'distinct':112 'domin':879 'dramat':1044,1097 'drop':1784 'earth':67,337,2019 'earthi':238 'easi':1916 'editori':302,912,932,1379,1823,2129 'effect':162,1569,1595,1811 'effortless':956 'either':74 'element':607,842,875,1240,1308,1402,1419,1507,1981 'elev':1449,1512 'embed':1068 'emphas':758 'emphasi':460,580,895,1669,2244 'empti':1364 'end':1167 'ensur':2216 'entir':1601 'essenti':1639,1805,2214 'even':887,906,1663 'everi':87,335 'everyon':143 'everyth':53,1576,1662 'exampl':2038 'exist':2191 'explicit':528 'faf9f6':79,248,322,456,947,1628,1754,2006,2057,2176,2205 'fallback':565,581,595,608,627 'famili':259,553,1836 'favor':46 'featur':664,682,691,1327,1423,1864,1936,2079 'feel':22,61,94,1360,2258,2266 'ffffff':1746 'fill':1646 'fix':1181 'flashi':2281 'flat':1455,1516 'float':1506,1575 'flow':187 'focus':209,1121 'font':123,258,552,634 'forest':31,1189 'form':1106,1108 'frame':1209 'frost':405,999 'full':1052,1227,1232,1322,1444,1874,1910,1922 'full-ble':1051,1226 'full-width':1321,1909 'gap':1304 'geist':613,845 'generat':2193 'generous':1348,1826,1958 'geometr':107,262,558,942 'ghost':1025,1542 'glass':1592 'glassmorph':1600 'glow':1605,1810 'goe':1778 'golden':1191 'golden-hour':1190 'grab':1172 'gradient':525,529,548,1808 'gray':204,244,285,338,367,376,378,391,463,469,984,1119,1151,1701,1768,2010,2015,2020,2103,2126,2147,2170 'green':1761 'greybeard':146 'grid':1309 'ground':1573 'guid':1998,2188 'hamburg':1858 'head':618,666,668,680,683,696,725,735,737,2053,2098 'header':708,760 'headlin':88,160,457,888,1664,1729 'heavi':1783 'height':152,638,2060 'hero':643,653,1324,1853,1878,1928,2043 'hierarchi':632 'high':459 'high-emphasi':458 'horizont':1923 'hour':1192 'hover':1036,1037,1091,1100,2172 'human':136,957 'ident':1695 'imag':1184,1213,1229,1369,1412,1426,1504,1546,1584,1962 'imageri':1055 'impact':654 'increas':1124 'infer':1501 'inform':474,1378 'inlin':1020 'input':1105,1116 'instead':250,1533,1631,1720 'inter':602,609,867,1837 'interact':343,502,1401 'interest':1817 'interleav':274,1218,1683 'intern':1301 'intro':749 'invit':95 'isn':70 'iter':2187 'keep':1640,1723 'key':229,1845 'label':292,472,805,815,819,830,915,1673,2112,2248 'landscap':217,1188 'languag':178 'larg':697,762,1425,1428,1433 'layer':538,1545,1566 'layout':1268,1336,1382,1821,1876 'legibl':936 'let':1340 'letter':157,296,639,924,1677,1726,2063,2121,2252 'letter-spac':156,295,923,1676,1725,2062,2120,2251 'level':1450,1453,1464,1476,1490 'lifestyl':227,278,1222 'lifestyle-meets-tool':1221 'light':1612 'like':23,62,225,897,1023,1384,2270 'line':151,637,2059 'line-height':150,2058 'link':393,400,479,793,1147,1148,1408,1869,1899,2165 'magazin':931,1386,2130,2275 'magazine-editori':930 'maintain':1101,1696,1950,1968,1974,1986 'major':1296 'make':90 'market':224,532,1112,1523 'matter':105,131,257,556,566,574,582,586,596,621,628,644,657,669,684,698,711,726,738,752,763,775,786,798,807,820,834,855,889,940,1142,1656,1736,1835,2051,2096,2114,2141,2163,2233 'max':1311 'maximum':651 'md':3,10 'medium':573,575,583,753,799,890,1420,1666,1780,2240 'meet':279,1223 'micro':829,833 'micro-label':828 'mid':375 'mid-gray':374 'minim':199,205,1092,1107,2153 'mist':420,2023 'mix':1210,1829 'mobil':1173,1847,1907,1914,1926,1961 'moment':896,1395 'mono':614,622,625,629,846,856 'monochromat':202,283,496,1131,1699,1766 'monospac':611,619 'mute':313,371,475,997,1154,1261,1644,1649 'name':1843 'narrat':1225 'natur':168,272,1054,1186,1212,1368,1548,1583,1611,1684,1964 'nav':1135,1155,1166,1179,1859,1868,1898,1924 'nav/ui':785 'navig':792,1133,1177,1921,1927,2157 'near':58,240,351,880,1661,2034 'near-black':57,239,350,2033 'negat':155,949,1724 'neutral':452 'never':1777 'note':641 'noth':1574 'off-whit':330,1625 'often':1230 'opac':507,1039,1539,1554,1792 'oper':492 'ornament':206,2154 'overal':192,1265,2263 'overlay':416,1057,1472,1561 'pace':1380 'pad':992,1018,1292,1299,1894,1904 'page':353,1393,1460,2036 'page-turn':1392 'palett':286,317,524,1132,1702,2223 'paragraph':466,784 'parchment':78,247,321,440,455,1139,1157,1753,2005,2056,2138,2175,2204 'partial':1870 'pattern':1320 'percept':83,1565 'philosophi':194,974,1344,1509 'photographi':169,273,544,1049,1187,1330,1341,1365,1544,1580,1609,1685,1790,1813,1866,1884,1942,1946,1965 'pill':305,980,987,1163,1437,1445,1888,1912,2070,2180 'pill-shap':304 'placehold':568,584,599,610,631 'presenc':1109 'present':1241 'primari':319,323,448,770,994,1439,2002 'principl':876,1269 'product':190,211,276,1066,1202,1377,1687 'progress':1442 'promin':1430 'prompt':1997,2040 'proof':1250 'proport':1957 'provid':1814 'pure':72,252,1633,1744,2207 'purpl':389,397,476 'purple-tint':388 'px':299,650,663,675,678,690,704,744,769,781,813,826,862,872,1731,1734,2066,2124 'px2.4px':927,1680,2255 'quick':1999 'quiet':37 'quot':1260,2139 'radius':311,990,1015,1062,1090,1237,1246,1397,1891,1985,2074,2092 'rather':96,512,545,1362 'ratio':1953,1971,1976 'reach':1918 'read':386,954,1383 'realist':1206 'rectangular':1013 'red':1760 'reduc':1855,1956 'refer':7,2001 'refin':164,2190 'regular':116,260,557,567,588,598,623,630,645,658,670,685,699,713,727,739,764,776,787,808,821,835,857,877,886,1143,1657,2052,2097,2115,2142,2164,2234 'relat':1307 'relax':773 'remark':905,1515 'reserv':1665 'respons':1840,1967,1978 'rest':1577 'restrain':312,523,1168,1642,2221 'restraint':196,971,1266 'rgb':1009 'rgba':407,422,427,441,1001,1082,1467,1479,1493,1556,1712,2025,2086 'right':2186 'ring':1127 'role':318,633 'room':1374 'round':1073,1434 'rule':551 'san':109,560,571 'sans-serif':108,559,570 'say':180 'scale':1275,1398,1867,1947,1966,1982 'scene':1193 'screen':2192 'screenshot':174,277,1064,1201,1216,1688,1973 'scroll':1183 'secondari':364,369,471,2007 'secret':103 'section':655,665,667,707,1248,1291,1297,1328,1351,1388,1435,1488,1852,1937,1954,2044,2135 'select':592 'semant':489 'semi':433,540,1079,1530,1709,2083 'semi-transpar':432,539,1078,1529,1708,2082 'separ':1489 'serif':110,561,572 'serv':1370 'set':213 'shadow':1457,1508,1519,1535,1552,1589,1722,1785 'shape':306,988,1446 'shift':515,1042,1555,1793 'showcas':212 'shown':1204 'side':1881,1883,1939,1941 'side-by-sid':1880,1938 'signal':138,303,913 'simplifi':1176,1925 'simultan':167 'singl':1332,1849 'single-column':1331 'sit':24 'site':533,1113,1524 'size':635 'skill' 'skill-design-md-warp' 'slight':446 'small':818,914,1019,1400,1409 'smallest':840 'social':1249 'soft':134,563,943 'soften':86,334 'source-galyarderlabs' 'space':158,297,640,925,1270,1302,1349,1678,1727,1824,1955,2064,2122,2253 'span':1231 'special':721 'specif':605,873 'sq':587,597,712 'squar':585,589,718 'stack':1851,1944 'standard':782,1406,1415 'state':503 'stay':1180 'sticki':1178 'stone':366,468,1150,2014,2125,2146,2169 'strategi':1920 'style':977,1262,2131 'sub':695,706,724,734 'sub-head':694,723,733 'sub-sect':705 'subdu':473 'subtl':254,396,414,1038,1473,2212 'supplement':601,866,1838 'surfac':336,344,403,418,449,542,960,1463,1474,1553 'surround':1903 'system':6,13,497,526,569,934,1271,1513,1763,2197 'tablet':1860 'tag':1000,1022,1404 'tag-lik':1021 'take':1254 'target':1887,1897 'tech':2280 'tech-flashi':2279 'termin':140,173,221,1063,1200,1207,1215,1972 'terminal/code':851 'tertiari':480,2012 'testimoni':1247,1334,2134 'text':69,121,249,324,370,381,383,394,453,461,772,795,797,841,882,945,952,986,1008,1030,1058,1120,1141,1630,1650,1748,1775,1854,1885,1901,1929,1943,2003,2008,2013,2076,2106,2200 'text-on':1029 'textur':909 'theme':17 'thumb':1917 'tight':149,1819,2256 'tint':44,390,1799 'titl':693,751,899 'tone':2264 'tool':50,130,182,270,281,1199,1224 'top':1134 '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':1886,1896 'track':950 'transform':816,831,920,2119 'transluc':439 'transpar':434,447,541,1080,1531,1710,2084 'treatment':1185,1451,1740 'trendi':1599 'ts':1621 'turn':1394 'typefac':271,1832 'typic':267 'typograph':908 'typographi':100,550 'ui':600,606,794,844,865,874,1067,1203 'ultra':413 'ultra-subtl':412 'underlin':399,478,510,1033 'underst':998 'underton':245,398,1637 'uniqu':1195 'unit':1273 'unlik':39 'unusu':126 'uppercas':291,814,817,827,832,910,919,1672,2118,2247,2257 'usag':1520 'use':603,883,918,965,1452,1623,1671,1707,1743,1782,1818,2113,2219 'variant':578,590,719 'vast':1345 'veil':406,1466 'verifi':2199 'vertic':1294,1945 'video':1238,1239,1413,1418,1980 'virtual':119 'visibl':1027,1871 'visual':16,177,1372,1816 'void':349,1358 'warm':32,56,77,203,231,243,246,284,320,345,356,373,454,522,935,944,996,1118,1138,1156,1347,1357,1602,1624,1700,1752,1767,2004,2032,2046,2055,2093,2137,2160,2174,2203,2267 'warmth':198,256,1803,2210 'warp':4,11,14,19,51,491,1510,1776 'weapon':104 'websit':21 'weight':117,261,576,636,681,878,884,969,1658,1771,2239 'well':2273 'well-design':2272 'white':73,253,332,415,1627,1634,1745,2208 'whitespac':1343,1367 'wide':294,922,1337,1675,1969,2250 'width':1234,1312,1323,1844,1911 'window':1208 'within':1948,1977 'without':1550 'wood':64 'word':1256 'workhors':385 'would':519 'woven':171 'wrap':52 'wrong':2259 'zero':964,1518","prices":[{"id":"a0fea10a-a559-4c03-8f5b-54de49809156","listingId":"10b3de83-3ae5-4597-a206-1cc0df064165","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.180Z"}],"sources":[{"listingId":"10b3de83-3ae5-4597-a206-1cc0df064165","source":"github","sourceId":"galyarderlabs/galyarder-framework/design-md-warp","sourceUrl":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-warp","isPrimary":false,"firstSeenAt":"2026-05-10T01:06:49.180Z","lastSeenAt":"2026-05-18T19:07:50.065Z"}],"details":{"listingId":"10b3de83-3ae5-4597-a206-1cc0df064165","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"galyarderlabs","slug":"design-md-warp","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":"b9bb046d143cc76a2ab9efa56b5aad4be593790a","skill_md_path":"skills/design-md-warp/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-warp"},"layout":"multi","source":"github","category":"galyarder-framework","frontmatter":{"name":"design-md-warp","description":"Design system reference for design md warp."},"skills_sh_url":"https://skills.sh/galyarderlabs/galyarder-framework/design-md-warp"},"updatedAt":"2026-05-18T19:07:50.065Z"}}