Design a light-mode website section: bespoke editorial serif authority anchored by deliberate alpine teal accents on warm clinical porcelain.
LAYOUT
The page follows a centralized, vertical rhythm designed to guide decision-making effortlessly. It begins with a centered hierarchy: eyebrow pill, two-line serif headline, and subtitle, followed by the billing toggle. The central focal point is an equally-spaced 4-column pricing grid where cards share identical heights and vertical internal rhythm. The page concludes with a full-width trust assurance strip and a subtle text link for bespoke enterprise inquiries.
PALETTE (use these exact hex values)
- #FBFBFA — Porcelain Canvas: Full-bleed background providing warm, non-glare clinical ambiance.
- #FFFFFF — Pure White: Pricing cards, trust strip container, and active toggle background.
- #0E5E55 — Spruce Teal: Featured plan header, primary button fill, outline button borders, and checkmark accents.
- #EAF4F0 — Sage Mist: Background fill for top category pill and discount badge.
- #13181F — Charcoal Ink: Display headlines, tier names, monthly prices, and feature names.
- #5F6B76 — Muted Slate: Subheadlines, tier descriptions, /mo suffixes, and secondary feature text.
- #E5E9E7 — Hairline Border: Card perimeters, inactive toggle shell, and trust strip borders.
TYPOGRAPHY
Typeface Newsreader (or Canela, Fraunces, Lora), weights 400/500. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 36px heading-lg, 48px display. Tracking -0.02em. The typographic pairing bridges traditional judicial authority and modern computational SaaS. The serif headline brings prestige, human judgment, and legal gravitas, while the crisp sans-serif handles tabular data, microcopy, and pricing with strict clarity. For open-source parity, Google Fonts' Newsreader paired with Inter provides an indistinguishable visual match.
GEOMETRY & SPACING
Corner radii — cards 16px, links 2px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 72px between sections, 1200px container, comfortable density.
DEPTH
Depth is communicated purely through tonal layering and boundary contrast rather than blur-based drop shadows. The pure white (#FFFFFF) cards pop against the slightly tinted canvas (#FBFBFA) supported by a crisp 1px neutral border (#E5E9E7). The only volumetric emphasis comes from the solid spruce header attached flush to the 'Scale' card.
IMAGERY
The interface completely avoids photographic imagery or complex illustration, relying strictly on precise outline iconography. Icons are 20px hairline stroke SVGs in neutral gray representing compliance badges: shield, padlock, clock, and customer headset. Any 3D, filled, or multi-color illustrations would disrupt the disciplined legal-grade tone.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated Spruce Teal header tab flush on the featured card combined with an editorial serif display title. This pairing immediately telegraphs high-value legal compliance rather than generic developer software, separating the recommended tier without relying on gaudy ribbons or floating badges.
MUST
- Use Newsreader or an equivalent refined serif exclusively for the primary headline.
- Maintain the warm off-white canvas (#FBFBFA) to avoid harsh contrast with pure white cards.
- Reserve solid Spruce Teal (#0E5E55) fills exclusively for the single highlighted plan and pill accents.
- Keep outline buttons at exactly 1px border weight matching the Spruce Teal hue.
AVOID
- Do not use dark or pure black (#000000) for text; rely on deep ink (#13181F).
- Never apply strong drop shadows; card separation relies on white fill against #FBFBFA and thin borders.
- Do not use bright neon greens or saturated mints for badges; keep them desaturated (#EAF4F0).
- Never elevate multiple pricing cards simultaneously with dark header banners.
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. 在 DraPub 中尝试 
