Color Style Guide

Transform a base color into a cohesive color system

Color
#
Sacro Bosco
Aesthetics
Intensity

Sacro Bosco

Balanced / Versatile
Balanced keeps a middle-ground between clarity and expression.

Primary colors

These are the main colors for your product’s interface. Use them as the foundation for your design.

Primary
Secondary
Accent

Hero palette

Your seed color and its ready-to-use interactive states. Drop these directly into buttons, links, and focused elements.

Seed
Hover
Active
Soft
Muted
Glow

Gradient systems

Curated gradient recipes built from your seed and archetype to style hero surfaces, emphasis states, and data visuals.

Hero linear

A directional 3-stop blend for hero backgrounds, CTA bands, and marketing headers.

Gradient
Spots
Start
Mid
End
Soft mesh

Layered ambient tones for atmospheric page sections and depth-rich backgrounds.

Gradient
Spots
North
East
South
West
Base
Radial glow

Focused center-out emphasis for button halos, chart highlights, and spotlight effects.

Gradient
Spots
Core
Ring
Outer

Primary tonal scale

A perceptual 50–900 ramp built from your primary color. Use lighter steps for backgrounds and darker steps for text or icons.

50
100
200
300
400
500
600
700
800
900

Secondary tonal scale

A perceptual 50–900 ramp built from your secondary color. Use lighter steps for backgrounds and darker steps for text or icons.

50
100
200
300
400
500
600
700
800
900

Accent tonal scale

A perceptual 50–900 ramp built from your accent color. Use lighter steps for backgrounds and darker steps for text or icons.

50
100
200
300
400
500
600
700
800
900

Semantic tokens

Core UI tokens with action and status roles in one place, so you can apply colors consistently without jumping between sections.

Foundations

Base tokens for page backgrounds, cards, and subtle separators.

Background
Surface
Surface elevated
Border subtle
Text

Primary and secondary text tokens for readable content hierarchy.

Primary text
Secondary text
Action

Interactive state tokens for buttons, links, and controls.

Default
Hover
Active
Subtle

Auto theme modes

Ready-to-use light and dark token sets generated from your seed color and archetype.

Light theme

Default surfaces and text tokens for bright interfaces.

Primary
Secondary
Accent
Text primary
Text secondary
Background
Surface
Dark theme

Elevated surfaces and readable text tokens for dark interfaces.

Primary
Secondary
Accent
Text primary
Text secondary
Background
Surface

UI combinations: Feedback

Semantic feedback palettes for alerts, badges, and inline messages.

Success

Success feedback for positive alerts, confirmations, and completed actions.

Solid
Text
Background
Warning

Warning feedback for cautionary alerts, warnings, and important notices.

Solid
Text
Background
Error

Error feedback for critical alerts, errors, and failed actions.

Solid
Text
Background
Info

Informational feedback for neutral alerts, tips, and inline messages.

Solid
Text
Background

Subscribe for updates

Stay always in the loop when you subscribe to our free mailing list.

You can unsubscribe at any time by clicking the link in the footer of our emails.
Navigated to Subscribe for updates