Design System Preview
cookpad.com

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor #f8f6f2 lorem -0.4px lorem ipsum dolor.

lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Cookpad Orange
#f28c06
lorem ipsum / CTA
Orange Dark
#d97a00
lorem / lorem
Text
Text Primary
#0f0f0f
lorem ipsum dolor(lorem)
Text Secondary
#757575
lorem ipsum dolor
Text Disabled
#bdbdbd
lorem ipsum
Semantic
Success
#43a047
lorem / lorem
Danger
#e53935
lorem / lorem
Warning
#f9a825
lorem / lorem
Surface & Background
Background
#f8f6f2
lorem ipsum(lorem ipsum dolor sit)
Surface
#ffffff
lorem / lorem ipsum
Border
#e0e0e0
lorem ipsum / lorem
02 / Typography

lorem ipsum dolor sit

lorem ipsum — Heading 1 (h1)
18px / 600 / line-height: 28px (x1.556) / letter-spacing: -0.4pxlorem ipsum dolor
lorem ipsum dolor — Heading 2 (h2)
16px / 600 / line-height: 24px (x1.5) / letter-spacing: -0.4pxlorem ipsum
lorem ipsum dolor — lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor 340 lorem ipsum dolor sit amet consectetur.
16px / 400 / line-height: 24px (x1.5) / letter-spacing: -0.4px / font-feature-settings: "liga"lorem
lorem ipsum dolor — Label (14px semibold)
14px / 600 / line-height: 20px (x1.429) / letter-spacing: -0.4pxlorem / lorem
lorem ipsum dolor — 2024 lorem 12 lorem 15 lorem ipsum / 3 lorem“lorem ipsum”lorem
12px / 400 / line-height: 16px (x1.333) / letter-spacing: -0.4pxlorem / lorem
03 / Recipe — lorem ipsum

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet

by lorem ipsum dolor / 2024 lorem 11 lorem 20 lorem

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

lorem(2 lorem)

  • lorem3 lorem
  • loremlorem 1
  • loremlorem 2
  • lorem ipsumlorem 1
  • lorem ipsumlorem

lorem

1. lorem ipsum

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

2. lorem

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor. lorem 1/3 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

3. lorem

lorem ipsum dolor sit 2–3 lorem ipsum dolor, lorem ipsum dolor. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.

lorem ipsum 1,284 lorem / lorem ipsum / lorem ipsum

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA
lorem ipsum
Outline
lorem ipsum
Danger
Bookmark
05 / Cards — lorem ipsum dolor

lorem ipsum dolor sit amet consectetur

Photo: lorem ipsum

lorem ipsum dolor

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

by lorem ipsum dolor / lorem ipsum 2,451 lorem
Photo: lorem ipsum dolor sit

lorem ipsum dolor

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

by lorem ipsum dolor / lorem ipsum 856 lorem
Photo: lorem ipsum dolor

lorem ipsum dolor sit

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

by lorem ipsum / lorem ipsum 4,102 lorem
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #e0e0e0, radius: 8px
lorem ipsum — border: #f28c06 (orange)
lorem — border: #e53935 (danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
Level 1
lorem ipsum dolor
Level 2
lorem ipsum dolor
Level 3
lorem ipsum / lorem ipsum
08 / Spacing

lorem ipsum dolor sit

4px
8px
16px
24px
32px
48px