Design System Preview
MOS BURGER — lorem ipsum

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

lorem ipsum dolor lorem ipsum lorem ipsum
01 / Colors

lorem ipsum dolor

Brand — Green
MOS Green
#00a728
Primary CTA / lorem ipsum dolor
Green Dark
#006436
lorem ipsum
Green Deeper
#004924
lorem ipsum dolor
Green Darkest
#002614
lorem ipsum
Green Pale
#d9f2df
lorem ipsum dolor
Brand — Orange
MOS Orange
#ff7e47
Secondary CTA / lorem ipsum
Semantic
MOS Red
#e90000
lorem / lorem
Surface & Warm Background
Background
#ffffff
lorem ipsum
Surface Gray
#f5f5f5
lorem ipsum dolor
Surface Pink
#ffebeb
lorem ipsum / lorem ipsum
Surface Cream
#fffbf0
lorem ipsum / lorem ipsum
Neutral
Text Primary
#000000
lorem ipsum dolor
Text Secondary
#666666
lorem ipsum dolor
Border
#dddddd
lorem ipsum / lorem
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — Display (h2)
36px / 400 / line-height: 1.33 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum, lorem ipsum — Heading 2 (on green)
30px / 700 / line-height: 1.3 / color: #fff on #00a728lorem ipsum dolor
lorem ipsum dolor, lorem ipsum dolor — Heading 2 (green text)
22px / 700 / line-height: 1.6 / color: #006436lorem ipsum
lorem ipsum dolor — Heading 2 (standard)
22px / 700 / line-height: 1.54lorem ipsum dolor
lorem ipsum dolor — Heading 3 (on green)
20px / 700 / line-height: 1.65 / color: #ffflorem ipsum dolor sit
lorem ipsum dolor sit — Heading 3 (nav)
14px / 700 / line-height: 1.6lorem ipsum dolor
lorem ipsum dolor — lorem ipsum dolor, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet“lorem ipsum dolor sit”lorem, lorem ipsum dolor sit amet consectetur.
14px / 400 / line-height: 1.6 / letter-spacing: normallorem
lorem ipsum dolor — Product Name (14px bold)
14px / 700 / line-height: 1.6lorem
lorem ipsum dolor — Accent Text (green)
15px / 700 / line-height: 1.6 / color: #00a728lorem ipsum
lorem ipsum dolor — Warning Text
16px / 700 / line-height: 1.6 / color: #e90000lorem
lorem ipsum dolor — Menu Tab (13px)
13px / 400 / line-height: 1.38lorem ipsum
04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA (Green)
lorem ipsum dolor
Secondary CTA (Orange)
lorem ipsum
Outline
lorem ipsum
Danger
Category Pills
lorem ipsum
Active
lorem ipsum dolor
Default
lorem ipsum
Default
lorem ipsum
Default
Tags
lorem ipsum lorem ipsum dolor lorem ipsum
05 / Cards

lorem ipsum dolor sit

🍔

lorem ipsum dolor

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

¥430 (lorem)
🍕

lorem ipsum dolor

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

¥400 (lorem)
🍦

lorem ipsum dolor lorem

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

¥290 (lorem)
06 / Forms

lorem ipsum dolor

lorem ipsum -- border: #dddddd, radius: 8px
lorem ipsum -- border: #00a728 (MOS Green)
lorem ipsum dolor sit amet consectetur
lorem -- border: #e90000 (MOS Red)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
Elevation 1
lorem / lorem ipsum
Elevation 2
lorem / lorem ipsum dolor
Elevation 3
lorem ipsum / lorem ipsum dolor
Focus Ring
#00a728 (MOS Green)
08 / Layout

lorem ipsum dolor & lorem ipsum dolor

Content Widths
Container Max 1040px
Main Content 940px
Article / Menu Detail 620px
Spacing Scale
4px
8px
16px
24px
40px
64px