{"id":"cade3a70-b650-45f2-9c94-4986c5c74241","shortId":"TjdR33","kind":"skill","title":"design-md-revolut","tagline":"Design system reference for design md revolut.","description":"# Design System: Revolut\n\n## 1. Visual Theme & Atmosphere\n\nRevolut's website is fintech confidence distilled into pixels  a design system that communicates \"your money is in capable hands\" through massive typography, generous whitespace, and a disciplined neutral palette. The visual language is built on Aeonik Pro, a geometric grotesque that creates billboard-scale headlines at 136px with weight 500 and aggressive negative tracking (-2.72px). This isn't subtle branding; it's fintech at stadium scale.\n\nThe color system is built on a comprehensive `--rui-*` (Revolut UI) token architecture with semantic naming for every state: danger (`#e23b4a`), warning (`#ec7e00`), teal (`#00a87e`), blue (`#494fdf`), deep-pink (`#e61e49`), and more. But the marketing surface itself is remarkably restrained  near-black (`#191c1f`) and pure white (`#ffffff`) dominate, with the colorful semantic tokens reserved for the product interface, not the marketing page.\n\nWhat distinguishes Revolut is its pill-everything button system. Every button uses 9999px radius  primary dark (`#191c1f`), secondary light (`#f4f4f4`), outlined (`transparent + 2px solid`), and ghost on dark (`rgba(244,244,244,0.1) + 2px solid`). The padding is generous (14px 32px34px), creating large, confident touch targets. Combined with Inter for body text at various weights and positive letter-spacing (0.16px0.24px), the result is a design that feels both premium and accessible  banking for the modern era.\n\n**Key Characteristics:**\n- Aeonik Pro display at 136px weight 500  billboard-scale fintech headlines\n- Near-black (`#191c1f`) + white binary with comprehensive `--rui-*` semantic tokens\n- Universal pill buttons (9999px radius) with generous padding (14px 32px)\n- Inter for body text with positive letter-spacing (0.16px0.24px)\n- Rich semantic color system: blue, teal, pink, yellow, green, brown, danger, warning\n- Zero shadows detected  depth through color contrast only\n- Tight display line-heights (1.00) with relaxed body (1.501.56)\n\n## 2. Color Palette & Roles\n\n### Primary\n- **Revolut Dark** (`#191c1f`): Primary dark surface, button background, near-black text\n- **Pure White** (`#ffffff`): `--rui-color-action-label`, primary light surface\n- **Light Surface** (`#f4f4f4`): Secondary button background, subtle surface\n\n### Brand / Interactive\n- **Revolut Blue** (`#494fdf`): `--rui-color-blue`, primary brand blue\n- **Action Blue** (`#4f55f1`): `--rui-color-action-photo-header-text`, header accent\n- **Blue Text** (`#376cd5`): `--website-color-blue-text`, link blue\n\n### Semantic\n- **Danger Red** (`#e23b4a`): `--rui-color-danger`, error/destructive\n- **Deep Pink** (`#e61e49`): `--rui-color-deep-pink`, critical accent\n- **Warning Orange** (`#ec7e00`): `--rui-color-warning`, warning states\n- **Yellow** (`#b09000`): `--rui-color-yellow`, attention\n- **Teal** (`#00a87e`): `--rui-color-teal`, success/positive\n- **Light Green** (`#428619`): `--rui-color-light-green`, secondary success\n- **Green Text** (`#006400`): `--website-color-green-text`, green text\n- **Light Blue** (`#007bc2`): `--rui-color-light-blue`, informational\n- **Brown** (`#936d62`): `--rui-color-brown`, warm neutral accent\n- **Red Text** (`#8b0000`): `--website-color-red-text`, dark red text\n\n### Neutral Scale\n- **Mid Slate** (`#505a63`): Secondary text\n- **Cool Gray** (`#8d969e`): Muted text, tertiary\n- **Gray Tone** (`#c9c9cd`): `--rui-color-grey-tone-20`, borders/dividers\n\n## 3. Typography Rules\n\n### Font Families\n- **Display**: `Aeonik Pro`  geometric grotesque, no detected fallbacks\n- **Body / UI**: `Inter`  standard system sans\n- **Fallback**: `Arial` for specific button contexts\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Mega | Aeonik Pro | 136px (8.50rem) | 500 | 1.00 (tight) | -2.72px | Stadium-scale hero |\n| Display Hero | Aeonik Pro | 80px (5.00rem) | 500 | 1.00 (tight) | -0.8px | Primary hero |\n| Section Heading | Aeonik Pro | 48px (3.00rem) | 500 | 1.21 (tight) | -0.48px | Feature sections |\n| Sub-heading | Aeonik Pro | 40px (2.50rem) | 500 | 1.20 (tight) | -0.4px | Sub-sections |\n| Card Title | Aeonik Pro | 32px (2.00rem) | 500 | 1.19 (tight) | -0.32px | Card headings |\n| Feature Title | Aeonik Pro | 24px (1.50rem) | 400 | 1.33 | normal | Light headings |\n| Nav / UI | Aeonik Pro | 20px (1.25rem) | 500 | 1.40 | normal | Navigation, buttons |\n| Body Large | Inter | 18px (1.13rem) | 400 | 1.56 | -0.09px | Introductions |\n| Body | Inter | 16px (1.00rem) | 400 | 1.50 | 0.24px | Standard reading |\n| Body Semibold | Inter | 16px (1.00rem) | 600 | 1.50 | 0.16px | Emphasized body |\n| Body Bold Link | Inter | 16px (1.00rem) | 700 | 1.50 | 0.24px | Bold links |\n\n### Principles\n- **Weight 500 as display default**: Aeonik Pro uses medium (500) for ALL headings  no bold. This creates authority through size and tracking, not weight.\n- **Billboard tracking**: -2.72px at 136px is extremely compressed  text designed to be read at a glance, like airport signage.\n- **Positive tracking on body**: Inter uses +0.16px to +0.24px, creating airy, well-spaced reading text that contrasts with the compressed headings.\n\n## 4. Component Stylings\n\n### Buttons\n\n**Primary Dark Pill**\n- Background: `#191c1f`\n- Text: `#ffffff`\n- Padding: 14px 32px\n- Radius: 9999px (full pill)\n- Hover: opacity 0.85\n- Focus: `0 0 0 0.125rem` ring\n\n**Secondary Light Pill**\n- Background: `#f4f4f4`\n- Text: `#000000`\n- Padding: 14px 34px\n- Radius: 9999px\n- Hover: opacity 0.85\n\n**Outlined Pill**\n- Background: transparent\n- Text: `#191c1f`\n- Border: `2px solid #191c1f`\n- Padding: 14px 32px\n- Radius: 9999px\n\n**Ghost on Dark**\n- Background: `rgba(244, 244, 244, 0.1)`\n- Text: `#f4f4f4`\n- Border: `2px solid #f4f4f4`\n- Padding: 14px 32px\n- Radius: 9999px\n\n### Cards & Containers\n- Radius: 12px (small), 20px (cards)\n- No shadows  flat surfaces with color contrast\n- Dark and light section alternation\n\n### Navigation\n- Aeonik Pro 20px weight 500\n- Clean header, hamburger toggle at 12px radius\n- Pill CTAs right-aligned\n\n## 5. Layout Principles\n\n### Spacing System\n- Base unit: 8px\n- Scale: 4px, 6px, 8px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 80px, 88px, 120px\n- Large section spacing: 80px120px\n\n### Border Radius Scale\n- Standard (12px): Navigation, small buttons\n- Card (20px): Feature cards\n- Pill (9999px): All buttons\n\n## 6. Depth & Elevation\n\n| Level | Treatment | Use |\n|-------|-----------|-----|\n| Flat (Level 0) | No shadow | Everything  Revolut uses zero shadows |\n| Focus | `0 0 0 0.125rem` ring | Accessibility focus |\n\n**Shadow Philosophy**: Revolut uses ZERO shadows. Depth comes entirely from the dark/light section contrast and the generous whitespace between elements.\n\n## 7. Do's and Don'ts\n\n### Do\n- Use Aeonik Pro weight 500 for all display headings\n- Apply 9999px radius to all buttons  pill shape is universal\n- Use generous button padding (14px 32px)\n- Keep the palette to near-black + white for marketing surfaces\n- Apply positive letter-spacing on Inter body text\n\n### Don't\n- Don't use shadows  Revolut is flat by design\n- Don't use bold (700) for Aeonik Pro headings  500 is the weight\n- Don't use small buttons  the generous padding is intentional\n- Don't apply semantic colors to revenue (cuan) surfaces  they're for the product\n\n## 8. Responsive Behavior\n\n### Breakpoints\n| Name | Width | Key Changes |\n|------|-------|-------------|\n| Mobile Small | <400px | Compact, single column |\n| Mobile | 400720px | Standard mobile |\n| Tablet | 7201024px | 2-column layouts |\n| Desktop | 10241280px | Standard desktop |\n| Large | 12801920px | Full layout |\n\n## 9. Agent Prompt Guide\n\n### Quick Color Reference\n- Dark: Revolut Dark (`#191c1f`)\n- Light: White (`#ffffff`)\n- Surface: Light (`#f4f4f4`)\n- Blue: Revolut Blue (`#494fdf`)\n- Danger: Red (`#e23b4a`)\n- Success: Teal (`#00a87e`)\n\n### Example Component Prompts\n- \"Create a hero: white background. Headline at 136px Aeonik Pro weight 500, line-height 1.00, letter-spacing -2.72px, #191c1f text. Dark pill CTA (#191c1f, 9999px, 14px 32px). Outlined pill secondary (transparent, 2px solid #191c1f).\"\n- \"Build a pill button: #191c1f background, white text, 9999px radius, 14px 32px padding, 20px Aeonik Pro weight 500. Hover: opacity 0.85.\"\n\n### Iteration Guide\n1. Aeonik Pro 500 for headings  never bold\n2. All buttons are pills (9999px) with generous padding\n3. Zero shadows  flat is the Revolut identity\n4. Near-black + white for marketing, semantic colors for product","tags":["design","revolut","galyarder","framework","galyarderlabs","agent-skills","agentic-framework","agents","ai-agents","automation","claude-code-plugin","codex-skills"],"capabilities":["skill","source-galyarderlabs","skill-design-md-revolut","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-revolut","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 (8,528 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.829Z","embedding":null,"createdAt":"2026-05-10T01:06:47.702Z","updatedAt":"2026-05-18T19:07:48.829Z","lastSeenAt":"2026-05-18T19:07:48.829Z","tsv":"'+0.16':722 '+0.24':725 '-0.09':632 '-0.32':596 '-0.4':581 '-0.48':566 '-0.8':552 '-2.72':75,536,698,1122 '0':762,763,764,905,914,915,916 '0.1':185,806 '0.125':765,917 '0.16':213,275,654 '0.24':642,667 '0.85':760,782,1160 '000000':774 '006400':431 '007bc2':441 '00a87e':112,413,1099 '1':15,1163 '1.00':302,534,550,638,650,663,1118 '1.13':628 '1.19':594 '1.20':579 '1.21':564 '1.25':617 '1.33':608 '1.40':620 '1.50':605,641,653,666 '1.501.56':306 '1.56':631 '10241280px':1066 '120px':876 '12801920px':1070 '12px':821,848,885 '136px':67,237,530,701,1110 '14px':192,264,752,776,794,814,867,972,1131,1150 '16px':637,649,662,868 '18px':627 '191c1f':132,169,248,314,748,788,792,1083,1124,1129,1139,1144 '2':307,1062,1171 '2.00':591 '2.50':576 '20':489 '20px':616,823,840,869,890,1153 '244':182,183,184,803,804,805 '24px':604,870 '2px':175,186,790,810,1137 '3':491,1180 '3.00':561 '32px':265,590,753,795,815,871,973,1132,1151 '32px34px':193 '34px':777 '376cd5':369 '4':740,1188 '400':607,630,640 '400720px':1057 '400px':1052 '40px':575,872 '428619':421 '48px':560,873 '494fdf':114,347,1093 '4f55f1':357 '4px':864 '5':855 '5.00':547 '500':70,239,533,549,563,578,593,619,673,681,842,953,1014,1114,1157,1166 '505a63':472 '6':897 '600':652 '6px':865 '7':942 '700':665,1009 '7201024px':1061 '8':1042 '8.50':531 '80px':546,874 '80px120px':880 '88px':875 '8b0000':459 '8d969e':477 '8px':862,866 '9':1073 '936d62':449 '9999px':165,259,755,779,797,817,894,959,1130,1148,1176 'accent':366,395,456 'access':225,920 'action':330,355,361 'aeonik':55,233,497,528,544,558,573,588,602,614,677,838,950,1011,1111,1154,1164 'agent':1074 'aggress':72 'airi':728 'airport':714 'align':854 'altern':836 'appli':958,985,1030 'architectur':100 'arial':511 'atmospher':18 'attent':411 'author':689 'b09000':406 'background':319,340,747,771,785,801,1107,1145 'bank':226 'base':860 'behavior':1044 'billboard':63,241,696 'billboard-scal':62,240 'binari':250 'black':131,247,322,980,1191 'blue':113,281,346,351,354,356,367,373,376,440,446,1090,1092 'bodi':203,268,305,504,624,635,646,657,658,719,992 'bold':659,669,686,1008,1170 'border':789,809,881 'borders/dividers':490 'brand':81,343,353 'breakpoint':1045 'brown':286,448,453 'build':1140 'built':53,92 'button':160,163,258,318,339,514,623,743,888,896,963,970,1022,1143,1173 'c9c9cd':483 'capabl':37 'card':586,598,818,824,889,892 'chang':1049 'characterist':232 'clean':843 'color':89,140,279,294,308,329,350,360,372,383,391,401,409,416,424,434,444,452,462,486,830,1032,1078,1196 'column':1055,1063 'combin':199 'come':929 'communic':32 'compact':1053 'compon':741,1101 'comprehens':95,252 'compress':704,738 'confid':24,196 'contain':819 'context':515 'contrast':295,735,831,935 'cool':475 'creat':61,194,688,727,1103 'critic':394 'cta':1128 'ctas':851 'cuan':1035 'danger':107,287,378,384,1094 'dark':168,180,313,316,465,745,800,832,1080,1082,1126 'dark/light':933 'deep':116,386,392 'deep-pink':115 'default':676 'depth':292,898,928 'design':2,5,9,12,29,219,706,1004 'design-md-revolut':1 'desktop':1065,1068 'detect':291,502 'disciplin':46 'display':235,298,496,526,542,675,956 'distil':25 'distinguish':153 'domin':137 'e23b4a':108,380,1096 'e61e49':118,388 'ec7e00':110,398 'element':941 'elev':899 'emphas':656 'entir':930 'era':230 'error/destructive':385 'everi':105,162 'everyth':159,908 'exampl':1100 'extrem':703 'f4f4f4':172,337,772,808,812,1089 'fallback':503,510 'famili':495 'featur':568,600,891 'feel':221 'ffffff':136,326,750,1086 'fintech':23,84,243 'flat':827,903,1002,1183 'focus':761,913,921 'font':494,518 'full':756,1071 'generous':42,191,262,938,969,1024,1178 'geometr':58,499 'ghost':178,798 'glanc':712 'gray':476,481 'green':285,420,426,429,435,437 'grey':487 'grotesqu':59,500 'guid':1076,1162 'hamburg':845 'hand':38 'head':557,572,599,611,684,739,957,1013,1168 'header':363,365,844 'headlin':65,244,1108 'height':301,522,1117 'hero':541,543,555,1105 'hierarchi':516 'hover':758,780,1158 'ident':1187 'inform':447 'intent':1027 'inter':201,266,506,626,636,648,661,720,991 'interact':344 'interfac':147 'introduct':634 'isn':78 'iter':1161 'keep':974 'key':231,1048 'label':331 'languag':51 'larg':195,625,877,1069 'layout':856,1064,1072 'letter':211,273,523,988,1120 'letter-spac':210,272,987,1119 'level':900,904 'light':171,333,335,419,425,439,445,610,769,834,1084,1088 'like':713 'line':300,521,1116 'line-height':299,1115 'link':375,660,670 'market':123,150,983,1194 'massiv':40 'md':3,10 'medium':680 'mega':527 'mid':470 'mobil':1050,1056,1059 'modern':229 'money':34 'mute':478 'name':103,1046 'nav':612 'navig':622,837,886 'near':130,246,321,979,1190 'near-black':129,245,320,978,1189 'negat':73 'neutral':47,455,468 'never':1169 'normal':609,621 'note':525 'opac':759,781,1159 'orang':397 'outlin':173,783,1133 'pad':189,263,751,775,793,813,971,1025,1152,1179 'page':151 'palett':48,309,976 'philosophi':923 'photo':362 'pill':158,257,746,757,770,784,850,893,964,1127,1134,1142,1175 'pill-everyth':157 'pink':117,283,387,393 'pixel':27 'posit':209,271,716,986 'premium':223 'primari':167,311,315,332,352,554,744 'principl':671,857 'pro':56,234,498,529,545,559,574,589,603,615,678,839,951,1012,1112,1155,1165 'product':146,1041,1198 'prompt':1075,1102 'pure':134,324 'px':76,537,553,567,582,597,633,643,655,668,699,723,726,1123 'px0.24px':214,276 'quick':1077 'radius':166,260,754,778,796,816,820,849,882,960,1149 're':1038 'read':645,709,732 'red':379,457,463,466,1095 'refer':7,1079 'relax':304 'rem':532,548,562,577,592,606,618,629,639,651,664,766,918 'remark':127 'reserv':143 'respons':1043 'restrain':128 'result':216 'revenu':1034 'revolut':4,11,14,19,97,154,312,345,909,924,1000,1081,1091,1186 'rgba':181,802 'rich':277 'right':853 'right-align':852 'ring':767,919 'role':310,517 'rui':96,253,328,349,359,382,390,400,408,415,423,443,451,485 'rui-color-action-label':327 'rui-color-action-photo-header-text':358 'rui-color-blu':348 'rui-color-brown':450 'rui-color-dang':381 'rui-color-deep-pink':389 'rui-color-grey-ton':484 'rui-color-light-blu':442 'rui-color-light-green':422 'rui-color-t':414 'rui-color-warn':399 'rui-color-yellow':407 'rule':493 'san':509 'scale':64,87,242,469,540,863,883 'secondari':170,338,427,473,768,1135 'section':556,569,585,835,878,934 'semant':102,141,254,278,377,1031,1195 'semibold':647 'shadow':290,826,907,912,922,927,999,1182 'shape':965 'signag':715 'singl':1054 'size':519,691 'skill' 'skill-design-md-revolut' 'slate':471 'small':822,887,1021,1051 'solid':176,187,791,811,1138 'source-galyarderlabs' 'space':212,274,524,731,858,879,989,1121 'specif':513 'stadium':86,539 'stadium-scal':538 'standard':507,644,884,1058,1067 'state':106,404 'style':742 'sub':571,584 'sub-head':570 'sub-sect':583 'subtl':80,341 'success':428,1097 'success/positive':418 'surfac':124,317,334,336,342,828,984,1036,1087 'system':6,13,30,90,161,280,508,859 'tablet':1060 'target':198 'teal':111,282,412,417,1098 'tertiari':480 'text':204,269,323,364,368,374,430,436,438,458,464,467,474,479,705,733,749,773,787,807,993,1125,1147 'theme':17 'tight':297,535,551,565,580,595 'titl':587,601 'toggl':846 'token':99,142,255 'tone':482,488 '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':197 'track':74,693,697,717 'transpar':174,786,1136 'treatment':901 'ts':947 'typographi':41,492 'ui':98,505,613 'unit':861 'univers':256,967 'use':164,679,721,902,910,925,949,968,998,1007,1020 'various':206 'visual':16,50 'warm':454 'warn':109,288,396,402,403 'websit':21,371,433,461 'website-color-blue-text':370 'website-color-green-text':432 'website-color-red-text':460 'weight':69,207,238,520,672,695,841,952,1017,1113,1156 'well':730 'well-spac':729 'white':135,249,325,981,1085,1106,1146,1192 'whitespac':43,939 'width':1047 'yellow':284,405,410 'zero':289,911,926,1181","prices":[{"id":"af41b899-55b5-47cd-91ab-883a72386751","listingId":"cade3a70-b650-45f2-9c94-4986c5c74241","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.702Z"}],"sources":[{"listingId":"cade3a70-b650-45f2-9c94-4986c5c74241","source":"github","sourceId":"galyarderlabs/galyarder-framework/design-md-revolut","sourceUrl":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-revolut","isPrimary":false,"firstSeenAt":"2026-05-10T01:06:47.702Z","lastSeenAt":"2026-05-18T19:07:48.829Z"}],"details":{"listingId":"cade3a70-b650-45f2-9c94-4986c5c74241","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"galyarderlabs","slug":"design-md-revolut","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":"ef7cc2ea2306e91c14b33cae18df911b1c8c9420","skill_md_path":"skills/design-md-revolut/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/galyarderlabs/galyarder-framework/tree/main/skills/design-md-revolut"},"layout":"multi","source":"github","category":"galyarder-framework","frontmatter":{"name":"design-md-revolut","description":"Design system reference for design md revolut."},"skills_sh_url":"https://skills.sh/galyarderlabs/galyarder-framework/design-md-revolut"},"updatedAt":"2026-05-18T19:07:48.829Z"}}