Sammie’s Lab Palette

A quick visual reference for the charcoal-and-lavender design system: dark workshop surfaces, soft text, gentle borders, and sapphic little moon-glow accents.

Click a card to copy:

Hex / RGBA RGB Variable

Core Neutrals

The room, shelves, panels, and controls.

Main Background

The deep charcoal base.

--bg-main #181818 (24, 24, 24)

Panel Background

Sidebar, file display, quiet surfaces.

--bg-panel #1F1F1F (31, 31, 31)

Panel Alt

DOCX/document surfaces.

--bg-panel-alt #202020 (32, 32, 32)

Control Background

Audio controls and darker widgets.

--bg-control #20252B (32, 37, 43)

Borders

Low-contrast seams, not shouty outlines.

Subtle Border

Default structural border.

--border-subtle #393939 (57, 57, 57)

Control Border

Neutral control edge.

--border-control #495057 (73, 80, 87)

Button Border

Muted lavender-grey button edge.

--border-button #6F6396 (111, 99, 150)

Hover Border

Interactive hover/focus edge.

--border-hover #9F8FE0 (159, 143, 224)

Card Border

Audio/tool card edge.

--border-card #3F4750 (63, 71, 80)

Text

Readable, gentle, never pure white unless necessary.

Main Text

Default body text.

--text-main #CCCCCC (204, 204, 204)

Soft Text

Buttons and secondary emphasis.

--text-soft #D4DDE3 (212, 221, 227)

Strong Text

Filenames and high-importance labels.

--text-strong #D7E3EA (215, 227, 234)

Muted Text

Metadata, hints, quiet labels.

--text-muted #7F8B92 (127, 139, 146)

Hover Text

Brightened text on hover.

--text-hover #E6EEF4 (230, 238, 244)

Lavender Accents

The “Sammie” part of Sammie’s Lab.

Lavender

Primary deep accent.

--accent-lavender #B8A1FF (184, 161, 255)

Soft Lavender

Titles, active labels, branding.

--accent-lavender-soft #C7B6FF (199, 182, 255)

Muted Lavender

Small labels and quiet accent text.

--accent-lavender-muted #A996E8 (169, 150, 232)

Underline Accent

Hover/underline accent replacement.

--accent-underline #D8CCFF (216, 204, 255)

Glows

Soft magic-light around useful things.

Glow Soft

Subtle active rings.

--glow-primary-soft rgba(184, 161, 255, 0.15) rgba(184, 161, 255, 0.15)

Glow

Active pane borders/glows.

--glow-primary rgba(184, 161, 255, 0.2) rgba(184, 161, 255, 0.2)

Glow Strong

More visible feature glow.

--glow-primary-strong rgba(184, 161, 255, 0.24) rgba(184, 161, 255, 0.24)

Inner Glow

Soft internal card lighting.

--glow-primary-inner rgba(184, 161, 255, 0.08) rgba(184, 161, 255, 0.08)

Sample Tool Card

This is how the palette feels when it’s assembled into a little Sammie’s Lab-style component.

Open Notebook View Project

▸ Sammie’s Lab

▸ tools

Sammie’s Notebook.html

future-bean-engine.js

▸ assets

science-bean.png