minimalist-ui

$27

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 unavailable.

• 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:

• Establish the macro-whitespace first. Use massive vertical padding between sections (e.g., py-24 or py-32 in Tailwind).

• Constrain the main typography content width to max-w-4xl or max-w-5xl.

• Apply the custom typographic hierarchy and monochromatic color variables immediately.

• Ensure every card, divider, and border adheres strictly to the 1px solid #EAEAEA rule.

• Add scroll-entry animations to all major content blocks.

• Ensure sections have visual depth through imagery, ambient gradients, or subtle textures — no empty flat backgrounds.

• Provide code that reflects this high-end, uncluttered, editorial aesthetic natively without requiring manual adjustments.