Design a light-mode web interface screen: editorial elegance meets creator utility through architectural arches, soothing earthen canvases, and modern bookish typography.
LAYOUT
The workspace uses a persistent 240px utility sidebar pinned to the left, adjacent to a wide responsive canvas. The primary canvas begins with a minimal utility header (search and profile avatar), cascading immediately into a large split-hero banner with arched photography. Directly beneath sits an earthy sage-tinted milestone card, followed by section headings and a three-column resource card grid. Rhythm is governed by large 28px rounded compound blocks spaced 24px apart.
PALETTE (use these exact hex values)
- #FBF9F5 — Warm Linen Canvas: Global application viewport background and low-contrast sidebar base
- #EFEAE3 — Oatmeal Surface: Top welcome hero card container surface providing soft warm separation
- #848E7C — Muted Sage: Milestone achievement block background housing marketing progress metrics
- #2B66D6 — Studio Cobalt: High-priority action buttons such as Create New CTA
- #B88746 — Raw Umber: Micro eyebrow labels and decorative divider rules above serif headlines
- #1C1B18 — Deep Licorice: Headlines, high-priority labels, and active navigation text states
- #6B665F — Earth Smudge: Secondary descriptors, inactive sidebar icons, and file metadata captions
- #FFFFFF — Pure White: Elevated modal badges, circular gauge base, and secondary cards
TYPOGRAPHY
Typeface Canela (or Playfair Display, Ogg, Instrument Serif), weights 400/500. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 22px subheading, 32px heading, 46px display. Tracking -0.02em at display sizes. The typographic tone is bookish, bespoke, and authoritative, reading like an art monograph or luxury studio publication rather than standard SaaS. The transitional serif conveys pedigree and thoughtful curation, while the clean geometric sans provides crisp, legible operational utility. Playfair Display or Canela is vital for headlines; swapping in default system sans-serifs completely eliminates the signature editorial persona.
GEOMETRY & SPACING
Corner radii — cards 28px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 40px between sections, 1360px container, airy density.
DEPTH
Depth is created through organic planar overlapping rather than heavy directional drop shadows. Floating elements like the circular progress badge and resource preview card cast faint, diffused ambient blurs (0 12px 32px rgba(33, 30, 25, 0.06)) while resting partly across panel seams. Layer hierarchy relies predominantly on distinct surface fills rather than simulated physical light.
IMAGERY
Imagery features warm, desaturated natural light photography evoking lifestyle editorial magazines, ceramics, dry botanical stems, and relaxed natural portraiture. Subjects utilize earthy linen, clay, and timber palettes with warm highlights. Bright corporate vector illustrations, 3D renderings, and high-contrast neon photography are strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of an architectural semicircular arch image mask integrated directly inside a soft, low-contrast oat card (#EFEAE3), juxtaposed against an italicized display serif headline. This move firmly anchors the digital dashboard in physical interior and print publication aesthetics. It fails if the arch aspect ratio becomes squashed or if placed against high-contrast, saturated backgrounds.
MUST
- Pair architectural Roman arch masks with wide, soft-tinted surrounding cards.
- Use rich italic display serif cuts on sentence fragments to inject editorial luxury.
- Retain generous interior padding (32px to 48px) within content container blocks.
- Reserve solid cobalt blue solely for high-conversion primary action triggers.
AVOID
- Never use cold slate blues or sterile #000000 black in text or borders.
- Do not set full body copy paragraphs in serif type; reserve it for titles.
- Avoid sharp 0px corners; all card surfaces must maintain at least 14px to 28px radii.
- Do not drop harsh black drop shadows; rely on soft atmospheric tint overlays.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1536:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
