{"id":"a0ddece8-c00b-46e1-a3cb-77576013996f","shortId":"AMaBPL","kind":"skill","title":"design-md-coinbase","tagline":"Design system reference for design md coinbase.","description":"# Design System: Coinbase\n\n## 1. Visual Theme & Atmosphere\n\nCoinbase's website is a clean, trustworthy crypto platform that communicates financial reliability through a blue-and-white binary palette. The design uses Coinbase Blue (`#0052ff`)  a deep, saturated blue  as the singular brand accent against white and near-black surfaces. The proprietary font family includes CoinbaseDisplay for hero headlines, CoinbaseSans for UI text, CoinbaseText for body reading, and CoinbaseIcons for iconography  a comprehensive four-font system.\n\nThe button system uses a distinctive 56px radius for pill-shaped CTAs with hover transitions to a lighter blue (`#578bfa`). The design alternates between white content sections and dark (`#0a0b0d`, `#282b31`) feature sections, creating a professional, financial-grade interface.\n\n**Key Characteristics:**\n- Coinbase Blue (`#0052ff`) as singular brand accent\n- Four-font proprietary family: Display, Sans, Text, Icons\n- 56px radius pill buttons with blue hover transition\n- Near-black (`#0a0b0d`) dark sections + white light sections\n- 1.00 line-height on display headings  ultra-tight\n- Cool gray secondary surface (`#eef0f3`) with blue tint\n- `text-transform: lowercase` on some button labels  unusual\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Coinbase Blue** (`#0052ff`): Primary brand, links, CTA borders\n- **Pure White** (`#ffffff`): Primary light surface\n- **Near Black** (`#0a0b0d`): Text, dark section backgrounds\n- **Cool Gray Surface** (`#eef0f3`): Secondary button background\n\n### Interactive\n- **Hover Blue** (`#578bfa`): Button hover background\n- **Link Blue** (`#0667d0`): Secondary link color\n- **Muted Blue** (`#5b616e`): Border color at 20% opacity\n\n### Surface\n- **Dark Card** (`#282b31`): Dark button/card backgrounds\n- **Light Surface** (`rgba(247,247,247,0.88)`): Subtle surface\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: `CoinbaseDisplay`  hero headlines\n- **UI / Sans**: `CoinbaseSans`  buttons, headings, nav\n- **Body**: `CoinbaseText`  reading text\n- **Icons**: `CoinbaseIcons`  icon font\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Notes |\n|------|------|------|--------|-------------|-------|\n| Display Hero | CoinbaseDisplay | 80px | 400 | 1.00 (tight) | Maximum impact |\n| Display Secondary | CoinbaseDisplay | 64px | 400 | 1.00 | Sub-hero |\n| Display Third | CoinbaseDisplay | 52px | 400 | 1.00 | Third tier |\n| Section Heading | CoinbaseSans | 36px | 400 | 1.11 (tight) | Feature sections |\n| Card Title | CoinbaseSans | 32px | 400 | 1.13 | Card headings |\n| Feature Title | CoinbaseSans | 18px | 600 | 1.33 | Feature emphasis |\n| Body Bold | CoinbaseSans | 16px | 700 | 1.50 | Strong body |\n| Body Semibold | CoinbaseSans | 16px | 600 | 1.25 | Buttons, nav |\n| Body | CoinbaseText | 18px | 400 | 1.56 | Standard reading |\n| Body Small | CoinbaseText | 16px | 400 | 1.50 | Secondary reading |\n| Button | CoinbaseSans | 16px | 600 | 1.20 | +0.16px tracking |\n| Caption | CoinbaseSans | 14px | 600700 | 1.50 | Metadata |\n| Small | CoinbaseSans | 13px | 600 | 1.23 | Tags |\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Pill (56px radius)**\n- Background: `#eef0f3` or `#282b31`\n- Radius: 56px\n- Border: `1px solid` matching background\n- Hover: `#578bfa` (light blue)\n- Focus: `2px solid black` outline\n\n**Full Pill (100000px radius)**\n- Used for maximum pill shape\n\n**Blue Bordered**\n- Border: `1px solid #0052ff`\n- Background: transparent\n\n### Cards & Containers\n- Radius: 8px40px range\n- Borders: `1px solid rgba(91,97,110,0.2)`\n\n## 5. Layout Principles\n\n### Spacing System\n- Base: 8px\n- Scale: 1px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 25px, 32px, 48px\n\n### Border Radius Scale\n- Small (4px8px): Article links, small cards\n- Standard (12px16px): Cards, menus\n- Large (24px32px): Feature containers\n- XL (40px): Large buttons/containers\n- Pill (56px): Primary CTAs\n- Full (100000px): Maximum pill\n\n## 6. Depth & Elevation\n\nMinimal shadow system  depth from color contrast between dark/light sections.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Coinbase Blue (#0052ff) for primary interactive elements\n- Apply 56px radius for all CTA buttons\n- Use CoinbaseDisplay for hero headings only\n- Alternate dark (#0a0b0d) and white sections\n\n### Don't\n- Don't use the blue decoratively  it's functional only\n- Don't use sharp corners on CTAs  56px minimum\n\n## 8. Responsive Behavior\n\nBreakpoints: 400px, 576px, 640px, 768px, 896px, 1280px, 1440px, 1600px\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Brand: Coinbase Blue (`#0052ff`)\n- Background: White (`#ffffff`)\n- Dark surface: `#0a0b0d`\n- Secondary surface: `#eef0f3`\n- Hover: `#578bfa`\n- Text: `#0a0b0d`\n\n### Example Component Prompts\n- \"Create hero: white background. CoinbaseDisplay 80px, line-height 1.00. Pill CTA (#eef0f3, 56px radius). Hover: #578bfa.\"\n- \"Build dark section: #0a0b0d background. CoinbaseDisplay 64px white text. Blue accent link (#0052ff).\"","tags":["design","coinbase","galyarder","framework","galyarderlabs","agent-skills","agentic-framework","agents","ai-agents","automation","claude-code-plugin","codex-skills"],"capabilities":["skill","source-galyarderlabs","skill-design-md-coinbase","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-coinbase","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,942 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:46.377Z","embedding":null,"createdAt":"2026-05-10T01:06:44.482Z","updatedAt":"2026-05-18T19:07:46.377Z","lastSeenAt":"2026-05-18T19:07:46.377Z","tsv":"'+0.16':380 '0.2':452 '0.88':259 '0052ff':45,134,199,437,528,595,641 '0667d0':234 '0a0b0d':119,159,213,548,601,608,632 '1':15 '1.00':165,298,307,316,621 '1.11':324 '1.13':333 '1.20':379 '1.23':393 '1.25':357 '1.33':341 '1.50':349,372,387 '1.56':364 '100000px':425,502 '10px':467 '110':451 '1280px':582 '12px':468 '12px16px':486 '13px':391 '1440px':583 '14px':385 '15px':469 '1600px':584 '16px':347,355,370,377,470 '18px':339,362 '1px':410,435,446,461 '2':192 '20':244 '20px':471 '247':256,257,258 '24px':472 '24px32px':490 '25px':473 '282b31':120,249,406 '2px':419 '3':262 '32px':331,474 '36px':322 '3px':462 '4':395 '400':297,306,315,323,332,363,371 '400px':577 '40px':494 '48px':475 '4px':463 '4px8px':480 '5':453 '52px':314 '56px':95,148,401,408,498,534,571,625 '576px':578 '578bfa':109,228,415,606,628 '5b616e':240 '5px':464 '6':505 '600':340,356,378,392 '600700':386 '640px':579 '64px':305,635 '6px':465 '7':518 '700':348 '768px':580 '8':573 '80px':296,617 '896px':581 '8px':459,466 '8px40px':443 '9':585 '91':449 '97':450 'accent':54,138,639 'agent':586 'altern':112,546 'appli':533 'articl':481 'atmospher':18 'background':217,224,231,252,403,413,438,596,615,633 'base':458 'behavior':575 'binari':38 'black':60,158,212,421 'blue':35,44,49,108,133,153,181,198,227,233,239,417,432,527,558,594,638 'blue-and-whit':34 'bodi':77,277,344,351,352,360,367 'bold':345 'border':204,241,409,433,434,445,476 'brand':53,137,201,592 'breakpoint':576 'build':629 'button':90,151,189,223,229,274,358,375,398,539 'button/card':251 'buttons/containers':496 'caption':383 'card':248,328,334,440,484,487 'characterist':131 'clean':24 'coinbas':4,11,14,19,43,132,197,526,593 'coinbasedisplay':67,268,295,304,313,541,616,634 'coinbaseicon':80,282 'coinbasesan':71,273,321,330,338,346,354,376,384,390 'coinbasetext':75,278,361,369 'color':193,237,242,513,590 'communic':29 'compon':396,610 'comprehens':84 'contain':441,492 'content':115 'contrast':514 'cool':175,218 'corner':568 'creat':123,612 'crypto':26 'cta':203,538,623 'ctas':101,500,570 'dark':118,160,215,247,250,547,599,630 'dark/light':516 'decor':559 'deep':47 'depth':506,511 'design':2,5,9,12,41,111 'design-md-coinbas':1 'display':144,170,267,293,302,311 'distinct':94 'eef0f3':179,221,404,604,624 'element':532 'elev':507 'emphasi':343 'exampl':609 'famili':65,143,266 'featur':121,326,336,342,491 'ffffff':207,598 'financi':30,127 'financial-grad':126 'focus':418 'font':64,87,141,265,284,287 'four':86,140 'four-font':85,139 'full':423,501 'function':562 'grade':128 'gray':176,219 'guid':588 'head':171,275,320,335,544 'headlin':70,270 'height':168,291,620 'hero':69,269,294,310,543,613 'hierarchi':285 'hover':103,154,226,230,414,605,627 'icon':147,281,283 'iconographi':82 'impact':301 'includ':66 'interact':225,531 'interfac':129 'key':130 'label':190 'larg':489,495 'layout':454 'light':163,209,253,416 'lighter':107 'line':167,290,619 'line-height':166,618 'link':202,232,236,482,640 'lowercas':186 'match':412 'maximum':300,429,503 'md':3,10 'menus':488 'metadata':388 'minim':508 'minimum':572 'mute':238 'nav':276,359 'near':59,157,211 'near-black':58,156 'note':292 'opac':245 'outlin':422 'palett':39,194 'pill':99,150,400,424,430,497,504,622 'pill-shap':98 'platform':27 'primari':196,200,208,399,499,530 'principl':455 'profession':125 'prompt':587,611 'proprietari':63,142 'pure':205 'px':381 'quick':589 'radius':96,149,402,407,426,442,477,535,626 'rang':444 'read':78,279,366,374 'refer':7,591 'reliabl':31 'respons':574 'rgba':255,448 'role':195,286 'rule':264 'san':145,272 'satur':48 'scale':460,478 'secondari':177,222,235,303,373,602 'section':116,122,161,164,216,319,327,517,551,631 'semibold':353 'shadow':509 'shape':100,431 'sharp':567 'singular':52,136 'size':288 'skill' 'skill-design-md-coinbase' 'small':368,389,479,483 'solid':411,420,436,447 'source-galyarderlabs' 'space':456 'standard':365,485 'strong':350 'style':397 'sub':309 'sub-hero':308 'subtl':260 'surfac':61,178,210,220,246,254,261,600,603 'system':6,13,88,91,457,510 'tag':394 'text':74,146,184,214,280,607,637 'text-transform':183 'theme':17 'third':312,317 'tier':318 'tight':174,299,325 'tint':182 'titl':329,337 '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':382 'transform':185 'transit':104,155 'transpar':439 'trustworthi':25 'ts':523 'typographi':263 'ui':73,271 'ultra':173 'ultra-tight':172 'unusu':191 'use':42,92,427,525,540,556,566 'visual':16 'websit':21 'weight':289 'white':37,56,114,162,206,550,597,614,636 'xl':493","prices":[{"id":"d0140e00-5268-4bd3-b46a-00c815baf677","listingId":"a0ddece8-c00b-46e1-a3cb-77576013996f","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:44.482Z"}],"sources":[{"listingId":"a0ddece8-c00b-46e1-a3cb-77576013996f","source":"github","sourceId":"galyarderlabs/galyarder-framework/design-md-coinbase","sourceUrl":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-coinbase","isPrimary":false,"firstSeenAt":"2026-05-10T01:06:44.482Z","lastSeenAt":"2026-05-18T19:07:46.377Z"}],"details":{"listingId":"a0ddece8-c00b-46e1-a3cb-77576013996f","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"galyarderlabs","slug":"design-md-coinbase","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":"a7939da33628cf3b7541f74a6913ea79bd34b514","skill_md_path":"skills/design-md-coinbase/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-coinbase"},"layout":"multi","source":"github","category":"galyarder-framework","frontmatter":{"name":"design-md-coinbase","description":"Design system reference for design md coinbase."},"skills_sh_url":"https://skills.sh/galyarderlabs/galyarder-framework/design-md-coinbase"},"updatedAt":"2026-05-18T19:07:46.377Z"}}