Minimumpx Maximumpx

Colors color ·

Naming convention

Semantic colors semantic · 6 roles

Naming convention

Primary

var(--color-primary)

Action

var(--color-primary)

Surface

var(--color-primary-lightest)

Text

oklch(0% 0 0)

Border

var(--color-primary-light)

Focus

var(--color-primary)

Typography text · 16–18 px

Google FontsConnecting to live catalog

Code family

The quick brown fox jumps over the lazy dog.

Naming convention

Minimumpx Maximumpx

Scale ratio Min viewport Scale ratio Max viewport Base scale indexAnchor token

Border radius radius · 4–8 px

Spacing space · 16–20 px

Elements 92 elements

Element treatment

State

Locked selector :where(a[href]) {

State

Locked selector :where(button) {

State

Locked selector :where(input:not([type]):not(:disabled):not(:read-only):not(:invalid)) {

State

Locked selector :where(textarea:not(:disabled):not(:read-only):not(:invalid)) {

State

Locked selector :where(select:not([multiple]):not([size]):not(:disabled):not(:invalid)) {

State

Locked selector :where(input[type="text"]:not(:disabled):not(:read-only):not(:invalid)) {

State

Locked selector :where(input[type="email"]:not(:disabled):not(:read-only):not(:invalid)) {

State

Locked selector :where(input[type="tel"]:not(:disabled):not(:read-only):not(:invalid)) {

State

Locked selector :where(input[type="url"]:not(:disabled):not(:read-only):not(:invalid)) {

State

Locked selector :where(input[type="search"]:not(:disabled):not(:read-only):not(:invalid)) {

State

Locked selector :where(input[type="password"]:not(:disabled):not(:read-only):not(:invalid)) {

State

Locked selector :where(input[type="number"]:not(:disabled):not(:read-only):not(:invalid)) {

State

Locked selector :where(input[type="date"]:not(:disabled):not(:read-only):not(:invalid)) {

State

Locked selector :where(input[type="time"]:not(:disabled):not(:read-only):not(:invalid)) {

State

Locked selector :where(input[type="datetime-local"]:not(:disabled):not(:read-only):not(:invalid)) {

State

Locked selector :where(input[type="month"]:not(:disabled):not(:read-only):not(:invalid)) {

State

Locked selector :where(input[type="week"]:not(:disabled):not(:read-only):not(:invalid)) {

State

Locked selector :where(input[type="submit"]) {

State

Locked selector :where(input[type="reset"]) {

State

Locked selector :where(input[type="button"]) {

State

Locked selector :where(summary) {

Native Fallback. No visual Framework treatment is authored.

tokens.css

Preparing validated Framework output…

320 px 1440 px 1440 px Maximum clamp

Amet consectetur

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non blandit massa enim nec dui nunc.

Lorem ipsum Dolor sit

People having a conversation around a table

2.400+Lorem ipsum

9,1Dolor sit amet

25+Amet consectetur

15 jaarAdipiscing elit

Amet consectetur

Viverra tellus

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Dolor sit amet

Sed do eiusmod tempor incididunt ut labore et dolore.

Consectetur

Ut enim ad minim veniam, quis nostrud exercitation.

Adipiscing elit

Duis aute irure dolor in reprehenderit in voluptate.

Person sitting beside a sunlit window

Magna etiam

Nulla facilisi morbi tempus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae sapien vitae sem faucibus fermentum. Integer ut augue eget sapien vestibulum ullamcorper.

Parent holding a baby — Lorem ipsum dolorAmet consectetur

Viverra tellus

Amet consectetur

Editorial lifestyle

12 mei 2026

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Editorial lifestyle

12 mei 2026

Viverra tellus in hac

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Editorial lifestyle

12 mei 2026

Magna etiam tempor

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Viverra tellus

Aliquam etiam erat velit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent libero sed cursus ante dapibus diam.

Friends spending time together outdoors

Two people cycling together at sunset

Samen verder

Voor cliënten en hun naasten

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc feugiat mi a tellus consequat imperdiet.

Nulla facilisi

Lorem ipsum dolor

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dignissim, lacus vel rhoncus elementum.”
Lorem ipsum 1

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dignissim, lacus vel rhoncus elementum.”
Lorem ipsum 2

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dignissim, lacus vel rhoncus elementum.”
Lorem ipsum 3

Amet consectetur

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.