The Sculpted collection / Visual guide

Quiet by design.
Precise in every detail.

A shared visual line for the tools we use every day. Open space, thoughtful typography, and a little violet. The same language as the new santi020k website.

Explore the guide Read the documentation

Use the appearance switch in the navigation to explore every example in light and dark.

01 / Typography

Let the words carry it.

Locally served Montserrat. Medium-weight headings, generous leading, and complete titles.

Display / 600 / up to 5.5rem

Made for focus.

Section / 500 / 2.25–3.75rem

A calmer workspace.

Body / 400 / 0.9375rem / 1.85

Good design makes room for the important things. Keep the reading canvas quiet, make the next action clear, and let real product previews tell the story.

02 / Palette

One violet language.

These are live shared tokens. Change the page appearance and the entire palette follows.

Canvas

--theme-bg

The quiet base behind every page.

Surface

--site-surface

One solid surface for a content group.

Soft surface

--site-surface-muted

A subtle change of rhythm.

Ink

--site-ink

Headings and strong controls.

Soft ink

--site-ink-soft

Reading copy and useful metadata.

Line

--site-line

Fine structure, without heavy frames.

Violet

--site-brand

Our identity and interaction accent.

Accent

--site-accent

Visible focus and small highlights.

03 / Controls

Clear next steps.

Solid primary actions, quiet secondary links, and 44px minimum targets. Try navigating these examples with the keyboard.

Browse themes Explore wallpapers

04 / Surfaces

Structure with restraint.

One surface per group. Fine rules and open rows do the rest.

Solid surface

Room to breathe.

A 1.5rem radius and generous padding create a calm content group. Depth belongs to artwork and navigation.

Quiet grouping

Same family. Softer rhythm.

Use a semantic surface change for related content. Keep essential text readable in both appearances.

05 / Rhythm

Space is part of the system.

One 72rem alignment, with a rhythm that naturally contracts on smaller screens.

Grid gap: 1.5rem--site-grid-gap
Heading gap: 2.5rem--site-heading-gap
Section space: 7rem / 4.5rem--site-section-space

Hover transitions stay subtle. Reduced-motion preferences remove decorative motion and smooth scrolling.