Design a dark-mode website section: deep obsidian canvas accented with cold electric cyan and precision-bordered analytical cards.
LAYOUT
The section adopts a two-part asymmetric grid followed by an anchoring footer bar. The left column (roughly 35% width) holds the narrative package: category pill, 44px headline, short prose, checklist, and horizontal CTA row. The right area (roughly 65% width) presents a rigid 3x2 grid of feature cards spaced with 16px to 20px gutters. Below both blocks sits a full-width horizontally aligned summary pill container.
PALETTE (use these exact hex values)
- #06080d — Canvas Void: Global background canvas providing high-contrast foundation for muted dark glass cards
- #0a0f18 — Card Surface: Background fill for the 3x2 grid feature cards and bottom ribbon
- #0d1726 — Icon Tile Fill: Container background for the rounded square technical vector icons
- #141d2c — Subtle Stroke: Structural borders on feature cards, bottom ribbon, and secondary buttons
- #38bdf8 — Active Cyan: Focal accent used for headline emphasis word, icon strokes, and vector badges
- #ffffff — Text Primary: Headings, primary CTA background, and card titles
- #8b9ab0 — Text Secondary: Paragraph descriptions, feature card body copy, and secondary meta labels
- #06080d — CTA Dark Text: Label and glyph inside the high-contrast solid white primary button
TYPOGRAPHY
Typeface Geist Sans (or Inter, SF Pro Text), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 17px heading, 44px display. Tracking -0.02em at display, +0.06em on badges, normal on body. The typography is cold, rigorous, and technical. The neo-grotesque sans-serif provides maximum utility and neutrality, echoing developer consoles and enterprise infrastructure dashboards. Geist Sans or Inter provides an ideal substitute, keeping the layout legible down to 11px while maintaining punchy clarity at display sizes.
GEOMETRY & SPACING
Corner radii — cards 18px, links 999px, inputs 10px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is communicated purely through structural boundaries rather than simulated lighting. Dark surfaces (#0a0f18) float against the canvas void (#06080d) mediated only by hairline borders in #141d2c. There are zero soft box shadows or layered ambient glows.
IMAGERY
The interface contains no photographic imagery or 3D renders. Visual language relies entirely on minimalist monoline vector icons (brain, wrench, triangle, cylinders, shield, bar chart) rendered in #38bdf8 within dark geometric square containers. Any photorealistic texture or busy illustration would destroy the tactical, developer-focused aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The singular glowing cyan keyword ('innovate') set within a stark white display heading, perfectly matched to the technical blue wireframe icons throughout the grid. It injects a concentrated burst of electric energy into an otherwise rigorously cold monochrome environment. Misusing it means applying the accent to multiple words or entire sentences, which instantly destroys its surgical impact.
MUST
- Reserve #38bdf8 cyan strictly for functional anchors, icons, and precise headline emphasis.
- Maintain uniform 18px corner radii across all cards in the capability matrix.
- Pair solid white CTAs with inverse black text to create a singular visual anchor on the left.
- Align the bottom ribbon full-width with the combined left copy and right card matrix.
AVOID
- Never apply colored surface glows or gradients behind the feature cards.
- Do not color entire card backgrounds in blue or grey; keep them on #0a0f18.
- Avoid multi-color icons; every card glyph must share the same uniform #38bdf8 stroke.
- Do not use uppercase typography for anything other than the single capsule category 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