Passionfroot. Twilight cloud library on warm parchment.

Primary brand accent — the most-prominent chromatic across the system, used for highlighted card surfaces, illustration fills, and brand emphasis; vivid lavender that defines the Passionfroot identity

Dark hero section base, deep contrast text on light surfaces — the near-black plum that anchors the twilight gradient backgrounds

Accent card surface, tag pill, illustration fill — one of the pastel punctuation colors in the rainbow accent set

Accent card surface, warm illustration fill, decorative highlight — the sunset-orange accent for warmth and energy

Accent card surface, cool-toned illustration fill — the bright sky-cyan for variety in the multi-color accent set

Accent card surface, cool illustration fill — lighter blue accent used in color card rotation

Accent card surface, highlight wash — the warm yellow accent for cheerful punctuation in card backgrounds

Decorative border, icon stroke, soft accent outline — slightly lighter than Electric Violet for outlined elements

Outlined button border, soft accent stroke — the desaturated lavender for ghost/outlined action elements

Outlined button background wash, soft accent fill — extremely pale violet for subtle tinted button states

Icon border, decorative stroke, bold accent outline — the saturated dark violet for iconography and emphasis strokes

Illustration fill, warm accent, character highlight — the warm coral used in the mascot and decorative artwork

Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content

Green decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color

Icon border, warm stroke, illustrative accent — darker orange for icon outlines and warm decorative elements

Icon border, cool stroke, informative accent — the desaturated teal for cool-toned iconography and strokes

Icon border, decorative stroke, pink-magenta accent — the warm magenta for iconography and brand emphasis strokes

Gray wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Use as a supporting accent, not as a status color

Primary text, primary borders, dark surface fills — the workhorse neutral that carries all high-contrast text and structural outlines

Secondary text, muted button borders, button text on light fills — the mid-dark neutral for body copy and neutral action outlines

Secondary muted text, button labels in ghost variants — one step darker than Ash Gray for slightly more legible de-emphasis

Muted text, placeholder text, subtle icon strokes, disabled state borders — the warm mid-gray for de-emphasized content

Hairline borders, dividers, soft box-shadow base — the warm-tinted stroke that gives components a paper-on-paper quality

Card surfaces, elevated backgrounds, shadow tint — sits one step above Parchment Cream as the secondary surface level

Page canvas, default body background, nav surface — warm off-white that replaces pure white to avoid sterile SaaS feel

Highest-elevation surfaces, button fills, input fields — the brightest neutral reserved for the focal interactive elements