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

Elements92 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

Current framework

Design system

Live CSS custom properties generated from the settings at left.

01

Color

Primary--color-primaryoklch(54.6% 0.215 262.9)

02

Semantic colors & accessibility

Primary--semantic-primary

Action--semantic-action

Surface--semantic-surface

Text--semantic-text

Border--semantic-border

Keyboard focusPersistent preview of the generated focus treatment.

03

Typography

--text-xs .79rem .79rem → .79rem

The quick brown fox jumps over the lazy dog.

--text-s .89rem .89rem → .89rem

The quick brown fox jumps over the lazy dog.

--text-m 1.125rem 1rem → 1.125rem Base

The quick brown fox jumps over the lazy dog.

--text-l 1.5rem 1.125rem → 1.5rem

The quick brown fox jumps over the lazy dog.

--text-xl 2rem 1.27rem → 2rem

The quick brown fox jumps over the lazy dog.

--text-2xl 2.66rem 1.42rem → 2.66rem

The quick brown fox jumps over the lazy dog.

--text-3xl 3.55rem 1.6rem → 3.55rem

The quick brown fox jumps over the lazy dog.

--text-4xl 4.74rem 1.8rem → 4.74rem

The quick brown fox jumps over the lazy dog.

04

Border radius

--radius-xsvar(--radius-xs)

--radius-svar(--radius-s)

--radius-mvar(--radius-m)

--radius-lvar(--radius-l)

--radius-xlvar(--radius-xl)

--radius-fullvar(--radius-full)

05

Spacing

--space-4xs.402rem

--space-3xs.482rem

--space-2xs.579rem

--space-xs.703rem

--space-s.938rem

--space-m1.25rem

--space-l1.666rem

--space-xl2.221rem

--space-2xl2.961rem

--space-3xl3.947rem

--space-4xl5.261rem