{"id":"0228fb56-2004-468d-80b9-8aad7c9b8ff7","shortId":"GZz4R8","kind":"skill","title":"design-md-framer","tagline":"Design system reference for design md framer.","description":"# Design System: Framer\n\n## 1. Visual Theme & Atmosphere\n\nFramer's website is a cinematic, tool-obsessed dark canvas that radiates the confidence of a design tool built by designers who worship craft. The entire experience is drenched in pure black  not a warm charcoal or a cozy dark gray, but an absolute void (`#000000`) that makes every element, every screenshot, every typographic flourish feel like it's floating in deep space. This is a website that treats its own product UI as the hero art, embedding full-fidelity screenshots and interactive demos directly into the narrative flow.\n\nThe typography is the signature move: GT Walsheim with aggressively tight letter-spacing (as extreme as -5.5px on 110px display text) creates headlines that feel compressed, kinetic, almost spring-loaded  like words under pressure that might expand at any moment. The transition to Inter for body text is seamless, with extensive OpenType feature usage (`cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07`) that gives even small text a refined, custom feel. Framer Blue (`#0099ff`) is deployed sparingly but decisively  as link color, border accents, and subtle ring shadows  creating a cold, electric throughline against the warm-less black.\n\nThe overall effect is a nightclub for web designers: dark, precise, seductive, and unapologetically product-forward. Every section exists to showcase what the tool can do, with the website itself serving as proof of concept.\n\n**Key Characteristics:**\n- Pure black (`#000000`) void canvas  absolute dark, not warm or gray-tinted\n- GT Walsheim display font with extreme negative letter-spacing (-5.5px at 110px)\n- Framer Blue (`#0099ff`) as the sole accent color  cold, electric, precise\n- Pill-shaped buttons (40px100px radius)  no sharp corners on interactive elements\n- Product screenshots as hero art  the tool IS the marketing\n- Frosted glass button variants using `rgba(255, 255, 255, 0.1)` on dark surfaces\n- Extensive OpenType feature usage across Inter for refined micro-typography\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Pure Black** (`#000000`): Primary background, the void canvas that defines Framer's dark-first identity\n- **Pure White** (`#ffffff`): Primary text color on dark surfaces, button text on accent backgrounds\n- **Framer Blue** (`#0099ff`): Primary accent color  links, borders, ring shadows, interactive highlights\n\n### Secondary & Accent\n- **Muted Silver** (`#a6a6a6`): Secondary text, subdued labels, dimmed descriptions on dark surfaces\n- **Near Black** (`#090909`): Elevated dark surface, shadow ring color for subtle depth separation\n\n### Surface & Background\n- **Void Black** (`#000000`): Page background, primary canvas\n- **Frosted White** (`rgba(255, 255, 255, 0.1)`): Translucent button backgrounds, glass-effect surfaces on dark\n- **Subtle White** (`rgba(255, 255, 255, 0.5)`): Slightly more opaque frosted elements for hover states\n\n### Neutrals & Text\n- **Pure White** (`#ffffff`): Heading text, high-emphasis body text\n- **Muted Silver** (`#a6a6a6`): Body text, descriptions, secondary information\n- **Ghost White** (`rgba(255, 255, 255, 0.6)`): Tertiary text, placeholders on dark surfaces\n\n### Semantic & Accent\n- **Framer Blue** (`#0099ff`): Links, interactive borders, focus rings\n- **Blue Glow** (`rgba(0, 153, 255, 0.15)`): Focus ring shadow, subtle blue halo around interactive elements\n- **Default Link Blue** (`#0000ee`): Standard browser link color (used sparingly in content areas)\n\n### Gradient System\n- No prominent gradient usage  Framer relies on pure flat black surfaces with occasional blue-tinted glows for depth\n- Subtle radial glow effects behind product screenshots using Framer Blue at very low opacity\n\n## 3. Typography Rules\n\n### Font Family\n- **Display**: `GT Walsheim Framer Medium` / `GT Walsheim Medium`  custom geometric sans-serif, weight 500. Fallbacks: `GT Walsheim Framer Medium Placeholder`, system sans-serif\n- **Body/UI**: `Inter Variable` / `Inter`  variable sans-serif with extensive OpenType features. Fallbacks: `Inter Placeholder`, `-apple-system`, `system-ui`\n- **Accent**: `Mona Sans`  GitHub's open-source font, used for select elements at ultra-light weight (100)\n- **Monospace**: `Azeret Mono`  companion mono for code and technical labels\n- **Rounded**: `Open Runde`  small rounded companion font for micro-labels\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | GT Walsheim Framer Medium | 110px | 500 | 0.85 | -5.5px | Extreme negative tracking, compressed impact |\n| Section Display | GT Walsheim Medium | 85px | 500 | 0.95 | -4.25px | OpenType: ss02, tnum |\n| Section Heading | GT Walsheim Medium | 62px | 500 | 1.00 | -3.1px | OpenType: ss02 |\n| Feature Heading | GT Walsheim Medium | 32px | 500 | 1.13 | -1px | Tightest of the smaller headings |\n| Accent Display | Mona Sans | 61.5px | 100 | 1.00 | -3.1px | Ultra-light weight, ethereal |\n| Card Title | Inter Variable | 24px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |\n| Feature Title | Inter | 22px | 700 | 1.20 | -0.8px | OpenType: cv05 |\n| Sub-heading | Inter | 20px | 600 | 1.20 | -0.8px | OpenType: cv01, cv09 |\n| Body Large | Inter Variable | 18px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |\n| Body | Inter Variable | 15px | 400 | 1.30 | -0.01px | OpenType: cv11 |\n| Nav/UI | Inter Variable | 15px | 400 | 1.00 | -0.15px | OpenType: cv06, cv11, dlig, ss03 |\n| Body Readable | Inter Framer Regular | 14px | 400 | 1.60 | normal | Long-form body text |\n| Caption | Inter Variable | 14px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |\n| Label | Inter | 13px | 500 | 1.60 | normal | OpenType: cv06, cv11, ss03 |\n| Small Caption | Inter Variable | 12px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |\n| Micro Code | Azeret Mono | 10.4px | 400 | 1.60 | normal | OpenType: cv06, cv11, ss03 |\n| Badge | Open Runde | 9px | 600 | 1.11 | normal | OpenType: cv01, cv09 |\n| Micro Uppercase | Inter Variable | 7px | 400 | 1.00 | 0.21px | uppercase transform |\n\n### Principles\n- **Compression as personality**: GT Walsheim's extreme negative letter-spacing (-5.5px at 110px) is the defining typographic gesture  headlines feel spring-loaded, urgent, almost breathless\n- **OpenType maximalism**: Inter is deployed with 6+ OpenType features simultaneously (`cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07`), creating a subtly custom feel even at body sizes\n- **Weight restraint on display**: All GT Walsheim usage is weight 500 (medium)  never bold, never regular. This creates a confident-but-not-aggressive display tone\n- **Ultra-tight line heights**: Display text at 0.85 line-height means letters nearly overlap vertically  intentional density that rewards reading at arm's length\n\n## 4. Component Stylings\n\n### Buttons\n- **Frosted Pill**: `rgba(255, 255, 255, 0.1)` background, black text (`#000000`), pill shape (40px radius). The glass-effect button that lives on dark surfaces  translucent, ambient, subtle\n- **Solid White Pill**: `rgb(255, 255, 255)` background, black text (`#000000`), full pill shape (100px radius), padding `10px 15px`. The primary CTA  clean, high-contrast on dark, unmissable\n- **Ghost**: No visible background, white text, relies on text styling alone. Hover reveals subtle frosted background\n- **Transition**: Scale-based animations (matrix transform with 0.85 scale factor), opacity transitions for reveal effects\n\n### Cards & Containers\n- **Dark Surface Card**: Black or near-black (`#090909`) background, `rgba(0, 153, 255, 0.15) 0px 0px 0px 1px` blue ring shadow border, rounded corners (10px15px radius)\n- **Elevated Card**: Multi-layer shadow  `rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px` (subtle top highlight) + `rgba(0, 0, 0, 0.25) 0px 10px 30px` (deep ambient shadow)\n- **Product Screenshots**: Full-width or padded within dark containers, 8px12px border-radius for software UI previews\n- **Hover**: Subtle glow increase on Framer Blue ring shadow, or brightness shift on frosted surfaces\n\n### Inputs & Forms\n- Minimal form presence on the marketing site\n- Input fields follow dark theme: dark background, subtle border, white text\n- Focus state: Framer Blue (`#0099ff`) ring border, `1px solid #0099ff`\n- Placeholder text in `rgba(255, 255, 255, 0.4)`\n\n### Navigation\n- **Dark floating nav bar**: Black background with frosted glass effect, white text links\n- **Nav links**: Inter at 15px, weight 400, white text with subtle hover opacity change\n- **CTA button**: Pill-shaped, white or frosted, positioned at right end of nav\n- **Mobile**: Collapses to hamburger menu, maintains dark theme\n- **Sticky behavior**: Nav remains fixed at top on scroll\n\n### Image Treatment\n- **Product screenshots as hero art**: Full-width embedded UI screenshots with rounded corners (8px12px)\n- **Dark-on-dark composition**: Screenshots placed on black backgrounds with subtle shadow for depth separation\n- **16:9 and custom aspect ratios**: Product demos fill their containers\n- **No decorative imagery**: All images are functional  showing the tool, the output, or the workflow\n\n### Trust & Social Proof\n- Customer logos and testimonials in muted gray on dark surfaces\n- Minimal ornamentation  the product screenshots serve as the trust signal\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 20px, 30px, 35px\n- **Section padding**: Large vertical spacing (80px120px between sections)\n- **Card padding**: 15px30px internal padding\n- **Component gaps**: 8px20px between related elements\n\n### Grid & Container\n- **Max width**: ~1200px container, centered\n- **Column patterns**: Full-width hero, 2-column feature sections, single-column product showcases\n- **Asymmetric layouts**: Feature sections often pair text (40%) with screenshot (60%)\n\n### Whitespace Philosophy\n- **Breathe through darkness**: Generous vertical spacing between sections  the black background means whitespace manifests as void, creating dramatic pauses between content blocks\n- **Dense within, spacious between**: Individual components are tightly composed (tight line-heights, compressed text) but float in generous surrounding space\n- **Product-first density**: Screenshot areas are allowed to be dense and information-rich, contrasting with the sparse marketing text\n\n### Border Radius Scale\n- **1px**: Micro-elements, nearly squared precision edges\n- **5px7px**: Small UI elements, image thumbnails  subtly softened\n- **8px**: Standard component radius  code blocks, buttons, interactive elements\n- **10px12px**: Cards, product screenshots  comfortably rounded\n- **15px20px**: Large containers, feature cards  generously rounded\n- **30px40px**: Navigation pills, pagination  noticeably rounded\n- **100px**: Full pill shape  primary CTAs, tag elements\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Flat) | No shadow, pure black surface | Page background, empty areas |\n| Level 1 (Ring) | `rgba(0, 153, 255, 0.15) 0px 0px 0px 1px` | Card borders, interactive element outlines  Framer Blue glow ring |\n| Level 2 (Contained) | `rgb(9, 9, 9) 0px 0px 0px 2px` | Near-black ring for subtle containment on dark surfaces |\n| Level 3 (Floating) | `rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px` | Elevated cards, floating elements  subtle white top-edge highlight + deep ambient shadow |\n\n### Shadow Philosophy\nFramer's elevation system is inverted from traditional light-theme designs. Instead of darker shadows on light backgrounds, Framer uses:\n- **Blue-tinted ring shadows** at very low opacity (0.15) for containment  a signature move that subtly brands every bordered element\n- **White edge highlights** (0.5px) on the top edge of elevated elements  simulating light hitting the top surface\n- **Deep ambient shadows** for true floating elements  `rgba(0, 0, 0, 0.25)` at large spread (30px)\n\n### Decorative Depth\n- **Blue glow auras**: Subtle Framer Blue (`#0099ff`) radial gradients behind key interactive areas\n- **No background blur/glassmorphism**: Despite the frosted button effect, there's no heavy glass blur usage  the translucency is achieved through simple rgba opacity\n\n## 7. Do's and Don'ts\n\n### Do\n- Use pure black (`#000000`) as the primary background  not dark gray, not charcoal\n- Apply extreme negative letter-spacing on GT Walsheim display text (-3px to -5.5px)\n- Keep all buttons pill-shaped (40px+ radius)  never use squared or slightly-rounded buttons\n- Use Framer Blue (`#0099ff`) exclusively for interactive accents  links, borders, focus states\n- Deploy `rgba(255, 255, 255, 0.1)` for frosted glass surfaces on dark backgrounds\n- Maintain GT Walsheim at weight 500 only  the medium weight IS the brand\n- Use extensive OpenType features on Inter text (cv01, cv05, cv09, cv11, ss03, ss07)\n- Let product screenshots be the visual centerpiece  the tool markets itself\n- Apply blue ring shadows (`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px`) for card containment\n\n### Don't\n- Use warm dark backgrounds (no `#1a1a1a`, `#2d2d2d`, or brownish blacks)\n- Apply bold (700+) weight to GT Walsheim display text  medium 500 only\n- Introduce additional accent colors beyond Framer Blue  this is a one-accent-color system\n- Use large border-radius on non-interactive elements (cards use 10px15px, only buttons get 40px+)\n- Add decorative imagery, illustrations, or icons  the product IS the illustration\n- Use positive letter-spacing on headlines  everything is compressed, negative tracking\n- Create heavy drop shadows  depth is communicated through subtle rings and minimal ambients\n- Place light/white backgrounds behind content sections  the void is sacred\n- Use serif or display-weight fonts  the system is geometric sans-serif only\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <809px | Single column, stacked feature sections, reduced hero text (62px40px), hamburger nav |\n| Tablet | 809px1199px | 2-column features begin, nav links partially visible, screenshots scale down |\n| Desktop | >1199px | Full layout, expanded nav with all links + CTA, 110px display hero, side-by-side features |\n\n### Touch Targets\n- Pill buttons: minimum 40px height with 10px vertical padding  exceeds 44px WCAG minimum\n- Nav links: 15px text with generous padding for touch accessibility\n- Mobile CTA buttons: Full-width pills on mobile for easy thumb reach\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav  hamburger menu at mobile breakpoint\n- **Hero text**: 110px display  85px  62px  ~40px across breakpoints, maintaining extreme negative tracking proportionally\n- **Feature sections**: Side-by-side (text + screenshot)  stacked vertically on mobile\n- **Product screenshots**: Scale responsively within containers, maintaining aspect ratios\n- **Section spacing**: Reduces proportionally  120px desktop  60px mobile\n\n### Image Behavior\n- Product screenshots are responsive, scaling within their container boundaries\n- No art direction changes  same crops across breakpoints\n- Dark background ensures screenshots maintain visual impact at any size\n- Screenshots lazy-load as user scrolls into view\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Background: Void Black (`#000000`)\n- Primary Text: Pure White (`#ffffff`)\n- Accent/CTA: Framer Blue (`#0099ff`)\n- Secondary Text: Muted Silver (`#a6a6a6`)\n- Frosted Surface: Translucent White (`rgba(255, 255, 255, 0.1)`)\n- Elevation Ring: Blue Glow (`rgba(0, 153, 255, 0.15)`)\n\n### Example Component Prompts\n- \"Create a hero section on pure black background with 110px GT Walsheim heading in white, letter-spacing -5.5px, line-height 0.85, and a pill-shaped white CTA button (100px radius) with black text\"\n- \"Design a feature card on black background with a 1px Framer Blue ring shadow border (rgba(0,153,255,0.15)), 12px border-radius, white heading in Inter at 22px weight 700, and muted silver (a6a6a6) body text\"\n- \"Build a navigation bar with black background, white Inter text links at 15px, and a frosted pill button (rgba(255,255,255,0.1) background, 40px radius) as the CTA\"\n- \"Create a product showcase section with a full-width screenshot embedded on black, 10px border-radius, subtle multi-layer shadow (white 0.5px top highlight + rgba(0,0,0,0.25) 30px ambient)\"\n- \"Design a pricing card using pure black surface, Framer Blue (#0099ff) accent for the selected plan border, white text hierarchy (24px Inter bold heading, 14px regular body), and a solid white pill CTA button\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Focus on ONE component at a time  the dark canvas makes each element precious\n2. Always verify letter-spacing on GT Walsheim headings  the extreme negative tracking is non-negotiable\n3. Check that Framer Blue appears ONLY on interactive elements  never as decorative background or text color for non-links\n4. Ensure all buttons are pill-shaped  any squared corner immediately breaks the Framer aesthetic\n5. Test frosted glass surfaces by checking they have exactly `rgba(255, 255, 255, 0.1)`  too opaque looks like a bug, too transparent disappears","tags":["design","framer","galyarder","framework","galyarderlabs","agent-skills","agentic-framework","agents","ai-agents","automation","claude-code-plugin","codex-skills"],"capabilities":["skill","source-galyarderlabs","skill-design-md-framer","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-framer","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,327 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:47.012Z","embedding":null,"createdAt":"2026-05-10T01:06:45.092Z","updatedAt":"2026-05-18T19:07:47.012Z","lastSeenAt":"2026-05-18T19:07:47.012Z","tsv":"'-0.01':732,770,785 '-0.15':795 '-0.8':747,758 '-1':703 '-3':1797 '-3.1':691,718 '-4.25':678 '-5.5':127,271,663,901,1800,2260 '0':492,1101,1138,1139,1140,1562,1577,1630,1631,1632,1720,1721,1722,1885,2235,2295,2375,2376,2377 '0.1':317,421,1005,1127,1622,1835,2229,2339,2510 '0.15':495,1104,1580,1682,1888,2238,2298 '0.21':885 '0.25':1141,1633,1723,2378 '0.4':1218 '0.5':437,1129,1132,1624,1627,1697,2370 '0.6':472 '0.85':662,977,1080,2265 '0.95':677 '000000':65,250,339,410,1009,1037,1776,2206 '0000ee':508 '0099ff':184,277,369,483,1205,1210,1736,1821,2215,2391 '090909':395,1098 '0px':1105,1106,1107,1128,1131,1142,1581,1582,1583,1601,1602,1603,1623,1626,1634,1889,1890,1891 '1':15,1574,2426 '1.00':690,717,794,884 '1.11':873 '1.13':702 '1.20':746,757 '1.30':731,769,784 '1.40':821,846 '1.60':809,834,862 '10.4':859 '100':622,716 '100px':1041,1547,2274 '10px':1044,1143,1376,1635,2073,2360 '10px12px':1528 '10px15px':1115,1947 '110px':130,274,660,904,2057,2116,2251 '1199px':2048 '1200px':1405 '120px':2153 '12px':844,1377,2299 '13px':832 '14px':807,819,2405 '153':493,1102,1578,1886,2236,2296 '15px':782,792,1045,1237,1378,2082,2329 '15px20px':1534 '15px30px':1392 '16':1311 '18px':767 '1a1a1a':1903 '1px':1108,1208,1369,1503,1584,1892,2288 '2':332,1414,1595,2036,2441 '20px':755,1379 '22px':744,2308 '24px':729,2401 '255':314,315,316,418,419,420,434,435,436,469,470,471,494,1002,1003,1004,1031,1032,1033,1103,1124,1125,1126,1215,1216,1217,1579,1619,1620,1621,1832,1833,1834,1887,2226,2227,2228,2237,2297,2336,2337,2338,2507,2508,2509 '2d2d2d':1904 '2px':1370,1604 '3':553,1616,2459 '30px':1144,1380,1636,1727,2379 '30px40px':1541 '32px':700 '35px':1381 '3px':1371 '4':995,2480 '40':1430 '400':730,768,783,793,808,820,845,861,883,1239 '40px':1012,1808,1951,2070,2120,2341 '40px100px':290 '44px':2077 '4px':1372 '5':1360,2496 '500':572,661,676,689,701,833,953,1848,1918 '5px':1373 '5px7px':1511 '6':924,1555 '60':1433 '600':756,872 '60px':2155 '61.5':714 '62px':688,2119 '62px40px':2031 '6px':1374 '7':1766 '700':745,1910,2310 '7px':882 '8':2013 '809px':2022 '809px1199px':2035 '80px120px':1387 '85px':675,2118 '8px':1367,1375,1519 '8px12px':1158,1294 '8px20px':1397 '9':1312,1598,1599,1600,2195 '9px':871 'a6a6a6':383,460,2220,2314 'absolut':63,253 'accent':194,281,365,371,380,480,604,710,1825,1922,1932,2392 'accent/cta':2212 'access':2089 'achiev':1761 'across':325,2121,2174 'add':1952 'addit':1921 'aesthet':2495 'agent':2196 'aggress':119,966 'allow':1486 'almost':139,916 'alon':1066 'alway':2442 'ambient':1025,1146,1648,1713,1987,2380 'anim':1076 'appear':2464 'appl':599 'apple-system':598 'appli':1786,1880,1908 'area':517,1484,1572,1742 'arm':992 'around':502 'art':96,302,1284,2169 'aspect':1315,2147 'asymmetr':1423 'atmospher':18 'aura':1732 'azeret':624,857 'background':341,366,407,412,424,1006,1034,1059,1071,1099,1196,1225,1304,1446,1570,1670,1744,1780,1842,1901,1990,2177,2203,2249,2285,2323,2340,2472 'badg':868 'bar':1223,2320 'base':1075,1365 'begin':2039 'behavior':1270,2015,2158 'behind':543,1739,1991 'beyond':1924 'black':51,209,249,338,394,409,529,1007,1035,1093,1097,1224,1303,1445,1567,1607,1775,1907,2205,2248,2277,2284,2322,2359,2387 'block':1457,1524 'blue':183,276,368,482,489,500,507,534,548,1109,1172,1204,1591,1674,1730,1735,1820,1881,1926,2214,2232,2290,2390,2463 'blue-tint':533,1673 'blur':1756 'blur/glassmorphism':1745 'bodi':158,456,461,763,779,802,814,941,2315,2407 'body/ui':583 'bold':956,1909,2403 'border':193,374,486,1112,1160,1198,1207,1500,1586,1692,1827,1938,2293,2301,2362,2397 'border-radius':1159,1937,2300,2361 'boundari':2167 'brand':1690,1855 'break':2492 'breakpoint':2016,2113,2122,2175 'breath':1436 'breathless':917 'bright':1176 'brownish':1906 'browser':510 'bug':2516 'build':2317 'built':38 'button':289,310,362,423,998,1018,1248,1525,1749,1804,1817,1949,2068,2092,2273,2334,2414,2483 'canva':29,252,344,414,2436 'caption':816,841 'card':725,1088,1092,1118,1390,1529,1538,1585,1638,1894,1945,2282,2384 'center':1407 'centerpiec':1875 'chang':1246,2020,2171 'characterist':247 'charcoal':55,1785 'check':2460,2502 'cinemat':24 'clean':1049 'code':629,856,1523 'cold':201,283 'collaps':1262,2103 'color':192,282,333,358,372,401,512,1923,1933,2200,2475 'column':1408,1415,1420,2024,2037 'comfort':1532 'communic':1981 'companion':626,638 'compon':996,1395,1463,1521,2240,2430 'compos':1466 'composit':1299 'compress':137,668,890,1471,1972 'concept':245 'confid':33,963 'confident-but-not-aggress':962 'contain':1089,1157,1321,1402,1406,1536,1596,1611,1684,1895,2145,2166 'content':516,1456,1992 'contrast':1052,1494 'corner':294,1114,1293,2490 'cozi':58 'craft':43 'creat':133,199,934,960,1452,1975,2242,2346 'crop':2173 'cta':1048,1247,2056,2091,2272,2345,2413 'ctas':1552 'custom':180,566,937,1314,1340 'cv01':167,735,761,773,824,849,876,928,1863 'cv05':168,736,750,774,929,1864 'cv06':798,825,837,850,865 'cv09':169,737,762,775,826,851,877,930,1865 'cv11':170,738,776,788,799,827,838,852,866,931,1866 'dark':28,59,219,254,319,350,360,391,397,430,477,1022,1054,1090,1156,1193,1195,1220,1267,1296,1298,1348,1438,1613,1782,1841,1900,2176,2435 'dark-first':349 'dark-on-dark':1295 'darker':1666 'decis':189 'decor':1323,1728,1953,2471 'deep':81,1145,1647,1712 'default':505 'defin':346,907 'demo':104,1318 'dens':1458,1489 'densiti':987,1482 'deploy':186,922,1830 'depth':404,538,1309,1556,1729,1979 'descript':389,463 'design':2,5,9,12,36,40,218,1663,2279,2381,2424 'design-md-fram':1 'desktop':2047,2154 'despit':1746 'dim':388 'direct':105,2170 'disappear':2519 'display':131,263,558,654,671,711,946,967,974,1795,1915,2002,2058,2117 'display-weight':2001 'dlig':800 'dramat':1453 'drench':48 'drop':1977 'easi':2100 'edg':1510,1645,1695,1702 'effect':212,427,542,1017,1087,1229,1750 'electr':202,284 'element':69,297,442,504,616,1400,1506,1514,1527,1554,1588,1640,1693,1705,1718,1944,2439,2468 'elev':396,1117,1557,1637,1654,1704,2230 'embed':97,1288,2357 'emphasi':455 'empti':1571 'end':1258 'ensur':2178,2481 'entir':45 'ether':724 'even':175,939 'everi':68,70,72,227,1691 'everyth':1970 'exact':2505 'exampl':2239 'exceed':2076 'exclus':1822 'exist':229,2419 'expand':149,2051 'experi':46 'extens':163,321,592,1857 'extrem':125,266,665,896,1787,2124,2452 'factor':1082 'fallback':573,595 'famili':557 'featur':165,323,594,695,741,926,1416,1425,1537,1859,2026,2038,2064,2128,2281 'feel':75,136,181,911,938 'ffffff':355,450,2211 'fidel':100 'field':1191 'fill':1319 'first':351,1481 'fix':1273 'flat':528,1563 'float':79,1221,1474,1617,1639,1717 'flourish':74 'flow':109 'focus':487,496,1201,1828,2427 'follow':1192 'font':264,556,612,639,646,2004 'form':813,1182,1184 'forward':226 'framer':4,11,14,19,182,275,347,367,481,524,547,561,576,658,805,1171,1203,1590,1652,1671,1734,1819,1925,2213,2289,2389,2462,2494 'frost':308,415,441,999,1070,1179,1227,1254,1748,1837,2221,2332,2498 'full':99,1038,1151,1286,1411,1548,2049,2094,2106,2354 'full-fidel':98 'full-width':1150,1285,1410,2093,2353 'function':1328 'gap':1396 'generat':2421 'generous':1439,1476,1539,2085 'geometr':567,2008 'gestur':909 'get':1950 'ghost':466,1056 'github':607 'give':174 'glass':309,426,1016,1228,1755,1838,2499 'glass-effect':425,1015 'glow':490,536,541,1168,1592,1731,2233 'gradient':518,522,1738 'gray':60,259,1346,1783 'gray-tint':258 'grid':1401 'gt':116,261,559,563,574,656,672,685,697,893,948,1793,1844,1913,2252,2448 'guid':2198,2416 'halo':501 'hamburg':1264,2032,2109 'head':451,684,696,709,753,2254,2304,2404,2450 'headlin':134,910,1969 'heavi':1754,1976 'height':650,973,980,1470,2071,2264 'hero':95,301,655,1283,1413,2029,2059,2114,2244 'hierarchi':644,2400 'high':454,1051 'high-contrast':1050 'high-emphasi':453 'highlight':378,1136,1646,1696,2373 'hit':1708 'horizont':2107 'hover':444,1067,1166,1244 'icon':1957 'ident':352 'illustr':1955,1962 'imag':1278,1326,1515,2157 'imageri':1324,1954 'immedi':2491 'impact':669,2182 'increas':1169 'individu':1462 'inform':465,1492 'information-rich':1491 'input':1181,1190 'instead':1664 'intent':986 'inter':156,326,584,586,596,727,743,754,765,780,790,804,817,831,842,880,920,1235,1861,2306,2325,2402 'interact':103,296,377,485,503,1526,1587,1741,1824,1943,2467 'intern':1393 'introduc':1920 'invert':1657 'iter':2415 'keep':1802 'key':246,1740,2019 'kinet':138 'label':387,632,643,830 'larg':764,1384,1535,1725,1936 'layer':1121,2367 'layout':1361,1424,2050 'lazi':2188 'lazy-load':2187 'length':994 'less':208 'let':1869 'letter':122,269,651,899,982,1790,1966,2258,2445 'letter-spac':121,268,898,1789,1965,2257,2444 'level':1558,1561,1573,1594,1615 'light':620,722,1661,1669,1707 'light-them':1660 'light/white':1989 'like':76,143,2514 'line':649,972,979,1469,2263 'line-height':978,1468,2262 'link':191,373,484,506,511,1232,1234,1826,2041,2055,2081,2327,2479 'live':1020 'load':142,914,2189 'logo':1341 'long':812 'long-form':811 'look':2513 'low':551,1680 'maintain':1266,1843,2123,2146,2180 'make':67,2437 'manifest':1449 'market':307,1188,1498,1878 'matrix':1077 'max':1403 'maxim':919 'md':3,10 'mean':981,1447 'medium':562,565,577,659,674,687,699,954,1851,1917 'menu':1265,2110 'micro':330,642,855,878,1505 'micro-el':1504 'micro-label':641 'micro-typographi':329 'might':148 'minim':1183,1350,1986 'minimum':2069,2079 'mobil':1261,2021,2090,2098,2112,2139,2156 'moment':152 'mona':605,712 'mono':625,627,858 'monospac':623 'move':115,1687 'multi':1120,2366 'multi-lay':1119,2365 'mute':381,458,1345,2218,2312 'name':2017 'narrat':108 'nav':1222,1233,1260,1271,2033,2040,2052,2080,2108 'nav/ui':789 'navig':1219,1542,2105,2319 'near':393,983,1096,1507,1606 'near-black':1095,1605 'negat':267,666,897,1788,1973,2125,2453 'negoti':2458 'neutral':446 'never':955,957,1810,2469 'nightclub':215 'non':1942,2457,2478 'non-interact':1941 'non-link':2477 'non-negoti':2456 'normal':810,822,835,847,863,874 'note':653 'notic':1545 'obsess':27 'occasion':532 'often':1427 'one':1931,2429 'one-accent-color':1930 'opac':552,1083,1245,1681,1765 'opaqu':440,2512 'open':610,634,869 'open-sourc':609 'opentyp':164,322,593,680,693,734,749,760,772,787,797,823,836,848,864,875,918,925,1858 'ornament':1351 'outlin':1589 'output':1333 'overal':211 'overlap':984 'pad':1043,1154,1383,1391,1394,2075,2086 'page':411,1569 'pagin':1544 'pair':1428 'palett':334 'partial':2042 'pattern':1409 'paus':1454 'person':892 'philosophi':1435,1651 'pill':287,1000,1010,1029,1039,1250,1543,1549,1806,2067,2096,2269,2333,2412,2486 'pill-shap':286,1249,1805,2268,2485 'place':1301,1988 'placehold':475,578,597,1211 'plan':2396 'posit':1255,1964 'precious':2440 'precis':220,285,1509 'presenc':1185 'pressur':146 'preview':1165 'price':2383 'primari':336,340,356,370,413,1047,1551,1779,2202,2207 'principl':889,1362 'product':91,225,298,544,1148,1280,1317,1353,1421,1480,1530,1870,1959,2140,2159,2348 'product-first':1479 'product-forward':224 'promin':521 'prompt':2197,2241 'proof':243,1339 'proport':2127,2152 'pure':50,248,337,353,448,527,1566,1774,2209,2247,2386 'px':128,272,664,679,692,704,715,719,733,748,759,771,786,796,860,886,902,1130,1133,1625,1628,1698,1798,1801,2261,2371 'quick':2199 'radial':540,1737 'radiat':31 'radius':291,1013,1042,1116,1161,1501,1522,1809,1939,2275,2302,2342,2363 'ratio':1316,2148 'reach':2102 'read':990 'readabl':803 'reduc':2028,2151 'refer':7,2201 'refin':179,328,2418 'regular':806,958,2406 'relat':1399 'reli':525,1062 'remain':1272 'respons':2014,2143,2162 'restraint':944 'reveal':1068,1086 'reward':989 'rgb':1030,1597 'rgba':313,417,433,468,491,1001,1100,1123,1137,1214,1576,1618,1629,1719,1764,1831,1884,2225,2234,2294,2335,2374,2506 'rich':1493 'right':1257 'ring':197,375,400,488,497,1110,1173,1206,1575,1593,1608,1676,1882,1984,2231,2291 'role':335,645 'round':633,637,1113,1292,1533,1540,1546,1816 'rule':555 'rund':635,870 'sacr':1997 'san':569,581,589,606,713,2010 'sans-serif':568,580,588,2009 'scale':1074,1081,1368,1502,2045,2142,2163 'scale-bas':1073 'screen':2420 'screenshot':71,101,299,545,1149,1281,1290,1300,1354,1432,1483,1531,1871,2044,2135,2141,2160,2179,2186,2356 'scroll':1277,2192 'seamless':161 'secondari':379,384,464,2216 'section':228,670,683,1382,1389,1417,1426,1443,1993,2027,2129,2149,2245,2350 'seduct':221 'select':615,2395 'semant':479 'separ':405,1310 'serif':570,582,590,1999,2011 'serv':241,1355 'shadow':198,376,399,498,1111,1122,1147,1174,1307,1565,1649,1650,1667,1677,1714,1883,1978,2292,2368 'shape':288,1011,1040,1251,1550,1807,2270,2487 'sharp':293 'shift':1177 'show':1329 'showcas':231,1422,2349 'side':2061,2063,2131,2133 'side-by-sid':2060,2130 'signal':1359 'signatur':114,1686 'silver':382,459,2219,2313 'simpl':1763 'simul':1706 'simultan':927 'singl':1419,2023 'single-column':1418 'site':1189 'size':647,942,2185 'skill' 'skill-design-md-framer' 'slight':438,1815 'slightly-round':1814 'small':176,636,840,1512 'smaller':708 'social':1338 'soften':1518 'softwar':1163 'sole':280 'solid':1027,1209,2410 'sourc':611 'source-galyarderlabs' 'space':82,123,270,652,900,1363,1386,1441,1478,1791,1967,2150,2259,2446 'spacious':1460 'spare':187,514 'spars':1497 'spread':1726 'spring':141,913 'spring-load':140,912 'squar':1508,1812,2489 'ss02':681,694 'ss03':171,739,777,801,828,839,853,867,932,1867 'ss07':172,740,778,829,854,933,1868 'stack':2025,2136 'standard':509,1520 'state':445,1202,1829 'sticki':1269 'strategi':2104 'style':997,1065 'sub':752 'sub-head':751 'subdu':386 'subt':936,1517,1689 'subtl':196,403,431,499,539,1026,1069,1134,1167,1197,1243,1306,1610,1641,1733,1983,2364 'surfac':320,361,392,398,406,428,478,530,1023,1091,1180,1349,1568,1614,1711,1839,2222,2388,2500 'surround':1477 'system':6,13,519,579,600,602,1364,1655,1934,2006,2425 'system-ui':601 'tablet':2034 'tag':1553 'target':2066 'technic':631 'tertiari':473 'test':2497 'testimoni':1343 'text':132,159,177,357,363,385,447,452,457,462,474,815,975,1008,1036,1061,1064,1200,1212,1231,1241,1429,1472,1499,1796,1862,1916,2030,2083,2115,2134,2208,2217,2278,2316,2326,2399,2474 'theme':17,1194,1268,1662 'throughlin':203 'thumb':2101 'thumbnail':1516 'tight':120,971,1465,1467 'tightest':705 'time':2433 'tint':260,535,1675 'titl':726,742 'tnum':682 'tone':968 'tool':26,37,234,304,1331,1877 'tool-obsess':25 'top':1135,1275,1644,1701,1710,2372 'top-edg':1643 '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':2065,2088 'track':667,1974,2126,2454 'tradit':1659 'transform':888,1078 'transit':154,1072,1084 'transluc':422,1024,1759,2223 'transpar':2518 'treat':88 'treatment':1279,1559 'true':1716 'trust':1337,1358 'ts':1771 'typograph':73,908 'typographi':111,331,554 'ui':92,603,1164,1289,1513 'ultra':619,721,970 'ultra-light':618,720 'ultra-tight':969 'unapologet':223 'unit':1366 'unmiss':1055 'uppercas':879,887 'urgent':915 'usag':166,324,523,950,1757 'use':312,513,546,613,1560,1672,1773,1811,1818,1856,1898,1935,1946,1963,1998,2385 'user':2191 'variabl':585,587,728,766,781,791,818,843,881 'variant':311 'verifi':2443 'vertic':985,1385,1440,2074,2137 'view':2194 'visibl':1058,2043 'visual':16,1874,2181 'void':64,251,343,408,1451,1995,2204 'walsheim':117,262,560,564,575,657,673,686,698,894,949,1794,1845,1914,2253,2449 'warm':54,207,256,1899 'warm-less':206 'wcag':2078 'web':217 'websit':21,86,239 'weight':571,621,648,723,943,952,1238,1847,1852,1911,2003,2309 'white':354,416,432,449,467,1028,1060,1199,1230,1240,1252,1642,1694,2210,2224,2256,2271,2303,2324,2369,2398,2411 'whitespac':1434,1448 'width':1152,1287,1404,1412,2018,2095,2355 'within':1155,1459,2144,2164 'word':144 'workflow':1336 'worship':42","prices":[{"id":"61c14125-1d00-45f3-8696-25eb28a404ba","listingId":"0228fb56-2004-468d-80b9-8aad7c9b8ff7","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:45.092Z"}],"sources":[{"listingId":"0228fb56-2004-468d-80b9-8aad7c9b8ff7","source":"github","sourceId":"galyarderlabs/galyarder-framework/design-md-framer","sourceUrl":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-framer","isPrimary":false,"firstSeenAt":"2026-05-10T01:06:45.092Z","lastSeenAt":"2026-05-18T19:07:47.012Z"}],"details":{"listingId":"0228fb56-2004-468d-80b9-8aad7c9b8ff7","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"galyarderlabs","slug":"design-md-framer","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":"914010e3464e5b5a5f86c7ea00cb4a3ed964d36c","skill_md_path":"skills/design-md-framer/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-framer"},"layout":"multi","source":"github","category":"galyarder-framework","frontmatter":{"name":"design-md-framer","description":"Design system reference for design md framer."},"skills_sh_url":"https://skills.sh/galyarderlabs/galyarder-framework/design-md-framer"},"updatedAt":"2026-05-18T19:07:47.012Z"}}