Design reference

DesignReference renders your whole design system from your config, using yarcl components: colors with their contrast ratios, the size scale with live controls, radii, variants, spacing, shadows, fonts, text styles, heading levels, density, the remaining tokens and every default.

import { DesignReference } from 'yarcl/reference';

<DesignReference title="Acme design system" />

Add it to an internal route, a Storybook page or your docs, and it stays accurate because it reads the same config your app uses.

This is the reference for the config of this documentation site:

yarcl docs design system

Colors

Semantic colors for the color prop. Ratios are foreground on background, light / dark.

Aa

primary#2d4bb8 / #8aa2ff7.5:1 / 8.7:1

Aa

neutral#4b5263 / #a3a9b87.8:1 / 8.9:1

Aa

success#15803d / #4ade805.0:1 / 12.1:1

Aa

warning#b45309 / #fbbf245.0:1 / 12.6:1

Aa

danger#dc2626 / #f871714.8:1 / 7.6:1

Aa

info#0369a1 / #38bdf85.9:1 / 9.8:1

Neutrals

Backgrounds, text and borders.

bg#ffffff / #17181c

surface#ffffff / #23262f

text#23262f / #e6e8ee

muted#5e6575 / #9aa1b1

border#d8dbe3 / #353a47

Sizes

One scale shared by every control, so controls of the same size line up.

Control sizes

Size	Height	Padding X	Font	Icon	Preview
xs	1.75rem	0.625rem	0.75rem	0.75rem	Button+
sm	2rem	0.75rem	0.8125rem	0.875rem	Button+
md	2.5rem	1rem	0.875rem	1rem	Button+
lg	3rem	1.25rem	1rem	1.25rem	Button+
xl	3.5rem	1.5rem	1.125rem	1.5rem	Button+

Radii

Default radius: md.

square0

sm0.25rem

md0.375rem

lg0.5rem

xl0.75rem

rounded9999px

Variants

Recipes applied on top of any color.

solidprimaryneutralsuccesswarningdangerinfobackground fill, border color, text on

softprimaryneutralsuccesswarningdangerinfobackground tint, border none, text color

outlineprimaryneutralsuccesswarningdangerinfobackground none, border color, text color

ghostprimaryneutralsuccesswarningdangerinfobackground none, border none, text color

Spacing

xs

0.25rem

sm

0.5rem

md

1rem

lg

1.5rem

xl

2rem

Shadows

sm

md

lg

Typography

Families

sans	The quick brown fox system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
mono	The quick brown fox ui-monospace, "SF Mono", Menlo, Consolas, monospace

Text styles

display	The quick brown fox	sans · 2.25rem · 800 · 1.1 · -0.02em
heading	The quick brown fox	sans · 1.5rem · 700 · 1.25 · -0.01em
subheading	The quick brown fox	sans · 1.125rem · 600 · 1.35
body	The quick brown fox	sans · 1rem · 400 · 1.5
caption	The quick brown fox	sans · 0.8125rem · 400 · 1.4
code	The quick brown fox	mono · 0.875rem · 400 · 1.5
label	The quick brown fox	sans · 0.875rem · 500 · 1.4

Heading levels

h1	display
h2	heading
h3	subheading
h4	subheading
h5	label
h6	label

Modal sizes

Widths of dialogs and drawers.

Modal sizes

sm	24rem
md	32rem
lg	48rem
xl	64rem
full	100vw

Density

Table density

compact	0.25rem 0.5rem · 0.8125rem
comfortable	0.625rem 0.75rem · 0.875rem

Other tokens

Layers, motion, borders and focus

zIndex.dropdown	1000
zIndex.tooltip	1100
zIndex.dialog	1200
zIndex.toast	1300
motion.fast	120ms
motion.base	200ms
motion.easing	cubic-bezier(0.2, 0, 0, 1)
borders.width	1px
focusRing	2px · offset 2px · primary

Defaults

Values used when a component prop is omitted: the prop, then an enclosing group, then component defaults, then global defaults.

Component defaults

Drawer	size: sm

Global defaults

size	md
radius	md
color	primary
variant	solid
errorColor	danger
textStyle	body
labelStyle	label
helperStyle	caption
gap	md
padding	lg
floatingShadow	md
density	comfortable
softVariant	soft
modalSize	md