Design System Preview
TIGER Corporation — 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 DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Tiger Blue
#005ab3
lorem CTA / lorem ipsum dolor
Tiger Blue Dark
#004ea2
lorem ipsum dolor sit Active
Tiger Gold
#b78a28
lorem ipsum CTA / lorem
Text
Text Primary
#333333
lorem ipsum dolor
Text Secondary
#666666
lorem / lorem
Text White
#ffffff
lorem ipsum dolor sit
Backgrounds & Surfaces
Background
#ffffff
lorem ipsum
Surface
#f7f7f7
lorem / lorem ipsum dolor
Border / Divider
#e7e7e7
lorem ipsum / lorem ipsum
Dark Navy
#27455c
lorem ipsum dolor sit
Footer / Dark Section
#333333
lorem ipsum / lorem ipsum dolor
Deep Black
#1c1c1c
lorem ipsum dolor
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor — Section Title (h2)
30px / 500 / line-height: 2.0 / letter-spacing: normal / palt: loremlorem ipsum
lorem ipsum dolor — Hero (p 30px)
30px / 400 / line-height: 1.6 / color: #fffffflorem ipsum
lorem ipsum dolor — Item Title (h2)
28.8px / 500 / line-height: 1.2 / letter-spacing: normal / palt: loremlorem ipsum
lorem ipsum dolor — Support Title (h2)
24px / 500 / line-height: 1.4lorem ipsum
lorem / lorem ipsum — Body Large (18px). lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
18px / 400 / line-height: 1.6 / letter-spacing: normal / palt: lorem
lorem ipsum — Body (16px). lorem ipsum dolor sit amet consectetur adipiscing. lorem 1.6 lorem ipsum dolor sit. palt / kern lorem ipsum dolor.
16px / 400 / line-height: 1.6 / letter-spacing: normal / palt: lorem
lorem ipsum dolor — Footer Heading (h4)
15px / 700 / line-height: 2.67 / color: #fffffflorem ipsum
lorem / lorem — Small / Remarks (12px, weight 300)
12px / 300 / line-height: 1.6 / color: secondary
03 / Product — lorem ipsum dolor

lorem ipsum dolor

lorem ipsum dolor MMP-K050

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

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

lorem500mL
lorem ipsum69 lorem(6 lorem)
lorem ipsum8 lorem(6 lorem)
lorem ipsum6.6 × 6.6 × 21.6cm
lorem ipsumlorem 210g
04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary CTA
bg: #005ab3 / radius: 0
lorem ipsum
Primary Dark
bg: #004ea2 / radius: 0
lorem ipsum
Secondary
border: #333 / radius: 0
lorem ipsum dolor
Support CTA
bg: #b78a28 / radius: 0
Category Filter Pills (radius: 50px)
lorem lorem lorem ipsum lorem lorem ipsum dolor lorem ipsum
05 / Cards

lorem ipsum dolor sit

☕

lorem ipsum IH lorem ipsum dolor

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

¥98,780(lorem)
lorem ipsum →
☕

lorem ipsum dolor sit

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

¥13,200(lorem)
lorem ipsum →
☕

lorem ipsum dolor sit amet

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

¥4,400(lorem)
lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #e7e7e7, radius: 0px
lorem ipsum — border: #005ab3 (Tiger Blue)
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #cc0000 (Danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor(lorem ipsum)
Level 1: Hover
0 2px 4px rgba(0,0,0,0.1)
Level 2: Dropdown
0 4px 12px rgba(0,0,0,0.15)
Focus Ring
#005ab3 (Tiger Blue)
Dark Section Demo

lorem ipsum dolor sit

lorem ipsum dolor #27455c lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor, lorem ipsum Tiger Blue lorem ipsum dolor sit amet consectetur.

lorem ipsum lorem ipsum
08 / Layout

lorem ipsum & lorem ipsum dolor

Container Widths
Max Content 1200px
Product Grid 1200px (3-4 columns)
Article Body 800px
Spacing Scale
4
8
16
24
40
64
80
Generated from tiger-corporation.com DESIGN.md — awesome-design-md-jp / computed style lorem(2026-05-09)