Product Card
This card uses panel, text, muted, border, radius and shadow tokens.
Outside Body/Page Demo
This demo is only CSS and HTML. It can be pasted outside the theme, inside any body/page/template. Change theme family, light/dark mode, and Theme intensity to see these boxes update live.
--bgBackground--body-bgBody background--surfaceSurface--surface-2Surface 2--surface-3Surface 3--panelPanel--cardCard--borderBorder--dividerDivider--brandBrand--primaryPrimary--accentAccent--accent-2Accent 2--secondarySecondary--tertiaryTertiary--teritoryTeritory alias--decentDecent--descentDescent alias--linkLink--focusFocus--successSuccess--warningWarning--dangerDanger--infoInfo--textMain readable text color.
--text-2Second level text color.
--mutedMuted text for hints and subtitles.
--softSoft text for low emphasis content.
--linkLink text example.
--success / --warning / --danger / --infoSuccess · Warning · Danger · Info
--section-bg / --section-text / --section-borderSection blockThis follows section variables.
--container-bg / --container-text / --container-borderContainer blockThis follows container variables.
--card-bg / --card-text / --card-borderCard blockThis follows card variables.
--panel-bg / --dividerPanel blockThis follows panel and divider variables.
This card uses panel, text, muted, border, radius and shadow tokens.
Theme intensity should change the brand-related colors while keeping text readable.