Design a light-mode website section: editorial parchment meeting deep cosmos stippling for high-trust governance interfaces.
LAYOUT
The layout features a centered single-column CTA zone on an open cream parchment plain, anchored by dual action buttons and a 3-item trust indicator row. Directly below, an edge-to-edge dark container hosts a 6-column asymmetric directory grid: brand info on the far left, four link stacks in the center, and a newsletter capture block on the right. A thin divider separates the grid from a single-line bottom legal footer.
PALETTE (use these exact hex values)
- #F9F8F6 — Parchment Cream: Primary light canvas background for the CTA section
- #0E1114 — Cosmic Obsidian: Deep grounding black surface for footer and navigation blocks
- #A92B2B — Crimson Brick: Signature brand color used for key CTA buttons, accents, and keyword emphasis
- #1A1D20 — Deep Charcoal: Primary editorial headline text on light cream canvas
- #5A5E66 — Muted Slate: Subtitles, supporting body text, and feature benefit checklist items
- #9BA1A6 — Footer Zinc: Directory links and copyright copy on the dark footer canvas
- #FFFFFF — Pure White: High-contrast headings, logo wordmark, and primary button labels on dark surfaces
- #1F2327 — Dark Charcoal Border: Hairline 1px dividers, newsletter input borders, and icon borders in dark footer
TYPOGRAPHY
Typeface Newsreader (or Instrument Serif, Georgia, Source Serif Pro), weights 400/500. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 36px heading-lg, 48px display. Tracking -0.015em at display. The typographic personality merges traditional archival print publishing with technical compliance precision. The display serif carries the literary grace and authority of historic broadsheets, while the supporting grotesque sans brings strict, modern software reliability. Instrument Serif or Newsreader paired with Inter serves as the ideal open-source stack.
GEOMETRY & SPACING
Corner radii — cards 12px, links 2px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through contrasting surface zones and fine stippling rather than drop shadows. Flat, planar surfaces rely on crisp 1px borders and sharp value transitions from ivory to black to define depth. Subtle optical depth is suggested by the density of stippled background dots.
IMAGERY
Imagery consists entirely of pointillist stipple drawings and dot-matrix halftone patterns depicting retro-futuristic themes: Saturnian orbital rings, celestial flares, and micro-grid city skylines. Solid photographic fills, glossy 3D renders, or modern flat vector illustrations would severely violate the vintage scientific aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of vintage editorial serifs with astronomical dot-stipple engraving art across an off-white field, punctuated by a deep brick-red accent. Misusing it involves replacing the intricate stippled dots with generic blur glows or solid geometric vector shapes.
MUST
- Pair classic serif display typography with fine geometric dot-matrix halftone graphics.
- Highlight exactly one or two pivotal words in the headline using #A92B2B crimson.
- Maintain strict binary division between the parchment light CTA and the dark #0E1114 footer.
- Keep hairline borders at exactly 1px with low-contrast dark greys (#1F2327) on the footer surface.
AVOID
- Never introduce bright neon accents, drop shadows, or multi-colored gradients.
- Do not round primary action buttons beyond 8px; strictly avoid fully rounded pills for primary CTAs.
- Avoid solid vector clip-art or photographic imagery; stick exclusively to pointillist dot stippling.
- Do not use dark typography in the footer; keep all dark-mode text between #9BA1A6 and pure white.
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