{"id":"8daacea0-ee19-412e-8942-eb108751e2ce","shortId":"AW7G92","kind":"skill","title":"design-md-raycast","tagline":"Design system reference for design md raycast.","description":"# Design System: Raycast\n\n## 1. Visual Theme & Atmosphere\n\nRaycast's marketing site feels like the dark interior of a precision instrument  a Swiss watch case carved from obsidian. The background isn't just dark, it's an almost-black blue-tint (`#07080a`) that creates a sense of being inside a macOS native application rather than a website. Every surface, every border, every shadow is calibrated to evoke the feeling of a high-performance desktop utility: fast, minimal, trustworthy.\n\nThe signature move is the layered shadow system borrowed from macOS window chrome: multi-layer box-shadows with inset highlights that simulate physical depth, as if cards and buttons are actual pressed or raised glass elements on a dark desk. Combined with Raycast Red (`#FF6363`)  deployed almost exclusively in the hero's iconic diagonal stripe pattern  the palette creates a brand that reads as \"powerful tool with personality.\" The red doesn't dominate; it punctuates.\n\nInter is used everywhere  headings, body, buttons, captions  with extensive OpenType features (`calt`, `kern`, `liga`, `ss03`) creating a consistent, readable typographic voice. The positive letter-spacing (0.2px0.4px on body text) is unusual for a dark UI and gives the text an airy, breathable quality that counterbalances the dense, dark surfaces. GeistMono appears for code elements, reinforcing the developer-tool identity.\n\n**Key Characteristics:**\n- Near-black blue-tinted background (`#07080a`)  not pure black, subtly blue-shifted\n- macOS-native shadow system with multi-layer inset highlights simulating physical depth\n- Raycast Red (`#FF6363`) as a punctuation color  hero stripes, not pervasive\n- Inter with positive letter-spacing (0.2px) for an airy, readable dark-mode experience\n- Radix UI component primitives powering the interaction layer\n- Subtle rgba white borders (0.060.1 opacity) for containment on dark surfaces\n- Keyboard shortcut styling with gradient key caps and heavy shadows\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Near-Black Blue** (`#07080a`): Primary page background  the foundational void with a subtle blue-cold undertone\n- **Pure White** (`#ffffff`): Primary heading text, high-emphasis elements\n- **Raycast Red** (`#FF6363` / `hsl(0, 100%, 69%)`): Brand accent  hero stripes, danger states, critical highlights\n\n### Secondary & Accent\n- **Raycast Blue** (`hsl(202, 100%, 67%)` / ~`#55b3ff`): Interactive accent  links, focus states, selected items\n- **Raycast Green** (`hsl(151, 59%, 59%)` / ~`#5fc992`): Success states, positive indicators\n- **Raycast Yellow** (`hsl(43, 100%, 60%)` / ~`#ffbc33`): Warning accents, highlights\n- **Blue Transparent** (`hsla(202, 100%, 67%, 0.15)`): Blue tint overlay for interactive surfaces\n- **Red Transparent** (`hsla(0, 100%, 69%, 0.15)`): Red tint overlay for danger/error surfaces\n\n### Surface & Background\n- **Deep Background** (`#07080a`): Page canvas, the darkest surface\n- **Surface 100** (`#101111`): Elevated surface, card backgrounds\n- **Key Start** (`#121212`): Keyboard key gradient start\n- **Key End** (`#0d0d0d`): Keyboard key gradient end\n- **Card Surface** (`#1b1c1e`): Badge backgrounds, tag fills, elevated containers\n- **Button Foreground** (`#18191a`): Dark surface for button text on light backgrounds\n\n### Neutrals & Text\n- **Near White** (`#f9f9f9` / `hsl(240, 11%, 96%)`): Primary body text, high-emphasis content\n- **Light Gray** (`#cecece` / `#cdcdce`): Secondary body text, descriptions\n- **Silver** (`#c0c0c0`): Tertiary text, subdued labels\n- **Medium Gray** (`#9c9c9d`): Link default color, secondary navigation\n- **Dim Gray** (`#6a6b6c`): Disabled text, low-emphasis labels\n- **Dark Gray** (`#434345`): Muted borders, inactive navigation links\n- **Border** (`hsl(195, 5%, 15%)` / ~`#252829`): Standard border color for cards and dividers\n- **Dark Border** (`#2f3031`): Separator lines, table borders\n\n### Semantic & Accent\n- **Error Red** (`hsl(0, 100%, 69%)`): Error states, destructive actions\n- **Success Green** (`hsl(151, 59%, 59%)`): Success confirmations, positive states\n- **Warning Yellow** (`hsl(43, 100%, 60%)`): Warnings, attention-needed states\n- **Info Blue** (`hsl(202, 100%, 67%)`): Informational highlights, links\n\n### Gradient System\n- **Keyboard Key Gradient**: Linear gradient from `#121212` (top) to `#0d0d0d` (bottom)  simulates physical key depth\n- **Warm Glow**: `rgba(215, 201, 175, 0.05)` radial spread  subtle warm ambient glow behind featured elements\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `Inter`  humanist sans-serif, used everywhere. Fallbacks: `Inter Fallback`, system sans-serif\n- **System**: `SF Pro Text`  Apple system font for select macOS-native UI elements. Fallbacks: `SF Pro Icons`, `Inter`, `Inter Fallback`\n- **Monospace**: `GeistMono`  Vercel's monospace font for code elements. Fallbacks: `ui-monospace`, `SFMono-Regular`, `Roboto Mono`, `Menlo`, `Monaco`\n- **OpenType features**: `calt`, `kern`, `liga`, `ss03` enabled globally; `ss02`, `ss08` on display text; `liga` disabled (`\"liga\" 0`) on hero headings\n\n### Hierarchy\n\n| Role | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|--------|-------------|----------------|-------|\n| Display Hero | 64px | 600 | 1.10 | 0px | OpenType: liga 0, ss02, ss08 |\n| Section Display | 56px | 400 | 1.17 | 0.2px | OpenType: calt, kern, liga, ss03 |\n| Section Heading | 24px | 500 | normal | 0.2px | OpenType: calt, kern, liga, ss03 |\n| Card Heading | 22px | 400 | 1.15 | 0px | OpenType: calt, kern, liga, ss03 |\n| Sub-heading | 20px | 500 | 1.60 | 0.2px | Relaxed line-height for readability |\n| Body Large | 18px | 400 | 1.15 | 0.2px | OpenType: calt, kern, liga, ss03 |\n| Body | 16px | 500 | 1.60 | 0.2px | Primary body text, relaxed rhythm |\n| Body Tight | 16px | 400 | 1.15 | 0.1px | UI labels, compact contexts |\n| Button | 16px | 600 | 1.15 | 0.3px | Semibold, slightly wider tracking |\n| Nav Link | 16px | 500 | 1.40 | 0.3px | Links in navigation |\n| Caption | 14px | 500 | 1.14 | 0.2px | Small labels, metadata |\n| Caption Bold | 14px | 600 | 1.40 | 0px | Emphasized captions |\n| Small | 12px | 600 | 1.33 | 0px | Badges, tags, micro-labels |\n| Small Link | 12px | 400 | 1.50 | 0.4px | Footer links, fine print |\n| Code | 14px (GeistMono) | 500 | 1.60 | 0.3px | Code blocks, technical content |\n| Code Small | 12px (GeistMono) | 400 | 1.60 | 0.2px | Inline code, terminal output |\n\n### Principles\n- **Positive tracking on dark**: Unlike most dark UIs that use tight or neutral letter-spacing, Raycast applies +0.2px to +0.4px  creating an airy, readable feel that compensates for the dark background\n- **Weight 500 as baseline**: Most body text uses medium weight (500), not regular (400)  subtle extra heft improves legibility on dark surfaces\n- **Display restraint**: Hero text at 64px/600 is confident but not oversized  Raycast avoids typographic spectacle in favor of functional elegance\n- **OpenType everywhere**: `ss03` (stylistic set 3) is enabled globally across Inter, giving the typeface a slightly more geometric, tool-like quality\n\n## 4. Component Stylings\n\n### Buttons\n- **Primary Pill**: Transparent background, white text, pill shape (86px radius), multi-layer inset shadow (`rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset`). Hover: opacity 0.6\n- **Secondary Button**: Transparent background, white text, 6px radius, `1px solid rgba(255, 255, 255, 0.1)` border, subtle drop shadow (`rgba(0, 0, 0, 0.03) 0px 7px 3px`). Hover: opacity 0.6\n- **Ghost Button**: No background or border, gray text (`#6a6b6c`), 86px radius, same inset shadow. Hover: opacity 0.6, text brightens to white\n- **CTA (Download)**: Semi-transparent white background (`hsla(0, 0%, 100%, 0.815)`), dark text (`#18191a`), pill shape. Hover: full white background (`hsl(0, 0%, 100%)`)\n- **Transition**: All buttons use opacity transition for hover rather than background-color change  a signature Raycast interaction pattern\n\n### Cards & Containers\n- **Standard Card**: `#101111` surface, `1px solid rgba(255, 255, 255, 0.06)` border, 12px16px border-radius\n- **Elevated Card**: Ring shadow `rgb(27, 28, 30) 0px 0px 0px 1px` outer + `rgb(7, 8, 10) 0px 0px 0px 1px inset` inner  creates a double-ring containment\n- **Feature Card**: 16px20px border-radius, subtle warm glow (`rgba(215, 201, 175, 0.05) 0px 0px 20px 5px`) behind hero elements\n- **Hover**: Cards brighten slightly via border opacity increase or subtle shadow enhancement\n\n### Inputs & Forms\n- Dark input fields with `#07080a` background, `1px solid rgba(255, 255, 255, 0.08)` border, 8px border-radius\n- Focus state: Border brightens, blue glow (`hsla(202, 100%, 67%, 0.15)`) ring appears\n- Text: `#f9f9f9` input color, `#6a6b6c` placeholder\n- Labels: `#9c9c9d` at 14px weight 500\n\n### Navigation\n- **Top nav**: Dark background blending with page, white text links at 16px weight 500\n- **Nav links**: Gray text (`#9c9c9d`)  white on hover, underline decoration on hover\n- **CTA button**: Semi-transparent white pill at nav end\n- **Mobile**: Collapses to hamburger, maintains dark theme\n- **Sticky**: Nav fixed at top with subtle border separator\n\n### Image Treatment\n- **Product screenshots**: macOS window chrome style  rounded corners (12px), deep shadows simulating floating windows\n- **Full-bleed sections**: Dark screenshots blend seamlessly into the dark background\n- **Hero illustration**: Diagonal stripe pattern in Raycast Red  abstract, geometric, brand-defining\n- **App UI embeds**: Showing actual Raycast command palette and extensions  product as content\n\n### Keyboard Shortcut Keys\n- **Key cap styling**: Gradient background (`#121212`  `#0d0d0d`), heavy multi-layer shadow (`rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px` + inset shadows), creating realistic physical key appearance\n- Border-radius: 4px6px for individual keys\n\n### Badges & Tags\n- **Neutral badge**: `#1b1c1e` background, white text, 6px radius, 14px font at weight 500, `0px 6px` padding\n- Compact, pill-like treatment for categorization\n\n## 5. Layout Principles\n\n### Spacing System\n- **Base unit**: 8px\n- **Scale**: 1px, 2px, 3px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px\n- **Section padding**: 80px120px vertical between major sections\n- **Card padding**: 16px32px internal spacing\n- **Component gaps**: 8px16px between related elements\n\n### Grid & Container\n- **Max width**: ~1200px container (breakpoint at 1204px), centered\n- **Column patterns**: Single-column hero, 23 column feature grids, full-width showcase sections\n- **App showcase**: Product UI presented in centered window frames\n\n### Whitespace Philosophy\n- **Dramatic negative space**: Sections float in vast dark void, creating cinematic pacing between features\n- **Dense product, sparse marketing**: The product UI screenshots are information-dense, but the surrounding marketing copy uses minimal text with generous spacing\n- **Vertical rhythm**: Consistent 24px32px gaps between elements within sections\n\n### Border Radius Scale\n- **2px3px**: Micro-elements, code spans, tiny indicators\n- **4px5px**: Keyboard keys, small interactive elements\n- **6px**: Buttons, badges, tags  the workhorse radius\n- **8px**: Input fields, inline components\n- **9px11px**: Images, medium containers\n- **12px**: Standard cards, product screenshots\n- **16px**: Large cards, feature sections\n- **20px**: Hero cards, prominent containers\n- **86px+**: Pill buttons, nav CTAs  full pill shape\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Level 0 (Void) | No shadow, `#07080a` surface | Page background |\n| Level 1 (Subtle) | `rgba(0, 0, 0, 0.28) 0px 1.189px 2.377px` | Minimal lift, inline elements |\n| Level 2 (Ring) | `rgb(27, 28, 30) 0px 0px 0px 1px` outer + `rgb(7, 8, 10) 0px 0px 0px 1px inset` inner | Card containment, double-ring technique |\n| Level 3 (Button) | `rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset` + `rgba(255, 255, 255, 0.25) 0px 0px 0px 1px` + `rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset` | macOS-native button press  white highlight top, dark inset bottom |\n| Level 4 (Key) | 5-layer shadow stack with inset press effects | Keyboard shortcut key caps  physical 3D appearance |\n| Level 5 (Floating) | `rgba(0, 0, 0, 0.5) 0px 0px 0px 2px` + `rgba(255, 255, 255, 0.19) 0px 0px 14px` + insets | Command palette, floating panels  heavy depth with glow |\n\n### Shadow Philosophy\nRaycast's shadow system is the most macOS-native on the web. Multi-layer shadows combine:\n- **Outer rings** for containment (replacing traditional borders)\n- **Inset top highlights** (`rgba(255, 255, 255, 0.050.25)`) simulating light source from above\n- **Inset bottom darks** (`rgba(0, 0, 0, 0.2)`) simulating shadow underneath\n- The effect is physical: elements feel like glass or brushed metal, not flat rectangles\n\n### Decorative Depth\n- **Warm glow**: `rgba(215, 201, 175, 0.05) 0px 0px 20px 5px` behind featured elements  a subtle warm aura on the cold dark canvas\n- **Blue info glow**: `rgba(0, 153, 255, 0.15)` for interactive state emphasis\n- **Red danger glow**: `rgba(255, 99, 99, 0.15)` for error/destructive state emphasis\n\n## 7. Do's and Don'ts\n\n### Do\n- Use `#07080a` (not pure black) as the background  the blue-cold tint is essential to the Raycast feel\n- Apply positive letter-spacing (+0.2px) on body text  this is deliberately different from most dark UIs\n- Use multi-layer shadows with inset highlights for interactive elements  the macOS-native depth is signature\n- Keep Raycast Red (`#FF6363`) as punctuation, not pervasive  reserve it for hero moments and error states\n- Use `rgba(255, 255, 255, 0.06)` borders for card containment  barely visible, structurally essential\n- Apply weight 500 as the body text baseline  medium weight improves dark-mode legibility\n- Use pill shapes (86px+ radius) for primary CTAs, rectangular shapes (6px8px) for secondary actions\n- Enable OpenType features `calt`, `kern`, `liga`, `ss03` on all Inter text\n- Use opacity transitions (hover: opacity 0.6) for button interactions, not color changes\n\n### Don't\n- Use pure black (`#000000`) as the background  the blue tint differentiates Raycast from generic dark themes\n- Apply negative letter-spacing on body text  Raycast deliberately uses positive spacing for readability\n- Use Raycast Blue as the primary accent for everything  blue is for interactive/info, red is the brand color\n- Create single-layer flat shadows  the multi-layer inset system is core to the macOS-native aesthetic\n- Use regular weight (400) for body text when 500 is available  the extra weight prevents dark-mode text from feeling thin\n- Mix warm and cool borders  stick to the cool gray (`hsl(195, 5%, 15%)`) border palette\n- Apply heavy drop shadows without inset companions  shadows always come in pairs (outer + inset)\n- Use decorative elements, gradients, or colorful backgrounds  the dark void is the stage, content is the performer\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile | <600px | Single column, stacked cards, hamburger nav, hero text reduces to ~40px |\n| Small Tablet | 600px768px | 2-column grid begins, nav partially visible |\n| Tablet | 768px1024px | 23 column features, nav expanding, screenshots scale |\n| Desktop | 1024px1200px | Full layout, all nav links visible, 64px hero display |\n| Large Desktop | >1200px | Max-width container centered, generous side margins |\n\n### Touch Targets\n- Pill buttons: 86px radius with 20px padding  well above 44px minimum\n- Secondary buttons: 8px padding minimum, but border provides visual target expansion\n- Nav links: 16px text with surrounding padding for accessible touch targets\n\n### Collapsing Strategy\n- **Navigation**: Full horizontal nav  hamburger at mobile with slide-out menu\n- **Hero**: 64px display  48px  36px across breakpoints\n- **Feature grids**: 3-column  2-column  single-column stack\n- **Product screenshots**: Scale within containers, maintaining macOS window chrome proportions\n- **Keyboard shortcut displays**: Simplify or hide on mobile where keyboard shortcuts are irrelevant\n\n### Image Behavior\n- Product screenshots scale responsively within fixed-ratio containers\n- Hero diagonal stripe pattern scales proportionally\n- macOS window chrome rounded corners maintained at all sizes\n- No lazy-loading artifacts  images are critical to the product narrative\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Primary Background: Near-Black Blue (`#07080a`)\n- Primary Text: Near White (`#f9f9f9`)\n- Brand Accent: Raycast Red (`#FF6363`)\n- Interactive Blue: Raycast Blue (`hsl(202, 100%, 67%)` / ~`#55b3ff`)\n- Secondary Text: Medium Gray (`#9c9c9d`)\n- Card Surface: Surface 100 (`#101111`)\n- Border: Dark Border (`hsl(195, 5%, 15%)` / ~`#252829`)\n\n### Example Component Prompts\n- \"Create a hero section on #07080a background with 64px Inter heading (weight 600, line-height 1.1), near-white text (#f9f9f9), and a semi-transparent white pill CTA button (hsla(0,0%,100%,0.815), 86px radius, dark text #18191a)\"\n- \"Design a feature card with #101111 background, 1px solid rgba(255,255,255,0.06) border, 16px border-radius, double-ring shadow (rgb(27,28,30) 0px 0px 0px 1px outer), 22px Inter heading, and #9c9c9d body text\"\n- \"Build a navigation bar on dark background (#07080a), Inter links at 16px weight 500 in #9c9c9d, hover to white, and a translucent white pill button at the right end\"\n- \"Create a keyboard shortcut display with key caps using gradient background (#121212#0d0d0d), 5-layer shadow for physical depth, 4px radius, Inter 12px weight 600 text\"\n- \"Design an alert card with #101111 surface, Raycast Red (#FF6363) left border accent, translucent red glow (hsla(0,100%,69%,0.15)), white heading, and #cecece description text\"\n\n### Iteration Guide\nWhen refining existing screens generated with this design system:\n1. Check the background is `#07080a` not pure black  the blue tint is critical\n2. Verify letter-spacing is positive (+0.2px) on body text  negative spacing breaks the Raycast aesthetic\n3. Ensure shadows have both outer and inset layers  single-layer shadows look flat and wrong\n4. Confirm Inter has OpenType features `calt`, `kern`, `liga`, `ss03` enabled\n5. Test that hover states use opacity transitions (0.6) not color swaps  this is a core interaction pattern","tags":["design","raycast","galyarder","framework","galyarderlabs","agent-skills","agentic-framework","agents","ai-agents","automation","claude-code-plugin","codex-skills"],"capabilities":["skill","source-galyarderlabs","skill-design-md-raycast","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-raycast","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,244 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:48.538Z","embedding":null,"createdAt":"2026-05-10T01:06:47.387Z","updatedAt":"2026-05-18T19:07:48.538Z","lastSeenAt":"2026-05-18T19:07:48.538Z","tsv":"'+0.2':915,1893,2583 '+0.4':918 '-1':1685 '0':356,420,561,708,729,1047,1048,1049,1086,1087,1100,1101,1370,1371,1372,1604,1616,1617,1618,1680,1681,1682,1723,1724,1725,1792,1793,1794,1842,2421,2422,2541 '0.03':1050 '0.05':621,1182,1664,1821 '0.050.25':1782 '0.06':1134,1945,2443 '0.060.1':302 '0.08':1216 '0.1':809,1018,1041 '0.15':410,423,1232,1845,1857,2544 '0.19':1735 '0.2':196,280,737,749,773,786,797,839,890,1683,1795 '0.25':1674 '0.28':1619 '0.3':819,830,878 '0.4':867,1373 '0.5':1377,1726 '0.6':1026,1056,1073,1999,2630 '0.815':1089,2424 '000000':2011 '07080a':54,241,328,434,1208,1608,1870,2348,2394,2476,2567 '0d0d0d':456,609,1363,2510 '0px':726,761,849,856,1019,1021,1022,1051,1148,1149,1150,1157,1158,1159,1183,1184,1374,1410,1620,1636,1637,1638,1645,1646,1647,1665,1667,1668,1675,1676,1677,1684,1687,1688,1727,1728,1729,1736,1737,1822,1823,2457,2458,2459 '1':15,1613,2562 '1.1':2405 '1.10':725 '1.14':838 '1.15':760,785,808,818 '1.17':736 '1.189':1621 '1.33':855 '1.40':829,848 '1.5':1375 '1.50':866 '1.60':772,796,877,889 '10':1156,1644 '100':357,373,398,408,421,441,562,582,593,1088,1102,1230,2365,2376,2423,2542 '101111':442,1126,2377,2435,2529 '1024px1200px':2187 '10px':1434 '11':488 '1200px':1463,2199 '1204px':1467 '121212':449,606,1362,2509 '12px':853,864,886,1310,1435,1574,2520 '12px16px':1136 '14px':836,846,874,1244,1405,1738 '15':540,2112,2384 '151':386,571 '153':1843 '16px':794,806,816,827,1259,1436,1579,2234,2445,2480 '16px20px':1171 '16px32px':1450 '175':620,1181,1820 '18191a':472,1092,2429 '18px':783 '195':538,2110,2382 '1b1c1e':463,1399 '1px':1020,1035,1128,1151,1160,1210,1429,1639,1648,1666,1678,2437,2460 '2':319,1630,2170,2268,2576 '2.377':1623 '2.5':1379 '201':619,1180,1819 '202':372,407,592,1229,2364 '20px':770,1185,1437,1584,1824,2215 '215':618,1179,1818 '22px':758,2462 '23':1475,2179 '240':487 '24px':746,1438 '24px32px':1535 '252829':541,2385 '255':1015,1016,1017,1038,1039,1040,1131,1132,1133,1213,1214,1215,1661,1662,1663,1671,1672,1673,1732,1733,1734,1779,1780,1781,1844,1854,1942,1943,1944,2440,2441,2442 '27':1145,1633,2454 '28':1146,1634,2455 '2f3031':551 '2px':1430,1730 '2px3px':1544 '3':631,978,1658,2266,2594 '30':1147,1635,2456 '32px':1439 '36px':2261 '3d':1717 '3px':1053,1431 '4':995,1702,2611 '400':735,759,784,807,865,888,944,2080 '40px':1440,2166 '43':397,581 '434345':530 '44px':2219 '48px':2260 '4px':1432,2517 '4px5px':1552 '4px6px':1391 '5':539,1420,1704,1720,2111,2383,2511,2622 '500':747,771,795,828,837,876,932,941,1246,1261,1409,1956,2085,2482 '55b3ff':375,2367 '56px':734 '59':387,388,572,573 '5fc992':389 '5px':1186,1825 '6':1597 '60':399,583 '600':724,817,847,854,2401,2522 '600px':2155 '600px768px':2169 '64px':723,2194,2258,2397 '64px/600':958 '67':374,409,594,1231,2366 '69':358,422,563,2543 '6a6b6c':521,1065,1239 '6px':1033,1403,1411,1558 '6px8px':1979 '7':1154,1642,1862 '768px1024px':2178 '7px':1052 '8':1155,1643,2146 '80px120px':1443 '86px':1007,1066,1589,1972,2212,2425 '8px':1218,1427,1433,1565,2223 '8px16px':1455 '9':2335 '96':489 '99':1855,1856 '9c9c9d':513,1242,1266,2372,2466,2484 '9px11px':1570 'abstract':1336 'accent':360,368,377,402,557,2045,2355,2536 'access':2240 'across':982,2262 'action':567,1982 'actual':124,1345 'aesthet':2076,2593 'agent':2336 'airi':212,284,922 'alert':2526 'almost':49,140 'almost-black':48 'alway':2123 'ambient':626 'app':1341,1484 'appear':222,1234,1387,1718 'appl':655 'appli':914,1888,1954,2024,2115 'applic':65 'artifact':2327 'atmospher':18 'attent':586 'attention-need':585 'aura':1832 'avail':2087 'avoid':965 'background':40,240,331,431,433,446,465,480,930,1002,1030,1060,1084,1098,1114,1209,1251,1327,1361,1400,1611,1876,2014,2135,2343,2395,2436,2475,2508,2565 'background-color':1113 'badg':464,857,1395,1398,1560 'bar':2472 'bare':1950 'base':1425 'baselin':934,1961 'begin':2173 'behavior':2148,2298 'behind':628,1187,1826 'black':50,236,244,326,1873,2010,2346,2570 'bleed':1318 'blend':1252,1322 'block':881 'blue':52,238,247,327,339,370,404,411,590,1226,1838,1879,2016,2041,2048,2347,2360,2362,2572 'blue-cold':338,1878 'blue-shift':246 'blue-tint':51,237 'bodi':174,199,491,502,781,793,800,804,936,1896,1959,2030,2082,2467,2586 'bold':845 'border':73,301,532,536,543,550,555,1042,1062,1135,1138,1173,1195,1217,1220,1224,1298,1389,1541,1774,1946,2103,2113,2227,2378,2380,2444,2447,2535 'border-radius':1137,1172,1219,1388,2446 'borrow':100 'bottom':610,1700,1789 'box':109 'box-shadow':108 'brand':154,359,1339,2055,2354 'brand-defin':1338 'break':2590 'breakpoint':1465,2149,2263 'breathabl':213 'brighten':1075,1192,1225 'brush':1808 'build':2469 'button':122,175,470,476,815,998,1028,1058,1105,1275,1559,1591,1659,1693,2001,2211,2222,2419,2493 'c0c0c0':506 'calibr':77 'calt':181,694,740,752,763,789,1986,2617 'canva':436,1837 'cap':315,1358,1715,2505 'caption':176,835,844,851 'card':120,445,461,546,756,1122,1125,1141,1170,1191,1448,1576,1581,1586,1651,1948,2159,2373,2433,2527 'carv':36 'case':35 'categor':1419 'cdcdce':500 'cecec':499,2548 'center':1468,1490,2204 'chang':1116,2005,2153 'characterist':233 'check':2563 'chrome':104,1306,2282,2316 'cinemat':1505 'code':224,679,873,880,884,893,1548 'cold':340,1835,1880 'collaps':1285,2243 'color':269,320,516,544,1115,1238,2004,2056,2134,2340,2632 'column':1469,1473,1476,2157,2171,2180,2267,2269,2272 'combin':134,1767 'come':2124 'command':1347,1740 'compact':813,1413 'companion':2121 'compens':926 'compon':292,996,1453,1569,2387 'confid':960 'confirm':575,2612 'consist':187,1534 'contain':305,469,1123,1168,1460,1464,1573,1588,1652,1771,1949,2203,2278,2307 'content':496,883,1353,2142 'context':814 'cool':2102,2107 'copi':1525 'core':2070,2637 'corner':1309,2318 'counterbal':216 'creat':56,152,185,920,1163,1383,1504,2057,2389,2498 'critic':365,2330,2575 'cta':1078,1274,2418 'ctas':1593,1976 'danger':363,1851 'danger/error':428 'dark':26,44,132,205,219,287,307,473,528,549,900,903,929,951,1090,1204,1250,1289,1320,1326,1502,1698,1790,1836,1904,1966,2022,2093,2137,2379,2427,2474 'dark-mod':286,1965,2092 'darkest':438 'decor':1271,1813,2130 'deep':432,1311 'default':515 'defin':1340 'deliber':1900,2033 'dens':218,1509,1520 'deploy':139 'depth':117,262,614,1598,1745,1814,1921,2516 'descript':504,2549 'design':2,5,9,12,2430,2524,2560 'design-md-raycast':1 'desk':133 'desktop':87,2186,2198 'destruct':566 'develop':229 'developer-tool':228 'diagon':147,1330,2309 'differ':1901 'differenti':2018 'dim':519 'disabl':522,706 'display':703,721,733,953,2196,2259,2286,2502 'divid':548 'doesn':164 'domin':166 'doubl':1166,1654,2450 'double-r':1165,1653,2449 'download':1079 'dramat':1495 'drop':1044,2117 'effect':1711,1800 'eleg':972 'element':129,225,351,630,664,680,1189,1458,1538,1547,1557,1628,1803,1828,1916,2131 'elev':443,468,1140,1599 'emb':1343 'emphas':850 'emphasi':350,495,526,1849,1861 'enabl':698,980,1983,2621 'end':455,460,1283,2497 'enhanc':1201 'ensur':2595 'error':558,564,1938 'error/destructive':1859 'essenti':1883,1953 'everi':70,72,74 'everyth':2047 'everywher':172,643,974 'evok':79 'exampl':2386 'exclus':141 'exist':2555 'expand':2183 'expans':2231 'experi':289 'extens':178,1350 'extra':946,2089 'f9f9f9':485,1236,2353,2410 'fallback':644,646,665,671,681 'famili':635 'fast':89 'favor':969 'featur':180,629,693,1169,1477,1508,1582,1827,1985,2181,2264,2432,2616 'feel':23,81,924,1804,1887,2097 'ff6363':138,265,354,1927,2358,2533 'ffbc33':400 'ffffff':344 'field':1206,1567 'fill':467 'fine':871 'fix':1293,2305 'fixed-ratio':2304 'flat':1811,2061,2608 'float':1314,1499,1721,1742 'focus':379,1222 'font':634,657,677,1406 'footer':869 'foreground':471 'form':1203 'foundat':333 'frame':1492 'full':1096,1317,1480,1594,2188,2246 'full-ble':1316 'full-width':1479 'function':971 'gap':1454,1536 'geistmono':221,673,875,887 'generat':2557 'generic':2021 'generous':1530,2205 'geometr':990,1337 'ghost':1057 'give':208,984 'glass':128,1806 'global':699,981 'glow':616,627,1177,1227,1747,1816,1840,1852,2539 'gradient':313,452,459,598,602,604,1360,2132,2507 'gray':498,512,520,529,1063,1264,2108,2371 'green':384,569 'grid':1459,1478,2172,2265 'guid':2338,2552 'hamburg':1287,2160,2249 'head':173,346,711,745,757,769,2399,2464,2546 'heavi':317,1364,1744,2116 'heft':947 'height':717,778,2404 'hero':144,270,361,710,722,955,1188,1328,1474,1585,1935,2162,2195,2257,2308,2391 'hide':2289 'hierarchi':712 'high':85,349,494 'high-emphasi':348,493 'high-perform':84 'highlight':113,259,366,403,596,1696,1777,1913 'horizont':2247 'hover':1024,1054,1071,1095,1110,1190,1269,1273,1997,2485,2625 'hsl':355,371,385,396,486,537,560,570,580,591,1099,2109,2363,2381 'hsla':406,419,1085,1228,2420,2540 'humanist':638 'icon':146,668 'ident':231 'illustr':1329 'imag':1300,1571,2297,2328 'improv':948,1964 'inact':533 'increas':1197 'indic':393,1551 'individu':1393 'info':589,1839 'inform':595,1519 'information-dens':1518 'inlin':892,1568,1627 'inner':1162,1650 'input':1202,1205,1237,1566 'inset':112,258,1012,1023,1069,1161,1381,1649,1669,1689,1699,1709,1739,1775,1788,1912,2067,2120,2128,2601 'insid':61 'instrument':31 'inter':169,274,637,645,669,670,983,1992,2398,2463,2477,2519,2613 'interact':296,376,415,1120,1556,1847,1915,2002,2359,2638 'interactive/info':2051 'interior':27 'intern':1451 'irrelev':2296 'isn':41 'item':382 'iter':2551 'keep':1924 'kern':182,695,741,753,764,790,1987,2618 'key':232,314,447,451,454,458,601,613,1356,1357,1386,1394,1554,1703,1714,2152,2504 'keyboard':309,450,457,600,1354,1553,1712,2284,2293,2500 'label':510,527,812,842,861,1241 'larg':782,1580,2197 'layer':97,107,257,297,1011,1367,1705,1765,1909,2060,2066,2512,2602,2605 'layout':1421,2189 'lazi':2325 'lazy-load':2324 'left':2534 'legibl':949,1968 'letter':194,278,718,911,1891,2027,2579 'letter-spac':193,277,910,1890,2026,2578 'level':1600,1603,1612,1629,1657,1701,1719 'lift':1626 'liga':183,696,705,707,728,742,754,765,791,1988,2619 'light':479,497,1784 'like':24,993,1416,1805 'line':553,716,777,2403 'line-height':776,2402 'linear':603 'link':378,514,535,597,826,832,863,870,1257,1263,2192,2233,2478 'load':2326 'look':2607 'low':525 'low-emphasi':524 'maco':63,102,250,661,1304,1691,1758,1919,2074,2280,2314 'macos-n':249,660,1690,1757,1918,2073 'maintain':1288,2279,2319 'major':1446 'margin':2207 'market':21,1512,1524 'max':1461,2201 'max-width':2200 'md':3,10 'medium':511,939,1572,1962,2370 'menlo':690 'menu':2256 'metadata':843 'metal':1809 'micro':860,1546 'micro-el':1545 'micro-label':859 'minim':90,1527,1625 'minimum':2220,2225 'mix':2099 'mobil':1284,2154,2251,2291 'mode':288,1967,2094 'moment':1936 'monaco':691 'mono':689 'monospac':672,676,684 'move':94 'multi':106,256,1010,1366,1764,1908,2065 'multi-lay':105,255,1009,1365,1763,1907,2064 'mute':531 'name':2150 'narrat':2334 'nativ':64,251,662,1692,1759,1920,2075 'nav':825,1249,1262,1282,1292,1592,2161,2174,2182,2191,2232,2248 'navig':518,534,834,1247,2245,2471 'near':235,325,483,2345,2351,2407 'near-black':234,324,2344 'near-whit':2406 'need':587 'negat':1496,2025,2588 'neutral':481,909,1397 'normal':748 'note':720 'obsidian':38 'opac':303,1025,1055,1072,1107,1196,1995,1998,2628 'opentyp':179,692,727,739,751,762,788,973,1984,2615 'outer':1152,1640,1768,2127,2461,2599 'output':895 'overlay':413,426 'overs':963 'pace':1506 'pad':1412,1442,1449,2216,2224,2238 'page':330,435,1254,1610 'pair':2126 'palett':151,321,1348,1741,2114 'panel':1743 'partial':2175 'pattern':149,1121,1332,1470,2311,2639 'perform':86,2145 'person':161 'pervas':273,1931 'philosophi':1494,1749 'physic':116,261,612,1385,1716,1802,2515 'pill':1000,1005,1093,1280,1415,1590,1595,1970,2210,2417,2492 'pill-lik':1414 'placehold':1240 'posit':192,276,392,576,897,1889,2035,2582 'power':158,294 'precis':30 'present':1488 'press':125,1694,1710 'prevent':2091 'primari':323,329,345,490,636,799,999,1975,2044,2342,2349 'primit':293 'principl':896,1422 'print':872 'pro':653,667 'product':1302,1351,1486,1510,1514,1577,2274,2299,2333 'promin':1587 'prompt':2337,2388 'proport':2283,2313 'provid':2228 'punctuat':168,268,1929 'pure':243,342,1872,2009,2569 'px':281,738,750,774,787,798,810,820,831,840,868,879,891,916,919,1376,1378,1380,1622,1624,1686,1894,2584 'px0.4px':197 'qualiti':214,994 'quick':2339 'radial':622 'radius':1008,1034,1067,1139,1174,1221,1390,1404,1542,1564,1973,2213,2426,2448,2518 'radix':290 'rais':127 'rather':66,1111 'ratio':2306 'raycast':4,11,14,19,136,263,352,369,383,394,913,964,1119,1334,1346,1750,1886,1925,2019,2032,2040,2356,2361,2531,2592 'read':156 'readabl':188,285,780,923,2038 'realist':1384 'rectangl':1812 'rectangular':1977 'red':137,163,264,353,417,424,559,1335,1850,1926,2052,2357,2532,2538 'reduc':2164 'refer':7,2341 'refin':2554 'regular':687,943,2078 'reinforc':226 'relat':1457 'relax':775,802 'replac':1772 'reserv':1932 'respons':2147,2302 'restraint':954 'rgb':1144,1153,1632,1641,2453 'rgba':299,617,1014,1037,1046,1130,1178,1212,1369,1615,1660,1670,1679,1722,1731,1778,1791,1817,1841,1853,1941,2439 'rhythm':803,1533 'right':2496 'ring':1142,1167,1233,1631,1655,1769,2451 'roboto':688 'role':322,713 'round':1308,2317 'rule':633 'san':640,649 'sans-serif':639,648 'scale':1428,1543,2185,2276,2301,2312 'screen':2556 'screenshot':1303,1321,1516,1578,2184,2275,2300 'seamless':1323 'secondari':367,501,517,1027,1981,2221,2368 'section':732,744,1319,1441,1447,1483,1498,1540,1583,2392 'select':381,659 'semant':556 'semi':1081,1277,2414 'semi-transpar':1080,1276,2413 'semibold':821 'sens':58 'separ':552,1299 'serif':641,650 'set':977 'sf':652,666 'sfmono':686 'sfmono-regular':685 'shadow':75,98,110,252,318,1013,1045,1070,1143,1200,1312,1368,1382,1607,1706,1748,1752,1766,1797,1910,2062,2118,2122,2452,2513,2596,2606 'shape':1006,1094,1596,1971,1978 'shift':248 'shortcut':310,1355,1713,2285,2294,2501 'show':1344 'showcas':1482,1485 'side':2206 'signatur':93,1118,1923 'silver':505 'simplifi':2287 'simul':115,260,611,1313,1783,1796 'singl':1472,2059,2156,2271,2604 'single-column':1471,2270 'single-lay':2058,2603 'site':22 'size':714,2322 'skill' 'skill-design-md-raycast' 'slide':2254 'slide-out':2253 'slight':822,988,1193 'small':841,852,862,885,1555,2167 'solid':1036,1129,1211,2438 'sourc':1785 'source-galyarderlabs' 'space':195,279,719,912,1423,1452,1497,1531,1892,2028,2036,2580,2589 'span':1549 'spars':1511 'spectacl':967 'spread':623 'ss02':700,730 'ss03':184,697,743,755,766,792,975,1989,2620 'ss08':701,731 'stack':1707,2158,2273 'stage':2141 'standard':542,1124,1575 'start':448,453 'state':364,380,391,565,577,588,1223,1848,1860,1939,2626 'stick':2104 'sticki':1291 'strategi':2244 'stripe':148,271,362,1331,2310 'structur':1952 'style':311,997,1307,1359 'stylist':976 'sub':768 'sub-head':767 'subdu':509 'subt':245 'subtl':298,337,624,945,1043,1175,1199,1297,1614,1830 'success':390,568,574 'surfac':71,220,308,416,429,430,439,440,444,462,474,952,1127,1609,2374,2375,2530 'surround':1523,2237 'swap':2633 'swiss':33 'system':6,13,99,253,599,647,651,656,1424,1753,2068,2561 'tabl':554 'tablet':2168,2177 'tag':466,858,1396,1561 'target':2209,2230,2242 'technic':882 'techniqu':1656 'termin':894 'tertiari':507 'test':2623 'text':200,210,347,477,482,492,503,508,523,654,704,801,937,956,1004,1032,1064,1074,1091,1235,1256,1265,1402,1528,1897,1960,1993,2031,2083,2095,2163,2235,2350,2369,2409,2428,2468,2523,2550,2587 'theme':17,1290,2023 'thin':2098 'tight':805,907 'tini':1550 'tint':53,239,412,425,1881,2017,2573 'tool':159,230,992 'tool-lik':991 'top':607,1248,1295,1697,1776 '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':2208,2241 'track':824,898 'tradit':1773 'transit':1103,1108,1996,2629 'transluc':2490,2537 'transpar':405,418,1001,1029,1082,1278,2415 'treatment':1301,1417,1601 'trustworthi':91 'ts':1867 'typefac':986 'typograph':189,966 'typographi':632 'ui':206,291,663,683,811,904,1342,1487,1515,1905 'ui-monospac':682 'underlin':1270 'underneath':1798 'underton':341 'unit':1426 'unlik':901 'unusu':202 'use':171,642,906,938,1106,1526,1602,1869,1906,1940,1969,1994,2008,2034,2039,2077,2129,2506,2627 'util':88 'vast':1501 'vercel':674 'verifi':2577 'vertic':1444,1532 'via':1194 'visibl':1951,2176,2193 'visual':16,2229 'voic':190 'void':334,1503,1605,2138 'warm':615,625,1176,1815,1831,2100 'warn':401,578,584 'watch':34 'web':1762 'websit':69 'weight':715,931,940,1245,1260,1408,1955,1963,2079,2090,2400,2481,2521 'well':2217 'white':300,343,484,1003,1031,1077,1083,1097,1255,1267,1279,1401,1695,2352,2408,2416,2487,2491,2545 'whitespac':1493 'wider':823 'width':1462,1481,2151,2202 'window':103,1305,1315,1491,2281,2315 'within':1539,2277,2303 'without':2119 'workhors':1563 'wrong':2610 'yellow':395,579","prices":[{"id":"46b23822-9b88-404d-92de-450eeb45fc6d","listingId":"8daacea0-ee19-412e-8942-eb108751e2ce","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:47.387Z"}],"sources":[{"listingId":"8daacea0-ee19-412e-8942-eb108751e2ce","source":"github","sourceId":"galyarderlabs/galyarder-framework/design-md-raycast","sourceUrl":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-raycast","isPrimary":false,"firstSeenAt":"2026-05-10T01:06:47.387Z","lastSeenAt":"2026-05-18T19:07:48.538Z"}],"details":{"listingId":"8daacea0-ee19-412e-8942-eb108751e2ce","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"galyarderlabs","slug":"design-md-raycast","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":"efc925eaacebdcd3c107c90c00bb8936f804d5b4","skill_md_path":"skills/design-md-raycast/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-raycast"},"layout":"multi","source":"github","category":"galyarder-framework","frontmatter":{"name":"design-md-raycast","description":"Design system reference for design md raycast."},"skills_sh_url":"https://skills.sh/galyarderlabs/galyarder-framework/design-md-raycast"},"updatedAt":"2026-05-18T19:07:48.538Z"}}