日系清新風

japanese fresh · 日系清新風

間侘寂清

the beauty of
empty space

Ma (間) · wabi-sabi · hairline borders · botanical accents
meditative slowness · extreme whitespace

scroll

palette / 色

warm neutral palette

Seven tones anchored in rice white and sky blue. Borders use warm #d4d4cf at 30–40% opacity — never harsh. Text stays in muted #b0b8c4 to keep the eye at rest.

Sky Blue

#64b5f6

Primary

Rice White

#fafaf8

Background

Mint

#98d8c8

Accent

Gentle Pink

#ffb7c5

Accent

Powder Blue

#b8d4e3

Accent

Muted Text

#b0b8c4

Secondary

Warm Border

#d4d4cf

Hairline

tonal transitions

sky → powder

mint → sky

pink → powder

rice → powder

philosophy / 美学

ma · wabi · sabi · sei

Four ancient aesthetics that shape every decision. Intentional emptiness, imperfect beauty, the passage of time, and luminous purity.

間

The space between things. Silence between notes. Whitespace between sections. The pause is as important as the word — it gives everything else room to breathe.

侘

Wabi

Beauty in imperfection. A slightly off-center composition. Asymmetric placement. Deliberate restraint over relentless polish. The irregular is what is real.

寂

Sabi

The beauty of time passing. Organic forms over rigid grids. Hairline borders that barely exist. Quiet inevitability. Things worn gently by experience.

清

Sei

Purity without coldness. The feeling of light through shoji screens. Clean lines that invite the eye to rest rather than to seek. Stillness that is not emptiness.

components / 部品

quiet building blocks

Hairline borders only. Font-extralight or font-light throughout. No shadows — elements float in their whitespace by their own presence.

whisper buttons — hairline border, weightless hover

filled — translucent tint, gentle weight

interactions / 動き

animation & interaction rules

Four named rules govern every motion. Meditative, never jarring. Hover or click each demo to feel the Japanese Fresh interaction language.

Weightless Float

hover 仅允许极轻上浮（约 0.5px）
避免重阴影和大位移

hover this element

hover:–translate-y-0.5 · duration-500

Airy Transitions

颜色变化采用 duration-500 + ease-in-out
像晨雾中缓慢显现

transition: all 500ms ease-in-out

Subtle Focus

focus 只调整发丝级边框颜色
不使用粗 ring 或强 glow

click to focus this input

border-b: 0.5px · no ring · no box-shadow

Tactile Click

active 态优先微调透明度和背景层
不使用明显缩放

active: opacity 0.75 + bg tint · no scale transform

app demo / アプリ

quiet journal

A mock journal interface demonstrating the full system in context — extreme whitespace, hairline borders, botanical accents, bottom-line inputs.

entries / 記録

Feb 21

Morning light

The kind of quiet that only exists before the rest of the world wakes.

Feb 20

After the rain

The city smells of wet concrete and something faintly green.

Feb 19

Afternoon tea

Nothing more meditative than watching steam rise from a ceramic cup.

Feb 18

Paper windows

Light arrives softened, like a thought you cannot quite name.

二月廿一日

Morning light

The kind of quiet that only exists before the rest of the world wakes.

There is a kind of light that exists only once a day, for a few minutes, before the world fully commits to being awake. It does not announce itself. You have to already be looking. The light will not wait for you to find it. It arrives and departs on its own schedule, indifferent and perfect.

add a note

principles / 原則

do and do not

Every restraint is intentional. The rules exist to preserve the meditative quality that defines Japanese Fresh.

Use extreme whitespace (py-32, py-40) — Ma is the primary tool
Hairline borders only (0.5px, rgba at 30–40% opacity)
Include one delicate botanical SVG accent per section
Use font-extralight / font-light exclusively throughout
Bottom-line only inputs with floating labels
Warm neutral border color #d4d4cf instead of harsh gray
Asymmetric placement for wabi-sabi character
transition duration-500 for meditative interactions
Weightless hover — 0.5px lift, transparent tint, no shadow

do not

Never use bold or heavy font weights (font-bold, font-semibold)
Never use uppercase text — too aggressive for this aesthetic
Never use border-2 or thicker — only hairline borders exist here
Never use visible shadows (shadow-lg, shadow-xl) — elements float
Never use dark or black backgrounds
Never use sharp corners (rounded-none) — always gentle
Never crowd sections — maintain extreme breathing room between
Never use fast, abrupt transitions under 200ms
Never use neon or high-saturation colors anywhere

css tokens / 変数

global css variables

All design tokens exposed as CSS custom properties for full system consistency. Reference them in any component.

:root tokens

:root {
  --jf-sky:     #64b5f6;
  --jf-rice:    #fafaf8;
  --jf-mint:    #98d8c8;
  --jf-pink:    #ffb7c5;
  --jf-powder:  #b8d4e3;
  --jf-text:    #4a5568;
  --jf-muted:   #b0b8c4;
  --jf-border:  #d4d4cf;
}

utility classes

.jf-linen

Subtle washi paper texture background overlay

.jf-divider

0.5px hairline divider at 40% opacity

.jf-input-underline

Bottom-border only input, no radius, no frame

.jf-ma-section

py-32 section spacing — the Ma principle

.jf-botanical

Botanical SVG opacity + stroke color preset

日系清新風

←StyleKit

japanese fresh · 日系清新風

間侘寂清

the beauty of
empty space

