{"id":"096768ab-d2e2-44af-bbee-5af327add1d2","shortId":"Wbxvst","kind":"skill","title":"design-md-webflow","tagline":"Design system reference for design md webflow.","description":"# Design System: Webflow\n\n## 1. Visual Theme & Atmosphere\n\nWebflow's website is a visually rich, tool-forward platform that communicates \"design without code\" through clean white surfaces, the signature Webflow Blue (`#146ef5`), and a rich secondary color palette (purple, pink, green, orange, yellow, red). The custom WF Visual Sans Variable font creates a confident, precise typographic system with weight 600 for display and 500 for body.\n\n**Key Characteristics:**\n- White canvas with near-black (`#080808`) text\n- Webflow Blue (`#146ef5`) as primary brand + interactive color\n- WF Visual Sans Variable  custom variable font with weight 500600\n- Rich secondary palette: purple `#7a3dff`, pink `#ed52cb`, green `#00d722`, orange `#ff6b00`, yellow `#ffae13`, red `#ee1d36`\n- Conservative 4px8px border-radius  sharp, not rounded\n- Multi-layer shadow stacks (5-layer cascading shadows)\n- Uppercase labels: 10px15px, weight 500600, wide letter-spacing (0.6px1.5px)\n- translate(6px) hover animation on buttons\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Near Black** (`#080808`): Primary text\n- **Webflow Blue** (`#146ef5`): `--_color---primary--webflow-blue`, primary CTA and links\n- **Blue 400** (`#3b89ff`): `--_color---primary--blue-400`, lighter interactive blue\n- **Blue 300** (`#006acc`): `--_color---blue-300`, darker blue variant\n- **Button Hover Blue** (`#0055d4`): `--mkto-embed-color-button-hover`\n\n### Secondary Accents\n- **Purple** (`#7a3dff`): `--_color---secondary--purple`\n- **Pink** (`#ed52cb`): `--_color---secondary--pink`\n- **Green** (`#00d722`): `--_color---secondary--green`\n- **Orange** (`#ff6b00`): `--_color---secondary--orange`\n- **Yellow** (`#ffae13`): `--_color---secondary--yellow`\n- **Red** (`#ee1d36`): `--_color---secondary--red`\n\n### Neutral\n- **Gray 800** (`#222222`): Dark secondary text\n- **Gray 700** (`#363636`): Mid text\n- **Gray 300** (`#ababab`): Muted text, placeholder\n- **Mid Gray** (`#5a5a5a`): Link text\n- **Border Gray** (`#d8d8d8`): Borders, dividers\n- **Border Hover** (`#898989`): Hover border\n\n### Shadows\n- **5-layer cascade**: `rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px`\n\n## 3. Typography Rules\n\n### Font: `WF Visual Sans Variable`, fallback: `Arial`\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Display Hero | 80px | 600 | 1.04 | -0.8px | |\n| Section Heading | 56px | 600 | 1.04 | normal | |\n| Sub-heading | 32px | 500 | 1.30 | normal | |\n| Feature Title | 24px | 500600 | 1.30 | normal | |\n| Body | 20px | 400500 | 1.401.50 | normal | |\n| Body Standard | 16px | 400500 | 1.60 | -0.16px | |\n| Button | 16px | 500 | 1.60 | -0.16px | |\n| Uppercase Label | 15px | 500 | 1.30 | 1.5px | uppercase |\n| Caption | 14px | 400500 | 1.401.60 | normal | |\n| Badge Uppercase | 12.8px | 550 | 1.20 | normal | uppercase |\n| Micro Uppercase | 10px | 500600 | 1.30 | 1px | uppercase |\n| Code: Inconsolata (companion monospace font)\n\n## 4. Component Stylings\n\n### Buttons\n- Transparent: text `#080808`, translate(6px) on hover\n- White circle: 50% radius, white bg\n- Blue badge: `#146ef5` bg, 4px radius, weight 550\n\n### Cards: `1px solid #d8d8d8`, 4px8px radius\n### Badges: Blue-tinted bg at 10% opacity, 4px radius\n\n## 5. Layout\n- Spacing: fractional scale (1px, 2.4px, 3.2px, 4px, 5.6px, 6px, 7.2px, 8px, 9.6px, 12px, 16px, 24px)\n- Radius: 2px, 4px, 8px, 50%  conservative, sharp\n- Breakpoints: 479px, 768px, 992px\n\n## 6. Depth: 5-layer cascading shadow system\n\n## 7. Do's and Don'ts\n- Do: Use WF Visual Sans Variable at 500600. Blue (#146ef5) for CTAs. 4px radius. translate(6px) hover.\n- Don't: Round beyond 8px for functional elements. Use secondary colors on primary CTAs.\n\n## 8. Responsive: 479px, 768px, 992px\n\n## 9. Agent Prompt Guide\n- Text: Near Black (`#080808`)\n- CTA: Webflow Blue (`#146ef5`)\n- Background: White (`#ffffff`)\n- Border: `#d8d8d8`\n- Secondary: Purple `#7a3dff`, Pink `#ed52cb`, Green `#00d722`","tags":["design","webflow","galyarder","framework","galyarderlabs","agent-skills","agentic-framework","agents","ai-agents","automation","claude-code-plugin","codex-skills"],"capabilities":["skill","source-galyarderlabs","skill-design-md-webflow","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-webflow","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 (4,056 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.155Z","embedding":null,"createdAt":"2026-05-10T01:06:49.357Z","updatedAt":"2026-05-18T19:07:50.155Z","lastSeenAt":"2026-05-18T19:07:50.155Z","tsv":"'-0.16':369,375 '-0.8':338 '-300':192 '-400':183 '0':276,277,278,279,284,285,286,292,293,294,300,301,302,308,309,310 '0.01':287 '0.04':295 '0.08':303 '0.09':311 '0.6':147 '0055d4':199 '006acc':189 '00d722':114,219,556 '080808':86,162,416,540 '0px':280,288,296,304,312 '1':15 '1.04':337,344 '1.20':395 '1.30':351,357,381,402 '1.401.50':362 '1.401.60':388 '1.5':382 '1.60':368,374 '10':447 '10px':400 '10px15px':140 '12.8':392 '12px':470 '13px':305,306 '146ef5':43,90,167,429,506,544 '14px':386 '15px':379 '16px':366,372,471 '18px':298 '1px':403,436,456 '2':155 '2.4':457 '20px':360 '222222':241 '22px':290 '24px':282,355,472 '2px':474 '3':315 '3.2':459 '300':188,251 '30px':297 '32px':349 '363636':247 '3b89ff':179 '3px':313 '4':410 '400':178 '400500':361,367,387 '479px':481,530 '4px':431,449,461,475,509 '4px8px':122,439 '5':134,272,451,486 '5.6':462 '50':423,477 '500':75,350,373,380 '500600':105,142,356,401,504 '54px':289 '550':394,434 '56px':342 '5a5a5a':258 '6':484 '600':71,336,343 '6px':150,418,464,512 '7':491 '7.2':465 '700':246 '768px':482,531 '7a3dff':110,209,552 '7px':314 '8':528 '800':240 '80px':335 '84px':281 '898989':268 '8px':467,476,518 '9':533 '9.6':468 '992px':483,532 'ababab':252 'accent':207 'agent':534 'anim':152 'arial':324 'atmospher':18 'background':545 'badg':390,428,441 'beyond':517 'bg':426,430,445 'black':85,161,539 'blue':42,89,166,172,177,182,186,187,191,194,198,427,443,505,543 'blue-tint':442 'bodi':77,359,364 'border':124,261,264,266,270,548 'border-radius':123 'brand':93 'breakpoint':480 'button':154,196,204,371,413 'canva':81 'caption':385 'card':435 'cascad':136,274,488 'characterist':79 'circl':422 'clean':36 'code':34,405 'color':48,95,156,168,180,190,203,210,215,220,225,230,235,524 'communic':31 'companion':407 'compon':411 'confid':65 'conserv':121,478 'creat':63 'cta':174,541 'ctas':508,527 'custom':57,100 'd8d8d8':263,438,549 'dark':242 'darker':193 'depth':485 'design':2,5,9,12,32 'design-md-webflow':1 'display':73,333 'divid':265 'ed52cb':112,214,554 'ee1d36':120,234 'element':521 'emb':202 'fallback':323 'featur':353 'ff6b00':116,224 'ffae13':118,229 'ffffff':547 'font':62,102,318,409 'forward':28 'fraction':454 'function':520 'gray':239,245,250,257,262 'green':52,113,218,222,555 'guid':536 'head':341,348 'height':329 'hero':334 'hover':151,197,205,267,269,420,513 'inconsolata':406 'interact':94,185 'key':78 'label':139,378 'layer':131,135,273,487 'layout':452 'letter':145,330 'letter-spac':144 'lighter':184 'line':328 'link':176,259 'md':3,10 'micro':398 'mid':248,256 'mkto':201 'mkto-embed-color-button-hov':200 'monospac':408 'multi':130 'multi-lay':129 'mute':253 'near':84,160,538 'near-black':83 'neutral':238 'normal':345,352,358,363,389,396 'note':332 'opac':448 'orang':53,115,223,227 'palett':49,108,157 'pink':51,111,213,217,553 'placehold':255 'platform':29 'precis':66 'primari':92,159,163,169,173,181,526 'prompt':535 'purpl':50,109,208,212,551 'px':339,370,376,383,393,458,460,463,466,469 'px1.5px':148 'radius':125,424,432,440,450,473,510 'red':55,119,233,237 'refer':7 'respons':529 'rgba':275,283,291,299,307 'rich':25,46,106 'role':158,325 'round':128,516 'rule':317 'san':60,98,321,501 'scale':455 'secondari':47,107,206,211,216,221,226,231,236,243,523,550 'section':340 'shadow':132,137,271,489 'sharp':126,479 'signatur':40 'size':326 'skill' 'skill-design-md-webflow' 'solid':437 'source-galyarderlabs' 'space':146,331,453 'stack':133 'standard':365 'style':412 'sub':347 'sub-head':346 'surfac':38 'system':6,13,68,490 'text':87,164,244,249,254,260,415,537 'theme':17 'tint':444 'titl':354 'tool':27 'tool-forward':26 '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' 'translat':149,417,511 'transpar':414 'ts':496 'typograph':67 'typographi':316 'uppercas':138,377,384,391,397,399,404 'use':498,522 'variabl':61,99,101,322,502 'variant':195 'visual':16,24,59,97,320,500 'webflow':4,11,14,19,41,88,165,171,542 'webflow-blu':170 'websit':21 'weight':70,104,141,327,433 'wf':58,96,319,499 'white':37,80,421,425,546 'wide':143 'without':33 'yellow':54,117,228,232","prices":[{"id":"c3f988ab-1d18-4067-992b-b23f381ae7b2","listingId":"096768ab-d2e2-44af-bbee-5af327add1d2","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.357Z"}],"sources":[{"listingId":"096768ab-d2e2-44af-bbee-5af327add1d2","source":"github","sourceId":"galyarderlabs/galyarder-framework/design-md-webflow","sourceUrl":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-webflow","isPrimary":false,"firstSeenAt":"2026-05-10T01:06:49.357Z","lastSeenAt":"2026-05-18T19:07:50.155Z"}],"details":{"listingId":"096768ab-d2e2-44af-bbee-5af327add1d2","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"galyarderlabs","slug":"design-md-webflow","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":"2bd7ed91ca83ff97b3649575689e338e4b005b96","skill_md_path":"skills/design-md-webflow/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-webflow"},"layout":"multi","source":"github","category":"galyarder-framework","frontmatter":{"name":"design-md-webflow","description":"Design system reference for design md webflow."},"skills_sh_url":"https://skills.sh/galyarderlabs/galyarder-framework/design-md-webflow"},"updatedAt":"2026-05-18T19:07:50.155Z"}}