No.1!

Design System Preview
SmartNews — lorem ipsum

lorem ipsum / lorem ipsum 1 lorem!lorem ipsum dolor sit amet consectetur

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 sit!
01 / Colors

lorem ipsum dolor

Brand — 4 lorem ipsum dolor sit
Brand Blue
#0fbbe7
CTA / lorem ipsum
Brand Red
#ff645b
lorem ipsum / lorem ipsum
Brand Orange
#ffc73d
lorem / lorem
Brand Green
#54e470
lorem / lorem ipsum
Text
Text Primary
#333333
lorem ipsum dolor(Consumer)
Text Corporate
#0e0e0e
lorem ipsum dolor(Corporate)
Text Secondary
#6e6e6e
lorem ipsum dolor
Text White
#ffffff
lorem / CTA lorem ipsum dolor
Surface & Border
Background
#ffffff
lorem ipsum
Surface Light
#f6f6f6
lorem ipsum dolor(Consumer)
Surface Warm
#f4ecea
lorem ipsum dolor(Corporate)
Surface Gray
#f3f3f3
lorem ipsum dolor(Corporate)
Border Default
#e5e7eb
Tailwind default border
Border Orange
#ffc73c
Corp CTA lorem ipsum
Accent
NEW Badge
#ffd700
NEW lorem
Scroll Button
rgba(196,196,196,0.7)
lorem ipsum dolor sit amet
02 / Typography -- lorem

lorem ipsum dolor sit

lorem No.1!
Barlow 64px / 900 / line-height: 1.13 / letter-spacing: -0.01emConsumer Hero
lorem, lorem ipsum dolor.
26px / 700 / line-height: 2.0 / letter-spacing: -0.025emConsumer Hero H1
lorem ipsum dolor sit
lorem ipsum dolor sit
neulis-sans / toppan-bunkyu-midashi-go-std (alt: Zen Kaku Gothic New) 57px / 700 / line-height: 1.3Corp Display H2
lorem ipsum / lorem ipsum 1 lorem!lorem ipsum dolor sit amet consectetur
21px / 500 / line-height: 1.6 / color: Brand BlueConsumer H2 Brand
lorem ipsum dolor
21px / 700 / line-height: 1.5Consumer H2 Bold
3,000 lorem ipsum dolor sit amet consectetur adipiscing
Noto Sans JP 29px / 700 / line-height: 1.3Corp H3
SmartNews(lorem ipsum dolor)lorem, lorem ipsum“lorem”lorem ipsum dolor, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur. line-height: 1.8 lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing.
17px / 400 / line-height: 1.8 / letter-spacing: normalConsumer Body
lorem ipsum dolor sit, lorem ipsum dolor SmartNews lorem / lorem, lorem ipsum dolor sit amet.
Noto Sans JP 18px / 400 / line-height: 1.6Corp Body
※1 lorem: ICT lorem“2021 lorem ipsum dolor sit amet consectetur”lorem
10px / 400 / line-height: 1.8Consumer Caption
lorem ipsum dolor SmartNews
Noto Sans JP 14px / 400 / line-height: 1.6 / color: #6e6e6eCorp Small
03 / Article -- lorem ipsum dolor

lorem ipsum dolor sit amet

AI lorem ipsum dolor sit amet -- 3,000 lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. SmartNews lorem, lorem ipsum dolor sit amet consectetur 3,000 lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor sit

lorem ipsum, lorem, lorem, lorem ipsum 4 lorem ipsum dolor, lorem ipsum dolor(Red, Orange, Green, Blue)lorem ipsum dolor sit amet. lorem 4 lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123,456

lorem ipsum line-height: 1.8 lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum system-ui lorem ipsum, lorem OS lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.

04 / Buttons

lorem ipsum dolor sit

Consumer Site
lorem ipsum dolor sit!
Primary CTA (Blue Pill)
Corporate Site
lorem ipsum dolor sit amet consectetur
Corp Primary (Black + Orange Border)
lorem ipsum
Corp Secondary (White + Orange Border)
Category Badges
lorem ipsum
lorem
lorem
lorem ipsum
h3 Feature Badge: bg-brand-[color] / white / radius 10px / padding 1em / weight 700
Misc
NEW
NEW Badge
▲
Scroll-to-Top
05 / Cards

lorem ipsum dolor sit

Consumer -- "lorem ipsum dolor" lorem

lorem ipsum dolor 3,000 lorem!

lorem ipsum / lorem No.1 lorem ipsum dolor. lorem / lorem ipsum dolor / lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum →

lorem ipsum dolor sit amet consectetur

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

lorem ipsum →

lorem ipsum dolor sit

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

lorem ipsum →
Consumer -- lorem ipsum dolor

lorem ipsum dolor

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

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt.

06 / Forms

lorem ipsum dolor

lorem ipsum -- border: #e5e7eb, radius: 8px
lorem ipsum -- border: #0fbbe7 (Brand Blue)
lorem -- border: #dc2626 (danger)
07 / Elevation -- lorem

Depth & Elevation

Level 0: Flat
lorem(lorem ipsum)
shadow-reasons
3px 3px 4px rgba(0,0,0,0.15) -- "lorem ipsum dolor" lorem
shadow-header
0 0 6px rgba(0,0,0,0.12) -- Corp lorem ipsum
shadow-modal
0 8px 24px rgba(0,0,0,0.10) -- lorem ipsum(lorem)
Focus Ring
#0fbbe7 (Brand Blue)
08 / Layout

lorem ipsum dolor & lorem ipsum dolor

Spacing Scale
4px XS
8px S
16px M
24px L
48px XL
72px XXL
Border Radius Scale
4px
10px
16px
20px
40px pill
50%
Content Widths
Max Container ~1440px
Article Content ~940px
Article Preview 620px