Design a light-mode web interface screen: an airy sanctuary for personal scholarship combining crisp cobalt accents with measured editorial quietude.
LAYOUT
The page implements a fixed-width left navigation rail (approx 220px) next to a scrollable two-column content grid (approx 65% left, 35% right). The primary pane leads with a banner pairing an expressive title and stylized illustration above a 5-column metric stat row. Below this, transactional reading queues, book cards, and quotes occupy the wider left flow, while fixed analytics widgets populate the narrower right rail.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Global application page background behind cards and panels
- #FFFFFF — Card Surface: Primary surface for dashboard cards, sidebar, and inputs
- #2563EB — Cobalt Blue: Primary brand color for primary actions, active navigation, and dominant charts
- #EFF6FF — Cobalt Tint: Soft wash for active sidebar selection pills and pill tags
- #0F172A — Charcoal Slate: Main headings, book titles, and primary numerical readouts
- #64748B — Cool Grey: Secondary metadata, author names, inactive nav links, and captions
- #E2E8F0 — Border Subtle: Hairline 1px dividers, card boundaries, and input borders
- #06B6D4 — Progress Cyan: Science category bar and secondary metrics line chart line
- #F59E0B — Amber Gold: Self-help category bar, pro badge, and note quote icons
- #8B5CF6 — Royal Violet: History category bar and highlight callout indicators
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Manrope), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 34px display. Tracking -0.02em at display, 0 at body. Plus Jakarta Sans delivers an exacting, clean geometric presence with generous apertures that feel simultaneously literate and technological. It balances modern productivity tool clarity with quiet editorial dignity. If unlicensable, Inter or Manrope serve as precise, high-legibility free drop-in substitutes.
GEOMETRY & SPACING
Corner radii — cards 12px, links 6px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 24px between sections, 1440px container, comfortable density.
DEPTH
Depth is rendered flat-to-surface without pronounced drop shadows. Structural boundary is almost entirely articulated through 1px crisp borders (#E2E8F0) contrasting against the subtle slate base canvas (#F8FAFC). Modals or active tooltips sparingly rely on a soft, diffused 0px 4px 12px rgba(15, 23, 42, 0.05) ambient blur.
IMAGERY
Visual language combines faithful miniature representations of published book covers with flat, stylized 2.5D vector artwork. The hero banner employs soft monochrome blue and pastel purple hues illustrating stationery, open books, glasses, and botanical leaves. Photorealistic lifestyle imagery or raw uncurated photography is strictly avoided.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the horizontal 'Continue reading' row paired with a micro progress bar and outline action pill. It transforms passive library catalogs into an active, friction-free productivity workflow. It is commonly misused by oversaturating the track with jarring colors or wrapping multiple titles unpredictably.
MUST
- Use a hairline 1px border (#E2E8F0) rather than heavy drop shadows to define white surface boundaries.
- Limit saturated royal blue (#2563EB) strictly to active indicators, primary CTAs, and reading progression.
- Maintain generous 20px to 24px margins between disparate dashboard modules to foster an unhurried, library-like atmosphere.
- Pair book cover miniatures with strict typographic truncation to prevent multi-line grid misalignment.
AVOID
- Never introduce dark saturated backgrounds for cards; the system strictly relies on crisp white (#FFFFFF).
- Do not use dark or heavy box-shadows; keep elevation virtually flat with light 1px structural strokes.
- Avoid colored icon backdrops with high contrast; use soft hairline circular borders or faint pastel tints.
- Do not mix serif display typefaces into standard operational UI elements; retain geometric sans throughout.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2784:2960. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
