Design System Preview
ICHIRAN lorem — lorem ipsum

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

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Brand Red
#bf1a1a
lorem ipsum — CTA
Brand Green
#628141
lorem ipsum CTA
Brand Brown
#503211
lorem ipsum / lorem ipsum dolor
Accent
Gold
#e1d7a5
lorem ipsum dolor / lorem
Gold Text
#ccaa22
lorem ipsum dolor sit
Rose
#eecccc
lorem ipsum dolor CTA
Text
Text Primary
#503211
lorem ipsum dolor(lorem)
Text Secondary
#666666
lorem ipsum dolor
Text Muted
#999999
lorem ipsum
Copyright
#999977
lorem ipsum dolor(Oxygen)
Surface & Background
Content Area
rgba(255,255,255,0.96)
lorem ipsum dolor
Surface Dark
#222222
lorem ipsum dolor sit
Overlay Dark
rgba(0,0,0,0.8)
lorem ipsum / lorem ipsum
Overlay Hero
rgba(0,0,0,0.4)
lorem ipsum dolor sit amet
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor sit — Display (32px)
32px / 700 / line-height: 1.4 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor — Heading 1 (24px)
24px / 700 / line-height: 1.4 / color: #666lorem ipsum dolor
lorem ipsum dolor — Heading 2 (20px)
20px / 700 / line-height: 1.4 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor — CTA Text (16px / 600)
16px / 600 / line-height: 1.6 / CTA lorem ipsumlorem
lorem ipsum dolor — lorem ipsum dolor Pro lorem ipsum dolor sit amet consectetur. letter-spacing lorem palt lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing. line-height: 1.6 lorem ipsum dolor sit amet consectetur.
16px / 400 / line-height: 1.6 / letter-spacing: normal / palt: loremlorem
lorem ipsum dolor — Small (12.8px / line-height: 2.0)
12.8px / 400 / line-height: 2.0 / lorem / loremlorem ipsum
Copyright © ICHIRAN Inc. All Rights Reserved.
Oxygen / 12px / 400 / line-height: 1.5 / lorem ipsum dolorlorem ipsum
03 / Article — lorem ipsum

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor“lorem”lorem

lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. 1960 lorem ipsum dolor,lorem ipsum dolor sitlorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor sit amet

lorem ipsum dolor 18 lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum dolor, 30 lorem ipsum dolor sit amet consectetur adipiscing. lorem / lorem / lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. ABCabc 123

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary (Red)
lorem ipsum
Secondary (Green)
lorem ipsum
Outline (Brown)
lorem ipsum dolor
lorem ipsum
Sidebar CTA
lorem ipsum
Red on Dark
lorem ipsum dolor
Outline White

lorem ipsum dolor: lorem ipsum dolor CTA lorem pill lorem(border-radius: 96px)lorem. lorem ipsum Brand Brown #503211 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor Sidebar CTA lorem, lorem ipsum dolor sit.

05 / Cards

lorem ipsum dolor sit

🍜
lorem ipsum

lorem ipsum dolor sit

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

lorem ipsum →
🏮

lorem ipsum dolor

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

lorem ipsum →
📦

lorem ipsum dolor

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

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum — border: rgba(80,50,17,0.3), radius: 4px
lorem ipsum — border: rgba(80,50,17,0.3), radius: 4px
lorem ipsum — border: #bf1a1a (Brand Red)
lorem ipsum dolor sit amet
lorem — border: #bf1a1a + lorem ipsum dolor
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
Level 1
0 2px 4px rgba(0,0,0,0.1) — lorem
Level 2
0 4px 12px rgba(0,0,0,0.15) — lorem ipsum
Level 3
0 8px 24px rgba(0,0,0,0.2) — lorem ipsum dolor
Overlay Hero
rgba(0,0,0,0.4) — lorem ipsum dolor
08 / Layout — lorem ipsum dolor & lorem ipsum dolor

lorem ipsum

Spacing Scale
4px
8px
16px
24px
32px
48px
64px
Content Widths
Main Container 960px
Article Content 620px
Sidebar 280px