Colors
01 — lorem ipsum dolor, lorem ipsum
Base
Background(lorem)
#f8f8f5
Surface White
#ffffff
Ink(lorem)
#1b120f
Text Sub
#6e6765
Brand / Neutral
Brand Red(lorem)
#e7190a
Surface Tag
#efefec

lorem ipsum dolor #e7190a lorem 1 lorem. lorem / lorem / lorem ipsum dolor. lorem“lorem ipsum dolor”lorem“lorem ipsum”lorem ipsum dolor.

Typography
02 — lorem＝lorem / lorem＝lorem. font-weight lorem 400 lorem
Page Title
lorem 56px / 400 / 1.4 / normal
lorem ipsum dolor
Section Title
lorem 42px / 400 / 1.714 / normal
lorem ipsum
Sub Section
lorem 28px / 400 / 1.682 / normal
lorem ipsum dolor
Photo Title
lorem 24px / 400 /1.176 / 0.05em
lorem ipsum
Recipe Title
lorem 24px / 400 / 1.556 / 0.05em
lorem ipsum dolor(lorem ipsum)
Card Title
lorem 20px / 400 / 1.5 / normal
lorem ipsum dolor
Body
lorem 16px / 400 /2.0 / 0.05em
lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.
Nav
lorem 15px / 400 / 1.733 / normal
lorem ipsum dolor
Breadcrumb
lorem 13px / 400 / 1.769
lorem ＞ lorem ipsum dolor
Utility
lorem 12px / 400 / 1.667 /-0.07em
lorem ipsum dolor
Sub Nav
lorem 12px / 400 / 2.0 / #6e6765
lorem ipsum dolor
Tag
lorem 11px / 400 / -0.04em
lorem ipsum dolor
lorem — lorem ipsum dolor sit amet(lorem ipsum 1 lorem ipsum)
lorem ipsum, lorem ipsum.

writing-mode: vertical-rl / lorem 42px / line-height 1.556 / letter-spacing 0.13em. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.

Article
03 — lorem ipsum dolor, lorem ipsum dolor sit
lorem ＞ lorem ipsum dolor ＞ lorem ipsum dolor sit

lorem ipsum dolor sit

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

lorem ipsum dolor sit

lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur, 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

Buttons
04 — lorem ipsum dolor sit amet consectetur. lorem 1px lorem ipsum dolor
Link(lorem ipsum dolor sit / hover lorem ipsum dolor)
lorem ipsum dolor sit lorem ipsum dolor lorem ipsum dolor sit

background: linear-gradient(rgba(0,0,0,0) calc(100% - 1px), #e7190a 0);
background-size: 0 100% → hover lorem 100% 100%. text-decoration lorem ipsum.

Block Link(lorem / lorem ipsum)
lorem ipsum dolor lorem ipsum dolor
Circle Badge / Tag / PAGE TOP
lorem
lorem
lorem
lorem ipsum dolor PAGE
TOP

border-radius lorem 50%(lorem)lorem 3px(lorem)lorem. lorem ipsum dolor sit amet.

Cards
05 — lorem ipsum dolor sit. lorem ipsum dolor
product

lorem

lorem ipsum dolor sit amet consectetur adipiscing.

product

lorem / lorem

lorem ipsum dolor sit, lorem ipsum dolor sit.

product

lorem / lorem

lorem ipsum dolor sit amet consectetur, lorem ipsum.

lorem
product

lorem

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

Photo Card(lorem ipsum dolor)

lorem ipsum

lorem ipsum dolor sit amet consectetur

CSS lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur.

Forms
06 — lorem ipsum / lorem ipsum / lorem. lorem ipsum
lorem ipsum dolor sit
lorem ipsum dolor sit amet #e7190a lorem ipsum
lorem ipsum dolor sit amet consectetur
Elevation
07 — box-shadow lorem ipsum 1 lorem ipsum
Level 0 — none lorem ipsum dolor sit. lorem / lorem ipsum / lorem ipsum / lorem ipsum dolor.
lorem ipsum dolor lorem #f8f8f5 lorem ipsum #ffffff lorem ipsum dolor. lorem ipsum dolor sit.
Layout
08 — lorem ipsum 1200px. lorem ipsum 999px / 1000px
1440px — lorem ipsum dolor
1200px — lorem ipsum dolor
1000px — lorem / lorem ipsum
Spacing Scale
5
10
20
40
80
120

lorem ipsum dolor sit 767px(lorem ipsum)／ 999px / 1000px(lorem)／ 1360 / 1400 / 1750px(lorem). lorem ipsum 768px lorem ipsum 1000px lorem ipsum dolor sit amet consectetur. @media print lorem.