616 lines
18 KiB
JSON
616 lines
18 KiB
JSON
{
|
|
"prototype": true,
|
|
"palettes": [
|
|
{
|
|
"id": "harbor",
|
|
"name": "Harbor",
|
|
"hue": 214,
|
|
"sat": 70,
|
|
"accent": 34,
|
|
"accentSat": 63,
|
|
"theory": "Complementary",
|
|
"note": "Clear blue with a restrained copper counterpoint. The warm accent balances cool navigation and gives selected details a second voice.",
|
|
"use": "Proposed default. Blue without the blue-purple gradient.",
|
|
"modes": {
|
|
"light": {
|
|
"canvas": "#f3f5f7",
|
|
"surface": "#ffffff",
|
|
"raised": "#e6eaef",
|
|
"text": "#434d5b",
|
|
"muted": "#5e6978",
|
|
"line": "#ced5df",
|
|
"border": "#636e7e",
|
|
"action": "#2266bf",
|
|
"onAction": "#ffffff",
|
|
"accent": "#8d5e20",
|
|
"focus": "#2266bf",
|
|
"success": "#287658",
|
|
"warning": "#8f5c19",
|
|
"danger": "#ba2e26"
|
|
},
|
|
"dim": {
|
|
"canvas": "#242d38",
|
|
"surface": "#2e3947",
|
|
"raised": "#384556",
|
|
"text": "#d6dbe1",
|
|
"muted": "#a9b1bc",
|
|
"line": "#47576c",
|
|
"border": "#a4acb7",
|
|
"action": "#8ab4ea",
|
|
"onAction": "#10141a",
|
|
"accent": "#e1b47a",
|
|
"focus": "#8ab4ea",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#ea9d99"
|
|
},
|
|
"dark": {
|
|
"canvas": "#12161c",
|
|
"surface": "#1c232b",
|
|
"raised": "#28323e",
|
|
"text": "#b9c1cb",
|
|
"muted": "#a4acb7",
|
|
"line": "#384556",
|
|
"border": "#a4acb7",
|
|
"action": "#74a6e7",
|
|
"onAction": "#10141a",
|
|
"accent": "#e1b47a",
|
|
"focus": "#74a6e7",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#e37d78"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "carmine",
|
|
"name": "Carmine",
|
|
"hue": 350,
|
|
"sat": 65,
|
|
"accent": 176,
|
|
"accentSat": 42,
|
|
"theory": "Near-complementary",
|
|
"note": "A red-led identity with a cool turquoise counterpoint. Rose-tinted neutrals keep the red from covering every surface.",
|
|
"use": "For a red preference. Errors still use an icon and explicit wording.",
|
|
"modes": {
|
|
"light": {
|
|
"canvas": "#f7f3f3",
|
|
"surface": "#ffffff",
|
|
"raised": "#efe7e8",
|
|
"text": "#5e4549",
|
|
"muted": "#7b6065",
|
|
"line": "#deced1",
|
|
"border": "#7e6367",
|
|
"action": "#b92740",
|
|
"onAction": "#ffffff",
|
|
"accent": "#2e706c",
|
|
"focus": "#b92740",
|
|
"success": "#287658",
|
|
"warning": "#8f5c19",
|
|
"danger": "#ba2e26"
|
|
},
|
|
"dim": {
|
|
"canvas": "#372528",
|
|
"surface": "#462f33",
|
|
"raised": "#55393e",
|
|
"text": "#ded3d5",
|
|
"muted": "#bca9ac",
|
|
"line": "#6b484e",
|
|
"border": "#b7a4a7",
|
|
"action": "#e996a4",
|
|
"onAction": "#10141a",
|
|
"accent": "#8bd0cb",
|
|
"focus": "#e996a4",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#e99995"
|
|
},
|
|
"dark": {
|
|
"canvas": "#1b1214",
|
|
"surface": "#2b1d1f",
|
|
"raised": "#3d292c",
|
|
"text": "#c9b6b9",
|
|
"muted": "#b7a4a7",
|
|
"line": "#55393e",
|
|
"border": "#b7a4a7",
|
|
"action": "#e2788a",
|
|
"onAction": "#10141a",
|
|
"accent": "#8bd0cb",
|
|
"focus": "#e2788a",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#e37d78"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "atlantic",
|
|
"name": "Atlantic",
|
|
"hue": 199,
|
|
"sat": 72,
|
|
"accent": 170,
|
|
"accentSat": 52,
|
|
"theory": "Analogous",
|
|
"note": "Ocean blue and teal sit close on the hue wheel. Their shared cool bias makes a quieter combination than an opposing accent.",
|
|
"use": "A cohesive blue-green alternative with low visual rivalry.",
|
|
"modes": {
|
|
"light": {
|
|
"canvas": "#f3f6f7",
|
|
"surface": "#ffffff",
|
|
"raised": "#e6ecef",
|
|
"text": "#3f4e55",
|
|
"muted": "#5c6d75",
|
|
"line": "#cdd9df",
|
|
"border": "#63757e",
|
|
"action": "#19719a",
|
|
"onAction": "#ffffff",
|
|
"accent": "#257467",
|
|
"focus": "#19719a",
|
|
"success": "#287658",
|
|
"warning": "#935f1a",
|
|
"danger": "#ba2e26"
|
|
},
|
|
"dim": {
|
|
"canvas": "#243238",
|
|
"surface": "#2e3f47",
|
|
"raised": "#384d57",
|
|
"text": "#e2e7e9",
|
|
"muted": "#afbbc0",
|
|
"line": "#46606d",
|
|
"border": "#a4b1b7",
|
|
"action": "#73c3e8",
|
|
"onAction": "#10141a",
|
|
"accent": "#83d8ca",
|
|
"focus": "#73c3e8",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#edaaa6"
|
|
},
|
|
"dark": {
|
|
"canvas": "#12191c",
|
|
"surface": "#1c272b",
|
|
"raised": "#28373e",
|
|
"text": "#bcc8cd",
|
|
"muted": "#a4b1b7",
|
|
"line": "#384d57",
|
|
"border": "#a4b1b7",
|
|
"action": "#73c3e8",
|
|
"onAction": "#10141a",
|
|
"accent": "#83d8ca",
|
|
"focus": "#73c3e8",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#e4817c"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "terracotta",
|
|
"name": "Terracotta",
|
|
"hue": 18,
|
|
"sat": 60,
|
|
"accent": 198,
|
|
"accentSat": 44,
|
|
"theory": "Complementary",
|
|
"note": "Fired-clay orange meets a desaturated steel blue. Warm neutral surfaces connect the palette without needing a beige wash everywhere.",
|
|
"use": "An earthier option for writing and personal work.",
|
|
"modes": {
|
|
"light": {
|
|
"canvas": "#f7f4f3",
|
|
"surface": "#ffffff",
|
|
"raised": "#eee9e7",
|
|
"text": "#584841",
|
|
"muted": "#78665e",
|
|
"line": "#ded3cf",
|
|
"border": "#7e6b63",
|
|
"action": "#a74f2a",
|
|
"onAction": "#ffffff",
|
|
"accent": "#356f88",
|
|
"focus": "#a74f2a",
|
|
"success": "#287658",
|
|
"warning": "#8f5c19",
|
|
"danger": "#ba2e26"
|
|
},
|
|
"dim": {
|
|
"canvas": "#362b26",
|
|
"surface": "#453630",
|
|
"raised": "#54423b",
|
|
"text": "#e5dfdc",
|
|
"muted": "#beb2ac",
|
|
"line": "#695349",
|
|
"border": "#b7a9a4",
|
|
"action": "#e2a68d",
|
|
"onAction": "#10141a",
|
|
"accent": "#89bcd1",
|
|
"focus": "#e2a68d",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#eba29e"
|
|
},
|
|
"dark": {
|
|
"canvas": "#1b1513",
|
|
"surface": "#2a211d",
|
|
"raised": "#3c2f2a",
|
|
"text": "#cbbeb9",
|
|
"muted": "#b7a9a4",
|
|
"line": "#54423b",
|
|
"border": "#b7a9a4",
|
|
"action": "#de9a7c",
|
|
"onAction": "#10141a",
|
|
"accent": "#89bcd1",
|
|
"focus": "#de9a7c",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#e37d78"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "aubergine",
|
|
"name": "Aubergine",
|
|
"hue": 287,
|
|
"sat": 38,
|
|
"accent": 47,
|
|
"accentSat": 46,
|
|
"theory": "Triadic pair",
|
|
"note": "Muted plum and ochre sit 120 degrees apart on the hue wheel. The third triadic hue, teal, is left out so the interface has two brand accents rather than three.",
|
|
"use": "A deliberate purple option for users who want it, without the AI gradient.",
|
|
"modes": {
|
|
"light": {
|
|
"canvas": "#f5f4f6",
|
|
"surface": "#ffffff",
|
|
"raised": "#ece8ed",
|
|
"text": "#59455e",
|
|
"muted": "#75607b",
|
|
"line": "#d9d2db",
|
|
"border": "#78637e",
|
|
"action": "#88469b",
|
|
"onAction": "#ffffff",
|
|
"accent": "#77672c",
|
|
"focus": "#88469b",
|
|
"success": "#287658",
|
|
"warning": "#8f5c19",
|
|
"danger": "#ba2e26"
|
|
},
|
|
"dim": {
|
|
"canvas": "#312933",
|
|
"surface": "#3e3441",
|
|
"raised": "#4c3f50",
|
|
"text": "#e1d9e3",
|
|
"muted": "#baacbe",
|
|
"line": "#5f4f63",
|
|
"border": "#b3a4b7",
|
|
"action": "#cba4d6",
|
|
"onAction": "#10141a",
|
|
"accent": "#d3c388",
|
|
"focus": "#cba4d6",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#ea9d99"
|
|
},
|
|
"dark": {
|
|
"canvas": "#18141a",
|
|
"surface": "#262028",
|
|
"raised": "#362d39",
|
|
"text": "#c7b9cb",
|
|
"muted": "#b3a4b7",
|
|
"line": "#4c3f50",
|
|
"border": "#b3a4b7",
|
|
"action": "#bf8ecc",
|
|
"onAction": "#10141a",
|
|
"accent": "#d3c388",
|
|
"focus": "#bf8ecc",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#e37d78"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "mineral",
|
|
"name": "Mineral",
|
|
"hue": 171,
|
|
"sat": 47,
|
|
"accent": 351,
|
|
"accentSat": 42,
|
|
"theory": "Complementary",
|
|
"note": "Deep teal and dusty rose oppose each other while keeping saturation restrained. Blue-green tinted layers carry the identity in dark mode.",
|
|
"use": "Cool surfaces with a small warm punctuation.",
|
|
"modes": {
|
|
"light": {
|
|
"canvas": "#f3f6f6",
|
|
"surface": "#ffffff",
|
|
"raised": "#e8eded",
|
|
"text": "#3d524f",
|
|
"muted": "#586f6c",
|
|
"line": "#d0dcda",
|
|
"border": "#637e7a",
|
|
"action": "#2a7469",
|
|
"onAction": "#ffffff",
|
|
"accent": "#9f414f",
|
|
"focus": "#2a7469",
|
|
"success": "#287658",
|
|
"warning": "#935f1a",
|
|
"danger": "#ba2e26"
|
|
},
|
|
"dim": {
|
|
"canvas": "#273432",
|
|
"surface": "#324340",
|
|
"raised": "#3d514e",
|
|
"text": "#e5ebea",
|
|
"muted": "#b2c2c0",
|
|
"line": "#4d6662",
|
|
"border": "#a4b7b4",
|
|
"action": "#87d4c8",
|
|
"onAction": "#10141a",
|
|
"accent": "#e0b3ba",
|
|
"focus": "#87d4c8",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#eeaeaa"
|
|
},
|
|
"dark": {
|
|
"canvas": "#141a19",
|
|
"surface": "#1f2927",
|
|
"raised": "#2c3a38",
|
|
"text": "#b9cbc8",
|
|
"muted": "#a4b7b4",
|
|
"line": "#3d514e",
|
|
"border": "#a4b7b4",
|
|
"action": "#87d4c8",
|
|
"onAction": "#10141a",
|
|
"accent": "#d18f99",
|
|
"focus": "#87d4c8",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#e58580"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "cobalt",
|
|
"name": "Cobalt",
|
|
"hue": 229,
|
|
"sat": 75,
|
|
"accent": 49,
|
|
"accentSat": 63,
|
|
"theory": "Complementary",
|
|
"note": "A stronger royal blue meets a small amber accent. The high hue separation is controlled by using amber only in secondary details.",
|
|
"use": "The most assertive blue option. No large yellow surfaces.",
|
|
"modes": {
|
|
"light": {
|
|
"canvas": "#f3f3f7",
|
|
"surface": "#ffffff",
|
|
"raised": "#e6e8ef",
|
|
"text": "#454a5e",
|
|
"muted": "#60657b",
|
|
"line": "#cdd1df",
|
|
"border": "#63687e",
|
|
"action": "#1c3bc4",
|
|
"onAction": "#ffffff",
|
|
"accent": "#79671b",
|
|
"focus": "#1c3bc4",
|
|
"success": "#277255",
|
|
"warning": "#8f5c19",
|
|
"danger": "#ba2e26"
|
|
},
|
|
"dim": {
|
|
"canvas": "#242838",
|
|
"surface": "#2e3248",
|
|
"raised": "#383d57",
|
|
"text": "#d0d2dc",
|
|
"muted": "#a6aab9",
|
|
"line": "#464d6d",
|
|
"border": "#a4a7b7",
|
|
"action": "#94a5f0",
|
|
"onAction": "#10141a",
|
|
"accent": "#e1ce7a",
|
|
"focus": "#94a5f0",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#e89591"
|
|
},
|
|
"dark": {
|
|
"canvas": "#12141c",
|
|
"surface": "#1c1f2c",
|
|
"raised": "#282c3e",
|
|
"text": "#b6b9c9",
|
|
"muted": "#a4a7b7",
|
|
"line": "#383d57",
|
|
"border": "#a4a7b7",
|
|
"action": "#798eec",
|
|
"onAction": "#10141a",
|
|
"accent": "#e1ce7a",
|
|
"focus": "#798eec",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#e37d78"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "rosewood",
|
|
"name": "Rosewood",
|
|
"hue": 329,
|
|
"sat": 47,
|
|
"accent": 209,
|
|
"accentSat": 39,
|
|
"theory": "Triadic pair",
|
|
"note": "Dusty pink and steel blue occupy two points of a triadic relationship. The third, yellow-green, is omitted to avoid an overly colorful interface.",
|
|
"use": "A softer warm identity that does not become pastel text.",
|
|
"modes": {
|
|
"light": {
|
|
"canvas": "#f6f3f5",
|
|
"surface": "#ffffff",
|
|
"raised": "#ede8eb",
|
|
"text": "#5e4552",
|
|
"muted": "#7b606e",
|
|
"line": "#dcd0d6",
|
|
"border": "#7e6371",
|
|
"action": "#a53b72",
|
|
"onAction": "#ffffff",
|
|
"accent": "#416c95",
|
|
"focus": "#a53b72",
|
|
"success": "#287658",
|
|
"warning": "#8f5c19",
|
|
"danger": "#ba2e26"
|
|
},
|
|
"dim": {
|
|
"canvas": "#34272e",
|
|
"surface": "#43323b",
|
|
"raised": "#513d48",
|
|
"text": "#e1d6db",
|
|
"muted": "#beacb5",
|
|
"line": "#664d5a",
|
|
"border": "#b7a4ae",
|
|
"action": "#dc9ebe",
|
|
"onAction": "#10141a",
|
|
"accent": "#95b3d0",
|
|
"focus": "#dc9ebe",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#ea9d99"
|
|
},
|
|
"dark": {
|
|
"canvas": "#1a1417",
|
|
"surface": "#291f24",
|
|
"raised": "#3a2c33",
|
|
"text": "#cbb9c2",
|
|
"muted": "#b7a4ae",
|
|
"line": "#513d48",
|
|
"border": "#b7a4ae",
|
|
"action": "#d487af",
|
|
"onAction": "#10141a",
|
|
"accent": "#8eaecd",
|
|
"focus": "#d487af",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#e37d78"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "graphite",
|
|
"name": "Graphite",
|
|
"hue": 216,
|
|
"sat": 9,
|
|
"accent": 216,
|
|
"accentSat": 12,
|
|
"theory": "Monochromatic",
|
|
"note": "One blue-gray hue uses value and saturation changes instead of a second brand hue. Semantic status colors remain independent.",
|
|
"use": "Minimal chroma for content-heavy work. Hierarchy comes from contrast.",
|
|
"modes": {
|
|
"light": {
|
|
"canvas": "#f5f5f5",
|
|
"surface": "#ffffff",
|
|
"raised": "#eaeaeb",
|
|
"text": "#434d5b",
|
|
"muted": "#5e6978",
|
|
"line": "#d5d6d7",
|
|
"border": "#636e7e",
|
|
"action": "#616975",
|
|
"onAction": "#ffffff",
|
|
"accent": "#5e6978",
|
|
"focus": "#616975",
|
|
"success": "#287658",
|
|
"warning": "#8f5c19",
|
|
"danger": "#ba2e26"
|
|
},
|
|
"dim": {
|
|
"canvas": "#2d2e2f",
|
|
"surface": "#393a3c",
|
|
"raised": "#454749",
|
|
"text": "#dfe2e7",
|
|
"muted": "#afb6c0",
|
|
"line": "#57595c",
|
|
"border": "#a4abb7",
|
|
"action": "#b1b6be",
|
|
"onAction": "#10141a",
|
|
"accent": "#afb6c0",
|
|
"focus": "#b1b6be",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#eba29e"
|
|
},
|
|
"dark": {
|
|
"canvas": "#161718",
|
|
"surface": "#232425",
|
|
"raised": "#323334",
|
|
"text": "#bcc3cd",
|
|
"muted": "#a4abb7",
|
|
"line": "#454749",
|
|
"border": "#a4abb7",
|
|
"action": "#a6acb5",
|
|
"onAction": "#10141a",
|
|
"accent": "#a4abb7",
|
|
"focus": "#a6acb5",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#e37d78"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "grove",
|
|
"name": "Grove",
|
|
"hue": 146,
|
|
"sat": 37,
|
|
"accent": 356,
|
|
"accentSat": 39,
|
|
"theory": "Split-complementary pair",
|
|
"note": "Muted forest green meets dusty rose, 30 degrees to one side of its magenta complement. The second split accent is omitted. Low-saturation surfaces keep green from dominating.",
|
|
"use": "An optional green palette for other preferences, not the proposed default.",
|
|
"modes": {
|
|
"light": {
|
|
"canvas": "#f4f6f5",
|
|
"surface": "#ffffff",
|
|
"raised": "#e8edea",
|
|
"text": "#3d5246",
|
|
"muted": "#586f62",
|
|
"line": "#d2dbd6",
|
|
"border": "#637e6e",
|
|
"action": "#377752",
|
|
"onAction": "#ffffff",
|
|
"accent": "#9c444a",
|
|
"focus": "#377752",
|
|
"success": "#287658",
|
|
"warning": "#935f1a",
|
|
"danger": "#ba2e26"
|
|
},
|
|
"dim": {
|
|
"canvas": "#29332d",
|
|
"surface": "#34413a",
|
|
"raised": "#3f4f46",
|
|
"text": "#e2e9e5",
|
|
"muted": "#afc0b6",
|
|
"line": "#4f6358",
|
|
"border": "#a4b7ac",
|
|
"action": "#8fcca9",
|
|
"onAction": "#10141a",
|
|
"accent": "#ddb1b4",
|
|
"focus": "#8fcca9",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#edaaa6"
|
|
},
|
|
"dark": {
|
|
"canvas": "#141917",
|
|
"surface": "#202823",
|
|
"raised": "#2d3932",
|
|
"text": "#b9cbc1",
|
|
"muted": "#a4b7ac",
|
|
"line": "#3f4f46",
|
|
"border": "#a4b7ac",
|
|
"action": "#8fcca9",
|
|
"onAction": "#10141a",
|
|
"accent": "#cd8e92",
|
|
"focus": "#8fcca9",
|
|
"success": "#85d5b7",
|
|
"warning": "#e7b574",
|
|
"danger": "#e58580"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|