Branding
Brand Identity Design
Title above is body-large 600; category uses the card variant accent; this description inherits the card variant text color.
1. Default — all settings inherited from theme
Baseline instance. No module overrides set. Card surface, title/category/description typography, gap, shadow and image radius all come from theme tokens.
Web Design
E-Commerce Website
Image corners follow the card variant radius; the gap between items is the theme spacing scale (Medium = 32).
App Design
Mobile App UI
Card shadow uses the theme shadow token and lifts on hover (default Lift effect). No per-instance size/weight/shadow fields.
2. Dark section — item text follows the CARD surface, not the section
This header text switches to the dark-section palette. Title, category and description inside each card must STAY legible (card variant 1 text color).
Legible?
Card Surface Check
If this text went white-on-white, the surface rule is broken.
Card Accent
Accent Check
The category above follows the card icon color token, not the section accent.
3. Description color → CUSTOM (#B30000) + image-zoom hover
Each item description should be dark red. Titles and categories keep the card variant colors — the override targets description body text only.
Custom Color
Override One
This description should be dark red (#B30000).
Image Zoom
Override Two
Hover the card — the image zooms while the card stays put. This description is red too.
Single Override
Override Three
This is the single surviving card-interior text override.
4. Animation → Line by line (header, then cards stagger in)
Scroll into view: this header reveals first, then each item card slides up one after another using the theme animation defaults.
After Header
Reveals First
Theme duration and easing — no hardcoded ms.
Theme Stagger
Reveals Second
Staggers in after card one.
Reduced Motion
Reveals Last
With prefers-reduced-motion the cards stay visible; without JavaScript nothing is ever hidden.