Color
Teal anchors trust. Sand warms the canvas. Trust tiers run Gray → Blue → Green to signal verification depth — never emotion. Every color is a decision, not a default.
Core palette#
Primary action, link, focus. The one color that says WellSourced.
Pressed and hover state for teal surfaces.
Hover backgrounds, soft highlights.
Page background. Warm, premium, and decisively not white.
Subtle surfaces, product image placeholder.
Headings and body text. Dark plum-black.
Secondary text, metadata, captions.
Soft dividers and inactive surfaces.
Trust tiers#
The tier palette is calibrated to verification depth, not emotion. Green does not mean “good” and blue does not mean “maybe.” They mean “audited,” “community-verified,” and “self-reported” respectively.
The brand told us. Unverified — a starting point.
A contributor cross-checked against public sources.
Third-party certified or audited. The highest tier.
Utility#
Non-blocking caution — price change, low stock.
Blocking error — form validation, failed requests.
Successful state — matches T3 green by design.
Default border, component frames.
Usage rules#
- Teal is for the one action the user should take. One primary button per screen. Teal is never decorative.
- Sand is the page, not an accent. Full-bleed backgrounds, never used as a small block of color.
- Trust colors never map to opinions. Don't put green on “good” brands. Use it only when an audit exists.
- Ink over pure black.
#1A1A2Ereads warmer against sand and doesn't punch holes in the page. - Never hardcode a hex in component code. Use the CSS variable. If it doesn't exist, add it here first.