updated to include themes

This commit is contained in:
2026-06-01 10:59:20 +02:00
parent 3f54c13a1b
commit 3629c8633c
67 changed files with 2273 additions and 1 deletions
@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#100F0F"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#100F0F"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#1C1B1A"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#CECDC3">Flexoki Blue (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#282726"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#CECDC3">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#575653">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#4385BE"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#4385BE"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#100F0F"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<circle cx="148" cy="166" r="9" fill="#D14D41"/>
<circle cx="172" cy="166" r="9" fill="#DA702C"/>
<circle cx="196" cy="166" r="9" fill="#4385BE"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#66A0C8" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#FFFCF0"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#FFFCF0"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#F2F0E5"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#100F0F">Flexoki Blue (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#E6E4D9"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#100F0F">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#B7B5AC">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#205EA6"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#205EA6"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#FFFCF0"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<circle cx="148" cy="166" r="9" fill="#AF3029"/>
<circle cx="172" cy="166" r="9" fill="#BC5215"/>
<circle cx="196" cy="166" r="9" fill="#205EA6"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#3171B2" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" width="484" height="240" viewBox="0 0 484 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#100F0F"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#100F0F"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#1C1B1A"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#CECDC3">Flexoki Blue (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#282726"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#CECDC3">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#575653">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#4385BE"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#4385BE"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#100F0F"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<circle cx="148" cy="166" r="9" fill="#D14D41"/>
<circle cx="172" cy="166" r="9" fill="#DA702C"/>
<circle cx="196" cy="166" r="9" fill="#4385BE"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#66A0C8" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Surface Tint Overlay</text>
</g>
<rect x="240" y="0" width="4" height="240" fill="#888"/>
<g transform="translate(244, 0)">
<rect width="240" height="240" fill="#FFFCF0"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#FFFCF0"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#F2F0E5"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#100F0F">Flexoki Blue (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#E6E4D9"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#100F0F">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#B7B5AC">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#205EA6"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#205EA6"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#FFFCF0"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<circle cx="148" cy="166" r="9" fill="#AF3029"/>
<circle cx="172" cy="166" r="9" fill="#BC5215"/>
<circle cx="196" cy="166" r="9" fill="#205EA6"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#3171B2" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#100F0F"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#100F0F"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#1C1B1A"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#CECDC3">Flexoki Cyan (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#282726"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#CECDC3">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#575653">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#3AA99F"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#3AA99F"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#100F0F"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<circle cx="148" cy="166" r="9" fill="#D14D41"/>
<circle cx="172" cy="166" r="9" fill="#DA702C"/>
<circle cx="196" cy="166" r="9" fill="#3AA99F"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#5ABDAC" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#FFFCF0"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#FFFCF0"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#F2F0E5"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#100F0F">Flexoki Cyan (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#E6E4D9"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#100F0F">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#B7B5AC">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#24837B"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#24837B"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#FFFCF0"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<circle cx="148" cy="166" r="9" fill="#AF3029"/>
<circle cx="172" cy="166" r="9" fill="#BC5215"/>
<circle cx="196" cy="166" r="9" fill="#24837B"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#2F968D" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" width="484" height="240" viewBox="0 0 484 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#100F0F"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#100F0F"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#1C1B1A"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#CECDC3">Flexoki Cyan (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#282726"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#CECDC3">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#575653">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#3AA99F"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#3AA99F"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#100F0F"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<circle cx="148" cy="166" r="9" fill="#D14D41"/>
<circle cx="172" cy="166" r="9" fill="#DA702C"/>
<circle cx="196" cy="166" r="9" fill="#3AA99F"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#5ABDAC" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Surface Tint Overlay</text>
</g>
<rect x="240" y="0" width="4" height="240" fill="#888"/>
<g transform="translate(244, 0)">
<rect width="240" height="240" fill="#FFFCF0"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#FFFCF0"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#F2F0E5"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#100F0F">Flexoki Cyan (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#E6E4D9"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#100F0F">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#B7B5AC">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#24837B"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#24837B"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#FFFCF0"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<circle cx="148" cy="166" r="9" fill="#AF3029"/>
<circle cx="172" cy="166" r="9" fill="#BC5215"/>
<circle cx="196" cy="166" r="9" fill="#24837B"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#2F968D" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#100F0F"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#100F0F"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#1C1B1A"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#CECDC3">Flexoki Blue (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#282726"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#CECDC3">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#575653">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#4385BE"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#4385BE"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#100F0F"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<circle cx="148" cy="166" r="9" fill="#D14D41"/>
<circle cx="172" cy="166" r="9" fill="#DA702C"/>
<circle cx="196" cy="166" r="9" fill="#4385BE"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#66A0C8" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#100F0F"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#100F0F"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#1C1B1A"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#CECDC3">Flexoki Green (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#282726"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#CECDC3">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#575653">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#879A39"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#879A39"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#100F0F"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<circle cx="148" cy="166" r="9" fill="#D14D41"/>
<circle cx="172" cy="166" r="9" fill="#DA702C"/>
<circle cx="196" cy="166" r="9" fill="#879A39"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#A0AF54" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#FFFCF0"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#FFFCF0"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#F2F0E5"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#100F0F">Flexoki Green (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#E6E4D9"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#100F0F">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#B7B5AC">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#66800B"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#66800B"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#FFFCF0"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<circle cx="148" cy="166" r="9" fill="#AF3029"/>
<circle cx="172" cy="166" r="9" fill="#BC5215"/>
<circle cx="196" cy="166" r="9" fill="#66800B"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#768D21" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" width="484" height="240" viewBox="0 0 484 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#100F0F"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#100F0F"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#1C1B1A"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#CECDC3">Flexoki Green (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#282726"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#CECDC3">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#575653">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#879A39"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#879A39"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#100F0F"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<circle cx="148" cy="166" r="9" fill="#D14D41"/>
<circle cx="172" cy="166" r="9" fill="#DA702C"/>
<circle cx="196" cy="166" r="9" fill="#879A39"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#A0AF54" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Surface Tint Overlay</text>
</g>
<rect x="240" y="0" width="4" height="240" fill="#888"/>
<g transform="translate(244, 0)">
<rect width="240" height="240" fill="#FFFCF0"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#FFFCF0"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#F2F0E5"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#100F0F">Flexoki Green (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#E6E4D9"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#100F0F">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#B7B5AC">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#66800B"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#66800B"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#FFFCF0"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<circle cx="148" cy="166" r="9" fill="#AF3029"/>
<circle cx="172" cy="166" r="9" fill="#BC5215"/>
<circle cx="196" cy="166" r="9" fill="#66800B"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#768D21" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#FFFCF0"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#FFFCF0"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#F2F0E5"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#100F0F">Flexoki Blue (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#E6E4D9"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#100F0F">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#B7B5AC">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#205EA6"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#205EA6"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#FFFCF0"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<circle cx="148" cy="166" r="9" fill="#AF3029"/>
<circle cx="172" cy="166" r="9" fill="#BC5215"/>
<circle cx="196" cy="166" r="9" fill="#205EA6"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#3171B2" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#100F0F"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#100F0F"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#1C1B1A"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#CECDC3">Flexoki Magenta (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#282726"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#CECDC3">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#575653">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#CE5D97"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#CE5D97"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#100F0F"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<circle cx="148" cy="166" r="9" fill="#D14D41"/>
<circle cx="172" cy="166" r="9" fill="#DA702C"/>
<circle cx="196" cy="166" r="9" fill="#CE5D97"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#E47DA8" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#FFFCF0"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#FFFCF0"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#F2F0E5"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#100F0F">Flexoki Magenta (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#E6E4D9"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#100F0F">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#B7B5AC">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#A02F6F"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#A02F6F"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#FFFCF0"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<circle cx="148" cy="166" r="9" fill="#AF3029"/>
<circle cx="172" cy="166" r="9" fill="#BC5215"/>
<circle cx="196" cy="166" r="9" fill="#A02F6F"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#B74583" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" width="484" height="240" viewBox="0 0 484 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#100F0F"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#100F0F"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#1C1B1A"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#CECDC3">Flexoki Magenta (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#282726"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#CECDC3">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#575653">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#CE5D97"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#CE5D97"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#100F0F"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<circle cx="148" cy="166" r="9" fill="#D14D41"/>
<circle cx="172" cy="166" r="9" fill="#DA702C"/>
<circle cx="196" cy="166" r="9" fill="#CE5D97"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#E47DA8" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Surface Tint Overlay</text>
</g>
<rect x="240" y="0" width="4" height="240" fill="#888"/>
<g transform="translate(244, 0)">
<rect width="240" height="240" fill="#FFFCF0"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#FFFCF0"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#F2F0E5"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#100F0F">Flexoki Magenta (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#E6E4D9"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#100F0F">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#B7B5AC">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#A02F6F"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#A02F6F"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#FFFCF0"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<circle cx="148" cy="166" r="9" fill="#AF3029"/>
<circle cx="172" cy="166" r="9" fill="#BC5215"/>
<circle cx="196" cy="166" r="9" fill="#A02F6F"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#B74583" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#100F0F"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#100F0F"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#1C1B1A"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#CECDC3">Flexoki Orange (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#282726"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#CECDC3">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#575653">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#DA702C"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#DA702C"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#100F0F"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<circle cx="148" cy="166" r="9" fill="#D14D41"/>
<circle cx="172" cy="166" r="9" fill="#DA702C"/>
<circle cx="196" cy="166" r="9" fill="#DA702C"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#EC8B49" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#FFFCF0"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#FFFCF0"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#F2F0E5"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#100F0F">Flexoki Orange (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#E6E4D9"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#100F0F">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#B7B5AC">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#BC5215"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#BC5215"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#FFFCF0"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<circle cx="148" cy="166" r="9" fill="#AF3029"/>
<circle cx="172" cy="166" r="9" fill="#BC5215"/>
<circle cx="196" cy="166" r="9" fill="#BC5215"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#CB6120" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" width="484" height="240" viewBox="0 0 484 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#100F0F"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#100F0F"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#1C1B1A"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#CECDC3">Flexoki Orange (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#282726"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#CECDC3">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#575653">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#DA702C"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#DA702C"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#100F0F"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<circle cx="148" cy="166" r="9" fill="#D14D41"/>
<circle cx="172" cy="166" r="9" fill="#DA702C"/>
<circle cx="196" cy="166" r="9" fill="#DA702C"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#EC8B49" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Surface Tint Overlay</text>
</g>
<rect x="240" y="0" width="4" height="240" fill="#888"/>
<g transform="translate(244, 0)">
<rect width="240" height="240" fill="#FFFCF0"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#FFFCF0"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#F2F0E5"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#100F0F">Flexoki Orange (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#E6E4D9"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#100F0F">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#B7B5AC">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#BC5215"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#BC5215"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#FFFCF0"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<circle cx="148" cy="166" r="9" fill="#AF3029"/>
<circle cx="172" cy="166" r="9" fill="#BC5215"/>
<circle cx="196" cy="166" r="9" fill="#BC5215"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#CB6120" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#100F0F"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#100F0F"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#1C1B1A"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#CECDC3">Flexoki Purple (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#282726"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#CECDC3">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#575653">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#8B7EC8"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#8B7EC8"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#100F0F"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<circle cx="148" cy="166" r="9" fill="#D14D41"/>
<circle cx="172" cy="166" r="9" fill="#DA702C"/>
<circle cx="196" cy="166" r="9" fill="#8B7EC8"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#A699D0" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#FFFCF0"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#FFFCF0"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#F2F0E5"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#100F0F">Flexoki Purple (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#E6E4D9"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#100F0F">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#B7B5AC">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#5E409D"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#5E409D"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#FFFCF0"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<circle cx="148" cy="166" r="9" fill="#AF3029"/>
<circle cx="172" cy="166" r="9" fill="#BC5215"/>
<circle cx="196" cy="166" r="9" fill="#5E409D"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#735EB5" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" width="484" height="240" viewBox="0 0 484 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#100F0F"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#100F0F"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#1C1B1A"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#CECDC3">Flexoki Purple (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#282726"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#CECDC3">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#575653">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#8B7EC8"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#8B7EC8"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#100F0F"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<circle cx="148" cy="166" r="9" fill="#D14D41"/>
<circle cx="172" cy="166" r="9" fill="#DA702C"/>
<circle cx="196" cy="166" r="9" fill="#8B7EC8"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#A699D0" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Surface Tint Overlay</text>
</g>
<rect x="240" y="0" width="4" height="240" fill="#888"/>
<g transform="translate(244, 0)">
<rect width="240" height="240" fill="#FFFCF0"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#FFFCF0"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#F2F0E5"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#100F0F">Flexoki Purple (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#E6E4D9"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#100F0F">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#B7B5AC">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#5E409D"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#5E409D"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#FFFCF0"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<circle cx="148" cy="166" r="9" fill="#AF3029"/>
<circle cx="172" cy="166" r="9" fill="#BC5215"/>
<circle cx="196" cy="166" r="9" fill="#5E409D"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#735EB5" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#100F0F"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#100F0F"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#1C1B1A"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#CECDC3">Flexoki Red (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#282726"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#CECDC3">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#575653">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#D14D41"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#D14D41"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#100F0F"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<circle cx="148" cy="166" r="9" fill="#D14D41"/>
<circle cx="172" cy="166" r="9" fill="#DA702C"/>
<circle cx="196" cy="166" r="9" fill="#D14D41"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#E8705F" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#FFFCF0"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#FFFCF0"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#F2F0E5"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#100F0F">Flexoki Red (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#E6E4D9"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#100F0F">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#B7B5AC">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#AF3029"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#AF3029"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#FFFCF0"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<circle cx="148" cy="166" r="9" fill="#AF3029"/>
<circle cx="172" cy="166" r="9" fill="#BC5215"/>
<circle cx="196" cy="166" r="9" fill="#AF3029"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#C03E35" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" width="484" height="240" viewBox="0 0 484 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#100F0F"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#100F0F"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#1C1B1A"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#CECDC3">Flexoki Red (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#282726"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#CECDC3">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#575653">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#D14D41"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#D14D41"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#100F0F"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<circle cx="148" cy="166" r="9" fill="#D14D41"/>
<circle cx="172" cy="166" r="9" fill="#DA702C"/>
<circle cx="196" cy="166" r="9" fill="#D14D41"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#E8705F" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Surface Tint Overlay</text>
</g>
<rect x="240" y="0" width="4" height="240" fill="#888"/>
<g transform="translate(244, 0)">
<rect width="240" height="240" fill="#FFFCF0"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#FFFCF0"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#F2F0E5"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#100F0F">Flexoki Red (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#E6E4D9"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#100F0F">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#B7B5AC">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#AF3029"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#AF3029"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#FFFCF0"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<circle cx="148" cy="166" r="9" fill="#AF3029"/>
<circle cx="172" cy="166" r="9" fill="#BC5215"/>
<circle cx="196" cy="166" r="9" fill="#AF3029"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#C03E35" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#100F0F"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#100F0F"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#1C1B1A"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#CECDC3">Flexoki Yellow (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#282726"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#CECDC3">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#575653">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#D0A215"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#D0A215"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#100F0F"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<circle cx="148" cy="166" r="9" fill="#D14D41"/>
<circle cx="172" cy="166" r="9" fill="#DA702C"/>
<circle cx="196" cy="166" r="9" fill="#D0A215"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#DFB431" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#FFFCF0"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#FFFCF0"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#F2F0E5"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#100F0F">Flexoki Yellow (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#E6E4D9"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#100F0F">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#B7B5AC">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#AD8301"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#AD8301"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#FFFCF0"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<circle cx="148" cy="166" r="9" fill="#AF3029"/>
<circle cx="172" cy="166" r="9" fill="#BC5215"/>
<circle cx="196" cy="166" r="9" fill="#AD8301"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#BE9207" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" width="484" height="240" viewBox="0 0 484 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#100F0F"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#100F0F"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#1C1B1A"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#CECDC3">Flexoki Yellow (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#282726"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#CECDC3">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#575653">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#D0A215"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#D0A215"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#100F0F"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#1C1B1A"/>
<circle cx="148" cy="166" r="9" fill="#D14D41"/>
<circle cx="172" cy="166" r="9" fill="#DA702C"/>
<circle cx="196" cy="166" r="9" fill="#D0A215"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#DFB431" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Surface Tint Overlay</text>
</g>
<rect x="240" y="0" width="4" height="240" fill="#888"/>
<g transform="translate(244, 0)">
<rect width="240" height="240" fill="#FFFCF0"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#FFFCF0"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#F2F0E5"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#100F0F">Flexoki Yellow (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#E6E4D9"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#100F0F">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#B7B5AC">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#AD8301"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#CECDC3">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#AD8301"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#FFFCF0"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#F2F0E5"/>
<circle cx="148" cy="166" r="9" fill="#AF3029"/>
<circle cx="172" cy="166" r="9" fill="#BC5215"/>
<circle cx="196" cy="166" r="9" fill="#AD8301"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#BE9207" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#100F0F">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

