Design System

Allmendina Design System

This page showcases the design tokens, base styles, and a few common components configured in the Allmendina child theme.


Colors

Primary
--wp--preset--color--primary

Secondary
--wp--preset--color--secondary

Accent
--wp--preset--color--accent

Accent 2
--wp--preset--color--accent-2

Footer
--wp--preset--color--footer

Neutral 900
--wp--preset--color--neutral-900

Neutral 600
--wp--preset--color--neutral-600

Neutral 400
--wp--preset--color--neutral-400

Neutral 200
--wp--preset--color--neutral-200

Black
--wp--preset--color--black

White
--wp--preset--color--white


Typography

Fluid scale driven by CSS variables (tokens) and reflected in theme.json settings.

Display โ€” var(–fs-900)

H1 โ€” var(–fs-800)

H2 โ€” var(–fs-700)

H3 โ€” var(–fs-600)

Lead โ€” var(–fs-500)

font-family: var(--font-sans);


Buttons


Forms




Focus rings are visible thanks to :focus-visible defaults.

Sample link


Tip: Add a skip link in your header markup like <a class="skip-link" href="#main">Skip to content</a> to leverage the built-in styles.