Design a light-mode website section: sterile laboratory precision framed in deep evergreen, engineered for high-compliance enterprise confidence.
LAYOUT
A dual-column asymmetric layout where the left column (approx 35% width) holds page context: overline, H1, introductory paragraph, three icon-led feature statements, and the dark usage terminal calculator. The right column (approx 65% width) presents a monolithic rounded enclosure containing three equal-width pricing tiers arranged horizontally, anchored at the bottom by an integrated compliance and trust bar.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Outer background and primary tier card surface fill.
- #FAFBFA — Subtle Tray Tint: Large outer container encompassing the 3-column pricing cards.
- #0E4734 — Forest Command: Recommended tier banner, primary action button, and high-priority emphasis.
- #EEF5F1 — Soft Sage Wash: Background fill for left-hand feature icon badges.
- #111827 — Terminal Deep: Background for the developer usage calculator snippet.
- #121A16 — Deep Text: Primary headings, tier titles, numeric price points, and bold checks.
- #667085 — Muted Slate: Tier descriptions, feature line item text, and subtext labels.
- #E2E8F0 — Fine Border: Card borders, divider lines, and neutral button outlines.
- #E87A3D — Compliance Amber: Trust shield badge border and accent color in bottom trust bar.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 28px heading, 38px heading-lg. Tracking -0.02em at headings, +0.1em at caps. The voice is analytical, precise, and reassuringly corporate. Inter (or similar neo-grotesque sans) offers zero idiosyncrasies, projecting the neutrality needed by regulated scientific laboratories. JetBrains Mono provides surgical developer credibility for automated runs and code calculations.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is rendered purely via subtle boundaries and delicate tonal shifts rather than heavy drop shadows. The outer card tray uses a hairline #E2E8F0 border over pure #FFFFFF, and individual cards float inside with 1px borders and nearly imperceptible 0 1px 3px rgba(0,0,0,0.02) ambient occlusion. The dark code block provides punchy visual weight through contrast rather than physical layering.
IMAGERY
This interface relies entirely on systematic UI iconography and syntax-highlighted code rather than photographs or 3D illustrations. Icons are minimal single-path vector glyphs enclosed in soft sage rounded squares (#EEF5F1). Any photo or decorative stock vector would instantly degrade the sterile, high-compliance biotech tone.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated terminal code snippet placed directly adjacent to enterprise lab pricing tiers. It grounds abstract SaaS tier allowances ('agentic runs', 'test events') into a concrete, executable API call (`voquill.pricing.estimate`), instantly demystifying usage-based billing for technical buyers.
MUST
- Use deep forest green (#0E4734) strictly for the recommended tier banner and high-priority CTA.
- Enclose the 3 pricing tiers in an overarching subtle grey-green tray container (#FAFBFA).
- Keep monetary values at 38px semi-bold or bold with adjacent 12px baseline '/month' indicators.
- Maintain exactly 16px radius on internal pricing cards and 8px on buttons.
AVOID
- Do not introduce saturated blues, purples, or neon greens into this clinical palette.
- Never apply high-elevation drop shadows; separation must remain driven by borders and subtle tint shifts.
- Avoid making non-recommended plan CTA buttons filled; keep them outlined with subtle borders.
- Do not remove the code terminal preview; developer self-serve credibility is essential here.
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 中尝试