<h3>π <strong>Light Theme</strong></h3> Element | Color | Description -- | -- | -- Primary | #2AB7CA | Teal β fresh, clean, and health-oriented Accent | #F4A261 | Warm orange β adds energy and friendliness Background | #FFFFFF | Crisp white β maximizes readability and cleanliness Text (Primary) | #2A2A2A | Deep gray β softer than black, easy on the eyes Secondary Text | #5F6F7A | Muted slate β for labels and helper text Button Hover | #218E9F | Slightly darker teal for interactive feedback <h3 class="text-lg-strong pb-1 [&:not(:first-child)]:pt-3.5">π <strong>Dark Theme</strong></h3> <div class="relative max-w-full"><div class="my-6 max-w-full overflow-x-auto rounded-lg bg-white/25 dark:bg-black/25"><table class="t-table" style="border-spacing: 0px;"><thead><tr><th style="opacity: 1;">Element</th><th style="opacity: 1;">Color</th><th style="opacity: 1;">Description</th></tr></thead><tbody><tr><td style="opacity: 1;">Primary</td><td style="opacity: 1;"><code class="font-ligatures-none mx-0.5 rounded-[4px] border border-stroke-300 bg-accent-200/60 px-1 py-px font-mono text-foreground-800 text-sm dark:bg-accent-200" style="opacity: 1;">#2AB7CA</code></td><td style="opacity: 1;">Same teal β maintains brand consistency</td></tr><tr><td style="opacity: 1;">Accent</td><td style="opacity: 1;"><code class="font-ligatures-none mx-0.5 rounded-[4px] border border-stroke-300 bg-accent-200/60 px-1 py-px font-mono text-foreground-800 text-sm dark:bg-accent-200" style="opacity: 1;">#E76F51</code></td><td style="opacity: 1;">Deep coral β adds warmth and contrast</td></tr><tr><td style="opacity: 1;">Background</td><td style="opacity: 1;"><code class="font-ligatures-none mx-0.5 rounded-[4px] border border-stroke-300 bg-accent-200/60 px-1 py-px font-mono text-foreground-800 text-sm dark:bg-accent-200" style="opacity: 1;">#1E1E1E</code></td><td style="opacity: 1;">Charcoal black β modern and low-glare</td></tr><tr><td style="opacity: 1;">Text (Primary)</td><td style="opacity: 1;"><code class="font-ligatures-none mx-0.5 rounded-[4px] border border-stroke-300 bg-accent-200/60 px-1 py-px font-mono text-foreground-800 text-sm dark:bg-accent-200" style="opacity: 1;">#E0E0E0</code></td><td style="opacity: 1;">Soft light gray β readable without harsh contrast</td></tr><tr><td style="opacity: 1;">Secondary Text</td><td style="opacity: 1;"><code class="font-ligatures-none mx-0.5 rounded-[4px] border border-stroke-300 bg-accent-200/60 px-1 py-px font-mono text-foreground-800 text-sm dark:bg-accent-200" style="opacity: 1;">#A0A0A0</code></td><td style="opacity: 1;">Dim gray β for subtle UI elements</td></tr><tr><td style="opacity: 1;">Button Hover</td><td style="opacity: 1;"><code class="font-ligatures-none mx-0.5 rounded-[4px] border border-stroke-300 bg-accent-200/60 px-1 py-px font-mono text-foreground-800 text-sm dark:bg-accent-200" style="opacity: 1;">#1F9AAE</code></td><td style="opacity: 1;">Brighter teal for hover feedback</td></tr></tbody></table></div><div class="pointer-events-none absolute inset-0 rounded-lg border border-stroke-300 dark:border-stroke-450"></div></div>
π Light Theme
π Dark Theme
#2AB7CA#E76F51#1E1E1E#E0E0E0#A0A0A0#1F9AAE