Design System Preview
Soup Stock Tokyo

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

01 / Colors

lorem ipsum dolor

Text
Text Primary
#333333
lorem / lorem(lorem ipsum)
Text Secondary
#999999
lorem / lorem ipsum / lorem
Pagination Active
#666666
lorem ipsum dolor / lorem
Surface & Background
Background
#ffffff
lorem ipsum
Surface Light
#f8f8f8
lorem ipsum dolor
Footer BG
#333333
lorem ipsum dolor
Border & Divider
Border
#cccccc
lorem / lorem ipsum dolor
Divider
#e0e0e0
lorem ipsum
Card Border
#eeeeee
lorem ipsum dolor sit
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor sit
Display (h1) — Ryumin / 40px / 400 / line-height: 1.5 / letter-spacing: 0.15em / palt: onhero
lorem ipsum dolor sit
Heading 2 — Ryumin / 24px / 400 / line-height: 1.5 / letter-spacing: 0.15em / palt: onsection
lorem ipsum dolor
Heading 3 (Card) — Ryumin / 18px / 400 / line-height: 1.5 / letter-spacing: 0.05emcard
lorem ipsum dolor sit amet consectetur adipiscing.
Heading 3 (News) — Ryumin / 14px / 400 / line-height: 1.8 / letter-spacing: 0.05emnews list
lorem ipsum, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing.
Body (Ryumin) — 16px / 400 / line-height: 1.8 / letter-spacing: 0.15emarticle
lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit.
Lede — sans-serif / 16px / 400 / line-height: 2.5 / letter-spacing: 0.15emlede
SEASONAL MENU
Category — sans-serif / 12px / 400 / line-height: 1.5 / letter-spacing: 0.15emcategory label
MENU  STORY  SHOP  ONLINE SHOP
Nav Link — Ryumin / 10.48px / 400 / line-height: 1.5 / letter-spacing: 0.15emnavigation
2024.12.15
Date — Times New Roman / 14px / 400 / line-height: 1.5 / letter-spacing: normaldate
ReadMore →
ReadMore — Ryumin / 14px / 400 / letter-spacing: normallink
03 / Article

lorem ipsum dolor sit amet

STORY

lorem ipsum dolor sit amet

2024.12.15

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

lorem ipsum

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit, lorem ipsum dolor sit. lorem Soup Stock Tokyo lorem ipsum dolor sit amet.

lorem ipsum dolor

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

ReadMore →
04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Outline (Accessibility)
lorem ipsum dolor sit
Footer Outline
ReadMore
Text Link + Arrow

Note: Soup Stock Tokyo lorem ipsum CTA lorem ipsum dolor. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur(→)lorem.

05 / Cards

lorem ipsum dolor sit

soup photo
SEASONAL MENU

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur, Soup Stock Tokyo lorem. lorem ipsum dolor sit amet.

soup photo
GRAND MENU

lorem ipsum dolor sit

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

soup photo
SEASONAL MENU

lorem ipsum dolor sit amet consectetur

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

06 / Forms

lorem ipsum dolor

lorem ipsum — border: #cccccc, radius: 4px
lorem ipsum — border: #333333
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #c0392b
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. lorem ipsum
Surface Light
#f8f8f8 lorem ipsum dolor sit
Footer Dark
#333333 lorem ipsum
Divider
#e0e0e0 lorem ipsum

Soup Stock Tokyo lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit(lorem / lorem ipsum dolor / lorem)lorem ipsum dolor sit.

08 / Layout

lorem ipsum dolor & lorem ipsum dolor

Spacing Scale
4px
8px
16px
32px
64px
120px
Content Widths
Max Container ~1000px
Article Body ~620px