Five Web Palette Starting Points with Explicit Roles
Explore small palettes for an article, dashboard, portfolio, shop and dark workspace, then test the roles before exporting.
Updated : Rebuilt around explicit design choices, reproducible examples and documented limitations; retained the existing URL.
A palette is easier to use when it starts from a screen. These five examples are constructed starting points, not measured design trends for 2026. Their labels describe the intended use in this exercise, and every added component still needs its own checks.
1. An article with a warm canvas
Canvas #FFF7ED
Body #172554
Accent #FF7F50
Text on accent #000000Open the article palette to inspect headings and body text first. Use the coral accent sparingly for decoration or a tested button; do not assume it works as small text on cream.
2. A dashboard with quiet surfaces
Canvas #F8FAFC
Card #FFFFFF
Body #0F172A
Action #1D4ED8
Action text #FFFFFFOpen the dashboard palette and check a card, selected navigation item and form field. The near-white surfaces will need stronger boundaries where users depend on those edges.
3. A portfolio with a pale lavender panel
A reproducible text and background example.
Same pair, larger text.
##3B0764 / ##F3E8FF
Portfolio heading and panel.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fixOpen the portfolio palette and inspect a project card with a real screenshot. The image may dominate the visual balance; keep the text panel controlled.
4. A shop with warm product surfaces
A reproducible text and background example.
Same pair, larger text.
##431407 / ##FFEDD5
Product information on a warm surface.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fixOpen the shop palette to inspect price, availability and purchase controls. Use explicit availability labels; the decorative accent should not be the only stock indicator.
5. A dark workspace
Open the dark workspace palette and inspect body copy on both canvas and cards. Keep light action colors paired with a dark label and recheck focus against neighboring surfaces.
Document your chosen roles
Copy the actual values with role names and the pair results you verified. The Studio export supplies palette values; add semantic aliases in the consuming project. Review the final CSS and component states after import instead of treating an exported file as a full design system.