Minimalist Ui

3. Typographic Architecture

The interface must rely on extreme typographic contrast and premium font selection to establish an editorial feel.

• Primary Sans-Serif (Body, UI, Buttons): Use clean, geometric, or system-native fonts with character. Target: font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif.
• Editorial Serif (Hero Headings & Quotes): Target: font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif. Apply tight tracking (letter-spacing: -0.02em to -0.04em) and tight line-height (1.1).
• Monospace (Code, Keystrokes, Meta-data): Target: font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace.
• Text Colors: Body text must never be absolute black (#000000). Use off-black/charcoal (#111111 or #2F3437) with a generous line-height of 1.6 for legibility. Secondary text should be muted gray (#787774).

4. Color Palette (Warm Monochrome + Spot Pastels)

Color is a scarce resource, utilized only for semantic meaning or subtle accents.

• Canvas / Background: Pure White #FFFFFF or Warm Bone/Off-White #F7F6F3 / #FBFBFA.
• Primary Surface (Cards): #FFFFFF or #F9F9F8.
• Structural Borders / Dividers: Ultra-light gray #EAEAEA or rgba(0,0,0,0.06).
• Accent Colors: Exclusively use highly desaturated, washed-out pastels for tags, inline code backgrounds, or subtle icon backgrounds.
  • Pale Red: #FDEBEC (Text: #9F2F2D)
  • Pale Blue: #E1F3FE (Text: #1F6C9F)
  • Pale Green: #EDF3EC (Text: #346538)
  • Pale Yellow: #FBF3DB (Text: #956400)

5. Component Specifications

• Bento Box Feature Grids:
  • Utilize asymmetrical CSS Grid layouts.
  • Cards must have exactly border: 1px solid #EAEAEA.
  • Border-radius must be crisp: 8px or 12px maximum.
  • Internal padding must be generous (e.g., 24px to 40px).
• Primary Call-To-Action (Buttons):
  • Solid background #111111, text #FFFFFF.
  • Slight border-radius (4px to 6px). No box-shadow.
  • Hover state should be a subtle color shift to #333333 or a micro-scale transform: scale(0.98).
• Tags & Status Badges:
  • Pill-shaped (border-radius: 9999px), very small typography (text-xs), uppercase with wide tracking (letter-spacing: 0.05em).
  • Background must use the defined Muted Pastels.
• Accordions (FAQ):
  • Strip all container boxes. Separate items only with a border-bottom: 1px solid #EAEAEA.
  • Use a clean, sharp + and - icon for the toggle state.
• Keystroke Micro-UIs:
  • Render shortcuts as physical keys using <kbd> tags: border: 1px solid #EAEAEA, border-radius: 4px, background: #F7F6F3, using the Monospace font.
• Faux-OS Window Chrome:
  • When mocking up software, wrap it in a minimalist container with a white top bar containing three small, light gray circles (replicating macOS window controls).

6. Iconography & Imagery Directives

• System Icons: Use "Phosphor Icons (Bold or Fill weights)" or "Radix UI Icons" for a technical, slightly thicker-stroke aesthetic. Standardize stroke width across all icons.
• Illustrations: Monochromatic, rough continuous-line ink sketches on a white background, featuring a single offset geometric shape filled with a muted pastel color.
• Photography: Use high-quality, desaturated images with a warm tone. Apply subtle overlays (opacity: 0.04 warm grain) to blend photos into the monochrome palette. Never use oversaturated stock photos. Use reliable placeholders like https://picsum.photos/seed/{context}/1200/800 when real assets are not available.
• Hero & Section Backgrounds: Sections should not feel empty and flat. Use subtle full-width background imagery at very low opacity, soft radial light spots (radial-gradient with warm tones at opacity: 0.03), or minimal geometric line patterns to add depth without breaking the clean aesthetic.

7. Subtle Motion & Micro-Animations

Motion should feel invisible — present but never distracting. The goal is quiet sophistication, not spectacle.

• Scroll Entry: Elements fade in gently as they enter the viewport. Use translateY(12px) + opacity: 0 resolving over 600ms with cubic-bezier(0.16, 1, 0.3, 1). Use IntersectionObserver, never window.addEventListener('scroll').
• Hover States: Cards lift with an ultra-subtle shadow shift (box-shadow transitioning from 0 0 0 to 0 2px 8px rgba(0,0,0,0.04) over 200ms). Buttons respond with scale(0.98) on :active.
• Staggered Reveals: Lists and grid items enter with a cascade delay (animation-delay: calc(var(--index) * 80ms)). Never mount everything at once.
• Background Ambient Motion: Optional. A single, very slow-moving radial gradient blob (animation-duration: 20s+, opacity: 0.02-0.04) drifting behind hero sections. Must be applied to a position: fixed; pointer-events: none layer. Never on scrolling containers.
• Performance: Animate exclusively via transform and opacity. No layout-triggering properties (top, left, width, height). Use will-change: transform sparingly and only on actively animating elements.

8. Execution Protocol

When tasked with writing frontend code (HTML, React, Tailwind, Vue) or designing a layout:

1. Establish the macro-whitespace first. Use massive vertical padding between sections (e.g., py-24 or py-32 in Tailwind).
2. Constrain the main typography content width to max-w-4xl or max-w-5xl.
3. Apply the custom typographic hierarchy and monochromatic color variables immediately.
4. Ensure every card, divider, and border adheres strictly to the 1px solid #EAEAEA rule.
5. Add scroll-entry animations to all major content blocks.
6. Ensure sections have visual depth through imagery, ambient gradients, or subtle textures — no empty flat backgrounds.
7. Provide code that reflects this high-end, uncluttered, editorial aesthetic natively without requiring manual adjustments.