Design a light-mode website section: warm literary serifs in an ivory laboratory anchored by an obsidian developer footer.
LAYOUT
The page transitions from an open, two-column hero composition into an expansive full-bleed technical footer. The hero arranges headline and action groups on the left balanced against a centered node-and-satellite system diagram on the right. Directly below, the layout snaps to an obsidian container featuring a 6-column modular footer layout, terminating with a 1px boundary dividing copyright and privacy links.
PALETTE (use these exact hex values)
- #faf8f5 — Ivory Linen Canvas: dominant background for the hero section providing an organic, warm editorial foundation
- #0c0d10 — Obsidian Ground: monolithic dark background for the full-width technical footer
- #ffffff — Card Elevated Light: surface fill for floating architecture diagram nodes and interactive modules
- #d93829 — Crimson Ember: primary call-to-action fills, brand hexagon insignia, and active focal markers
- #111216 — Charcoal Black Text: editorial display headline and strong primary copy on light surfaces
- #646770 — Slate Body Muted: hero supporting copy, subheadings, and diagram metadata text
- #e7e3dc — Parchment Border: hairline boundary strokes for light pills, diagram connectors, and card edges
- #9fa3ad — Footer Link Neutral: interactive link states and readable column list items within dark footer
- #5e6370 — Footer Muted Header: uppercase category headers and copyright metadata in the footer
- #14171c — Abyssal Field Fill: newsletter input background fill and dark hairline borders
TYPOGRAPHY
Typeface Tiempos Headline (or Newsreader, Reckless, Playfair Display), weights 600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 32px heading, 56px display. Tracking -0.025em. The type choice pairs the academic authority of an editorial bracketed serif with the precision of a modern neo-grotesque sans. This communicates that the platform solves sophisticated AI evaluation problems with rigor rather than hype. If licensed serifs like Tiempos are unavailable, high-quality open alternatives like Newsreader or Reckless should be utilized.
GEOMETRY & SPACING
Corner radii — cards 12px, links 999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth on the light canvas is handled through ultra-diffuse, low-opacity ambient shadows (0 6px 24px rgba(0,0,0,0.04)) paired with hairline borders at 1px. In contrast, the dark footer is entirely planar and flat, relying entirely on subtle border contrast (#1e222a) rather than drop shadows to delineate elements.
IMAGERY
Visual assets are strictly schematic and diagrammatic, utilizing clean vector nodes, micro-icons (database, check, scale, pulse), and clean routing lines instead of photorealistic imagery. No 3D renders, skeuomorphism, or photographic assets are permitted.
SIGNATURE DETAIL — the thing that makes this design itself
The stark dichotomy of a warm literary ivory hero anchored abruptly to an obsidian developer footer, bridged visually only by precise crimson accent points (#d93829). If this design were built without the serif-to-sans dialogue or the abrupt cream-to-black canvas shift, it would immediately revert to a generic developer SaaS template.
MUST
- Pair rich modern display serifs exclusively with neutral geometric sans-serif UI elements.
- Reserve the crimson #d93829 accent purely for interactive focal points, logo nodes, and active dots.
- Maintain high contrast between the warm #faf8f5 light canvas and the monolithic #0c0d10 footer.
- Use 1px delicate stroke connectors with faint dashed patterns to represent technical data flow.
AVOID
- Do not use saturated blue or purple fills; technical nodes should remain clean white and neutral.
- Never substitute the editorial serif headline with a geometric sans font.
- Avoid harsh black (#000000) for the footer; preserve the subtle warmth of #0c0d10.
- Do not apply drop shadows to the footer interactive components or input fields.
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 中尝试 
