Design a light-mode website section: crisp enterprise security chrome with electric blue highlights and deep-charcoal code overlays.
LAYOUT
The section employs an asymmetrical two-column layout. The left column (roughly 38% width) holds product messaging, an eyebrow, large display typography, icon checkmarks, CTA buttons, and customer logos. The right column (62% width) hosts the self-contained 'agenticfabriq' application screen containing a left utility rail, top metric row, audit timeline, IDE-style policy console, and bottom entity relation graph.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: Outer marketing background and primary card fill
- #FAFAFC — App Surface: Background fill of the floating dashboard application frame
- #0C1017 — Console Dark: High-contrast IDE-style policy console background container
- #2547FA — Electric Indigo: Primary CTA button background, hero gradient anchor, and active navigation tab tint
- #EEF1FE — Soft Indigo Tint: Active navigation item background fill and primary badge tint
- #0C111D — Slate Text Primary: Main headlines, hero type, KPI numbers, and dark console headers
- #667085 — Slate Text Muted: Body copy, secondary labels, timestamps, and breadcrumbs
- #EAECEF — Border Subtle: Hairline separator lines across cards, tables, and buttons
- #12B76A — Emerald Success: Operational status indicator dots, positive metric badges, and allowed status labels
- #D92D20 — Berry Magenta: Blocked audit event indicators and error status tags
TYPOGRAPHY
Typeface Inter (or system-ui, -apple-system, Roboto), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 60px display. Tracking -0.03em on display, 0.05em on micro-caps. Clean, authoritative, and deeply technical. The geometric neo-grotesque sans (Inter) projects silicon-valley infrastructure rigor, while JetBrains Mono injects developer credibility within the nested code view.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1340px container, comfortable density.
DEPTH
Depth is created flatly and surgically. Surfaces do not rely on stacked multi-layer shadows, but instead use thin 1px borders (#EAECEF) and a soft, spread-out ambient shadow (0px 20px 40px -12px rgba(16, 24, 40, 0.08)) beneath the overarching application frame.
IMAGERY
This design avoids raster lifestyle photography entirely. The product IS the imagery, represented through meticulously rendered, ultra-dense UI component mockups, vector cloud-service badges (AWS, GCP, Salesforce), and SVG network graphs.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the inset dark-mode Code & Policy Console (#0C1017) embedded seamlessly within an otherwise pristine white-and-grey SaaS dashboard mockup. This creates an immediate visual anchor that bridges developer tooling with executive dashboarding.
MUST
- Reserve the saturated electric blue #2547FA strictly for the primary brand word, the main CTA button, and active UI navigation states.
- Enclose internal dashboard modules inside 1px solid hairlines (#EAECEF) with 10-12px corner radii.
- Use JetBrains Mono exclusively inside the policy console card for code and line numbers.
- Maintain high density inside the UI demo with small typography (11px-12px) paired with generous margins.
AVOID
- Do not apply heavy dark drop shadows; use diffused, translucent shadows (rgba(0,0,0,0.04)) around the outer app frame.
- Do not use saturated blue for ordinary body copy; keep text strictly within slate hues #0C111D and #667085.
- Do not make the entire canvas dark; keep the background stark white to make the dark code console pop.
- Do not use heavy font weights (>600) for UI table items, breadcrumbs, or timeline entries.
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 中尝试 
