Card
Content containers with a subtle tinted surface, clean borders, and cool shadows. A flexible building block for dense product UIs.
Basic Card
Simple card with header, content, and footer sections.
This is the main content area of the card. It can contain any type of content including text, images, or other components.
Inverted Canvas
Tinted canvas block with a white card surface.
Keep the canvas tinted, and flip primary surfaces to white for clarity. The rim strength can scale with the visual weight of the module.
Profile Card
User profile card with avatar and actions, following the promotional pattern.
A capsule-first system designed for product teams that care about restraint and detail.
Card with Action
Card with an action button in the header area.
Product Card
E-commerce style product card with clean structure.
Confirm Card
Confirmation dialog card pattern from promotional pages.
This will reset the tray layout back to defaults.
Post Card
Content card for articles, updates, or social posts.
Just shipped a new feature using the Tinted Trays design system. The clean aesthetic makes everything feel so organized and professional!