🚀 Groq Theme

\n A modern, vibrant theme inspired by Groq's fast AI inference platform. \n Features a bold orange primary color paired with a sophisticated gray palette \n and extended color families for versatility.\n

\n\n

Quick Start

To activate this theme, uncomment @use 'groq/overrides'; in theme.scss and run deno task build:styles

\n\n

🎨 Core Color Palette

\n\n

Primary Orange (Brand)

Orange 50

#fff5e5

\n Core\n

Orange 100

#ffe8cc

\n Core\n

Orange 200

#ffd1a3

\n Original\n

Orange 300

#ffb973

\n Core\n

Orange 400

#fe9e20

\n Original\n

Orange 500

#f48b0a

\n Core\n

Orange 600

#f43e01

\n Primary Brand ⭐\n

Orange 700

#c23101

\n Original\n

Orange 800

#9a2701

\n Core\n

Orange 900

#731d00

\n Core\n

\n\n

Neutral Grays

Gray 50

#f9f9f8

\n Core\n

Gray 100

#f3f3ee

\n Original\n

Gray 200

#e8e8e0

\n Core\n

Gray 300

#cecebf

\n Original\n

Gray 400

#9f9f92

\n Core\n

Gray 500

#69695d

\n Original\n

Gray 600

#4e4e45

\n Core\n

Gray 700

#2d2f33

\n Original\n

Gray 800

#26292e

\n Text ⭐\n

Gray 900

#1a1c1f

\n Core\n

\n\n

Pure Values

Black

#000000

\n Original\n

White

#ffffff

\n Original\n

\n\n

✨ Extended Color Families

\n\n

Yellow Tones

Yellow 200

#f4fd90

\n Extended\n

Yellow 300

#fdeb20

\n Extended\n

Yellow 500

#e6d000

\n Core\n

Yellow 700

#c6b802

\n Extended\n

\n\n

Green Tones

Green 200

#a9ffdb

\n Extended\n

Green 300

#10e68d

\n Extended\n

Green 500

#0dcc7a

\n Core\n

Green 700

#018b01

\n Extended\n

\n\n

Blue Tones

Blue 200

#bfe4fc

\n Extended\n

Blue 300

#5fc0ff

\n Extended\n

Blue 500

#0082a0

\n Extended\n

\n\n

Purple Tones

Purple 200

#e3dcf8

\n Extended\n

Purple 300

#d377fd

\n Extended\n

Purple 500

#683d7f

\n Extended\n

\n\n

Pink Tones

Pink 200

#fad8ff

\n Extended\n

Pink 300

#f392dd

\n Extended\n

Pink 500

#ee66ce

\n Extended\n

\n\n

🎯 Semantic Color Mapping

\n \n

Primary Colors

\n Primary\n --groq-orange-600\n

\n Primary Hover\n --groq-orange-700\n

\n Primary Active\n --groq-orange-800\n

\n\n

Text Colors

\n Primary Text\n --groq-gray-800\n

\n Secondary Text\n --groq-gray-600\n

\n Muted Text\n --groq-gray-500\n

\n\n

Background Colors

\n Primary BG\n --groq-white\n

\n Secondary BG\n --groq-gray-50\n

\n Muted BG\n --groq-gray-100\n

\n\n

Semantic States

\n Success\n --groq-green-300\n

\n Warning\n --groq-yellow-300\n

\n Danger\n --groq-orange-600\n

\n Info\n --groq-blue-300\n

\n\n

🎨 Component Examples

\n\n

Buttons

\n \n

\n \n

\n\n

Alerts

\n Success! Your action was completed.\n

\n Warning! Please review this.\n

\n Error! Something went wrong.\n

\n Info: Here's some information.\n

\n\n

\n\n \n

\n\n\n\n","deleted","label",[172,173,174,175,155],"styles","design-system","themes","groq","permalink","https://www.val.town/x/yawnxyz/routine-stack/code/styles/design-system/themes/groq/color-reference.html","extension","html","actionData","errors"]