Design System Preview
LUUP — 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 dolor sit DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Brand Teal
#00b6ac
CTA lorem ipsum / lorem ipsum dolor sit
Brand Teal Dark
#04a6a0
lorem CTA lorem
Brand Teal Light
#00d1b2
Bulma lorem ipsum / lorem ipsum
Text
Text Primary
#313636
lorem / lorem(lorem ipsum dolor sit)
Overlay / Muted
#78848b
lorem ipsum dolor / lorem ipsum dolor
Text White
#ffffff
lorem ipsum dolor sit amet
Surface
White
#ffffff
lorem ipsum / lorem ipsum
Surface Light
#f7f7f7
lorem ipsum dolor(lorem ipsum dolor)
Surface Dark
#363636
lorem ipsum / "lorem" lorem
Badge BG
#dadee6
lorem ipsum dolor sit
Border
Divider
#dddddd
lorem ipsum / lorem ipsum / lorem CTA lorem
Semantic(lorem)
Danger
#e53e3e
lorem / lorem ipsum
Success
#38a169
lorem ipsum / lorem
Warning
#d69e2e
lorem ipsum dolor sit
02 / Typography — lorem

lorem ipsum dolor sit

Why LUUP
96px / 400 / line-height: 1.0 / letter-spacing: 0.05emDisplay
lorem ipsum dolor sit
56px / 400 / line-height: 1.0 / letter-spacing: 0.05emTitle Large
lorem ipsum dolor
48px / 400 / line-height: 1.5 / letter-spacing: 0.05emTitle Medium
lorem ipsum dolor sit amet
32px / 400 / line-height: 1.5 / letter-spacing: 0.05emHeading
lorem ipsum dolor sit — Find a Port
24px / 400 / line-height: 1.25 / letter-spacing: 0.05emSubtitle
LUUP lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
20px / 400 / line-height: 1.5 / letter-spacing: 0.05emBody Large
lorem ipsum dolor sit amet consectetur, QR lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing.
16px / 400 / line-height: 1.5 / letter-spacing: 0.05emBody
lorem ipsum dolor — Nav (weight 500)
14px / 500 / line-height: 1.5 / letter-spacing: 0.05emNav Button — lorem weight 500
lorem ipsum dolor / lorem ipsum dolor — Caption (12px)
12px / 400 / line-height: 1.5 / letter-spacing: 0.05emCaption
03 / Article — lorem ipsum

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor sit amet

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

2023 lorem 7 lorem ipsum dolor sit amet, lorem ipsum 16 lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum20km/hlorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. ABCabc 123

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing. “lorem ipsum dolor sit”lorem LUUP lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Nav CTA (pill)
lorem ipsum dolor sit
App Download CTA
lorem ipsum →
Ghost
lorem
Dark Tag
lorem ipsum
Notice Badge
lorem ipsum dolor
Notice Badge
05 / Cards

lorem ipsum dolor sit

lorem ipsum

lorem ipsum dolor

lorem ipsum 20km/h lorem ipsum dolor. 16 lorem ipsum dolor sit amet consectetur. lorem ipsum QR lorem ipsum dolor sit.

lorem ipsum →
lorem ipsum

lorem ipsum dolor sit

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

lorem ipsum →
lorem

lorem ipsum

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

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #dddddd, radius: 4px
lorem ipsum — border: #00b6ac (Brand Teal)
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #e53e3e (Danger)
07 / Elevation — lorem ipsum dolor sit

Depth & Elevation

Level 0: Flat
lorem — lorem ipsum. lorem ipsum dolor sit amet
--elevation-1
0 2px 8px rgba(0,0,0,0.08) — lorem ipsum
--elevation-2
0 4px 16px rgba(0,0,0,0.10) — lorem ipsum dolor
--elevation-3
0 8px 24px rgba(0,0,0,0.12) — lorem ipsum
Focus Ring
#00b6ac (Brand Teal)
08 / Layout — Bulma 12-column grid

lorem ipsum dolor sit amet consectetur

Container (Bulma default) 1152px
Content Area 940px
Article / Text 620px
Spacing Scale (8px grid)
4px
8px
16px
24px
48px
80px
Border Radius
4px
8px
20px (pill)