lorem ipsum dolor
lorem ipsum

Goodpatch lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit computed style lorem ipsum dolor, lorem, lorem ipsum dolor, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit amet lorem ipsum lorem ipsum →
01 / Colors

lorem ipsum dolor

Brand
Brand Blue
#096fc8
lorem CTA / lorem ipsum / lorem ipsum dolor
Orange Gradient
#f4963d → #f2d040
lorem ipsum dolor sit / lorem ipsum dolor sit
Text
Text Primary
#333333
lorem ipsum dolor / lorem
Text Muted
#6e6e6e
lorem ipsum dolor / lorem ipsum
Subtitle Muted
#8f95a1
lorem ipsum dolor / lorem ipsum
Badges
Badge Red
#ff7669
"lorem" lorem
Badge Blue
#76b7ed
"lorem ipsum dolor" lorem
Badge Gray
#96a0a6
"lorem ipsum" lorem
Surface & Background
Surface White
#ffffff
lorem / lorem ipsum
Background Light
#f6f6f6
lorem ipsum / lorem ipsum dolor
Footer Dark
#191b1f
lorem ipsum dolor
Semantic
Danger
#dc2626
lorem / lorem
Success
#16a34a
lorem / lorem
Warning
#d97706
lorem / lorem
02 / Typography

lorem ipsum dolor sit

Design — Hero H1
72px / 700 / line-height 1.1 / letter-spacing -0.035em / font-family: Galano Grotesque (→ Inter)lorem ipsum
lorem ipsum dolor sit amet consectetur adipiscing — H3 Work Title
40px / 600 / line-height 1.2 / letter-spacing -0.025em / font-feature-settings: "palt"lorem
lorem ipsum dolor sit amet — Subhead (Blue)
24px / 600 / line-height 1.4 / letter-spacing -0.02em / color #096fc8 / font-feature-settings: "halt"lorem ipsum
UX lorem ipsum / lorem ipsum dolor / lorem ipsum dolor — Card Title
20px / 600 / line-height 1.5 / letter-spacing -0.015em / font-feature-settings: "palt"lorem
lorem ipsum dolor — Goodpatch lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed. UI lorem ipsum, UX lorem ipsum, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit sed do. line-height: 2.0 lorem ipsum dolor sit amet consectetur adipiscing elit.
16px / 400 / line-height 2.0 / font-feature-settings: normallorem
lorem ipsum dolor — 14px lorem ipsum dolor. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet. lorem #6e6e6e.
14px / 400 / line-height 2.0 / color #6e6e6elorem ipsum dolor
Section Label — Mono
12px / 600 / letter-spacing 0.06em / font-family: JetBrains Monolorem
03 / Service — lorem ipsum dolor sit amet consectetur

lorem ipsum dolor

lorem ipsum dolor
lorem ipsum.

Goodpatch lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed. UI/UX lorem ipsum dolor sit amet, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor sit amet

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

lorem ipsum dolor sit amet

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

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

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

04 / Buttons — Pill lorem

lorem ipsum dolor sit

lorem ipsum dolor sit amet
Primary CTA — Pill / #096fc8 / 16px 24px
lorem ipsum
Secondary — White Pill + Blue Text
lorem ipsum →
Text Link — #096fc8
lorem ipsum dolor
Footer CTA — White / radius 8px / #096fc8 text
Badges
lorem lorem ipsum dolor lorem ipsum NEW
05 / Cards — lorem ipsum

lorem ipsum dolor

Case Study Image
lorem ipsum dolor

lorem ipsum dolor UX lorem ipsum

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. KPI lorem 150% lorem.

lorem ipsum →
Case Study Image
lorem

lorem ipsum dolor sit amet consectetur

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

lorem ipsum →
Case Study Image
lorem ipsum

lorem ipsum SaaS lorem ipsum dolor

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

lorem ipsum →
06 / Forms

lorem ipsum dolor

Default — border #e0e0e0 / radius 8px
Focus — border #096fc8 / shadow 3px
Error — border #dc2626 / shadow 3px
lorem ipsum dolor sit amet consectetur
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem — lorem
Elevation 1
0 2px 8px rgba(0,0,0,0.06)
Elevation 2
0 8px 24px rgba(0,0,0,0.08)
Elevation 3
0 16px 40px rgba(0,0,0,0.12)
08 / Layout — Spacing & Radius

lorem ipsum dolor & lorem ipsum

Spacing Scale(8px lorem)
XS
4px
S
8px
M
16px
L
24px
XL
48px
XXL
80px
Border Radius Scale
Small
4px
Medium
8px
Large
16px
Pill
9999px