{"id":"ff91c13e-1190-4c1e-b1e0-963003ce24e0","shortId":"A6yr3M","kind":"skill","title":"design-md-kraken","tagline":"Design system reference for design md kraken.","description":"# Design System: Kraken\n\n## 1. Visual Theme & Atmosphere\n\nKraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color. The design operates on white backgrounds with Kraken Purple (`#7132f5`, `#5741d8`, `#5b1ecf`) creating a distinctive, professional crypto identity. The proprietary Kraken-Brand font handles display headings with bold (700) weight and negative tracking, while Kraken-Product (with IBM Plex Sans fallback) serves as the UI workhorse.\n\n**Key Characteristics:**\n- Kraken Purple (`#7132f5`) as primary brand with darker variants (`#5741d8`, `#5b1ecf`)\n- Kraken-Brand (display) + Kraken-Product (UI) dual font system\n- Near-black (`#101114`) text with cool blue-gray neutral scale\n- 12px radius buttons (rounded but not pill)\n- Subtle shadows (`rgba(0,0,0,0.03) 0px 4px 24px`)  whisper-level\n- Green accent (`#149e61`) for positive/success states\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Kraken Purple** (`#7132f5`): Primary CTA, brand accent, links\n- **Purple Dark** (`#5741d8`): Button borders, outlined variants\n- **Purple Deep** (`#5b1ecf`): Deepest purple\n- **Purple Subtle** (`rgba(133,91,251,0.16)`): Purple at 16%  subtle button backgrounds\n- **Near Black** (`#101114`): Primary text\n\n### Neutral\n- **Cool Gray** (`#686b82`): Primary neutral, borders at 24% opacity\n- **Silver Blue** (`#9497a9`): Secondary text, muted elements\n- **White** (`#ffffff`): Primary surface\n- **Border Gray** (`#dedee5`): Divider borders\n\n### Semantic\n- **Green** (`#149e61`): Success/positive at 16% opacity for badges\n- **Green Dark** (`#026b3f`): Badge text\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: `Kraken-Brand`, fallbacks: `IBM Plex Sans, Helvetica, Arial`\n- **UI / Body**: `Kraken-Product`, fallbacks: `Helvetica Neue, Helvetica, Arial`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing |\n|------|------|------|--------|-------------|----------------|\n| Display Hero | Kraken-Brand | 48px | 700 | 1.17 | -1px |\n| Section Heading | Kraken-Brand | 36px | 700 | 1.22 | -0.5px |\n| Sub-heading | Kraken-Brand | 28px | 700 | 1.29 | -0.5px |\n| Feature Title | Kraken-Product | 22px | 600 | 1.20 | normal |\n| Body | Kraken-Product | 16px | 400 | 1.38 | normal |\n| Body Medium | Kraken-Product | 16px | 500 | 1.38 | normal |\n| Button | Kraken-Product | 16px | 500600 | 1.38 | normal |\n| Caption | Kraken-Product | 14px | 400700 | 1.431.71 | normal |\n| Small | Kraken-Product | 12px | 400500 | 1.33 | normal |\n| Micro | Kraken-Product | 7px | 500 | 1.00 | uppercase |\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Purple**\n- Background: `#7132f5`\n- Text: `#ffffff`\n- Padding: 13px 16px\n- Radius: 12px\n\n**Purple Outlined**\n- Background: `#ffffff`\n- Text: `#5741d8`\n- Border: `1px solid #5741d8`\n- Radius: 12px\n\n**Purple Subtle**\n- Background: `rgba(133,91,251,0.16)`\n- Text: `#7132f5`\n- Padding: 8px\n- Radius: 12px\n\n**White Button**\n- Background: `#ffffff`\n- Text: `#101114`\n- Radius: 10px\n- Shadow: `rgba(0,0,0,0.03) 0px 4px 24px`\n\n**Secondary Gray**\n- Background: `rgba(148,151,169,0.08)`\n- Text: `#101114`\n- Radius: 12px\n\n### Badges\n- Success: `rgba(20,158,97,0.16)` bg, `#026b3f` text, 6px radius\n- Neutral: `rgba(104,107,130,0.12)` bg, `#484b5e` text, 8px radius\n\n## 5. Layout Principles\n\n### Spacing: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 24px, 25px\n### Border Radius: 3px, 6px, 8px, 10px, 12px, 16px, 9999px, 50%\n\n## 6. Depth & Elevation\n- Subtle: `rgba(0,0,0,0.03) 0px 4px 24px`\n- Micro: `rgba(16,24,40,0.04) 0px 1px 4px`\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Kraken Purple (#7132f5) for CTAs and links\n- Apply 12px radius on all buttons\n- Use Kraken-Brand for headings, Kraken-Product for body\n\n### Don't\n- Don't use pill buttons  12px is the max radius for buttons\n- Don't use other purples outside the defined scale\n\n## 8. Responsive Behavior\nBreakpoints: 375px, 425px, 640px, 768px, 1024px, 1280px, 1536px\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand: Kraken Purple (`#7132f5`)\n- Dark variant: `#5741d8`\n- Text: Near Black (`#101114`)\n- Secondary text: `#9497a9`\n- Background: White (`#ffffff`)\n\n### Example Component Prompts\n- \"Create hero: white background. Kraken-Brand 48px weight 700, letter-spacing -1px. Purple CTA (#7132f5, 12px radius, 13px 16px padding).\"","tags":["design","kraken","galyarder","framework","galyarderlabs","agent-skills","agentic-framework","agents","ai-agents","automation","claude-code-plugin","codex-skills"],"capabilities":["skill","source-galyarderlabs","skill-design-md-kraken","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-kraken","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,317 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.428Z","embedding":null,"createdAt":"2026-05-10T01:06:45.522Z","updatedAt":"2026-05-18T19:07:47.428Z","lastSeenAt":"2026-05-18T19:07:47.428Z","tsv":"'-0.5':281,292 '-1':271,601 '0':130,131,132,403,404,405,479,480,481 '0.03':133,406,482 '0.04':491 '0.08':417 '0.12':439 '0.16':177,386,428 '026b3f':226,430 '0px':134,407,483,492 '1':15 '1.00':350 '1.17':270 '1.20':301 '1.22':280 '1.29':291 '1.33':342 '1.38':309,318,326 '1.431.71':334 '101114':111,186,398,419,578 '1024px':558 '104':436 '107':437 '10px':400,456,469 '1280px':559 '12px':120,340,366,378,392,421,457,470,511,534,606 '130':438 '133':174,383 '13px':363,458,608 '148':414 '149e61':142,217 '14px':332 '151':415 '1536px':560 '158':426 '15px':459 '16':180,220,488 '169':416 '16px':307,316,324,364,460,471,609 '1px':374,449,493 '2':146 '20':425 '20px':461 '22px':299 '24':197,489 '24px':136,409,462,485 '251':176,385 '25px':463 '28px':289 '2px':450 '3':229 '36px':278 '375px':554 '3px':451,466 '4':352 '40':490 '400':308 '400500':341 '400700':333 '425px':555 '484b5e':441 '48px':268,595 '4px':135,408,452,484,494 '5':445 '50':473 '500':317,349 '500600':325 '5741d8':46,95,161,372,376,574 '5b1ecf':47,96,168 '5px':453 '6':474 '600':300 '640px':556 '686b82':192 '6px':432,454,467 '7':495 '700':65,269,279,290,597 '7132f5':45,88,153,359,388,505,571,605 '768px':557 '7px':348 '8':550 '8px':390,443,455,468 '9':561 '91':175,384 '9497a9':201,581 '97':427 '9999px':472 'accent':141,157 'agent':562 'appli':510 'arial':243,253 'atmospher':18 'background':41,183,358,369,381,395,412,582,591 'badg':223,227,422 'behavior':552 'bg':429,440 'black':110,185,577 'blue':116,200 'blue-gray':115 'bodi':245,303,311,526 'bold':64 'border':163,195,210,214,373,464 'brand':34,58,91,99,156,237,267,277,288,519,568,594 'breakpoint':553 'button':122,162,182,320,355,394,515,533,540 'caption':328 'characterist':85 'clean':24 'color':35,147,566 'command':33 'compon':353,586 'cool':114,190 'creat':48,588 'crypto':26,52 'cta':155,604 'ctas':507 'dark':160,225,572 'darker':93 'dedee5':212 'deep':167 'deepest':169 'defin':548 'depth':475 'design':2,5,9,12,37 'design-md-kraken':1 'display':61,100,234,263 'distinct':50 'divid':213 'dual':105 'element':205 'elev':476 'exampl':585 'exchang':27 'fallback':78,238,249 'famili':233 'featur':294 'ffffff':207,361,370,396,584 'font':59,106,232,256 'gray':117,191,211,411 'green':140,216,224 'guid':564 'handl':60 'head':62,274,285,521 'height':260 'helvetica':242,250,252 'hero':264,589 'hierarchi':254 'ibm':75,239 'ident':53 'key':84 'kraken':4,11,14,19,43,57,72,86,98,102,151,236,247,266,276,287,297,305,314,322,330,338,346,503,518,523,569,593 'kraken-brand':56,97,235,265,275,286,517,592 'kraken-product':71,101,246,296,304,313,321,329,337,345,522 'layout':446 'letter':261,599 'letter-spac':598 'level':139 'line':259 'link':158,509 'max':537 'md':3,10 'medium':312 'micro':344,486 'mute':204 'near':109,184,576 'near-black':108 'negat':68 'neue':251 'neutral':118,189,194,434 'normal':302,310,319,327,335,343 'opac':198,221 'oper':38 'outlin':164,368 'outsid':546 'pad':362,389,610 'palett':148 'pill':126,532 'plex':76,240 'positive/success':144 'primari':90,150,154,187,193,208,356 'principl':447 'product':73,103,248,298,306,315,323,331,339,347,524 'profession':51 'prompt':563,587 'proprietari':55 'purpl':30,44,87,152,159,166,170,171,178,357,367,379,504,545,570,603 'px':272,282,293,602 'quick':565 'radius':121,365,377,391,399,420,433,444,465,512,538,607 'refer':7,567 'respons':551 'rgba':129,173,382,402,413,424,435,478,487 'role':149,255 'round':123 'rule':231 'san':77,241 'scale':119,549 'secondari':202,410,579 'section':273 'semant':215 'serv':79 'shadow':128,401 'silver':199 'size':257 'skill' 'skill-design-md-kraken' 'small':336 'solid':375 'source-galyarderlabs' 'space':262,448,600 'state':145 'style':354 'sub':284 'sub-head':283 'subtl':127,172,181,380,477 'success':423 'success/positive':218 'surfac':209 'system':6,13,107 'text':112,188,203,228,360,371,387,397,418,431,442,575,580 'theme':17 'titl':295 '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' 'track':69 'trustworthi':25 'ts':500 'typographi':230 'ui':82,104,244 'uppercas':351 'use':29,502,516,531,543 'variant':94,165,573 'visual':16 'websit':21 'weight':66,258,596 'whisper':138 'whisper-level':137 'white':40,206,393,583,590 'workhors':83","prices":[{"id":"09f2d530-8971-493c-b925-7b2d8ec90493","listingId":"ff91c13e-1190-4c1e-b1e0-963003ce24e0","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.522Z"}],"sources":[{"listingId":"ff91c13e-1190-4c1e-b1e0-963003ce24e0","source":"github","sourceId":"galyarderlabs/galyarder-framework/design-md-kraken","sourceUrl":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-kraken","isPrimary":false,"firstSeenAt":"2026-05-10T01:06:45.522Z","lastSeenAt":"2026-05-18T19:07:47.428Z"}],"details":{"listingId":"ff91c13e-1190-4c1e-b1e0-963003ce24e0","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"galyarderlabs","slug":"design-md-kraken","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":"59952ea4fb1d770f40a77a5cca224b8d3645c360","skill_md_path":"skills/design-md-kraken/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-kraken"},"layout":"multi","source":"github","category":"galyarder-framework","frontmatter":{"name":"design-md-kraken","description":"Design system reference for design md kraken."},"skills_sh_url":"https://skills.sh/galyarderlabs/galyarder-framework/design-md-kraken"},"updatedAt":"2026-05-18T19:07:47.428Z"}}