Hub
Earth Atelier

Natural textures,
quiet contrast

자연의 질감,
조용한 대비

自然の質感、
静かなコントラスト

An emotive yet readable interface through warm neutrals, low-brightness text, and restrained organic form. Every detail drawn from earth.

01 — Philosophy

A design language rooted in the imperfection of natural materials. Where digital interfaces often feel sterile, Earth Atelier introduces warmth through carefully chosen earth tones and generous breathing room between elements.

Palette: Earth
Contrast: Low
Radius: Organic
Motion: Slow
Typography: Serif + Sans
02 — Material Palette
Sand #efe6d6
Clay #ab6b49
Leaf #5f6a47
Ink #2e2a24
Paper #faf6ee
Design that feels shaped by hand, not manufactured by machine.
The Atelier Principle
03 — Design Principles
  • 01
    Earth Tones Only
    Soil and plant-toned colors replace bright neon. Every hue is pulled from nature.
  • 02
    Generous Space
    Breathing room between elements creates a sense of calm. Space is a design material.
  • 03
    Slow Motion
    Slow fade and float animations maintain stability. No bounce or elastic effects.
04 — Typography
Cormorant Garamond
Light 300 — Display / Headings
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Inter
Light 300 / Regular 400 / Medium 500
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

AI Request Prompt

Design a landing page in Earth Atelier style — luxury apothecary minimalism inspired by Byredo and Aesop, with warm earth tones and quiet contrast.

COLOR TOKENS:
--sand: #efe6d6
--clay: #ab6b49
--leaf: #5f6a47
--ink: #2e2a24
--paper: #faf6ee
--muted: rgba(46, 42, 36, 0.4)
--line: rgba(46, 42, 36, 0.12)
Background: flat var(--paper), no gradients on body.
No other colors.

TYPOGRAPHY:
Display: 'Cormorant Garamond' 300 (serif, light weight for Byredo-like elegance)
Body: 'Inter' 300 / 400 / 500 (sans-serif, thin for apothecary feel)
Scale: clamp(2.8rem, 7vw, 5.6rem) for h1
Display line-height: 1.05
Body line-height: 1.7–1.85
Lead paragraph max-width: 460px

UI:
Divisions: 1px solid rgba(46, 42, 36, 0.12) — horizontal and vertical lines
No rounded cards, no panels, no box-shadows
Color swatches: square aspect-ratio, flat fill, grid with gap
Buttons: border-radius 0, 1px border, transparent bg, uppercase label, hover fills --ink
Accent marks: single 1px vertical lines in --clay at 25% opacity

LAYOUT:
Content max-width: min(1060px, 90vw)
Page padding: 28px 20px 84px
Section padding: clamp(48px, 7vw, 80px) vertical
Asymmetric intro grid: 7fr text | 5fr metadata, border-right divider
Principles: 3-column grid with border-left dividers
Type specimen: 2-column split (serif | sans), border-right divider

MOTION:
Entrance: translateY(8px) to 0, opacity 0 to 1, 600ms ease, stagger 80ms
No hover effects on content. Button hover: bg fills to --ink, text inverts.
No scroll-triggered animations. Respect prefers-reduced-motion.

AESTHETIC REFERENCE:
Byredo, Aesop — luxury apothecary minimalism
Museum label typography, editorial restraint
Let whitespace and typography do all the work

RESPONSIVE:
768px: all multi-column layouts collapse to single column
Palette wraps to 3 per row
No horizontal scroll at any viewport

FORBIDDEN:
- Rounded corners on containers or cards
- Gradients, glows, noise textures, or decorative SVG
- 3D effects, drop shadows, inset shadows
- Neon or high-saturation colors
- Bounce/elastic motion
- Decorative illustrations or ornamental dividers
- Cold blue or purple tones

OUTPUT:
1) Color + typography tokens as CSS custom properties
2) Component structure: Hero, Two-col intro, Flat palette, Quote, 3-col Principles, 2-col Type specimen
3) Semantic HTML + CSS, single file, responsive