{"id":"564a7183-a105-44b2-82e2-d77de06a2a21","shortId":"N2NJHQ","kind":"skill","title":"algorithmic-color-palette","tagline":"Derive a full UI colour palette algorithmically from one or two brand colours. Darker and lighter variants for interactive states, desaturated greys from the brand hue for borders and backgrounds, and semantic colours that feel coherent with the brand rather than generic. Use whe","description":"# Algorithmic Colour Palette\n\nA brand palette of 2–3 colours is not enough for a UI. You need shades for states (hover, active, disabled), neutrals for backgrounds and borders, and semantic colours for status. Deriving these algorithmically from the brand colours produces a palette that feels coherent — everything is visually related to the brand rather than pulled from a generic grey or a stock colour library.\n\n## Deriving Interactive State Colours\n\nFrom each brand colour, generate at minimum three variants: base, darker (hover/active), lighter (tint/background).\n\n### Method: HSL adjustment\n\n```\nbase:    hsl(H, S%, L%)\nhover:   hsl(H, S%, L% - 8%)     ← darken by reducing lightness\nactive:  hsl(H, S%, L% - 14%)    ← darken further\ntint:    hsl(H, S%, L% + 40%)    ← lighten significantly for backgrounds\nsubtle:  hsl(H, S% * 0.3, L% + 45%)  ← heavily desaturated, near-white\n```\n\n### Example: brand primary `#133174` (hsl 224, 70%, 27%)\n\n```css\n--color-primary-subtle:  hsl(224, 21%, 94%);  /* background tint */\n--color-primary-tint:    hsl(224, 70%, 67%);  /* light variant */\n--color-primary:         hsl(224, 70%, 27%);  /* base */\n--color-primary-hover:   hsl(224, 70%, 19%);  /* hover: -8% lightness */\n--color-primary-active:  hsl(224, 70%, 13%);  /* active: -14% lightness */\n```\n\n### Example: success green derived from a teal brand colour\n\nIf the brand has a green or teal, shift it toward a clearer success green:\n\n```css\n--color-success-subtle:  hsl(142, 20%, 94%);\n--color-success:         hsl(142, 60%, 35%);\n--color-success-hover:   hsl(142, 60%, 27%);\n```\n\n## Deriving Brand-Tinted Greys\n\nGeneric greys (`#666`, `#999`, `#eee`) feel disconnected from the brand. Desaturating the brand hue produces greys that are subtly tinted — warm, cool, or neutral depending on the brand — and feel like they belong to the same palette.\n\n### Optical Comfort: Avoiding Pure Black on White\nExtreme contrast (pure black `#000000` on pure white `#FFFFFF`) can cause \"halation\" and eye strain. To create a more comfortable reading experience:\n- **Use \"Near-Black\" for text:** Use a very dark grey (e.g., `#222222` or your `grey-900` token) instead of pure black.\n- **Use \"Off-White\" for backgrounds:** A slightly muted white (e.g., `#EEEEEE` or your `grey-50` token) is softer on the eyes than pure `#FFFFFF`.\n\nThis \"softened contrast\" remains highly accessible (passing WCAG AA/AAA) but feels more professional and less harsh.\n\n### Method: desaturate + adjust lightness\n\n```\nbrand hue H\ngrey-900: hsl(H, 12%, 10%)   ← near-black, text\ngrey-700: hsl(H, 10%, 30%)   ← dark text, icons\ngrey-500: hsl(H,  8%, 50%)   ← secondary text, placeholders\ngrey-300: hsl(H,  6%, 70%)   ← disabled text, subtle labels\ngrey-200: hsl(H,  5%, 82%)   ← borders, dividers\ngrey-100: hsl(H,  4%, 92%)   ← input backgrounds, table stripes\ngrey-50:  hsl(H,  3%, 96%)   ← page background, subtle fills\n```\n\n### Example: brand primary `#133174` (H = 224, blue-tinted)\n\n```css\n--color-grey-900: hsl(224, 12%, 10%);  /* #16171f — slightly blue-black */\n--color-grey-500: hsl(224,  8%, 50%);  /* #7b7e8a — cool grey */\n--color-grey-200: hsl(224,  5%, 82%);  /* #cfd0d5 — cool light border */\n--color-grey-50:  hsl(224,  3%, 96%);  /* #f4f4f6 — near-white with a hint of blue */\n```\n\nCompare to generic `#f5f5f5` (no hue) — the brand-tinted version is subtly different but feels intentional.\n\n## Semantic Colour Derivation\n\nStatus colours (error, warning, success, info) should feel harmonious with the brand. To achieve cohesion, align their **Saturation** and **Lightness** to create a consistent \"visual weight\" across the status set.\n\n### Method: Aligned visual weight\n\n1. **Pick the Hues:** Use standard semantic hues (0 for Error, 38 for Warning, 142 for Success).\n2. **Align S & L:** Use the saturation and lightness of your Brand Primary as a starting point.\n3. **Adjust for Perceived Brightness:** Hues like Yellow/Orange (Warning) feel brighter than Blue/Red. Reduce the lightness of Warning by 5–10% compared to Success or Error to ensure they feel equally \"heavy\" on the page.\n\n| Semantic | Hue (H) | Saturation (S) | Lightness (L) |\n|---|---|---|---|\n| **Error** | 0–10 | Match Primary | Match Primary |\n| **Warning** | 35–45 | Match Primary | Primary L - 10% |\n| **Success** | 140–160 | Match Primary | Match Primary |\n| **Info** | 210–230 | Match Primary | Match Primary |\n\n**The \"Vibrancy\" Rule:** If the brand is muted (low saturation), the semantic colours should also be slightly muted. If the brand is neon/vibrant, the semantics should follow suit. Cohesion comes from shared intensity.\n\n## Functional and Interactive Colours\n\nStandard UI elements require dedicated functional tokens beyond basic brand and semantic colours.\n\n### Focus States\nFocus indicators are critical for accessibility. Use a high-visibility colour that works on all backgrounds.\n- **Default:** Brand Primary (if contrast is high enough).\n- **Fallback:** A dedicated high-contrast blue `hsl(215, 95%, 50%)`.\n- **Token:** `--color-focus`.\n\n### Selection and Highlights\nText selection and list item highlights should be subtle and non-distracting.\n- **Method:** Use the primary hue with very high lightness (90%+) and moderate saturation.\n- **Token:** `--color-selection`.\n\n### Overlays and Modals\nBackdrops for modals or drawers need a neutral, semi-transparent colour.\n- **Method:** Use your `grey-900` hue with an alpha channel.\n- **Token:** `--color-overlay: hsla(H, 12%, 10%, 0.5);`\n\n### Skeleton and Loading\nLoading states should be neutral and recessive.\n- **Method:** Use `grey-200` as the base and `grey-100` as the shimmer highlight.\n- **Token:** `--color-skeleton`.\n\n### Disabled States\nDisabled elements must communicate unreachability.\n- **Method:** Use `grey-500` for text and `grey-200` for backgrounds/borders.\n- **Rule:** Avoid using brand tints for disabled backgrounds to prevent \"pseudo-active\" confusion.\n\n### Brand-Tinted Shadows\nPremium UIs avoid pure black shadows. Use a very dark, desaturated brand hue.\n- **Method:** `hsla(H, 15%, 5%, alpha)` where H is the brand hue.\n- **Token:** `--color-shadow-base`.\n\n### Links\n- **Base:** Brand Primary or a dedicated high-visibility blue.\n- **Visited:** Shift primary hue toward purple (+20) and reduce saturation.\n- **Token:** `--color-link`, `--color-link-visited`.\n\n### Input and Validation\n- **Method:** Use semantic base colours for borders and text in error/success states.\n- **Inactive Border:** `grey-200`.\n- **Active/Focus Border:** Brand Primary.\n\n## Full Token Output Example\n\n```css\n:root {\n  /* Primary — derived from brand #133174 */\n  --color-primary-subtle:  hsl(224, 21%, 94%);\n  --color-primary-tint:    hsl(224, 70%, 67%);\n  --color-primary:         hsl(224, 70%, 27%);\n  --color-primary-hover:   hsl(224, 70%, 19%);\n  --color-primary-active:  hsl(224, 70%, 13%);\n\n  /* Brand-tinted neutrals */\n  --color-grey-900: hsl(224, 12%, 10%);\n  --color-grey-700: hsl(224, 10%, 30%);\n  --color-grey-500: hsl(224,  8%, 50%);\n  --color-grey-300: hsl(224,  6%, 70%);\n  --color-grey-200: hsl(224,  5%, 82%);\n  --color-grey-100: hsl(224,  4%, 92%);\n  --color-grey-50:  hsl(224,  3%, 96%);\n\n  /* Semantic */\n  --color-error:   hsl(4,  72%, 44%);\n  --color-warning: hsl(38, 80%, 44%);\n  --color-success: hsl(142, 58%, 35%);\n  --color-info:    hsl(224, 70%, 27%); /* = primary */\n\n  /* Semantic subtle backgrounds */\n  --color-error-subtle:   hsl(4,  50%, 95%);\n  --color-warning-subtle: hsl(38, 60%, 95%);\n  --color-success-subtle: hsl(142, 40%, 95%);\n\n  /* Functional */\n  --color-focus:     var(--color-primary);\n  --color-selection: hsl(224, 70%, 90%);\n  --color-overlay:   hsla(224, 12%, 10%, 0.5);\n  --color-skeleton:  var(--color-grey-200);\n  --color-shadow:    hsla(224, 15%, 5%, 0.1);\n\n  /* Links */\n  --color-link:         var(--color-primary);\n  --color-link-visited: hsl(244, 40%, 35%);\n}\n```\n\n## Review Checklist\n\n- [ ] Are hover and active colours derived from the base by lightness adjustment, not chosen independently?\n- [ ] Are neutral greys tinted with the brand hue rather than using generic `#666` / `#eee`?\n- [ ] Is saturation reduced progressively as lightness increases in the grey scale?\n- [ ] Is pure black (#000000) on pure white (#FFFFFF) avoided in favor of near-blacks (e.g., #222) and off-whites (e.g., #EEE)?\n- [ ] Are status colours (Success, Warning, Error) visually weighted to match the brand primary?\n- [ ] If the brand primary is orange or amber, is warning colour clearly distinct from it?\n- [ ] Does each brand colour have at minimum: subtle, base, hover, active variants?\n- [ ] Are semantic colours aligned in Saturation and Lightness to create a cohesive visual weight?\n- [ ] Is there a dedicated `--color-focus` token that meets accessibility contrast requirements?\n- [ ] Are selection, overlay, and shadow colours derived from the brand hue rather than generic black/grey?\n- [ ] Are disabled states neutral (greys) to avoid confusion with interactive brand colours?\n- [ ] Does the link colour have a distinct `visited` state derived algorithmically?\n\n## Common Anti-Patterns\n\n| Anti-pattern | Problem | Fix |\n|---|---|---|\n| **Pure black on pure white** | High visual strain, \"halation\" | Use near-black (#222) and off-white (#EEE) |\n| **Grey borders next to colourful areas** | Looks cheap and disconnected | Remove border or use a tinted/darker version of the adjacent colour |\n| **Randomly picked \"Warning/Error\" colours** | Palette feels uncoordinated | Derive from brand HSL with visual weight alignment |\n| **Generic grey palette (#666, #999)** | Lacks brand identity | Tint neutrals with a low-saturation version of the brand hue |","tags":["algorithmic","color","palette","dembrandt","skills","accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system","design-tokens"],"capabilities":["skill","source-dembrandt","skill-algorithmic-color-palette","topic-accessibility","topic-agent-skills","topic-claude-code-skills","topic-claude-skills","topic-cursor-skills","topic-design-system","topic-design-tokens","topic-enterprise-ux","topic-gestalt","topic-skills-sh","topic-typography","topic-ui-design"],"categories":["dembrandt-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/dembrandt/dembrandt-skills/algorithmic-color-palette","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add dembrandt/dembrandt-skills","source_repo":"https://github.com/dembrandt/dembrandt-skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 9 github stars · SKILL.md body (9,621 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:08:26.054Z","embedding":null,"createdAt":"2026-05-18T13:14:00.207Z","updatedAt":"2026-05-18T19:08:26.054Z","lastSeenAt":"2026-05-18T19:08:26.054Z","tsv":"'+20':987 '-100':476,895 '-14':238 '-200':468,889,919,1017 '-300':458 '-50':396,486 '-500':449,914 '-700':440 '-8':227 '-900':375,430,861 '0':620,689 '0.1':1227 '0.3':173 '0.5':875,1211 '000000':341,1289 '1':612 '10':434,443,512,666,690,702,874,1083,1090,1210 '100':1119 '12':433,511,873,1082,1209 '13':236,1071 '133174':184,498,1032 '14':156 '140':704 '142':270,277,285,626,1151,1186 '15':956,1225 '160':705 '16171f':513 '19':225,1063 '2':56,629 '20':271 '200':532,1111,1219 '21':196,1039 '210':711 '215':802 '222':1302,1436 '222222':371 '224':186,195,205,214,223,234,500,510,523,534,546,1038,1046,1053,1061,1069,1081,1089,1097,1105,1113,1121,1129,1158,1201,1208,1224 '230':712 '244':1241 '27':188,216,287,1055,1160 '3':57,489,547,646,1130 '30':444,1091 '300':1103 '35':279,696,1153,1243 '38':623,1144,1178 '4':479,1122,1137,1170 '40':164,1187,1242 '44':1139,1146 '45':175,697 '5':471,535,665,957,1114,1226 '50':453,525,544,804,1099,1127,1171 '500':521,1095 '58':1152 '6':461,1106 '60':278,286,1179 '666':295,1273,1481 '67':207,1048 '70':187,206,215,224,235,462,1047,1054,1062,1070,1107,1159,1202 '700':1087 '72':1138 '7b7e8a':526 '8':146,452,524,1098 '80':1145 '82':472,536,1115 '90':834,1203 '900':508,1079 '92':480,1123 '94':197,272,1040 '95':803,1172,1180,1188 '96':490,548,1131 '999':296,1482 'aa/aaa':414 'access':411,774,1373 'achiev':591 'across':604 'activ':71,151,232,237,934,1067,1249,1347 'active/focus':1018 'adjac':1461 'adjust':135,424,647,1257 'algorithm':2,11,49,85,1413 'algorithmic-color-palett':1 'align':593,609,630,1352,1477 'alpha':865,958 'also':731 'amber':1329 'anti':1416,1419 'anti-pattern':1415,1418 'area':1447 'avoid':332,923,942,1294,1397 'backdrop':845 'background':34,75,168,198,386,482,492,785,929,1164 'backgrounds/borders':921 'base':128,136,217,892,969,971,1005,1254,1345 'basic':762 'belong':325 'beyond':761 'black':334,340,362,380,437,517,944,1288,1300,1424,1435 'black/grey':1390 'blue':502,516,557,800,980 'blue-black':515 'blue-tint':501 'blue/red':658 'border':32,77,473,540,1008,1015,1019,1443,1453 'brand':16,29,43,53,88,102,121,182,247,251,290,302,305,320,426,496,566,589,640,722,737,763,787,925,937,951,963,972,1020,1031,1073,1267,1320,1324,1339,1385,1401,1472,1484,1496 'brand-tint':289,565,936,1072 'bright':650 'brighter':656 'caus':347 'cfd0d5':537 'channel':866 'cheap':1449 'checklist':1245 'chosen':1259 'clear':1333 'clearer':261 'coher':40,95 'cohes':592,745,1360 'color':3,191,201,211,219,230,266,274,281,506,519,530,542,807,840,869,902,967,993,996,1034,1042,1050,1057,1065,1077,1085,1093,1101,1109,1117,1125,1134,1141,1148,1155,1166,1174,1182,1191,1195,1198,1205,1213,1217,1221,1230,1234,1237,1368 'color-error':1133 'color-error-subtl':1165 'color-focus':806,1190,1367 'color-grey':505,518,529,541,1076,1084,1092,1100,1108,1116,1124,1216 'color-info':1154 'color-link':992,1229 'color-link-visit':995,1236 'color-overlay':868,1204 'color-primari':210,1049,1194,1233 'color-primary-act':229,1064 'color-primary-hov':218,1056 'color-primary-subtl':190,1033 'color-primary-tint':200,1041 'color-select':839,1197 'color-shadow':1220 'color-shadow-bas':966 'color-skeleton':901,1212 'color-success':273,1147 'color-success-hov':280 'color-success-subtl':265,1181 'color-warn':1140 'color-warning-subtl':1173 'colour':9,17,37,50,58,80,89,113,118,122,248,576,579,729,753,766,780,856,1006,1250,1311,1332,1340,1351,1381,1402,1406,1446,1462,1466 'come':746 'comfort':331,356 'common':1414 'communic':909 'compar':558,667 'confus':935,1398 'consist':601 'contrast':338,408,790,799,1374 'cool':314,527,538 'creat':353,599,1358 'critic':772 'css':189,264,504,1026 'dark':368,445,949 'darken':147,157 'darker':18,129 'dedic':758,796,976,1366 'default':786 'depend':317 'deriv':5,83,115,243,288,577,1029,1251,1382,1412,1470 'desatur':25,177,303,423,950 'differ':571 'disabl':72,463,904,906,928,1392 'disconnect':299,1451 'distinct':1334,1409 'distract':824 'divid':474 'drawer':849 'e.g':370,391,1301,1307 'eee':297,1274,1308,1441 'eeeeee':392 'element':756,907 'enough':61,793 'ensur':673 'equal':676 'error':580,622,671,688,1135,1167,1314 'error/success':1012 'everyth':96 'exampl':181,240,495,1025 'experi':358 'extrem':337 'eye':350,402 'f4f4f6':549 'f5f5f5':561 'fallback':794 'favor':1296 'feel':39,94,298,322,416,573,585,655,675,1468 'ffffff':345,405,1293 'fill':494 'fix':1422 'focus':767,769,808,1192,1369 'follow':743 'full':7,1022 'function':750,759,1189 'generat':123 'generic':46,108,293,560,1272,1389,1478 'green':242,254,263 'grey':26,109,292,294,308,369,374,395,429,439,448,457,467,475,485,507,520,528,531,543,860,888,894,913,918,1016,1078,1086,1094,1102,1110,1118,1126,1218,1263,1284,1395,1442,1479 'h':138,143,153,161,171,428,432,442,451,460,470,478,488,499,683,872,955,960 'halat':348,1431 'harmoni':586 'harsh':421 'heavi':677 'heavili':176 'high':410,778,792,798,832,978,1428 'high-contrast':797 'high-vis':777,977 'highlight':811,817,899 'hint':555 'hover':70,141,221,226,283,1059,1247,1346 'hover/active':130 'hsl':134,137,142,152,160,170,185,194,204,213,222,233,269,276,284,431,441,450,459,469,477,487,509,522,533,545,801,1037,1045,1052,1060,1068,1080,1088,1096,1104,1112,1120,1128,1136,1143,1150,1157,1169,1177,1185,1200,1240,1473 'hsla':871,954,1207,1223 'hue':30,306,427,563,615,619,651,682,829,862,952,964,984,1268,1386,1497 'icon':447 'ident':1485 'inact':1014 'increas':1281 'independ':1260 'indic':770 'info':583,710,1156 'input':481,999 'instead':377 'intens':749 'intent':574 'interact':23,116,752,1400 'item':816 'l':140,145,155,163,174,632,687,701 'label':466 'lack':1483 'less':420 'librari':114 'light':150,208,228,239,425,539,597,637,661,686,833,1256,1280,1356 'lighten':165 'lighter':20,131 'like':323,652 'link':970,994,997,1228,1231,1238,1405 'list':815 'load':878,879 'look':1448 'low':725,1491 'low-satur':1490 'match':691,693,698,706,708,713,715,1318 'meet':1372 'method':133,422,608,825,857,886,911,953,1002 'minimum':125,1343 'modal':844,847 'moder':836 'must':908 'mute':389,724,734 'near':179,361,436,551,1299,1434 'near-black':360,435,1298,1433 'near-whit':178,550 'need':66,850 'neon/vibrant':739 'neutral':73,316,852,883,1075,1262,1394,1487 'next':1444 'non':823 'non-distract':822 'off-whit':382,1304,1438 'one':13 'optic':330 'orang':1327 'output':1024 'overlay':842,870,1206,1378 'page':491,680 'palett':4,10,51,54,92,329,1467,1480 'pass':412 'pattern':1417,1420 'perceiv':649 'pick':613,1464 'placehold':456 'point':645 'premium':940 'prevent':931 'primari':183,192,202,212,220,231,497,641,692,694,699,700,707,709,714,716,788,828,973,983,1021,1028,1035,1043,1051,1058,1066,1161,1196,1235,1321,1325 'problem':1421 'produc':90,307 'profession':418 'progress':1278 'pseudo':933 'pseudo-act':932 'pull':105 'pure':333,339,343,379,404,943,1287,1291,1423,1426 'purpl':986 'random':1463 'rather':44,103,1269,1387 'read':357 'recess':885 'reduc':149,659,989,1277 'relat':99 'remain':409 'remov':1452 'requir':757,1375 'review':1244 'root':1027 'rule':719,922 'satur':595,635,684,726,837,990,1276,1354,1492 'scale':1285 'secondari':454 'select':809,813,841,1199,1377 'semant':36,79,575,618,681,728,741,765,1004,1132,1162,1350 'semi':854 'semi-transpar':853 'set':607 'shade':67 'shadow':939,945,968,1222,1380 'share':748 'shift':257,982 'shimmer':898 'signific':166 'skeleton':876,903,1214 'skill' 'skill-algorithmic-color-palette' 'slight':388,514,733 'soften':407 'softer':399 'source-dembrandt' 'standard':617,754 'start':644 'state':24,69,117,768,880,905,1013,1393,1411 'status':82,578,606,1310 'stock':112 'strain':351,1430 'stripe':484 'subt':311,570 'subtl':169,193,268,465,493,820,1036,1163,1168,1176,1184,1344 'success':241,262,267,275,282,582,628,669,703,1149,1183,1312 'suit':744 'tabl':483 'teal':246,256 'text':364,438,446,455,464,812,916,1010 'three':126 'tint':159,199,203,291,312,503,567,926,938,1044,1074,1264,1486 'tint/background':132 'tinted/darker':1457 'token':376,397,760,805,838,867,900,965,991,1023,1370 'topic-accessibility' 'topic-agent-skills' 'topic-claude-code-skills' 'topic-claude-skills' 'topic-cursor-skills' 'topic-design-system' 'topic-design-tokens' 'topic-enterprise-ux' 'topic-gestalt' 'topic-skills-sh' 'topic-typography' 'topic-ui-design' 'toward':259,985 'transpar':855 'two':15 'ui':8,64,755,941 'uncoordin':1469 'unreach':910 'use':47,359,365,381,616,633,775,826,858,887,912,924,946,1003,1271,1432,1455 'valid':1001 'var':1193,1215,1232 'variant':21,127,209,1348 'version':568,1458,1493 'vibranc':718 'visibl':779,979 'visit':981,998,1239,1410 'visual':98,602,610,1315,1361,1429,1475 'warm':313 'warn':581,625,654,663,695,1142,1175,1313,1331 'warning/error':1465 'wcag':413 'weight':603,611,1316,1362,1476 'whe':48 'white':180,336,344,384,390,552,1292,1306,1427,1440 'work':782 'yellow/orange':653","prices":[{"id":"c77b8baa-2823-40d1-8255-5db129339511","listingId":"564a7183-a105-44b2-82e2-d77de06a2a21","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"dembrandt","category":"dembrandt-skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:14:00.207Z"}],"sources":[{"listingId":"564a7183-a105-44b2-82e2-d77de06a2a21","source":"github","sourceId":"dembrandt/dembrandt-skills/algorithmic-color-palette","sourceUrl":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/algorithmic-color-palette","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:00.207Z","lastSeenAt":"2026-05-18T19:08:26.054Z"}],"details":{"listingId":"564a7183-a105-44b2-82e2-d77de06a2a21","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"dembrandt","slug":"algorithmic-color-palette","github":{"repo":"dembrandt/dembrandt-skills","stars":9,"topics":["accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system","design-tokens","enterprise-ux","gestalt","skills-sh","typography","ui-design","ux","wcag"],"license":"mit","html_url":"https://github.com/dembrandt/dembrandt-skills","pushed_at":"2026-05-14T22:34:06Z","description":"UX and design system skills for AI agents based on 20 years of experience","skill_md_sha":"4ae4d62d534c0404049423616700f463ae1f1fd4","skill_md_path":"skills/algorithmic-color-palette/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/algorithmic-color-palette"},"layout":"multi","source":"github","category":"dembrandt-skills","frontmatter":{"name":"algorithmic-color-palette","description":"Derive a full UI colour palette algorithmically from one or two brand colours. Darker and lighter variants for interactive states, desaturated greys from the brand hue for borders and backgrounds, and semantic colours that feel coherent with the brand rather than generic. Use when building a colour system from scratch or expanding a limited brand palette for UI use."},"skills_sh_url":"https://skills.sh/dembrandt/dembrandt-skills/algorithmic-color-palette"},"updatedAt":"2026-05-18T19:08:26.054Z"}}