Colors and style

The builder design system, explained visually

Palettes, typography, and CSS tokens that connect Brand identity, canvas, and published site — without guessing hex values or redoing the same styles on every block.

Open the builder Brand identity

Clear tokens, consistent style

Color ramps, typography classes, and shared UI components: the visual reference for composing in the builder with the same grammar as the published site.

Reference palette

Primary, neutrals, and feedback

Complete scales with CSS tokens and hex values: the shared base for CTAs, text, surfaces, and semantic states in the builder.

Explore palettes

Typography

Hierarchies and utility classes

Headings, lead text, captions, and links with consistent scales on desktop, tablet, and mobile — always via shared classes.

View classes

UI and tokens

Buttons, badges, and brand flow

Semantic components mapped to project colors, linked to --bv-* and --color-* variables.

Brand identity

Martini palette

Reference ramps for CTAs, text, surfaces, and builder states. Hover each segment for the CSS token.

Primary

Martini blue for CTAs, links, and interactive accents. The scale runs from 800 (text on light backgrounds) to 25 (soft backgrounds).

800Hover link600Stati attivi500CTA · link300Bordi soft100Badge25Hero · bande

Token and hex details

800Hover link--color-primary-800#082c62
600Stati attivi--color-primary-600#0f58c4
500CTA · link--color-primary-500#136ef5
300Bordi soft--color-primary-300#71a8f9
100Badge--color-primary-100#b8d3fc
25Hero · bande--color-primary-25#e7f0fe

Neutrals

Grays and whites for text, borders, and surfaces. Secondary for copy and UI; Third for backgrounds and cards.

950Titoli700Body400Muted200Dividerthird-200SezioniwhiteCard

Token and hex details

950Titoli--color-secondary-950#0a0a0a
700Body--color-secondary-700#3c3c3c
400Muted--color-secondary-400#818181
200Divider--color-secondary-200#f0f0f0
third-200Sezioni--color-third-200#efeeec
whiteCard--color-third-100#ffffff

Feedback

Semantic colors for messages, alerts, and builder states (success, error, info).

SuccessConfermeDangerErroriAccentHighlightInfo bgNoticeWarning bgAttenzioneError bgAlert

Token and hex details

SuccessConferme--color-success-500#15803d
DangerErrori--color-danger-500#ce4c4c
AccentHighlight--purple#6248ff
Info bgNotice--color-info-bg#e7f0fe
Warning bgAttenzione--color-warning-bg#fff7ed
Error bgAlert--color-error-bg#ffd6dd

Colors

Brand-linked color picker

Pick a tint from the Brand panel or paste a hex value: it saves as a CSS variable on the block. Update the palette and the change can propagate everywhere.

Open the builder Brand identity

Typography

Clear hierarchies on every breakpoint

Headings, lead text, and captions with consistent scales on desktop, tablet, and mobile. Fonts from the Google catalog or your brand, always via shared classes.

View classes

Ready-made buttons and badges

Primary, secondary, link, and badge styles use semantic classes (primary-button, secondary-button) mapped to project colors.

Open the builder Components

Tokens

From the Brand panel to the live site

--bv-* variables originate in Brand identity and power canvas and publishing. --color-* tokens are the shared stage theme base.

Brand identity — palette, fonts, global spacing
Canvas — utility classes, inspector, components
Publishing — same tokens on the live site

Brand identity

Classes

Live typography classes

Examples of utilities used on stage pages and recommended in builder layouts: h1, p-large, a-large, and more.

Start for free Design in the builder

h1 Main headline

h2 Section title

p-large Lead and introductory paragraphs below headings.

p-small Eyebrows, labels, meta, and captions.

a-large Links and text CTAs

Guides on design, colors, and the builder

Palettes, typography, brand, and optimization: articles to refine your site style and get the most from the platform.

Visit our blog

We are preparing new articles — check back soon.

Set your brand and publish consistently

Use this page as a visual reference, then go to Brand identity to configure your project's palette, fonts, and tokens in the builder.

Discover Brand identity Start for free

Brand identity

The builder design system, explained visually

Color ramps, typography classes, and shared UI components: the visual reference for composing in the builder with the same grammar as the published site.

Primary, neutrals, and feedback

Hierarchies and utility classes

Buttons, badges, and brand flow

Primary

Neutrals

Feedback

Brand-linked color picker

Clear hierarchies on every breakpoint

Ready-made buttons and badges

From the Brand panel to the live site

Live typography classes

Set your brand and publish consistently

Configure palette and typography in the builder