Component Examples

Every element below is styled exclusively with dn-* utility classes.

Spacing

p-8

p-16

p-24

p-32

px-32 py-12

Colors

primary

danger

success

warning

info

secondary

pink

teal

Typography

Heading Bold 32px

Subheading Semibold 22px

Body Normal 16px — the quick brown fox jumps over the lazy dog.

Small Light Centered 13px

UPPERCASE TRACKED TEXT

Italic 18px — elegant styling

Flexbox

dn-flex dn-justify-between dn-items-center

Left Center Right

dn-flex dn-justify-center dn-gap-16

Borders & Radius

Card Variants

⚡

Performance

Ultra-lightweight runtime. No build step needed.

🎨

Theming

Custom color tokens, extend the palette in constants.js.

🔧

Extensible

Add new utilities in utilities.js in seconds.

Buttons

Responsive + Pseudo-states

Use breakpoint and pseudo-state prefixes directly in your HTML:

dn-md-p-40 → @media (min-width: 768px) { .dn-md-p-40 { padding: 40px } } dn-hover-bg-primary → .dn-hover-bg-primary:hover { background-color: #2563eb } dn-focus-border-blue → .dn-focus-border-blue:focus { border-color: #3b82f6 }