Ma (間) · wabi-sabi · hairline borders · botanical accents
meditative slowness · extreme whitespace

scroll

palette / 色

warm neutral palette

Seven tones anchored in rice white and sky blue. Borders use warm #d4d4cf at 30–40% opacity — never harsh. Text stays in muted #b0b8c4 to keep the eye at rest.

Sky Blue

#64b5f6

Primary

Rice White

#fafaf8

Background

Mint

#98d8c8

Accent

Gentle Pink

#ffb7c5

Accent

Powder Blue

#b8d4e3

Accent

Muted Text

#b0b8c4

Secondary

Warm Border

#d4d4cf

Hairline

tonal transitions

sky → powder

mint → sky

pink → powder

rice → powder

philosophy / 美学

ma · wabi · sabi · sei

Four ancient aesthetics that shape every decision. Intentional emptiness, imperfect beauty, the passage of time, and luminous purity.

間

The space between things. Silence between notes. Whitespace between sections. The pause is as important as the word — it gives everything else room to breathe.

侘

Wabi

Beauty in imperfection. A slightly off-center composition. Asymmetric placement. Deliberate restraint over relentless polish. The irregular is what is real.

寂

Sabi

The beauty of time passing. Organic forms over rigid grids. Hairline borders that barely exist. Quiet inevitability. Things worn gently by experience.

清

Sei

Purity without coldness. The feeling of light through shoji screens. Clean lines that invite the eye to rest rather than to seek. Stillness that is not emptiness.

components / 部品

quiet building blocks

Hairline borders only. Font-extralight or font-light throughout. No shadows — elements float in their whitespace by their own presence.

whisper buttons — hairline border, weightless hover

filled — translucent tint, gentle weight

interactions / 動き

animation & interaction rules

Four named rules govern every motion. Meditative, never jarring. Hover or click each demo to feel the Japanese Fresh interaction language.

Weightless Float

hover 仅允许极轻上浮（约 0.5px）
避免重阴影和大位移

hover this element

hover:–translate-y-0.5 · duration-500

Airy Transitions

颜色变化采用 duration-500 + ease-in-out
像晨雾中缓慢显现

transition: all 500ms ease-in-out

Subtle Focus

focus 只调整发丝级边框颜色
不使用粗 ring 或强 glow

click to focus this input

border-b: 0.5px · no ring · no box-shadow

Tactile Click

active 态优先微调透明度和背景层
不使用明显缩放

active: opacity 0.75 + bg tint · no scale transform

app demo / アプリ

quiet journal

A mock journal interface demonstrating the full system in context — extreme whitespace, hairline borders, botanical accents, bottom-line inputs.

entries / 記録

Feb 21

Morning light

The kind of quiet that only exists before the rest of the world wakes.

Feb 20

After the rain

The city smells of wet concrete and something faintly green.

Feb 19

Afternoon tea

Nothing more meditative than watching steam rise from a ceramic cup.

Feb 18

Paper windows

Light arrives softened, like a thought you cannot quite name.

二月廿一日

Morning light

The kind of quiet that only exists before the rest of the world wakes.

add a note

principles / 原則

do and do not

Every restraint is intentional. The rules exist to preserve the meditative quality that defines Japanese Fresh.

Use extreme whitespace (py-32, py-40) — Ma is the primary tool
Hairline borders only (0.5px, rgba at 30–40% opacity)
Include one delicate botanical SVG accent per section
Use font-extralight / font-light exclusively throughout
Bottom-line only inputs with floating labels
Warm neutral border color #d4d4cf instead of harsh gray
Asymmetric placement for wabi-sabi character
transition duration-500 for meditative interactions
Weightless hover — 0.5px lift, transparent tint, no shadow

do not

Never use bold or heavy font weights (font-bold, font-semibold)
Never use uppercase text — too aggressive for this aesthetic
Never use border-2 or thicker — only hairline borders exist here
Never use visible shadows (shadow-lg, shadow-xl) — elements float
Never use dark or black backgrounds
Never use sharp corners (rounded-none) — always gentle
Never crowd sections — maintain extreme breathing room between
Never use fast, abrupt transitions under 200ms
Never use neon or high-saturation colors anywhere

css tokens / 変数

global css variables

All design tokens exposed as CSS custom properties for full system consistency. Reference them in any component.

:root tokens

:root {
  --jf-sky:     #64b5f6;
  --jf-rice:    #fafaf8;
  --jf-mint:    #98d8c8;
  --jf-pink:    #ffb7c5;
  --jf-powder:  #b8d4e3;
  --jf-text:    #4a5568;
  --jf-muted:   #b0b8c4;
  --jf-border:  #d4d4cf;
}

utility classes

.jf-linen

Subtle washi paper texture background overlay

.jf-divider

0.5px hairline divider at 40% opacity

.jf-input-underline

Bottom-border only input, no radius, no frame

.jf-ma-section

py-32 section spacing — the Ma principle

.jf-botanical

Botanical SVG opacity + stroke color preset

the beauty ofempty space

warm neutral palette

ma · wabi · sabi · sei

quiet building blocks

animation & interaction rules

quiet journal

Morning light

do and do not

global css variables

the beauty ofempty space

warm neutral palette

ma · wabi · sabi · sei

quiet building blocks

animation & interaction rules

quiet journal

Morning light

do and do not

global css variables

the beauty of
empty space

the beauty of
empty space