{"id":"9b9882fd-df6b-49b9-9cc7-9ca6b259c33c","shortId":"dHFZdW","kind":"skill","title":"design-md-uber","tagline":"Design system reference for design md uber.","description":"# Design System: Uber\n\n## 1. Visual Theme & Atmosphere\n\nUber's design language is a masterclass in confident minimalism -- a black-and-white universe where every pixel serves a purpose and nothing decorates without earning its place. The entire experience is built on a stark duality: jet black (`#000000`) and pure white (`#ffffff`), with virtually no mid-tone grays diluting the message. This isn't the sterile minimalism of a startup that hasn't finished designing -- it's the deliberate restraint of a brand so established it can afford to whisper.\n\nThe signature typeface, UberMove, is a proprietary geometric sans-serif with a distinctly square, engineered quality. Headlines in UberMove Bold at 52px carry the weight of a billboard -- authoritative, direct, unapologetic. The companion face UberMoveText handles body copy and buttons with a slightly softer, more readable character at medium weight (500). Together, they create a typographic system that feels like a transit map: clear, efficient, built for scanning at speed.\n\nWhat makes Uber's design truly distinctive is its use of full-bleed photography and illustration paired with pill-shaped interactive elements (999px border-radius). Navigation chips, CTA buttons, and category selectors all share this capsule shape, creating a tactile, thumb-friendly interface language that's unmistakably Uber. The illustrations -- warm, slightly stylized scenes of drivers, riders, and cityscapes -- inject humanity into what could otherwise be a cold, monochrome system. The site alternates between white content sections and a full-black footer, with card-based layouts using the gentlest possible shadows (rgba(0,0,0,0.12-0.16)) to create subtle lift without breaking the flat aesthetic.\n\n**Key Characteristics:**\n- Pure black-and-white foundation with virtually no mid-tone grays in the UI chrome\n- UberMove (headlines) + UberMoveText (body/UI) -- proprietary geometric sans-serif family\n- Pill-shaped everything: buttons, chips, nav items all use 999px border-radius\n- Warm, human illustrations contrasting the stark monochrome interface\n- Card-based layout with whisper-soft shadows (0.12-0.16 opacity)\n- 8px spacing grid with compact, information-dense layouts\n- Bold photography integrated as full-bleed hero backgrounds\n- Black footer anchoring the page with a dark, high-contrast environment\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Uber Black** (`#000000`): The defining brand color -- used for primary buttons, headlines, navigation text, and the footer. Not \"near-black\" or \"off-black,\" but true, uncompromising black.\n- **Pure White** (`#ffffff`): The primary surface color and inverse text. Used for page backgrounds, card surfaces, and text on black elements.\n\n### Interactive & Button States\n- **Hover Gray** (`#e2e2e2`): White button hover state -- a clean, cool light gray that provides clear feedback without warmth.\n- **Hover Light** (`#f3f3f3`): Subtle hover for elevated white buttons -- barely-there gray for gentle interaction feedback.\n- **Chip Gray** (`#efefef`): Background for secondary/filter buttons and navigation chips -- a neutral, ultra-light gray.\n\n### Text & Content\n- **Body Gray** (`#4b4b4b`): Secondary text and footer links -- a true mid-gray with no warm or cool bias.\n- **Muted Gray** (`#afafaf`): Tertiary text, de-emphasized footer links, and placeholder content.\n\n### Borders & Separation\n- **Border Black** (`#000000`): Thin 1px borders for structural containment -- used sparingly on dividers and form containers.\n\n### Shadows & Depth\n- **Shadow Light** (`rgba(0, 0, 0, 0.12)`): Standard card elevation -- a featherweight lift for content cards.\n- **Shadow Medium** (`rgba(0, 0, 0, 0.16)`): Slightly stronger elevation for floating action buttons and overlays.\n- **Button Press** (`rgba(0, 0, 0, 0.08)`): Inset shadow for active/pressed states on secondary buttons.\n\n### Link States\n- **Default Link Blue** (`#0000ee`): Standard browser blue for text links with underline -- used in body content.\n- **Link White** (`#ffffff`): Links on dark surfaces -- used in footer and dark sections.\n- **Link Black** (`#000000`): Links on light surfaces with underline decoration.\n\n### Gradient System\n- Uber's design is **entirely gradient-free**. The black/white duality and flat color blocks create all visual hierarchy. No gradients appear anywhere in the system -- every surface is a solid color, every transition is a hard edge or a shadow.\n\n## 3. Typography Rules\n\n### Font Family\n- **Headline / Display**: `UberMove`, with fallbacks: `UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif`\n- **Body / UI**: `UberMoveText`, with fallbacks: `system-ui, Helvetica Neue, Helvetica, Arial, sans-serif`\n\n*Note: UberMove and UberMoveText are proprietary typefaces. For external implementations, use `system-ui` or Inter as the closest available substitute. The geometric, square-proportioned character of UberMove can be approximated with Inter or DM Sans.*\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Notes |\n|------|------|------|--------|-------------|-------|\n| Display / Hero | UberMove | 52px (3.25rem) | 700 | 1.23 (tight) | Maximum impact, billboard presence |\n| Section Heading | UberMove | 36px (2.25rem) | 700 | 1.22 (tight) | Major section anchors |\n| Card Title | UberMove | 32px (2rem) | 700 | 1.25 (tight) | Card and feature headings |\n| Sub-heading | UberMove | 24px (1.5rem) | 700 | 1.33 | Secondary section headers |\n| Small Heading | UberMove | 20px (1.25rem) | 700 | 1.40 | Compact headings, list titles |\n| Nav / UI Large | UberMoveText | 18px (1.13rem) | 500 | 1.33 | Navigation links, prominent UI text |\n| Body / Button | UberMoveText | 16px (1rem) | 400-500 | 1.25-1.50 | Standard body text, button labels |\n| Caption | UberMoveText | 14px (0.88rem) | 400-500 | 1.14-1.43 | Metadata, descriptions, small links |\n| Micro | UberMoveText | 12px (0.75rem) | 400 | 1.67 (relaxed) | Fine print, legal text |\n\n### Principles\n- **Bold headlines, medium body**: UberMove headings are exclusively weight 700 (bold) -- every headline hits with billboard force. UberMoveText body and UI text uses 400-500, creating a clear visual hierarchy through weight contrast.\n- **Tight heading line-heights**: All headlines use line-heights between 1.22-1.40 -- compact and punchy, designed for scanning rather than reading.\n- **Functional typography**: There is no decorative type treatment anywhere. No letter-spacing, no text-transform, no ornamental sizing. Every text element serves a direct communication purpose.\n- **Two fonts, strict roles**: UberMove is exclusively for headings. UberMoveText is exclusively for body, buttons, links, and UI. The boundary is never crossed.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Black (CTA)**\n- Background: Uber Black (`#000000`)\n- Text: Pure White (`#ffffff`)\n- Padding: 10px 12px\n- Radius: 999px (full pill)\n- Outline: none\n- Focus: inset ring `rgb(255,255,255) 0px 0px 0px 2px`\n- The primary action button -- bold, high-contrast, unmissable\n\n**Secondary White**\n- Background: Pure White (`#ffffff`)\n- Text: Uber Black (`#000000`)\n- Padding: 10px 12px\n- Radius: 999px (full pill)\n- Hover: background shifts to Hover Gray (`#e2e2e2`)\n- Focus: background shifts to Hover Gray, inset ring appears\n- Used on dark surfaces or as a secondary action alongside Primary Black\n\n**Chip / Filter**\n- Background: Chip Gray (`#efefef`)\n- Text: Uber Black (`#000000`)\n- Padding: 14px 16px\n- Radius: 999px (full pill)\n- Active: inset shadow `rgba(0,0,0,0.08)`\n- Navigation chips, category selectors, filter toggles\n\n**Floating Action**\n- Background: Pure White (`#ffffff`)\n- Text: Uber Black (`#000000`)\n- Padding: 14px\n- Radius: 999px (full pill)\n- Shadow: `rgba(0,0,0,0.16) 0px 2px 8px 0px`\n- Transform: `translateY(2px)` slight offset\n- Hover: background shifts to `#f3f3f3`\n- Map controls, scroll-to-top, floating CTAs\n\n### Cards & Containers\n- Background: Pure White (`#ffffff`) on white pages; no distinct card background differentiation\n- Border: none by default -- cards are defined by shadow, not stroke\n- Radius: 8px for standard content cards; 12px for featured/promoted cards\n- Shadow: `rgba(0,0,0,0.12) 0px 4px 16px 0px` for standard lift\n- Cards are content-dense with minimal internal padding\n- Image-led cards use full-bleed imagery with text overlay or below\n\n### Inputs & Forms\n- Text: Uber Black (`#000000`)\n- Background: Pure White (`#ffffff`)\n- Border: 1px solid Black (`#000000`) -- the only place visible borders appear prominently\n- Radius: 8px\n- Padding: standard comfortable spacing\n- Focus: no extracted custom focus state -- relies on standard browser focus ring\n\n### Navigation\n- Sticky top navigation with white background\n- Logo: Uber wordmark/icon at 24x24px in black\n- Links: UberMoveText at 14-18px, weight 500, in Uber Black\n- Pill-shaped nav chips with Chip Gray (`#efefef`) background for category navigation (\"Ride\", \"Drive\", \"Business\", \"Uber Eats\")\n- Menu toggle: circular button with 50% border-radius\n- Mobile: hamburger menu pattern\n\n### Image Treatment\n- Warm, hand-illustrated scenes (not photographs for feature sections)\n- Illustration style: slightly stylized people, warm color palette within illustrations, contemporary vibe\n- Hero sections use bold photography or illustration as full-width backgrounds\n- QR codes for app download CTAs\n- All imagery uses standard 8px or 12px border-radius when contained in cards\n\n### Distinctive Components\n\n**Category Pill Navigation**\n- Horizontal row of pill-shaped buttons for top-level navigation (\"Ride\", \"Drive\", \"Business\", \"Uber Eats\", \"About\")\n- Each pill: Chip Gray background, black text, 999px radius\n- Active state indicated by black background with white text (inversion)\n\n**Hero with Dual Action**\n- Split hero: text/CTA on left, map/illustration on right\n- Two input fields side by side for pickup/destination\n- \"See prices\" CTA button in black pill\n\n**Plan-Ahead Cards**\n- Cards promoting features like \"Uber Reserve\" and trip planning\n- Illustration-heavy with warm, human-centric imagery\n- Black CTA buttons with white text at bottom\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 6px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 24px, 32px\n- Button padding: 10px 12px (compact) or 14px 16px (comfortable)\n- Card internal padding: approximately 24-32px\n- Section vertical spacing: generous but efficient -- approximately 64-96px between major sections\n\n### Grid & Container\n- Max container width: approximately 1136px, centered\n- Hero: split layout with text left, visual right\n- Feature sections: 2-column card grids or full-width single-column\n- Footer: multi-column link grid on black background\n- Full-width sections extending to viewport edges\n\n### Whitespace Philosophy\n- **Efficient, not airy**: Uber's whitespace is functional -- enough to separate, never enough to feel empty. This is transit-system spacing: compact, clear, purpose-driven.\n- **Content-dense cards**: Cards pack information tightly with minimal internal spacing, relying on shadow and radius to define boundaries.\n- **Section breathing room**: Major sections get generous vertical spacing, but within sections, elements are closely grouped.\n\n### Border Radius Scale\n- Sharp (0px): No square corners used in interactive elements\n- Standard (8px): Content cards, input fields, listboxes\n- Comfortable (12px): Featured cards, larger containers, link cards\n- Full Pill (999px): All buttons, chips, navigation items, pills\n- Circle (50%): Avatar images, icon containers, circular controls\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow, solid background | Page background, inline content, text sections |\n| Subtle (Level 1) | `rgba(0,0,0,0.12) 0px 4px 16px` | Standard content cards, feature blocks |\n| Medium (Level 2) | `rgba(0,0,0,0.16) 0px 4px 16px` | Elevated cards, overlay elements |\n| Floating (Level 3) | `rgba(0,0,0,0.16) 0px 2px 8px` + translateY(2px) | Floating action buttons, map controls |\n| Pressed (Level 4) | `rgba(0,0,0,0.08) inset` (999px spread) | Active/pressed button states |\n| Focus Ring | `rgb(255,255,255) 0px 0px 0px 2px inset` | Keyboard focus indicators |\n\n**Shadow Philosophy**: Uber uses shadow purely as a structural tool, never decoratively. Shadows are always black at very low opacity (0.08-0.16), creating the bare minimum lift needed to separate content layers. The blur radii are moderate (8-16px) -- enough to feel natural but never dramatic. There are no colored shadows, no layered shadow stacks, and no ambient glow effects. Depth is communicated more through the black/white section contrast than through shadow elevation.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use true black (`#000000`) and pure white (`#ffffff`) as the primary palette -- the stark contrast IS Uber\n- Use 999px border-radius for all buttons, chips, and pill-shaped navigation elements\n- Keep all headings in UberMove Bold (700) for billboard-level impact\n- Use whisper-soft shadows (0.12-0.16 opacity) for card elevation -- barely visible\n- Maintain the compact, information-dense layout style -- Uber prioritizes efficiency over airiness\n- Use warm, human-centric illustrations to soften the monochrome interface\n- Apply 8px radius for content cards and 12px for featured containers\n- Use UberMoveText at weight 500 for navigation and prominent UI text\n- Pair black primary buttons with white secondary buttons for dual-action layouts\n\n### Don't\n- Don't introduce color into the UI chrome -- Uber's interface is strictly black, white, and gray\n- Don't use rounded corners less than 999px on buttons -- the full-pill shape is a core identity element\n- Don't apply heavy shadows or drop shadows with high opacity -- depth is whisper-subtle\n- Don't use serif fonts anywhere -- Uber's typography is exclusively geometric sans-serif\n- Don't create airy, spacious layouts with excessive whitespace -- Uber's density is intentional\n- Don't use gradients or color overlays -- every surface is a flat, solid color\n- Don't mix UberMove into body text or UberMoveText into headlines -- the hierarchy is strict\n- Don't use decorative borders -- borders are functional (inputs, dividers) or absent entirely\n- Don't soften the black/white contrast with off-whites or near-blacks -- the duality is deliberate\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | 320px | Minimum layout, single column, stacked inputs, compact typography |\n| Mobile | 600px | Standard mobile, stacked layout, hamburger nav |\n| Tablet Small | 768px | Two-column grids begin, expanded card layouts |\n| Tablet | 1119px | Full tablet layout, side-by-side hero content |\n| Desktop Small | 1120px | Desktop grid activates, horizontal nav pills |\n| Desktop | 1136px | Full desktop layout, maximum container width, split hero |\n\n### Touch Targets\n- All pill buttons: minimum 44px height (10-14px vertical padding + line-height)\n- Navigation chips: generous 14px 16px padding for comfortable thumb tapping\n- Circular controls (menu, close): 50% radius ensures large, easy-to-hit targets\n- Card surfaces serve as full-area touch targets on mobile\n\n### Collapsing Strategy\n- **Navigation**: Horizontal pill nav collapses to hamburger menu with circular toggle\n- **Hero**: Split layout (text + map/visual) stacks to single column -- text above, visual below\n- **Input fields**: Side-by-side pickup/destination inputs stack vertically\n- **Feature cards**: 2-column grid collapses to full-width stacked cards\n- **Headings**: 52px display scales down through 36px, 32px, 24px, 20px\n- **Footer**: Multi-column link grid collapses to accordion or stacked single column\n- **Category pills**: Horizontal scroll with overflow on smaller screens\n\n### Image Behavior\n- Illustrations scale proportionally within their containers\n- Hero imagery maintains aspect ratio, may crop on smaller screens\n- QR code sections hide on mobile (app download shifts to direct store links)\n- Card imagery maintains 8-12px border radius at all sizes\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Button: \"Uber Black (#000000)\"\n- Page Background: \"Pure White (#ffffff)\"\n- Button Text (on black): \"Pure White (#ffffff)\"\n- Button Text (on white): \"Uber Black (#000000)\"\n- Secondary Text: \"Body Gray (#4b4b4b)\"\n- Tertiary Text: \"Muted Gray (#afafaf)\"\n- Chip Background: \"Chip Gray (#efefef)\"\n- Hover State: \"Hover Gray (#e2e2e2)\"\n- Card Shadow: \"rgba(0,0,0,0.12) 0px 4px 16px\"\n- Footer Background: \"Uber Black (#000000)\"\n\n### Example Component Prompts\n- \"Create a hero section on Pure White (#ffffff) with a headline at 52px UberMove Bold (700), line-height 1.23. Use Uber Black (#000000) text. Add a subtitle in Body Gray (#4b4b4b) at 16px UberMoveText weight 400 with 1.50 line-height. Place an Uber Black (#000000) pill CTA button with Pure White text, 999px radius, padding 10px 12px.\"\n- \"Design a category navigation bar with horizontal pill buttons. Each pill: Chip Gray (#efefef) background, Uber Black (#000000) text, 14px 16px padding, 999px border-radius. Active pill inverts to Uber Black background with Pure White text. Use UberMoveText at 14px weight 500.\"\n- \"Build a feature card on Pure White (#ffffff) with 8px border-radius and shadow rgba(0,0,0,0.12) 0px 4px 16px. Title in UberMove at 24px weight 700, description in Body Gray (#4b4b4b) at 16px UberMoveText. Add a black pill CTA button at the bottom.\"\n- \"Create a dark footer on Uber Black (#000000) with Pure White (#ffffff) heading text in UberMove at 20px weight 700. Footer links in Muted Gray (#afafaf) at 14px UberMoveText. Links hover to Pure White. Multi-column grid layout.\"\n- \"Design a floating action button with Pure White (#ffffff) background, 999px radius, 14px padding, and shadow rgba(0,0,0,0.16) 0px 2px 8px. Hover shifts background to #f3f3f3. Use for scroll-to-top or map controls.\"\n\n### Iteration Guide\n1. Focus on ONE component at a time\n2. Reference the strict black/white palette -- \"use Uber Black (#000000)\" not \"make it dark\"\n3. Always specify 999px radius for buttons and pills -- this is non-negotiable for the Uber identity\n4. Describe the font family explicitly -- \"UberMove Bold for the heading, UberMoveText Medium for the label\"\n5. For shadows, use \"whisper shadow (rgba(0,0,0,0.12) 0px 4px 16px)\" -- never heavy drop shadows\n6. Keep layouts compact and information-dense -- Uber is efficient, not airy\n7. Illustrations should be warm and human -- describe \"stylized people in warm tones\" not abstract shapes\n8. Pair black CTAs with white secondaries for balanced dual-action layouts","tags":["design","uber","galyarder","framework","galyarderlabs","agent-skills","agentic-framework","agents","ai-agents","automation","claude-code-plugin","codex-skills"],"capabilities":["skill","source-galyarderlabs","skill-design-md-uber","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-uber","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 (18,642 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:49.677Z","embedding":null,"createdAt":"2026-05-10T01:06:48.697Z","updatedAt":"2026-05-18T19:07:49.677Z","lastSeenAt":"2026-05-18T19:07:49.677Z","tsv":"'-0.16':276,347,1783,1893 '-1.40':915 '-1.43':851 '-1.50':837 '-12':2336 '-14':2180 '-16':1800 '-18':1269 '-32':1496 '-500':835,849,893 '-96':1506 '0':272,273,274,545,546,547,561,562,563,577,578,579,1086,1087,1088,1114,1115,1116,1177,1178,1179,1674,1689,1690,1691,1705,1706,1707,1720,1721,1722,1738,1739,1740,2397,2398,2399,2530,2531,2532,2617,2618,2619,2703,2704,2705 '0.08':580,1089,1741,1782 '0.12':275,346,548,1180,1692,1892,2400,2533,2706 '0.16':564,1117,1708,1723,2620 '0.75':859 '0.88':846 '000000':59,386,526,622,986,1029,1074,1105,1216,1225,1846,2354,2373,2408,2435,2458,2488,2568,2657 '0000ee':594 '0px':1007,1008,1009,1118,1121,1181,1184,1626,1693,1709,1724,1754,1755,1756,2401,2534,2621,2707 '1':15,1687,2640 '1.13':820 '1.14':850 '1.22':774,914 '1.23':761,2431 '1.25':785,807,836 '1.33':799,823 '1.40':810 '1.5':796 '1.50':2450 '1.67':862 '10':2179 '10px':992,1031,1474,1484,2469 '1119px':2142 '1120px':2154 '1136px':1517,2162 '12px':858,993,1032,1171,1355,1475,1485,1642,1931,2470 '14':1268 '14px':845,1076,1107,1476,1488,2190,2490,2511,2588,2612 '16px':832,1077,1183,1477,1489,1695,1711,2191,2403,2445,2491,2536,2550,2709 '18px':819,1478 '1px':528,1222 '1rem':833 '2':379,1529,1703,2259,2648 '2.25':771 '20px':806,1479,2278,2578 '24':1495 '24px':795,1480,2277,2541 '24x24px':1262 '255':1004,1005,1006,1751,1752,1753 '2px':1010,1119,1124,1725,1728,1757,2622 '2rem':783 '3':673,1718,2662 '3.25':758 '320px':2113 '32px':782,1481,2276 '36px':770,2275 '4':976,1736,2680 '400':834,848,861,892,2448 '44px':2177 '4b4b4b':492,2378,2443,2548 '4px':1182,1471,1694,1710,2402,2535,2708 '5':1462,2696 '50':1299,1659,2201 '500':154,822,1272,1939,2513 '52px':125,757,2270,2424 '6':1666,2714 '600px':2123 '64':1505 '6px':1472 '7':1836,2727 '700':760,773,784,798,809,878,1881,2427,2543,2580 '768px':2132 '8':1799,2103,2335,2743 '8px':349,1120,1166,1234,1353,1469,1473,1635,1726,1925,2523,2623 '9':2343 '999px':198,325,995,1034,1079,1109,1393,1651,1743,1861,1985,2466,2493,2610,2665 'absent':2083 'abstract':2741 'accordion':2287 'action':570,1013,1061,1097,1408,1730,1957,2603,2754 'activ':1082,1395,2157,2497 'active/pressed':584,1745 'add':2437,2552 'aesthet':285 'afafaf':511,2383,2586 'afford':100 'agent':2344 'ahead':1434 'airi':1561,1912,2032,2726 'alongsid':1062 'altern':250 'alway':1776,2663 'ambient':1820 'anchor':369,778 'anywher':654,933,2019 'app':1346,2325 'appear':653,1052,1231 'appli':1924,2000 'approxim':740,1494,1504,1516 'area':2216 'arial':690,705 'aspect':2312 'atmospher':18 'authorit':132 'avail':728 'avatar':1660 'background':366,426,475,983,1022,1038,1045,1067,1098,1128,1142,1152,1217,1257,1285,1342,1390,1400,1548,1678,1680,2356,2385,2405,2485,2503,2609,2626 'balanc':2751 'bar':2475 'bare':465,1786,1898 'barely-ther':464 'base':264,339,1467 'begin':2137 'behavior':2105,2302 'bias':508 'billboard':131,765,884,1884 'billboard-level':1883 'black':31,58,259,290,367,385,404,408,412,432,525,621,981,985,1028,1064,1073,1104,1215,1224,1264,1275,1391,1399,1430,1454,1547,1777,1845,1947,1974,2098,2353,2363,2372,2407,2434,2457,2487,2502,2554,2567,2656,2745 'black-and-whit':30,289 'black/white':641,1829,2089,2652 'bleed':187,364,1204 'block':646,1700 'blue':593,597 'blur':1795 'bodi':140,490,605,694,829,839,872,887,966,2062,2376,2441,2546 'body/ui':308 'bold':123,358,869,879,1015,1334,1880,2426,2687 'border':200,327,522,524,529,1154,1221,1230,1301,1357,1622,1863,2076,2077,2338,2495,2525 'border-radius':199,326,1300,1356,1862,2494,2524 'bottom':1461,2560 'boundari':972,1605 'brand':95,389 'break':282 'breakpoint':2106 'breath':1607 'browser':596,1248 'build':2514 'built':52,169 'busi':1291,1382 'button':143,205,319,394,435,441,463,478,571,574,588,830,841,967,979,1014,1297,1374,1428,1456,1482,1653,1731,1746,1867,1949,1953,1987,2175,2351,2360,2367,2461,2479,2557,2604,2668 'capsul':212 'caption':843 'card':263,338,427,550,557,779,787,1140,1151,1158,1170,1174,1188,1200,1362,1435,1436,1491,1531,1589,1590,1637,1644,1648,1698,1713,1896,1929,2139,2210,2258,2268,2332,2394,2517 'card-bas':262,337 'carri':126 'categori':207,1092,1287,1365,2292,2473 'center':1518 'centric':1452,1917 'chang':2110 'charact':150,735 'characterist':287 'chip':203,320,472,481,1065,1068,1091,1280,1282,1388,1654,1868,2188,2384,2386,2482 'chrome':304,1968 'circl':1658 'circular':1296,1664,2197,2232 'cityscap':236 'clean':445 'clear':167,451,896,1582 'close':1620,2200 'closest':727 'code':1344,2320 'cold':245 'collaps':2221,2227,2262,2285 'color':380,390,419,645,663,1325,1812,1964,2048,2056,2348 'column':1530,1539,1543,2117,2135,2242,2260,2282,2291,2597 'comfort':1237,1490,1641,2194 'communic':951,1825 'compact':353,811,916,1486,1581,1902,2120,2717 'companion':136 'compon':977,1364,2410,2644 'confid':27 'contain':532,539,1141,1360,1512,1514,1646,1663,1934,2167,2308 'contemporari':1329 'content':253,489,521,556,606,1169,1191,1587,1636,1682,1697,1792,1928,2151 'content-dens':1190,1586 'contrast':332,377,901,1018,1831,1857,2090 'control':1133,1665,1733,2198,2637 'cool':446,507 'copi':141 'core':1995 'corner':1629,1982 'could':241 'creat':157,214,278,647,894,1784,2031,2412,2561 'crop':2315 'cross':975 'cta':204,982,1427,1455,2460,2556 'ctas':1139,1348,2746 'custom':1242 'dark':374,612,618,1055,2563,2661 'de':515 'de-emphas':514 'decor':43,629,930,1773,2075 'default':591,1157 'defin':388,1160,1604 'deliber':91,2102 'dens':356,1192,1588,1905,2721 'densiti':2040 'depth':541,1667,1823,2009 'describ':2681,2734 'descript':853,2544 'design':2,5,9,12,21,87,178,634,919,2471,2600 'design-md-ub':1 'desktop':2152,2155,2161,2164 'differenti':1153 'dilut':71 'direct':133,950,2329 'display':679,754,2271 'distinct':116,180,1150,1363 'divid':536,2081 'dm':744 'download':1347,2326 'dramat':1808 'drive':1290,1381 'driven':1585 'driver':233 'drop':2004,2712 'dual':1407,1956,2753 'dual-act':1955,2752 'dualiti':56,642,2100 'e2e2e2':439,1043,2393 'earn':45 'easi':2206 'easy-to-hit':2205 'eat':1293,1384 'edg':669,1556 'efefef':474,1070,1284,2388,2484 'effect':1822 'effici':168,1503,1559,1910,2724 'element':197,433,947,1618,1633,1715,1874,1997 'elev':461,551,567,1668,1712,1835,1897 'emphas':516 'empti':1574 'engin':118 'enough':1567,1571,1802 'ensur':2203 'entir':49,636,2084 'environ':378 'establish':97 'everi':36,658,664,880,945,2050 'everyth':318 'exampl':2409 'excess':2036 'exclus':876,959,964,2024 'expand':2138 'experi':50 'explicit':2685 'extend':1553 'extern':717 'extract':1241 'f3f3f3':457,1131,2628 'face':137 'fallback':682,698 'famili':314,677,2684 'featherweight':553 'featur':789,1317,1438,1527,1643,1699,1933,2257,2516 'featured/promoted':1173 'feedback':452,471 'feel':162,1573,1804 'ffffff':63,415,609,990,1025,1101,1145,1220,1850,2359,2366,2419,2521,2572,2608 'field':1419,1639,2248 'filter':1066,1094 'fine':864 'finish':86 'flat':284,644,1672,2054 'float':569,1096,1138,1716,1729,2602 'focus':1000,1044,1239,1243,1249,1748,1760,2641 'font':676,748,954,2018,2683 'footer':260,368,400,496,517,616,1540,2279,2404,2564,2581 'forc':885 'form':538,1212 'foundat':293 'free':639 'friend':219 'full':186,258,363,996,1035,1080,1110,1203,1340,1535,1550,1649,1990,2143,2163,2215,2265 'full-area':2214 'full-black':257 'full-ble':185,362,1202 'full-pil':1989 'full-width':1339,1534,1549,2264 'function':925,1566,2079 'generous':1501,1612,2189 'gentl':469 'gentlest':268 'geometr':110,310,731,2025 'get':1611 'glow':1821 'gradient':630,638,652,2046 'gradient-fre':637 'gray':70,300,438,448,467,473,487,491,502,510,1042,1049,1069,1283,1389,1977,2377,2382,2387,2392,2442,2483,2547,2585 'grid':351,1511,1532,1545,2136,2156,2261,2284,2598 'group':1621 'guid':2346,2639 'hamburg':1304,2128,2229 'hand':1311 'hand-illustr':1310 'handl':139 'hard':668 'hasn':84 'head':768,790,793,804,812,874,903,961,1877,2269,2573,2690 'header':802 'headlin':120,306,395,678,870,881,908,2067,2422 'heavi':1447,2001,2711 'height':752,906,912,2178,2186,2430,2453 'helvetica':687,689,702,704 'hero':365,755,1331,1405,1410,1519,2150,2170,2234,2309,2414 'hide':2322 'hierarchi':650,746,898,2069 'high':376,1017,2007 'high-contrast':375,1016 'hit':882,2208 'horizont':1368,2158,2224,2294,2477 'hover':437,442,455,459,1037,1041,1048,1127,2389,2391,2591,2624 'human':238,330,1451,1916,2733 'human-centr':1450,1915 'icon':1662 'ident':1996,2679 'illustr':190,227,331,1312,1319,1328,1337,1446,1918,2303,2728 'illustration-heavi':1445 'imag':1198,1307,1661,2301 'image-l':1197 'imageri':1205,1350,1453,2310,2333 'impact':764,1886 'implement':718 'indic':1397,1761 'inform':355,1592,1904,2720 'information-dens':354,1903,2719 'inject':237 'inlin':1681 'input':1211,1418,1638,2080,2119,2247,2254 'inset':581,1001,1050,1083,1742,1758 'integr':360 'intent':2042 'inter':724,742 'interact':196,434,470,1632 'interfac':220,336,1923,1971 'intern':1195,1492,1596 'introduc':1963 'invers':421,1404 'invert':2499 'isn':75 'item':322,1656 'iter':2638 'jet':57 'keep':1875,2715 'key':286,2109 'keyboard':1759 'label':842,2695 'languag':22,221 'larg':817,2204 'larger':1645 'layer':1793,1815 'layout':265,340,357,1463,1521,1906,1958,2034,2115,2127,2140,2145,2165,2236,2599,2716,2755 'led':1199 'left':1413,1524 'legal':866 'less':1983 'letter':936 'letter-spac':935 'level':1378,1669,1673,1686,1702,1717,1735,1885 'lift':280,554,1187,1788 'light':447,456,486,543,625 'like':163,1439 'line':751,905,911,2185,2429,2452 'line-height':904,910,2184,2428,2451 'link':497,518,589,592,600,607,610,620,623,825,855,968,1265,1544,1647,2283,2331,2582,2590 'list':813 'listbox':1640 'logo':1258 'low':1780 'maintain':1900,2311,2334 'major':776,1509,1609 'make':175,2659 'map':166,1132,1732,2636 'map/illustration':1414 'map/visual':2238 'masterclass':25 'max':1513 'maximum':763,2166 'may':2314 'md':3,10 'medium':152,559,871,1701,2692 'menu':1294,1305,2199,2230 'messag':73 'metadata':852 'micro':856 'mid':68,298,501 'mid-gray':500 'mid-ton':67,297 'minim':28,79,1194,1595 'minimum':1787,2114,2176 'mix':2059 'mobil':1303,2111,2122,2125,2220,2324 'moder':1798 'monochrom':246,335,1922 'multi':1542,2281,2596 'multi-column':1541,2280,2595 'mute':509,2381,2584 'name':2107 'natur':1805 'nav':321,815,1279,2129,2159,2226 'navig':202,396,480,824,1090,1251,1254,1288,1367,1379,1655,1873,1941,2187,2223,2474 'near':403,2097 'near-black':402,2096 'need':1789 'negoti':2675 'neue':688,703 'neutral':483 'never':974,1570,1772,1807,2710 'non':2674 'non-negoti':2673 'none':999,1155 'note':709,753 'noth':42 'off-black':406 'off-whit':2092 'offset':1126 'one':2643 'opac':348,1781,1894,2008 'ornament':943 'otherwis':242 'outlin':998 'overflow':2297 'overlay':573,1208,1714,2049 'pack':1591 'pad':991,1030,1075,1106,1196,1235,1483,1493,2183,2192,2468,2492,2613 'page':371,425,1148,1679,2355 'pair':191,1946,2744 'palett':381,1326,1854,2653 'pattern':1306 'peopl':1323,2736 'philosophi':1558,1763 'photograph':1315 'photographi':188,359,1335 'pickup/destination':1424,2253 'pill':194,316,997,1036,1081,1111,1277,1366,1372,1387,1431,1650,1657,1871,1991,2160,2174,2225,2293,2459,2478,2481,2498,2555,2670 'pill-shap':193,315,1276,1371,1870 'pixel':37 'place':47,1228,2454 'placehold':520 'plan':1433,1444 'plan-ahead':1432 'possibl':269 'presenc':766 'press':575,1734 'price':1426 'primari':383,393,417,980,1012,1063,1853,1948,2350 'principl':868,1464 'print':865 'priorit':1909 'promin':826,1232,1943 'promot':1437 'prompt':2345,2411 'proport':734,2305 'proprietari':109,309,714 'provid':450 'punchi':918 'pure':61,288,413,988,1023,1099,1143,1218,1767,1848,2357,2364,2417,2463,2505,2519,2570,2593,2606 'purpos':40,952,1584 'purpose-driven':1583 'px':1270,1497,1507,1801,2181,2337 'qr':1343,2319 'qualiti':119 'quick':2347 'radii':1796 'radius':201,328,994,1033,1078,1108,1165,1233,1302,1358,1394,1602,1623,1864,1926,2202,2339,2467,2496,2526,2611,2666 'rather':922 'ratio':2313 'read':924 'readabl':149 'refer':7,2349,2649 'relax':863 'reli':1245,1598 'rem':759,772,797,808,821,847,860 'reserv':1441 'respons':2104 'restraint':92 'rgb':1003,1750 'rgba':271,544,560,576,1085,1113,1176,1688,1704,1719,1737,2396,2529,2616,2702 'ride':1289,1380 'rider':234 'right':1416,1526 'ring':1002,1051,1250,1749 'role':382,747,956 'room':1608 'round':1981 'row':1369 'rule':675 'san':112,312,692,707,745,2027 'sans-serif':111,311,691,706,2026 'scale':1470,1624,2272,2304 'scan':171,921 'scene':231,1313 'screen':2300,2318 'scroll':1135,2295,2632 'scroll-to-top':1134,2631 'secondari':493,587,800,1020,1060,1952,2374,2749 'secondary/filter':477 'section':254,619,767,777,801,1318,1332,1498,1510,1528,1552,1606,1610,1617,1684,1830,2321,2415 'see':1425 'selector':208,1093 'separ':523,1569,1791 'serif':113,313,693,708,2017,2028 'serv':38,948,2212 'shadow':270,345,540,542,558,582,672,1084,1112,1162,1175,1600,1676,1762,1766,1774,1813,1816,1834,1891,2002,2005,2395,2528,2615,2698,2701,2713 'shape':195,213,317,1278,1373,1872,1992,2742 'share':210 'sharp':1625 'shift':1039,1046,1129,2327,2625 'side':1420,1422,2147,2149,2250,2252 'side-by-sid':2146,2249 'signatur':104 'singl':1538,2116,2241,2290 'single-column':1537 'site':249 'size':749,944,2342 'skill' 'skill-design-md-uber' 'slight':146,229,565,1125,1321 'small':803,854,2112,2131,2153 'smaller':2299,2317 'soft':344,1890 'soften':1920,2087 'softer':147 'solid':662,1223,1677,2055 'source-galyarderlabs' 'space':350,937,1238,1465,1500,1580,1597,1614 'spacious':2033 'spare':534 'specifi':2664 'speed':173 'split':1409,1520,2169,2235 'spread':1744 'squar':117,733,1628 'square-proport':732 'stack':1817,2118,2126,2239,2255,2267,2289 'standard':549,595,838,1168,1186,1236,1247,1352,1634,1696,2124 'stark':55,334,1856 'startup':82 'state':436,443,585,590,1244,1396,1747,2390 'steril':78 'sticki':1252 'store':2330 'strategi':2222 'strict':955,1973,2071,2651 'stroke':1164 'stronger':566 'structur':531,1770 'style':978,1320,1907 'styliz':230,1322,2735 'sub':792 'sub-head':791 'substitut':729 'subtitl':2439 'subtl':279,458,1685,2013 'surfac':418,428,613,626,659,1056,2051,2211 'system':6,13,160,247,631,657,685,700,721,1466,1579 'system-ui':684,699,720 'tablet':2130,2141,2144 'tactil':216 'tap':2196 'target':2172,2209,2218 'tertiari':512,2379 'text':397,422,430,488,494,513,599,828,840,867,890,940,946,987,1026,1071,1102,1207,1213,1392,1403,1459,1523,1683,1945,2063,2237,2243,2361,2368,2375,2380,2436,2465,2489,2507,2574 'text-transform':939 'text/cta':1411 'theme':17 'thin':527 'thumb':218,2195 'thumb-friend':217 'tight':762,775,786,902,1593 'time':2647 'titl':780,814,2537 'togeth':155 'toggl':1095,1295,2233 'tone':69,299,2739 'tool':1771 'top':1137,1253,1377,2634 'top-level':1376 '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':2171,2217 'transform':941,1122 'transit':165,665,1578 'transit-system':1577 'translatey':1123,1727 'treatment':932,1308,1670 'trip':1443 'true':410,499,1844 'truli':179 'ts':1841 'two':953,1417,2134 'two-column':2133 'type':931 'typefac':105,715 'typograph':159 'typographi':674,926,2022,2121 'uber':4,11,14,19,176,225,384,632,984,1027,1072,1103,1214,1259,1274,1292,1383,1440,1562,1764,1859,1908,1969,2020,2038,2352,2371,2406,2433,2456,2486,2501,2566,2655,2678,2722 'ubermov':106,122,305,680,710,737,756,769,781,794,805,873,957,1879,2060,2425,2539,2576,2686 'ubermovetext':138,307,683,696,712,818,831,844,857,886,962,1266,1936,2065,2446,2509,2551,2589,2691 'ui':303,686,695,701,722,816,827,889,970,1944,1967 'ultra':485 'ultra-light':484 'unapologet':134 'uncompromis':411 'underlin':602,628 'unit':1468 'univers':34 'unmiss':1019 'unmistak':224 'use':183,266,324,391,423,533,603,614,719,891,909,1053,1201,1333,1351,1630,1671,1765,1843,1860,1887,1913,1935,1980,2016,2045,2074,2432,2508,2629,2654,2699 'vertic':1499,1613,2182,2256 'vibe':1330 'viewport':1555 'virtual':65,295 'visibl':1229,1899 'visual':16,649,897,1525,2245 'warm':228,329,505,1309,1324,1449,1914,2731,2738 'warmth':454 'weight':128,153,750,877,900,1271,1938,2447,2512,2542,2579 'whisper':102,343,1889,2012,2700 'whisper-soft':342,1888 'whisper-subtl':2011 'white':33,62,252,292,414,440,462,608,989,1021,1024,1100,1144,1147,1219,1256,1402,1458,1849,1951,1975,2094,2358,2365,2370,2418,2464,2506,2520,2571,2594,2607,2748 'whitespac':1557,1564,2037 'width':1341,1515,1536,1551,2108,2168,2266 'within':1327,1616,2306 'without':44,281,453 'wordmark/icon':1260","prices":[{"id":"2b0c4575-be6d-42e4-a7ab-70e93ba0d0f2","listingId":"9b9882fd-df6b-49b9-9cc7-9ca6b259c33c","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:48.697Z"}],"sources":[{"listingId":"9b9882fd-df6b-49b9-9cc7-9ca6b259c33c","source":"github","sourceId":"galyarderlabs/galyarder-framework/design-md-uber","sourceUrl":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-uber","isPrimary":false,"firstSeenAt":"2026-05-10T01:06:48.697Z","lastSeenAt":"2026-05-18T19:07:49.677Z"}],"details":{"listingId":"9b9882fd-df6b-49b9-9cc7-9ca6b259c33c","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"galyarderlabs","slug":"design-md-uber","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":"3b6a452aafcbdbd7901c7a5292040ea1376922e2","skill_md_path":"skills/design-md-uber/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-uber"},"layout":"multi","source":"github","category":"galyarder-framework","frontmatter":{"name":"design-md-uber","description":"Design system reference for design md uber."},"skills_sh_url":"https://skills.sh/galyarderlabs/galyarder-framework/design-md-uber"},"updatedAt":"2026-05-18T19:07:49.677Z"}}