+173
View File
@@ -0,0 +1,173 @@
{
"id": "flexoki",
"name": "Flexoki",
"version": "1.0.0",
"author": "Euan Deas",
"description": "Inky color scheme for prose and code by Steph Ango",
"dark": {
"primaryText": "#100F0F",
"primaryContainer": "#205EA6",
"surface": "#100F0F",
"surfaceText": "#CECDC3",
"surfaceVariant": "#100F0F",
"surfaceVariantText": "#CECDC3",
"background": "#100F0F",
"backgroundText": "#CECDC3",
"outline": "#575653",
"surfaceContainer": "#1C1B1A",
"surfaceContainerHigh": "#282726",
"surfaceContainerHighest": "#343331",
"error": "#D14D41",
"warning": "#DA702C"
},
"light": {
"primaryText": "#CECDC3",
"primaryContainer": "#163B66",
"surface": "#FFFCF0",
"surfaceText": "#100F0F",
"surfaceVariant": "#FFFCF0",
"surfaceVariantText": "#100F0F",
"background": "#FFFCF0",
"backgroundText": "#100F0F",
"outline": "#B7B5AC",
"surfaceContainer": "#F2F0E5",
"surfaceContainerHigh": "#E6E4D9",
"surfaceContainerHighest": "#DAD8CE",
"error": "#AF3029",
"warning": "#BC5215"
},
"variants": {
"default": "blue",
"options": [
{
"id": "blue",
"name": "Blue",
"dark": {
"primary": "#4385BE",
"secondary": "#4385BE",
"surfaceTint": "#66A0C8",
"info": "#4385BE"
},
"light": {
"primary": "#205EA6",
"secondary": "#205EA6",
"surfaceTint": "#3171B2",
"info": "#205EA6"
}
},
{
"id": "red",
"name": "Red",
"dark": {
"primary": "#D14D41",
"secondary": "#D14D41",
"surfaceTint": "#E8705F",
"info": "#D14D41"
},
"light": {
"primary": "#AF3029",
"secondary": "#AF3029",
"surfaceTint": "#C03E35",
"info": "#AF3029"
}
},
{
"id": "orange",
"name": "Orange",
"dark": {
"primary": "#DA702C",
"secondary": "#DA702C",
"surfaceTint": "#EC8B49",
"info": "#DA702C"
},
"light": {
"primary": "#BC5215",
"secondary": "#BC5215",
"surfaceTint": "#CB6120",
"info": "#BC5215"
}
},
{
"id": "yellow",
"name": "Yellow",
"dark": {
"primary": "#D0A215",
"secondary": "#D0A215",
"surfaceTint": "#DFB431",
"info": "#D0A215"
},
"light": {
"primary": "#AD8301",
"secondary": "#AD8301",
"surfaceTint": "#BE9207",
"info": "#AD8301"
}
},
{
"id": "green",
"name": "Green",
"dark": {
"primary": "#879A39",
"secondary": "#879A39",
"surfaceTint": "#A0AF54",
"info": "#879A39"
},
"light": {
"primary": "#66800B",
"secondary": "#66800B",
"surfaceTint": "#768D21",
"info": "#66800B"
}
},
{
"id": "cyan",
"name": "Cyan",
"dark": {
"primary": "#3AA99F",
"secondary": "#3AA99F",
"surfaceTint": "#5ABDAC",
"info": "#3AA99F"
},
"light": {
"primary": "#24837B",
"secondary": "#24837B",
"surfaceTint": "#2F968D",
"info": "#24837B"
}
},
{
"id": "purple",
"name": "Purple",
"dark": {
"primary": "#8B7EC8",
"secondary": "#8B7EC8",
"surfaceTint": "#A699D0",
"info": "#8B7EC8"
},
"light": {
"primary": "#5E409D",
"secondary": "#5E409D",
"surfaceTint": "#735EB5",
"info": "#5E409D"
}
},
{
"id": "magenta",
"name": "Magenta",
"dark": {
"primary": "#CE5D97",
"secondary": "#CE5D97",
"surfaceTint": "#E47DA8",
"info": "#CE5D97"
},
"light": {
"primary": "#A02F6F",
"secondary": "#A02F6F",
"surfaceTint": "#B74583",
"info": "#A02F6F"
}
}
]
},
"sourceDir": "flexoki"
}