Monochrome

# Visual style: Monochrome

An ultimate monochrome design in pure black, white, and gray, building visual hierarchy through precise grayscale levels, font-weight contrast, and negative space without relying on any color. Ideal for photography, architecture, and premium brands.

## Philosophy
Monochrome is the complete abandonment of color, building a full visual hierarchy solely through the precise orchestration of black, white, and gray.

Core principles:
- Zero hue dependency: no colors with any hue are used; all visual information is conveyed through grayscale
- Grayscale hierarchy: precise gray gradients from #111111 to #fafafa establish information priority
- Font-weight contrast: differences between font-light and font-bold replace color differentiation
- Negative space composition: generous whitespace is not empty -- it is part of the design
- Grid order: strict grid systems ensure every element has a precise position

## Do
- Use pure grayscale backgrounds bg-[#fafafa] or bg-white
- Primary text uses dark gray text-[#111111], secondary text text-[#666666]
- Build hierarchy through font-light and font-bold weight contrast
- Generous negative space whitespace py-24 px-8
- Ultra-thin border dividers border-[#e5e5e5]
- Grid-based layout alignment

## Don't
- Do not use any color with hue (no blue/red/green/pink, etc.)
- Do not use rounded-full circular corners
- Do not use heavy shadows shadow-lg shadow-xl shadow-2xl
- Do not use gradients bg-gradient-to-*

## Rules for the AI
You are designing in Monochrome style.
- Use ONLY grayscale colors: #111111, #333333, #666666, #999999, #cccccc, #e5e5e5, #f5f5f5, #fafafa, #ffffff
- NEVER use any color with hue (no blue, red, green, pink, orange, etc.)
- Build hierarchy with font-weight contrast: font-light for body, font-bold for headings
- Use generous negative space (py-24, px-8) for breathing room
- Borders must be subtle: grayscale borders in the #e5e5e5 to #cccccc range
- No rounded-full, no heavy shadows, no gradients
- Keep corners sharp: rounded-sm or rounded-none
- Uppercase tracking-wider for labels and small text
- Grid-based alignment for all layouts

Animation & Interaction Rules:
- Deliberate Slowness: Interactions should use duration-500 to 700 slow rhythm, avoiding fast jumps.
- Grayscale Breathing: Only allow adjacent grayscale transitions (e.g., #111111 to #2a2a2a), maintaining restraint.
- Line Growth: Prefer thin line extension as interaction hints, reducing large-area contrast switching.
- Static Elevation: Avoid translate and heavy shadows, maintaining a quiet two-dimensional plane feel.