Design a light-mode website section: crisp technical engineering clarity anchored by solid cobalt blue and wire-thin micro-borders.
LAYOUT
Asymmetrical two-column architecture at desktop level: the left sidebar (approx 25% width) holds the hero value proposition, service benefits, and custom inquiry card. The right area (approx 75% width) holds a four-column grid of plan tiers seamlessly aligned above an integrated feature comparison table.
PALETTE (use these exact hex values)
- #FFFFFF — Pure Canvas: Background canvas, card surfaces, and alternating table rows
- #F8FAFC — Subtle Ice Surface: Background for the custom inquiry callout box and icon containers
- #0D63F8 — Precision Blue: Primary CTA button, 'Most Popular' badge, active card stroke, and icon strokes
- #E2E8F0 — Border Slate: 1px container outline, table divider strokes, and inactive card borders
- #0F172A — Industrial Navy: Hero headline, tier titles, numeric price points, and row labels
- #64748B — Muted Slate: Subheadlines, billing interval qualifiers, and secondary table descriptions
- #0D9488 — Mint Accent: Accent star icon in the custom quote card
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 18px subheading, 20px heading, 32px heading-lg, 44px display. Tracking -0.03em for headlines, 0.05em for uppercase labels. The typographic tone is disciplined, robotic, and industrial-grade. Set in a neutral modern grotesque like Inter or Plus Jakarta Sans, heavy weights (600-700) are reserved strictly for numbers and plan titles to project reliability.
GEOMETRY & SPACING
Corner radii — cards 8px, links 2px, inputs 6px, buttons 6px. Spacing on a 8px unit, 16px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Elevation is completely flat and non-skeuomorphic. Depth is simulated entirely through 1px crisp strokes (#E2E8F0) and contrast shifts, with zero box-shadows applied to the cards or comparison table.
IMAGERY
No photographic imagery is present. Visual assets are limited strictly to precise, 1.5px stroke-width monoline vector icons rendered in cobalt blue (#0D63F8) depicting hardware, logistics, and CAD symbols.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated flush transition between the upper pricing cards and the lower comparison matrix, anchored by the singular highlighted 'Pro' column sporting a blue border and top-mounted solid cobalt pill tab.
MUST
- Use precisely 1px hair-thin borders (#E2E8F0) to separate grid cells and cards.
- Reserve solid blue (#0D63F8) fill solely for the single highest-priority tier CTA and popular badge.
- Align matrix feature rows identically with the column widths of the tier cards above.
- Set the hero heading in deep industrial slate (#0F172A) with tight -0.03em tracking.
AVOID
- Do not introduce multi-color status pills or bright accent fills other than cobalt and subtle teal.
- Do not use drop shadows or heavy blur elevation; structure must be conveyed via borders.
- Do not round card corners beyond 8px; preserve the crisp, technical manufacturing feel.
- Do not leave the featured 'Pro' card without its distinguishing top pill badge.
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 
