{"id":"95f14858-cc62-4ba7-a2f2-aae80d32cec6","shortId":"64sAky","kind":"skill","title":"design-md-miro","tagline":"Design system reference for design md miro.","description":"# Design System: Miro\n\n## 1. Visual Theme & Atmosphere\n\nMiro's website is a clean, collaborative-tool-forward platform that communicates \"visual thinking\" through generous whitespace, pastel accent colors, and a confident geometric font. The design uses a predominantly white canvas with near-black text (`#1c1c1e`) and a distinctive pastel color palette  coral, rose, teal, orange, yellow, moss  each representing different collaboration contexts.\n\nThe typography uses Roobert PRO Medium as the primary display font with OpenType character variants (`\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"`) and negative letter-spacing (-1.68px at 56px). Noto Sans handles body text with its own stylistic set (`\"liga\" 0, \"ss01\", \"ss04\", \"ss05\"`). The design is built with Framer, giving it smooth animations and modern component patterns.\n\n**Key Characteristics:**\n- White canvas with near-black (`#1c1c1e`) text\n- Roobert PRO Medium with multiple OpenType character variants\n- Pastel accent palette: coral, rose, teal, orange, yellow, moss (light + dark pairs)\n- Blue 450 (`#5b76fe`) as primary interactive color\n- Success green (`#00b473`) for positive states\n- Generous border-radius: 8px50px range\n- Framer-built with smooth motion patterns\n- Ring shadow border: `rgb(224,226,232) 0px 0px 0px 1px`\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Near Black** (`#1c1c1e`): Primary text\n- **White** (`#ffffff`): `--tw-color-white`, primary surface\n- **Blue 450** (`#5b76fe`): `--tw-color-blue-450`, primary interactive\n- **Actionable Pressed** (`#2a41b6`): `--tw-color-actionable-pressed`\n\n### Pastel Accents (Light/Dark pairs)\n- **Coral**: Light `#ffc6c6` / Dark `#600000`\n- **Rose**: Light `#ffd8f4` / Dark (implied)\n- **Teal**: Light `#c3faf5` / Dark `#187574`\n- **Orange**: Light `#ffe6cd`\n- **Yellow**: Dark `#746019`\n- **Moss**: Dark `#187574`\n- **Pink** (`#fde0f0`): Soft pink surface\n- **Red** (`#fbd4d4`): Light red surface\n- **Dark Red** (`#e3c5c5`): Muted red\n\n### Semantic\n- **Success** (`#00b473`): `--tw-color-success-accent`\n\n### Neutral\n- **Slate** (`#555a6a`): Secondary text\n- **Input Placeholder** (`#a5a8b5`): `--tw-color-input-placeholder`\n- **Border** (`#c7cad5`): Button borders\n- **Ring** (`rgb(224,226,232)`): Shadow-as-border\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: `Roobert PRO Medium`, fallback: Placeholder  `\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"`\n- **Display Variants**: `Roobert PRO SemiBold`, `Roobert PRO SemiBold Italic`, `Roobert PRO`\n- **Body**: `Noto Sans`  `\"liga\" 0, \"ss01\", \"ss04\", \"ss05\"`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing |\n|------|------|------|--------|-------------|----------------|\n| Display Hero | Roobert PRO Medium | 56px | 400 | 1.15 | -1.68px |\n| Section Heading | Roobert PRO Medium | 48px | 400 | 1.15 | -1.44px |\n| Card Title | Roobert PRO Medium | 24px | 400 | 1.15 | -0.72px |\n| Sub-heading | Noto Sans | 22px | 400 | 1.35 | -0.44px |\n| Feature | Roobert PRO Medium | 18px | 600 | 1.35 | normal |\n| Body | Noto Sans | 18px | 400 | 1.45 | normal |\n| Body Standard | Noto Sans | 16px | 400600 | 1.50 | -0.16px |\n| Button | Roobert PRO Medium | 17.5px | 700 | 1.29 | 0.175px |\n| Caption | Roobert PRO Medium | 14px | 400 | 1.71 | normal |\n| Small | Roobert PRO Medium | 12px | 400 | 1.15 | -0.36px |\n| Micro Uppercase | Roobert PRO | 10.5px | 400 | 0.90 | uppercase |\n\n## 4. Component Stylings\n\n### Buttons\n- Outlined: transparent bg, `1px solid #c7cad5`, 8px radius, 7px 12px padding\n- White circle: 50% radius, white bg with shadow\n- Blue primary (implied from interactive color)\n\n### Cards: 12px24px radius, pastel backgrounds\n### Inputs: white bg, `1px solid #e9eaef`, 8px radius, 16px padding\n\n## 5. Layout Principles\n- Spacing: 124px base scale\n- Radius: 8px (buttons), 10px12px (cards), 20px24px (panels), 40px50px (large containers)\n- Ring shadow: `rgb(224,226,232) 0px 0px 0px 1px`\n\n## 6. Depth & Elevation\nMinimal  ring shadow + pastel surface contrast\n\n## 7. Do's and Don'ts\n### Do\n- Use pastel light/dark pairs for feature sections\n- Apply Roobert PRO with OpenType character variants\n- Use Blue 450 (#5b76fe) for interactive elements\n### Don't\n- Don't use heavy shadows\n- Don't mix more than 2 pastel accents per section\n\n## 8. Responsive Behavior\nBreakpoints: 425px, 576px, 768px, 896px, 1024px, 1200px, 1280px, 1366px, 1700px, 1920px\n\n## 9. Agent Prompt Guide\n### Quick Color Reference\n- Text: Near Black (`#1c1c1e`)\n- Background: White (`#ffffff`)\n- Interactive: Blue 450 (`#5b76fe`)\n- Success: `#00b473`\n- Border: `#c7cad5`\n### Example Component Prompts\n- \"Create hero: white background. Roobert PRO Medium 56px, line-height 1.15, letter-spacing -1.68px. Blue CTA (#5b76fe). Outlined secondary (1px solid #c7cad5, 8px radius).\"","tags":["design","miro","galyarder","framework","galyarderlabs","agent-skills","agentic-framework","agents","ai-agents","automation","claude-code-plugin","codex-skills"],"capabilities":["skill","source-galyarderlabs","skill-design-md-miro","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-miro","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,746 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.809Z","embedding":null,"createdAt":"2026-05-10T01:06:46.168Z","updatedAt":"2026-05-18T19:07:47.809Z","lastSeenAt":"2026-05-18T19:07:47.809Z","tsv":"'-0.16':419 '-0.36':446 '-0.44':395 '-0.72':385 '-1.44':375 '-1.68':100,365,636 '0':115,344 '0.175':429 '0.90':455 '00b473':172,281,615 '0px':196,197,198,524,525,526 '1':15 '1.15':364,374,384,445,632 '1.29':428 '1.35':394,403 '1.45':410 '1.50':418 '1.71':437 '10.5':452 '1024px':590 '10px12px':511 '1200px':591 '124px':505 '1280px':592 '12px':443,470 '12px24px':487 '1366px':593 '14px':435 '16px':416,499 '17.5':425 '1700px':594 '187574':254,263 '18px':401,408 '1920px':595 '1c1c1e':57,141,207,606 '1px':199,464,494,527,643 '2':200,577 '20px24px':513 '224':193,306,521 '226':194,307,522 '22px':392 '232':195,308,523 '24px':382 '2a41b6':230 '3':313 '4':457 '400':363,373,383,393,409,436,444,454 '400600':417 '40px50px':515 '425px':586 '450':164,219,225,560,612 '48px':372 '5':501 '50':474 '555a6a':289 '56px':103,362,628 '576px':587 '5b76fe':165,220,561,613,640 '6':528 '600':402 '600000':244 '7':537 '700':427 '746019':260 '768px':588 '7px':469 '8':582 '896px':589 '8px':467,497,509,646 '8px50px':180 '9':596 'a5a8b5':294 'accent':38,152,237,286,579 'action':228,234 'agent':597 'anim':128 'appli':551 'atmospher':18 'background':490,607,624 'base':506 'behavior':584 'bg':463,477,493 'black':55,140,206,605 'blue':163,218,224,480,559,611,638 'blwf':90,324 'bodi':107,340,405,412 'border':178,191,300,303,312,616 'border-radius':177 'breakpoint':585 'built':122,184 'button':302,421,460,510 'c3faf5':252 'c7cad5':301,466,617,645 'canva':51,136 'caption':431 'card':377,486,512 'charact':88,149,556 'characterist':134 'circl':473 'clean':24 'collabor':26,73 'collaborative-tool-forward':25 'color':39,62,169,201,214,223,233,284,297,485,601 'communic':31 'compon':131,458,619 'confid':42 'contain':517 'context':74 'contrast':536 'coral':64,154,240 'creat':621 'cta':639 'cv03':91,325 'cv04':92,326 'cv09':93,327 'cv11':94,328 'dark':161,243,248,253,259,262,274 'depth':529 'design':2,5,9,12,46,120 'design-md-miro':1 'differ':72 'display':84,318,329,357 'distinct':60 'e3c5c5':276 'e9eaef':496 'element':564 'elev':530 'exampl':618 'fallback':322 'famili':317 'fbd4d4':270 'fde0f0':265 'featur':397,549 'ffc6c6':242 'ffd8f4':247 'ffe6cd':257 'ffffff':211,609 'font':44,85,316,350 'forward':28 'framer':124,183 'framer-built':182 'generous':35,176 'geometr':43 'give':125 'green':171 'guid':599 'handl':106 'head':368,389 'heavi':570 'height':354,631 'hero':358,622 'hierarchi':348 'impli':249,482 'input':292,298,491 'interact':168,227,484,563,610 'ital':337 'key':133 'larg':516 'layout':502 'letter':98,355,634 'letter-spac':97,633 'liga':114,343 'light':160,241,246,251,256,271 'light/dark':238,546 'line':353,630 'line-height':629 'md':3,10 'medium':80,145,321,361,371,381,400,424,434,442,627 'micro':448 'minim':531 'miro':4,11,14,19 'mix':574 'modern':130 'moss':69,159,261 'motion':187 'multipl':147 'mute':277 'near':54,139,205,604 'near-black':53,138 'negat':96 'neutral':287 'normal':404,411,438 'noto':104,341,390,406,414 'opentyp':87,148,555 'orang':67,157,255 'outlin':461,641 'pad':471,500 'pair':162,239,547 'palett':63,153,202 'panel':514 'pastel':37,61,151,236,489,534,545,578 'pattern':132,188 'per':580 'pink':264,267 'placehold':293,299,323 'platform':29 'posit':174 'predomin':49 'press':229,235 'primari':83,167,204,208,216,226,481 'principl':503 'pro':79,144,320,332,335,339,360,370,380,399,423,433,441,451,553,626 'prompt':598,620 'px':101,366,376,386,396,420,426,430,447,453,637 'quick':600 'radius':179,468,475,488,498,508,647 'rang':181 'red':269,272,275,278 'refer':7,602 'repres':71 'respons':583 'rgb':192,305,520 'ring':189,304,518,532 'role':203,349 'roobert':78,143,319,331,334,338,359,369,379,398,422,432,440,450,552,625 'rose':65,155,245 'rule':315 'san':105,342,391,407,415 'scale':507 'secondari':290,642 'section':367,550,581 'semant':279 'semibold':333,336 'set':113 'shadow':190,310,479,519,533,571 'shadow-as-bord':309 'size':351 'skill' 'skill-design-md-miro' 'slate':288 'small':439 'smooth':127,186 'soft':266 'solid':465,495,644 'source-galyarderlabs' 'space':99,356,504,635 'ss01':116,345 'ss04':117,346 'ss05':118,347 'standard':413 'state':175 'style':459 'stylist':112 'sub':388 'sub-head':387 'success':170,280,285,614 'surfac':217,268,273,535 'system':6,13 'teal':66,156,250 'text':56,108,142,209,291,603 'theme':17 'think':33 'titl':378 'tool':27 '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' 'transpar':462 'ts':542 'tw':213,222,232,283,296 'tw-color-actionable-press':231 'tw-color-blu':221 'tw-color-input-placehold':295 'tw-color-success-acc':282 'tw-color-whit':212 'typographi':76,314 'uppercas':449,456 'use':47,77,544,558,569 'variant':89,150,330,557 'visual':16,32 'websit':21 'weight':352 'white':50,135,210,215,472,476,492,608,623 'whitespac':36 'yellow':68,158,258","prices":[{"id":"37a79dda-9481-4710-8836-1f22f21a216a","listingId":"95f14858-cc62-4ba7-a2f2-aae80d32cec6","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:46.168Z"}],"sources":[{"listingId":"95f14858-cc62-4ba7-a2f2-aae80d32cec6","source":"github","sourceId":"galyarderlabs/galyarder-framework/design-md-miro","sourceUrl":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-miro","isPrimary":false,"firstSeenAt":"2026-05-10T01:06:46.168Z","lastSeenAt":"2026-05-18T19:07:47.809Z"}],"details":{"listingId":"95f14858-cc62-4ba7-a2f2-aae80d32cec6","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"galyarderlabs","slug":"design-md-miro","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":"95a253fd7525933a4c114c5f55ef7c698c9bfd7c","skill_md_path":"skills/design-md-miro/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-miro"},"layout":"multi","source":"github","category":"galyarder-framework","frontmatter":{"name":"design-md-miro","description":"Design system reference for design md miro."},"skills_sh_url":"https://skills.sh/galyarderlabs/galyarder-framework/design-md-miro"},"updatedAt":"2026-05-18T19:07:47.809Z"}}