Design a light-mode website section: airtight tabular architecture with surgical royal blue callouts for high-stakes enterprise engineering.
LAYOUT
The page flows down a central vertical axis within a 1140px maximum boundary. It begins with a centered pill announcement, moves to a high-impact headline and subhead, then expands into a rigid 4-column card grid. The bottom segment seamlessly transitions the four columns into a borderless, row-separated comparison matrix followed by an understated centered trust credential.
PALETTE (use these exact hex values)
- #ffffff — Base White: dominant background canvas and card interiors
- #f9fafb — Card Tint: subtle background fill for the 'All plans include' summary card
- #0556f3 — Electric Cobalt: primary highlight card border, badge fill, call-to-action button, and active checkmarks
- #eff5ff — Badge Wash: background fill for the pill eyebrow announcement tag
- #b81467 — Enterprise Berry: tier header label, outline button stroke, and table checkmarks for scale plan
- #0d1117 — Carbon Slate: high-contrast page titles, tier headings, pricing figures, and table row headers
- #5e6a78 — Neutral Steel: subtitle copy, billing cadence qualifiers, and inactive feature indicators
- #e2e5eb — Hairline Rule: unselected card perimeters, input outlines, and horizontal row separators
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 20px heading, 36px heading-lg, 40px display. Tracking -0.02em at display, -0.01em at body, 0.01em at caption. The typographic tone is ultra-objective, rigorous, and technical. Modern grotesques like Inter or SF Pro convey precision and semiconductor-grade reliability without visual distraction. Licensing Inter affords complete web and native consistency across high-density enterprise interfaces.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1140px container, comfortable density.
DEPTH
Depth is strictly flattened and communicated through 1px-2px stroke boundaries rather than blur shadows. Cards sit directly on the ground canvas, with the highlighted Growth tier gaining prominence through an electric #0556f3 border and solid banner tab rather than vertical displacement.
IMAGERY
Iconography is strictly functional, line-drawn, and monoline (lightning bolt, check-in-circle, shield). Photorealistic images, 3D graphics, or decorative brand illustrations are intentionally omitted to uphold an institutional, hardware-engineering credibility.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated top-banner card header: the recommended tier card integrates a solid electric-blue label ('★ Most popular') that sits flush against the card's top edge, joined seamlessly to a matching 2px blue card perimeter. Misusing this pattern by floating the badge above the card or detaching its border destroys the monolithic container effect.
MUST
- Align matrix feature rows identically with the 4-column pricing tier card layout above.
- Use solid #0556f3 only on the recommended card perimeter, banner tab, and primary button.
- Reserve the magenta accent (#b81467) strictly for enterprise tier identifiers and matching status indicators.
- Maintain hairline 1px borders (#e2e5eb) on non-featured cards to preserve minimal visual weight.
AVOID
- Do not add drop shadows to cards; rely entirely on 1px-2px borders for surface definition.
- Do not tint the background canvas; it must remain pure white (#ffffff).
- Do not feature more than one highlighted plan or blue header tab per pricing screen.
- Do not use green checkmarks; active checks must match the column's designated brand accent.
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 中尝试 
