Design a light-mode website section: crisp construction bento grid pairing tactical micro-ui vignettes with serene periwinkle and soft stone cards.
LAYOUT
The section adopts a two-part layout: a wide left hero column (roughly 38% width) and a right 2x3 bento grid (roughly 62% width). The left column stacks metadata, headline, CTA, and visual product mockups vertically. The right grid organizes six discrete capability cards with uniform 16px gaps, each pairing header content on top with an interactive micro-widget docked below.
PALETTE (use these exact hex values)
- #F8F9FB — Canvas Background: Overall viewport background underpinning the section and card layout
- #FFFFFF — Card Surface: Background for left hero enclosure and each of the six bento cards
- #ECEEF2 — Card Border: Hairline 1px border around all primary cards and inner UI containers
- #4F46E5 — Primary Indigo: Primary CTA button, key Gantt chart bars, active icons, and badges
- #EEF2FF — Primary Soft Tint: Background fill for top pill badge and indigo utility icon badges
- #111827 — Text Primary: High-emphasis display titles, card headers, and primary data figures
- #64748B — Text Muted: Secondary card descriptions, table headers, and timestamp labels
- #FEE2E2 — Accent Coral Soft: Background fill for document and financial metric icon pills
- #EF4444 — Accent Coral Dark: Icon stroke color for daily logs and cost tracking icons
- #ECFDF5 — Accent Green Soft: Status pill background for approved states and completed tags
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Text, Roboto), weights 400/500/600/700. Sizes 10px caption, 11px body-sm, 13px body, 14px body-lg, 16px subheading, 18px heading, 38px display. Tracking -0.02em for display headings, 0 for body text. The typography is pragmatic, authoritative, and direct, powered by a clean grotesque neo-grotesque sans-serif (Inter). Bold headline weights (-0.03em tracking) give a punchy field-ready tone ('Run jobs. Not paperwork.'), while dense, structured micro-scales (10-12px) handle data tables and schedules with crisp precision.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is communicated almost entirely through flat layering and delicate 1px borders (#ECEEF2) rather than elevation shadows. The phone mockup in the hero card introduces the only noticeable ambient blur shadow (rgba(0,0,0,0.08) with a 24px blur radius), creating a slight focal pop without disturbing the flat architectural rhythm.
IMAGERY
Imagery is functional and tactical rather than ornamental, strictly consisting of UI mockups, miniature floor plan schematics, and realistic construction jobsite photographs clipped to 8px rounded thumbnails. Stock human portraits and conceptual illustrations are explicitly omitted in favor of concrete software artifacts.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the hyper-detailed micro-UI vignette embedded at the base of every card, simulating live product states (Gantt charts, approval chips, chat bubbles, and cost tables) rather than relying on abstract icons or text alone. Misuse occurs when these widgets become overly dense or contain unreadable real-size interface elements.
MUST
- Use a generous 20px border radius on primary cards to maintain a friendly, modern SaaS aesthetic.
- Pair every bento card heading with a dedicated pastel-backed icon badge in the top right.
- Keep miniature UI previews accurate and proportional rather than abstract vector blobs.
- Utilize soft tinted backgrounds (#EEF2FF, #ECFDF5) for tags rather than stark saturated fills.
AVOID
- Do not use dark, heavy dropshadows; rely on 1px subtle borders (#ECEEF2) for card definition.
- Do not stretch the bento cards to disparate heights; align the 2x3 grid precisely.
- Never replace miniature UI vignettes with generic stock photography or illustrative line art.
- Avoid harsh high-contrast saturated reds or greens for status labels.
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 中尝试 
