Hub

Less, Precisely.

Zen minimalism is not absence — it is deliberate restraint. Every margin, every weight, every tone is chosen to direct attention to a single focal point. The design disappears so the content can breathe.

Spacing Anatomy
Micro
4–8 px
Element
16–28 px
Section
48–80 px
Ma (間)
10–14 vh
Type Scale — Cormorant Garamond 300
Display
clamp(2.4rem, 5vw, 3.6rem)
weight 300 · lh 1.1
Section Title
1.6 rem
weight 300 · lh 1.3
Emphasis Text
1.1 rem italic
weight 300 · lh 1.8
Body text — Noto Sans 300
0.88 rem
weight 300 · lh 1.9
Label / Caption
0.72 rem uppercase
tracking 0.15em
Palette — Three Tones Only
Ink #2c2c2a
Stone #999999
Paper #faf9f7
Whitespace Ratio — ~70% Negative Space
60 px 60 px 48 px 48 px
Content lives here — surrounded by intentional emptiness
Design Constraints
01 Single column only. Max-width 800px. Center-aligned. No grids, no sidebars.
02 Font weight 300 everywhere. Bold is forbidden — hierarchy comes from size and color alone.
03 Maximum three colors. Near-black for text, mid-gray for secondary, off-white for background. No accents.
04 Borders never exceed 1px. Box-shadows never exceed rgba(0,0,0,0.02). Subtle or invisible.
05 Animations longer than 2 seconds. Ease-in only. No bounce, no spring, no parallax. Motion should feel like breathing.
06 If an element can be removed without losing meaning, remove it. Every pixel of emptiness is a design decision.

The space between elements is not empty — it is the design itself. 

Design a landing page in Zen Minimalism style — deliberate restraint where whitespace and typography hierarchy ARE the design.

COLOR TOKENS:
--bg: #faf9f7
--text: #1a1a18
--text-secondary: #444444
--text-tertiary: #555555
--label: #444444
--meta: #555555
--divider: #dddddd
--border: #cccccc
--guide: #cccccc
Maximum 3 tones: near-black, mid-gray, off-white. No accent colors.

TYPOGRAPHY:
Display: Cormorant Garamond 300, clamp(2.6rem, 5.5vw, 4.8rem), lh 1.1, italic for emphasis
Section title: Cormorant Garamond 300, 1.6rem, lh 1.3
Labels: Cormorant Garamond 400, 0.78rem, uppercase, tracking 0.18em
Body: Noto Sans KR 300, 0.88-0.95rem, lh 1.9
Meta: 0.72rem, weight 300
-webkit-font-smoothing: antialiased on body
Bold is forbidden — hierarchy from size and color only.

DEMO STRUCTURE:
1) Hero: centered title + design philosophy paragraph
2) Spacing Anatomy: 4 horizontal bars showing spacing scale (Micro 4-8px → Ma 10-14vh)
3) Type Scale: 5 specimens (Display → Label) with size/weight/lh metadata
4) Palette: 3 circular swatches (Ink #1a1a18, Stone #999, Paper #faf9f7) with labels
5) Whitespace Demo: box with visible margin guides showing 70% negative space ratio
6) Design Constraints: 6 numbered rules (single column, weight 300 only, max 3 colors, 1px borders, slow animations, remove what you can)

UI:
- Section labels: 0.78rem uppercase, tracking 0.18em, color #444
- Rows: border-top 1px solid #ddd, padding 16-20px 0
- Spacing bars: height 2px, background #1a1a18, opacity 0.4 (hover 0.7)
- Constraint numbers: Cormorant Garamond 300, 1.4rem, color #555
- Whitespace box: border 1px solid #ccc, guide lines #ccc, margin labels 0.6rem color #555
- Divider: 1px wide, 80px tall, gradient transparent→#aaa→transparent
- Button: background none, border 1px solid #1a1a18, padding 12px 30px
- Button hover: background #1a1a18, color #fff, transition 0.3s

LAYOUT:
Container: max-width 860px, margin 0 auto, padding 60px 40px
All content single-column, center-aligned. ~70% whitespace ratio.
Sections separated by 6vh spacers and 1px horizontal rules.

MOTION:
Entrance: fade from opacity 0 translateY(10px), 2s ease-in
Spacing bars: opacity transition 0.6s on hover
No scroll animations, no parallax, no bounce effects.

RESPONSIVE:
- Mobile: padding 40px 20px, type specimens stack vertically, palette gap shrinks
- Desktop: max-width 860px centered, side-by-side specimens

FORBIDDEN:
- Font weight above 300 (except labels at 400)
- More than 3 colors / any accent or saturated color
- Multi-column grids or complex layouts
- Fast animations or bounce/spring easing
- Borders thicker than 1px / box-shadows stronger than rgba(0,0,0,0.02)
- Icons, illustrations, or photographic imagery

OUTPUT:
1) Color tokens + typography scale with weights and line-heights
2) Hero / Spacing Anatomy / Type Scale / Palette / Whitespace Demo / Design Constraints vertical structure
3) Single-file HTML/CSS with zen aesthetic and visible design specifications