Design a light-mode website section: crisp editorial typography anchored by atmospheric cobalt gradient highlights across a precise comparison grid.
LAYOUT
Asymmetric five-column desktop structure anchored on the left by an expansive 340px introductory column holding the serif display heading, subtext, and platform guarantees. The remaining four columns evenly divide the table into pricing tiers (Starter, Growth, Scale, Enterprise) culminating in a persistent matrix below with aligned tabular data cells. The layout finishes with a consolidated security and trust banner spanning the base.
PALETTE (use these exact hex values)
- #F8F9FC — Canvas Ground: ambient light background framing the entire pricing view with faint edge tints
- #FFFFFF — Card Surface: pure white solid fill for default pricing cards and matrix row backgrounds
- linear-gradient(180deg, #5684F7 0%, #769EFA 100%) — Cobalt Hero Gradient: dominant visual focal fill on the most popular Scale tier card header
- #111827 — Deep Slate: primary text color for serif display headings, tier titles, and numerical prices
- #6B7280 — Muted Slate: body copy, feature subtexts, price cadence suffixes, and secondary row descriptions
- #4F7DF3 — Brand Accent Blue: active toggle state, pricing sub-labels, link chevrons, and checkmark icons
- #EEF3FF — Soft Indigo Tint: background fill for circular feature checkmarks and discounted pill badges
- #EEF2F6 — Matrix Border: horizontal dividers separating tabular feature rows and framing subtle input fields
- #16A34A — Security Emerald: shield icon accent indicating encrypted customer data and model privacy assurances
TYPOGRAPHY
Typeface Tiempos Headline (or Playfair Display, Fraunces, Georgia), weights 500/600. Sizes 11px caption, 12px body-sm, 13px body, 15px body-lg, 18px subheading, 36px heading, 48px display. Tracking -0.02em. The voice balances high-level enterprise prestige with modern SaaS execution. Tiempos Headline lends an editorial, bespoke authority that feels institutional and trusted, while Inter handles dense feature comparisons with flawless utilitarian clarity. If Tiempos is unavailable, Fraunces or Playfair Display with tightened tracking will preserve this high-touch brand aesthetic.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1340px container, comfortable density.
DEPTH
Depth is created almost entirely through tonal layering and boundary contrast rather than heavy drop shadows. The outer card structure rests against a faint ambient ground, while the featured tier ascends visually using an assertive periwinkle gradient and clean white interior button. The rest of the matrix maintains pure coplanar flatness with hairline borders.
IMAGERY
Vector iconography exclusively. Clean line-art icons housed in soft rounded circular and square pastel badges (lavender, soft mint, and baby blue). Photographs and complex 3D illustrations are strictly excluded from the comparison grid to preserve data legibility.
SIGNATURE DETAIL — the thing that makes this design itself
The standout move is the 'floating cobalt chimney'—extending the featured Scale plan header upward with a solid periwinkle gradient while its corresponding column seamlessly continues down into the transparent comparison table below. Misusing this by tinting multiple columns or extending the vibrant blue all the way through the table rows ruins the clean scannability of the matrix.
MUST
- Pair an editorial serif for the main headline with high-efficiency sans-serif UI typography.
- Restrict full-bleed accent color solely to the single promoted tier card to guide user attention.
- Use light tint circle backgrounds (#EEF3FF) behind checkmark icons instead of plain naked glyphs.
- Render comparison horizontal dividers as ultrathin, 1px solid lines in pale slate (#EEF2F6).
AVOID
- Never apply colored backgrounds to more than one plan column at a time.
- Do not use dark or heavy borders between rows; lines must remain faint and quiet (#EEF2F6).
- Never substitute the serif headline with a standard geometric sans; the editorial contrast is vital.
- Do not center-align the left column's feature names; keep them strictly left-aligned.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
