Origami

Folded Paper Design System

折り紙 — 紙を折る芸術

Origami transforms a flat sheet of paper into a finished sculpture through folding techniques. This design system draws from the precision of paper craft -- sharp creases, clean geometric shadows, and the quiet beauty of folded forms. Every element carries the memory of its fold.

Principle

Precision

Every fold must be exact. Clean edges and sharp creases define the craft.

Principle

Transformation

A single sheet becomes something entirely new through deliberate action.

Principle

Restraint

No cuts, no glue. Only folds. Constraint breeds creativity.

Section 01

Color Palette

色彩

Traditional origami paper comes in vivid, flat colors -- red, blue, green, gold -- set against the natural warmth of unbleached washi. These hues are bold yet balanced.

Paper Whites & Creams

Paper White #FAFAF8
Paper Cream #F5F2EC
Paper Ivory #F8F6F0
Washi #F0EBE1
Washi Dark #E5DFD3

Origami Paper Colors

Red #C23B3B
Blue #3B6FC2
Green #3B8C5A
Gold #C9A84C
Purple #6B4C91
Orange #D4793B

Light Variants

Red Light #E8A0A0
Blue Light #A0BDE8
Green Light #A0D4B3
Gold Light #E8D9A0
Purple Light #C4B0DC
Orange Light #E8C0A0

Crease & Shadow Tones

Crease Light #D8D3C8
Crease Mid #B8B0A0
Crease Dark #8A8070

Ink & Text

Ink Black #1C1B18
Ink Dark #2E2D28
Ink Mid #5A5750
Ink Light #8A8680
Ink Faint #B8B4AE
Section 02

Typography

書体

Clean, geometric letterforms that echo the precision of paper folding. Noto Serif JP for display, Inter for body -- clarity and structure in every line.

Display
Paper unfolds
Noto Serif JP / 48px / Weight 300 / Tracking 0.08em
Heading 1
One thousand cranes
Noto Serif JP / 36px / Weight 400 / Tracking 0.06em
Heading 2
Mountain and valley folds
Inter / 28px / Weight 300 / Tracking 0.04em
Heading 3
The geometry of a single sheet
Inter / 22px / Weight 400 / Tracking 0.03em
Heading 4
Crease patterns and base folds
Inter / 18px / Weight 500 / Tracking 0.02em
Body Text

The art of origami begins with a single square of paper. Through a series of precise folds -- mountain folds that rise and valley folds that descend -- the paper transforms from a flat plane into a three-dimensional sculpture. No scissors, no adhesive. Only the paper and the folder's intent.

Inter / 16px / Weight 400 / Line height 1.7
Caption

Akira Yoshizawa is widely regarded as the grandmaster of origami, credited with elevating it from a craft to a living art. His system of diagramming folds became the universal standard.

Inter / 13px / Weight 400 / Line height 1.5
Overline
Traditional Japanese Paper Craft
Inter / 11px / Weight 600 / Tracking 0.2em / Uppercase
Section 03

Spacing

間隔

An 8px base unit grid, like the precise measurements of a folding diagram. Each increment doubles, creating a harmonious scale from detail to breathing room.

xs 4px
sm 8px
md 16px
lg 32px
xl 48px
2xl 64px
3xl 96px

Shadow Scale

Shadows simulate the depth of folded paper layers, from a flat sheet resting on a surface to a form hovering above the page.

Flat

Paper resting on surface

Folded

Paper with one fold depth

Lifted

Paper being held up

Hovering

Paper floating above

Section 04

Buttons

Interactive elements styled like precisely cut paper shapes. The corner fold on hover reveals the paper beneath, a subtle nod to the craft.

Primary

Secondary

Ghost

Disabled

Color Variants

Section 05

Form Elements

入力

Input fields with clean edges and subtle crease borders. Focus states reveal a precise blue fold line, guiding attention like a folding diagram guides the hand.

Used for folding instructions delivery

Skill Level
Preferred Style
Section 06

Cards & Panels

Content containers that behave like sheets of paper -- they can be folded, stacked, creased, and lifted. Each variant demonstrates a different paper-folding technique.

Standard Card

A clean container with subtle borders, like a sheet of paper laid flat on the table. Hover to see it lift.

Folded Corner

The folded corner reveals the underside of the paper, a signature origami detail that adds depth and character.

Red Crease

A bold top border in origami red marks important content, like the first fold that defines the entire model.

Blue Crease

Blue origami paper is traditional for water-themed models. This card uses it as a structural accent.

Diagonal Split

A diagonal crease divides the card into two tonal regions, as if the paper has been folded and partially opened.

Paper Stack

Multiple layers of paper stacked beneath, suggesting depth and preparation -- like a stack of squares ready for folding.

Colored Accent Cards

Nature

Green paper for trees, frogs, and leaves. The color of growth.

Celebration

Gold paper for special occasions and decorative models.

Tradition

Red paper for cranes, the symbol of peace and longevity.

Section 07

Alerts & Notifications

通知

Status messages folded into the page with a triangular corner accent. Each alert type uses a distinct origami paper color to signal its intent.

Folding Tip

Always begin with a perfectly square sheet of paper. Use a bone folder to create crisp, precise creases that hold their shape.

Model Complete

Your origami crane has been successfully folded. All 24 steps were completed with precision. The wings are ready to spread.

Paper Selection

The paper you selected may be too thick for this model. Consider using thinner kami or tissue foil for complex folds.

Fold Error

The reverse fold on step 17 appears to be incorrect. Please unfold to step 14 and verify the crease pattern before continuing.