DESIGN SYSTEM PREVIEW

SEKISUI HOUSE
lorem ipsum — 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. TypeSquare lorem ipsum dolor Pr6N lorem ipsum dolor sit amet consectetur, lorem ipsum dolor / YuGothic lorem ipsum.

lorem ipsum dolor sit DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand / Accent
Dark Charcoal
#3b3b41
CTA / lorem ipsum / lorem
Group Dark
#3c3b40
lorem ipsum dolor sit amet
Text
Text Primary
#242424
lorem ipsum dolor(lorem ipsum dolor)
Text Secondary
#747480
lorem ipsum dolor(lorem ipsum dolor)
Surface & Border
Background
#ffffff
lorem ipsum
Surface Light
#f7f7f7
lorem ipsum dolor
Surface Card
#f4f4f4
lorem ipsum
Separator
#ebedef
lorem ipsum dolor
Border
#dddddd
lorem ipsum / lorem ipsum
Badge Light
#eeeeee
English lorem ipsum
Semantic(lorem)
Danger
#c62828
lorem / lorem
Success
#2e7d32
lorem / lorem
Warning
#e65100
lorem
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor, lorem — Hero Display
42px / 700 / line-height: 1.3 / letter-spacing: 0.05emlorem ipsum
lorem ipsum dolor — Section H2
28px / 700 / line-height: 1.3 / letter-spacing: 0.02emlorem ipsum
lorem ipsum — Sub H2
22px / 700 / line-height: 1.3lorem ipsum dolor
lorem ipsum — H3 Small
18px / 700 / line-height: 1.4lorem / lorem
HEADING ACCENT — lorem ipsum dolor
18px / 700 / letter-spacing: 2.1px (0.05em) / color: #747480lorem ipsum dolor
lorem ipsum dolor — lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123
15px / 400 / line-height: 1.6 / letter-spacing: normallorem
lorem ipsum dolor sit — Nav (15px/700)
15px / 700 / line-height: 2.0lorem ipsum dolor
lorem ipsum dolor — Footer (12px/700)
12px / 700lorem ipsum
NEW BADGE — Helvetica Neue
Helvetica Neue / 12px / 700 / lorem ipsum dolorlorem
03 / Article — lorem ipsum dolor sit

lorem ipsum dolor sit amet

CONCEPT

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor sit

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

ZEH(lorem / lorem / lorem ipsum / lorem)lorem ipsum dolor, lorem / lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor sit
Primary CTA(lorem ipsum)
lorem ipsum
Outline
NEW
NEW Badge
lorem
Search Suggest
lorem ipsum dolor sit
lorem ipsum
Tag Pill
lorem ipsum
Tag Pill
lorem ipsum
Tag Pill
05 / Cards

lorem ipsum dolor sit

lorem ipsum

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

lorem ipsum

lorem ipsum

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

lorem ipsum

lorem ipsum

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

lorem ipsum
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #dddddd, radius: 3px
lorem ipsum — border: #3b3b41 (Dark Charcoal)
lorem ipsum dolor sit amet consectetur
lorem — border: #c62828 (Danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor(lorem ipsum)
Level 1
0 2px 4px rgba(0,0,0,0.08)
Level 2
0 4px 12px rgba(0,0,0,0.10)
Level 3
0 8px 24px rgba(0,0,0,0.12)
Surface Difference
lorem ipsum dolor sit amet consectetur(#f7f7f7 vs #fff)
08 / Layout

lorem ipsum dolor & lorem ipsum

Spacing Scale

4px
8px
16px
32px
48px
80px

Content Widths

Container 1200px
Content Area 960px
Article 640px
DARK SURFACE DEMO

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor #3b3b41 lorem ipsum dolor sit. Tag Pill(border: 1px solid white, radius: 50px)lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum lorem ipsum lorem ipsum lorem ipsum