Feature card
Soft blue-gray elevation, 16px corners, and direct utility copy.
A Canva-specific preview built from purple action controls, rounded creator surfaces, template cards, pricing modules, and AI command patterns.
Grouped by role from the extracted design system. Blocks use the real token values and Canva's soft 16px card shell.
Rendered at real extracted scale. Canva Sans is substituted with Noto Sans in this file.
Soft blue-gray elevation, 16px corners, and direct utility copy.
Artwork leads; text follows in a clipped rounded shell.
Immersive surface for magic features and creation prompts.
Premium tools, templates, brand kits, and AI quota.
A stronger outline highlights the preferred paid plan.
Quiet wash for toggles, comparison bands, and grouped content.
Mini mockups model editor rails, template browsing, pricing plans, help search, AI prompt surfaces, and comparison tables.
0 6px 20px -4px rgba(64,87,109,.30)
0 0 12px rgba(64,87,109,.07)
0 2px 4px + 0 6px 12px
0 2px 4px + 0 4px 8px black
:root {
--brand-primary: #8B3DFF;
--brand-accent: #A370FC;
--brand-accent-hover: #7D2AE8;
--brand-accent-pressed: #612DA8;
--brand-ink: #0F1015;
--brand-body: #0D1216;
--brand-canvas: #FFFFFF;
--brand-surface-alt: #F6F7F8;
--brand-dark-canvas: #000000;
--brand-dark-surface: #0F1015;
--brand-dark-raised: #16171D;
--brand-success: #008009;
--brand-warning: #EC9809;
--brand-error: #DB142C;
--brand-cyan: #00C4CC;
--brand-magenta: #E950F7;
--brand-coral: #FF3D4D;
--radius-md: 8px;
--radius-xl: 16px;
--radius-pill: 9999px;
--space-section: 64px;
--shadow-feature: 0 0 0 1px rgba(64,87,109,.04), 0 6px 20px -4px rgba(64,87,109,.30);
--shadow-pricing: 0 0 0 .5px rgba(64,79,109,.06), 0 2px 4px rgba(24,44,89,.137), 0 6px 12px rgba(24,44,89,.07);
}