Sakura Design System - The beauty of transient things
桜 - 花見 - 物の哀れ
In Japanese culture, the cherry blossom represents the fleeting nature of life. Its brief, brilliant bloom reminds us that beauty is most profound when it is transient. This design system captures that spirit: gentle, warm, and alive with spring.
The gentle sadness of passing things. Beauty heightened by its impermanence.
The tradition of gathering beneath blooming trees. Joy found in shared moments of beauty.
Sunlight filtering through leaves. Dappled, warm, gently shifting patterns of light.
色彩
Soft pinks of cherry blossoms, the pale green of new leaves, and the warm grey-brown of branches against a spring sky.
書体
Elegant display faces paired with soft, rounded body text. Warmth and readability flow like a spring stream.
Body text uses Zen Maru Gothic, a rounded Japanese typeface that brings warmth and approachability. Its gentle curves echo the softness of cherry blossom petals, making even dense content feel light and inviting.
The accent typeface, Cormorant Garamond, brings classical elegance for quotes, labels, and decorative text. Its fine serifs recall the delicate veins of a petal.
間隔
A 4px base scale that grows organically, like the distance between petals on a branch.
釦
Rounded, inviting controls with gentle gradients and spring-like warmth. Each press feels like a petal touching water.
Hover interactions are soft rises with growing shadows, like petals lifting gently in a spring breeze.
入力
Input fields with soft borders that bloom into pink focus states, inviting gentle interaction.
We will nurture your privacy like a garden
札
Translucent containers that float like petals on water. Glass-like surfaces with soft pink borders and gentle shadows.
A clean container with frosted glass effect. Content rests softly within rounded corners, as if cradled by petals.
The pink gradient header captures the warmth of a cherry tree in full bloom, framing content with spring color.
A pink left border marks importance, while a decorative petal floats in the corner. Gentle and distinctive.
A green top border represents new growth and fresh beginnings. Used for positive, forward-looking content.
First light touches petals still wet with morning dew. The grove awakens.
As evening falls, the last petals catch the fading light like tiny lanterns.
After the blossoms fall, tender green leaves unfurl. The cycle continues.
表
Data arranged with the care of a flower arrangement. Clean rows, soft dividers, gentle hover states.
| Variety | Japanese Name | Petal Count | Bloom Period | Peak Day |
|---|---|---|---|---|
| Somei-Yoshino | 染井吉野 | 5 petals | Late March - Early April | Day 7 |
| Yaezakura | 八重桜 | 20-50 petals | Mid April - Late April | Day 12 |
| Shidarezakura | 枝垂桜 | 5 petals | Late March - Mid April | Day 9 |
| Kawazu-zakura | 河津桜 | 5 petals | Early February - March | Day 14 |
| Kanzan | 関山 | 30-50 petals | Mid April - Early May | Day 10 |
| Total varieties cataloged | 5 | |||
標識
Small markers as delicate as individual petals. Rounded pills that categorize with color and warmth.
Badges use rounded pill shapes to feel organic and approachable. Colors correspond to bloom stages, growth states, and seasonal indicators.
通知
Notifications as gentle as a petal landing on your shoulder. They inform softly without interrupting the flow.
The cherry trees in your area are expected to reach full bloom within the next three days. Prepare your hanami plans.
Your changes have been saved successfully. New growth has been recorded and the seasonal catalog is up to date.
Strong winds expected this evening. The blossoms may scatter early. Please secure any outdoor arrangements.
Last spring's bloom data has been archived. Like pressed flowers in a book, these memories are preserved for future reference.
設計理念
The philosophy guiding every decision in this system. Each principle reflects the spirit of cherry blossoms.
Beauty does not need to last forever to be meaningful. Animations are brief. States transition gently. Nothing overstays its welcome.
Every interaction should feel welcoming. Rounded corners, soft shadows, and warm pinks create an embrace rather than a barrier.
Spacing and timing follow organic patterns. Like petals falling from a tree, elements move at their own natural pace.
Translucency and backdrop blur create layers like petals overlapping. Depth is suggested, never forced. Glass effects over soft gradients.
This system knows it represents one season. It does not try to be everything. It is specifically, unapologetically, the feeling of spring.
Reduced motion preferences are honored. Contrast ratios are maintained. The falling petals delight, but content works without them.