Design System Preview
Studio Ghibli

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 DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Ghibli Blue
#109ceb
lorem / lorem ipsum dolor / lorem
Ghibli Brown
#221815
lorem ipsum / CTA lorem
Orange
#f79b30
New lorem / lorem
Button Border
#008cc1
CTA lorem ipsum dolor
Text
Text Primary
#373a3c
lorem ipsum dolor
Text Dark
#333333
lorem / lorem ipsum dolor
Text Light
#fafafa
lorem ipsum dolor sit
Text Muted
#888888
lorem ipsum / lorem ipsum dolor
Surface & Border
Background
#ffffff
lorem ipsum
Footer Background
#f4f4f4
lorem ipsum dolor
Border Default
#cccccc
lorem / lorem ipsum dolor
Label Gray
#777777
lorem ipsum dolor
Labels
New lorem lorem ipsum
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — Heading 1 (h1)
36px / 500 / line-height: 1.3 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor — Heading 2 (h2)
30px / 500 / line-height: 1.3 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor — Heading 4 (h4)
18px / 500 / line-height: 1.3 / color: #888888lorem ipsum
lorem ipsum dolor — Heading 4 (h4)
16px / 500 / line-height: 1.3 / color: #333333lorem ipsum
lorem ipsum dolor — Nav Link
14px / 500 / line-height: 1.3 / color: #fafafa / on dark backgroundlorem ipsum
lorem ipsum dolor — Bootstrap lorem ipsum dolor sit amet consectetur. line-height: 1.3 lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing. Body (p)
14px / 400 / line-height: 1.3 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor sit amet consectetur — Small (11.9px)
11.9px / 400 / line-height: 1.3lorem ipsum dolor
03 / Article

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor

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

lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123 lorem ipsum / lorem ipsum dolor sit amet consectetur adipiscing.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
btn-ghibli (CTA)
lorem ipsum
btn-default
lorem ipsum dolor
btn-ghibli (large)
Labels / Badges
New
#f79b30
lorem
#109ceb
lorem ipsum
#777777
New!
lorem ipsum dolor
05 / Cards

lorem ipsum dolor sit

2025.01.15 New

lorem ipsum dolor sit lorem ipsum dolor sit

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

lorem ipsum
2025.01.10 lorem

lorem ipsum dolor lorem ipsum

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

lorem ipsum
2024.12.20 lorem ipsum

lorem ipsum dolor

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

lorem ipsum
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #cccccc, radius: 4px
lorem ipsum — border: #109ceb (Ghibli Blue)
lorem — border: #d9534f (Bootstrap danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor. lorem ipsum dolor sit amet
Bootstrap Panel
border: 1px solid lorem ipsum dolor
Accent Border
lorem ipsum dolor sit
Dark Surface
lorem ipsum / CTA lorem
08 / Layout — Bootstrap 3.x

lorem ipsum dolor

Container (Bootstrap LG) 1170px
Container (Bootstrap MD) 970px
Container (Bootstrap SM) 750px
Spacing Scale (Bootstrap)
5px
10px
15px
20px
30px
50px