DESIGN.MD

Web应用 · 2026-08-07

DESIGN.MD
reduce eye strain and provide a more "paper-like" feel than stark white.

name: Serene Veriditas colors: surface: '#faf9f4' surface-dim: '#dbdad5' surface-bright: '#faf9f4' surface-container-lowest: '#ffffff' surface-container-low: '#f5f4ef' surface-container: '#efeee9' surface-container-high: '#e9e8e3' surface-container-highest: '#e3e3de' on-surface: '#1b1c19' on-surface-variant: '#45483f' inverse-surface: '#30312e' inverse-on-surface: '#f2f1ec' outline: '#76786e' outline-variant: '#c6c8bb' surface-tint: '#566342' primary: '#566342' on-primary: '#ffffff' primary-container: '#a3b18a' on-primary-container: '#384425' inverse-primary: '#becca3' secondary: '#7d562d' on-secondary: '#ffffff' secondary-container: '#ffca98' on-secondary-container: '#7a532a' tertiary: '#74556a' on-tertiary: '#ffffff' tertiary-container: '#c6a1b9' on-tertiary-container: '#53374b' error: '#ba1a1a' on-error: '#ffffff' error-container: '#ffdad6' on-error-container: '#93000a' primary-fixed: '#dae8be' primary-fixed-dim: '#becca3' on-primary-fixed: '#141f05' on-primary-fixed-variant: '#3f4b2c' secondary-fixed: '#ffdcbd' secondary-fixed-dim: '#f0bd8b' on-secondary-fixed: '#2c1600' on-secondary-fixed-variant: '#623f18' tertiary-fixed: '#ffd7f0' tertiary-fixed-dim: '#e2bbd4' on-tertiary-fixed: '#2b1325' on-tertiary-fixed-variant: '#5b3e52' background: '#faf9f4' on-background: '#1b1c19' surface-variant: '#e3e3de' typography: display-lg: fontFamily: Playfair Display fontSize: 48px fontWeight: '700' lineHeight: '1.1' letterSpacing: -0.02em display-lg-mobile: fontFamily: Playfair Display fontSize: 32px fontWeight: '700' lineHeight: '1.2' headline-md: fontFamily: Playfair Display fontSize: 32px fontWeight: '600' lineHeight: '1.3' headline-sm: fontFamily: Playfair Display fontSize: 24px fontWeight: '600' lineHeight: '1.4' body-lg: fontFamily: Inter fontSize: 18px fontWeight: '400' lineHeight: '1.7' body-md: fontFamily: Inter fontSize: 16px fontWeight: '400' lineHeight: '1.6' label-sm: fontFamily: Inter fontSize: 13px fontWeight: '500' lineHeight: '1.2' letterSpacing: 0.05em quote: fontFamily: Playfair Display fontSize: 22px fontWeight: '400' lineHeight: '1.6' rounded: sm: 0.25rem DEFAULT: 0.5rem md: 0.75rem lg: 1rem xl: 1.5rem full: 9999px spacing: unit: 4px container-max: 800px gutter: 24px margin-mobile: 20px stack-sm: 12px stack-md: 32px

stack-lg: 64px

Brand & Style

The design system is centered on the concept of a "Digital Garden"—a personal, curated space for evolving thoughts and quiet reflection. It targets an audience that values intellectual depth, slow reading, and aesthetic tranquility.

The visual style is Minimalist with Tactile Warmth, blending the cleanliness of modern interface design with the organic sensibility of high-end editorial publishing. The emotional response should be one of "calm focus." This is achieved through generous whitespace (negative space), a palette that avoids pure blacks and whites, and subtle transitions that mimic the unhurried pace of nature.

Colors

The palette is derived from natural elements—stone, leaf, and earth.

  • Background (Surface): The primary canvas is a soft cream (#F9F8F3), chosen to reduce eye strain and provide a more "paper-like" feel than stark white.
  • Typography (On-Surface): Body text utilizes a deep charcoal (#2D2D2D), providing high legibility while remaining softer than pure black.
  • Primary Accent (Sage): Used for growth-oriented elements, active states, and primary navigation links.
  • Secondary Accent (Dusty Rose): Used for pull quotes, highlighting categories, or decorative dividers to add a touch of warmth.
  • Subtle UI: Use a 5% opacity of the Charcoal for borders and 10% for disabled states.

Typography

This design system employs a classic Serif/Sans-Serif pairing to establish a clear hierarchy between narrative and utility.

  • Headlines: Use Playfair Display. It provides an authoritative yet graceful presence. Tracking should be slightly tightened for large display sizes.
  • Body: Use Inter. It is chosen for its exceptional legibility at 16-18px. Line heights are intentionally generous (1.6+) to facilitate a comfortable long-form reading experience.
  • Metadata/Labels: Use Inter in uppercase with increased letter spacing to differentiate functional UI from the narrative flow.

Layout & Spacing

The layout philosophy follows a Fixed-Fluid Hybrid model. For reading-heavy pages (blog posts), the content is constrained to a max-width of 800px to maintain an ideal line length for readability.

  • Grid: Use a simple 12-column grid for landing pages, but default to a single centered column for the "Garden" content.
  • Vertical Rhythm: Use a base 4px unit. Significant sections should be separated by large vertical gaps (stack-lg) to allow the design to breathe.
  • Mobile: Margins shrink to 20px, and font sizes scale down as defined in the typography tokens. Use fluid padding for containers (e.g., 5vw).

Elevation & Depth

Depth is communicated through Tonal Layering and Soft Ambient Shadows rather than heavy borders.

  • Surfaces: Use slightly lighter or darker tints of the Cream background to define areas.
  • Shadows: Shadows should be almost imperceptible. Use a large blur radius (20-30px) with very low opacity (3-5%) using the Charcoal color as the shadow base.
  • Transitions: All interactive elements should use a 200ms ease-out transition for color changes and a 400ms cubic-bezier(0.16, 1, 0.3, 1) for "lift" effects.

Shapes

The shape language is organic and soft. All primary containers (cards, images, input fields) utilize a 12px (0.75rem) corner radius.

Avoid sharp 90-degree angles to maintain the "friendly/botanical" aesthetic. Decorative elements like dividers or category tags may use "Pill" shapes (maximum rounding) to provide visual contrast against the more structured article cards.

Components

  • Buttons: Primary buttons use the Sage Green background with white text. Secondary buttons use a ghost style with a subtle 1px Sage border. All buttons have a 12px radius.
  • Cards: Background should be #FFFFFF or 2% lighter than the Cream surface. On hover, the card should lift -4px on the Y-axis with a slightly deepened shadow.
  • Inputs: Minimalist fields with only a bottom border of 1px in a muted neutral, turning to Sage on focus.
  • Chips/Tags: Small pill-shaped containers using the Dusty Rose at 10% opacity with Dusty Rose text.
  • Dividers: Use an organic "leaf" or "dot" glyph to separate major sections of a post instead of a simple horizontal rule.
  • Quotes: Left-aligned with a thick (4px) Dusty Rose vertical bar.