graf
Contact
decorative mode no.3 design products Inc. — Osaka

Design System Preview
graf

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. computed style lorem(2026-06-23)lorem ipsum.

View tokens graf-d3.com
01 / Colors

Color Palette

Brand / Core
Text / Logo Primary
#1f1f1f
lorem ipsum dolor / lorem(lorem)
Pure Black
#000000
lorem ipsum / lorem
Background (Main)
#ffffff
lorem ipsum / lorem ipsum
Dark Feature Sections(lorem)
Charcoal 1
#1f1f1f
"Who we are" lorem
Charcoal 2
#2f2f2f
lorem ipsum dolor(lorem)
Charcoal 3
#3f3f3f
lorem ipsum dolor(lorem)
Light on Dark / Neutral
Light 1
#f1f1f1
lorem ipsum dolor / lorem
Light 2
#bcbcbc
lorem ipsum dolor
Mid Grey
#9c9c9c
lorem / lorem ipsum dolor
Cream Accent
#fffbeb
lorem ipsum dolor
Overlays / Semantic(lorem ipsum)
Light Chip / Overlay
rgba(255,255,255,0.05)
lorem ipsum dolor sit
Dark Overlay
rgba(0,0,0,0.04)
lorem ipsum dolor / hover
Danger(lorem)
#c0392b
lorem(lorem)
02 / Typography — lorem

Typography

lorem ipsum dolor sit — Furniture & Products
Inter / 32.4px / 700 / line-height: 1.1 / letter-spacing: normalSection H2
lorem ipsum — lorem ipsum dolor sit
Inter / 27px / 700 / line-height: 1.2 / letter-spacing: normalH3 large
lorem ipsum — FUK lorem ipsum / lorem ipsum
Inter / 18px / 500-600 / line-height: 1.4 / letter-spacing: normalH3 small / card title
EXHIBITION — lorem ipsum ULTRALIGHT 200
Inter / 12.6px / 200 (ultralight) / line-height: 1.43 / normalSmall Label
lorem ipsum dolor — graf lorem, lorem / lorem ipsum / lorem / lorem ipsum / lorem ipsum dolor sit amet consectetur / lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. ABCabc 0123
Inter + Noto Sans JP / 14.4px / 300 / line-height: 2.0 / normal — lorem ipsum dolorBody
lorem(lorem)— lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.
Inter + Noto Sans JP / 14.4px / 400 / line-height: 1.5 / normalBody compact
lorem — quiet, editorial, design-led(lorem weight 100)
Inter / 12.6px / 100 (thin) / line-height: 1.5 / color: #9c9c9cLead ultralight
Weight Ramp — 100 → 700(graf lorem ipsum dolor)
graf — lorem 100 Thin
graf — lorem 200 ExtraLight
graf — lorem 300 Light
graf — lorem 400 Regular
graf — lorem 500 Medium
graf — lorem 700 Bold
Inter + Noto Sans JP / weight 100-700 lorem ipsum dolor sit
03 / Editorial — lorem ipsum

Furniture & Products

PRODUCT — Furniture
FUK lorem ipsum
solid oak, hand-finished — Osaka, 2026

lorem ipsum dolor sit amet, lorem ipsum dolor sit. graf lorem ipsum, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit.

View details Inquiry
03 / Feature — lorem ipsum dolor sit

Who we are

Furniture / Products Food Design Architecture
Philosophy — decorative mode no.3

graf lorem 1998 lorem ipsum dolor sit, lorem ipsum dolor sit amet / lorem ipsum dolor. lorem ipsum, lorem ipsum dolor sit, lorem, lorem ipsum dolor, lorem ipsum, lorem ipsum dolor sit amet consectetur, lorem ipsum“lorem”lorem ipsum dolor sit.

lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum dolor sit amet consectetur.

Read more →
03 / Accent — lorem ipsum dolor

graf kitchen

lorem ipsum dolor sit#fffbeb lorem, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur graf lorem ipsum.

04 / Buttons — lorem ipsum

Buttons

View details
Primary — text link + hairline
black text / underline 1px
Inquiry
Outline
1px solid #1f1f1f / radius 2px
Contact
Solid(lorem ipsum)
#1f1f1f / white / radius 2px
Furniture / Products
Nav Chip(lorem / lorem ipsum)
rgba(255,255,255,0.05) / radius 1.8px / 3.6px 9px
Category
Chip(lorem)
rgba(0,0,0,0.04) / radius 1.8px
05 / Cards — lorem / lorem, lorem ipsum dolor

Work Cards

🪑
FURNITURE
FUK lorem ipsum
solid oak / 2026
🍶
PRODUCT
lorem ipsum dolor
porcelain / Arita
🍞
FOOD
graf kitchen
Nakanoshima, Osaka
🏛️
ARCHITECTURE
lorem ipsum dolor
interior / 2025
06 / Forms

Forms

lorem ipsum — lorem ipsum dolor / border-bottom 1px solid #1f1f1f
lorem ipsum — border-bottom #000000 + box-shadow 0 1px 0 #000000
lorem ipsum dolor sit amet consectetur
lorem — border-bottom 1px solid #c0392b
Textarea — background: rgba(0,0,0,0.04) / border: 1px solid rgba(0,0,0,0.12) / radius 2px
07 / Elevation — lorem ipsum dolor

Depth & Elevation

Level 0 — Flat
none
lorem ipsum dolor sit. lorem ipsum dolor.
Soft(lorem)
0 2px 8px rgba(0,0,0,0.08)
lorem ipsum dolor sit. lorem ipsum.
lorem ipsum dolor sit amet consectetur adipiscing
White #ffffff
Charcoal #1f1f1f
Cream #fffbeb
08 / Layout — lorem ipsum

Spacing & Layout

Spacing Scale (8px lorem ipsum)
XS
4px
S
8px
M
16px
L
32px
XL
64px
XXL
128px
Border Radius Scale(lorem)
None
0px — lorem / lorem
Chip
1.8px — lorem
XS
2px — lorem / lorem
Container Widths
Max Container 1200px
lorem ipsum dolor sit
Desktop Padding 32〜48px
lorem ipsum dolor(lorem ipsum dolor)
Mobile Padding 20px
lorem ipsum dolor(lorem ipsum)