section-xs

section-sm

section-md

section-lg

section-xl

section-xxl

Color System

PRIMARY (Structure / Brand Core)

color-primary-900 — #0B1F3B

color-primary-700 — #163A6B

color-primary-600 — #3460E3

color-primary-500 — #4C7DFF

color-primary-400 — #7FA6FF

NEUTRAL (Premium UI Base)

color-neutral-0 — #FFFFFF

color-neutral-50 — #F8FAFC

color-neutral-100 — #F1F5F9

color-neutral-200 — #E2E8F0

color-neutral-300 — #CBD5E1

color-neutral-400 — #94A3B8

color-neutral-700 — #334155

color-neutral-900 — #0F172A

ACCENT (Conversion / CTA)

color-accent-500 — #F97316

color-neutral-100 — #F1F5F9

color-neutral-200 — #E2E8F0

SUCCESS (Trust)

color-success-500 — #22C55E

color-success-100 — #DCFCE7

SYSTEM

color-error-500 — #EF4444

color-warning-500 — #F59E0B

color-info-500 — #3B82F6

TYPOGRAPHY SYSTEM

Heading: Inter Tight

Body: Inter

Font Display

Heading 1

Heading 2

Heading 3

Font Body Large

Gaps

Gap Small

Lorem ipsum dolor sit amet consectetur adipiscing elit, venenatis ad justo himenaeos aliquet sociosqu, semper malesuada augue urna dictumst sagittis. Luctus cum facilisi nostra sed enim dapibus sagittis, torquent viverra metus eget augue tortor porttitor vestibulum, conubia lectus nascetur

Gap Medium

Lorem ipsum dolor sit amet consectetur adipiscing elit, venenatis ad justo himenaeos aliquet sociosqu, semper malesuada augue urna dictumst sagittis. Luctus cum facilisi nostra sed enim dapibus sagittis, torquent viverra metus eget augue tortor porttitor vestibulum, conubia lectus nascetur

Gap Large

Lorem ipsum dolor sit amet consectetur adipiscing elit, venenatis ad justo himenaeos aliquet sociosqu, semper malesuada augue urna dictumst sagittis. Luctus cum facilisi nostra sed enim dapibus sagittis, torquent viverra metus eget augue tortor porttitor vestibulum, conubia lectus nascetur

Gap X-Large

Lorem ipsum dolor sit amet consectetur adipiscing elit, venenatis ad justo himenaeos aliquet sociosqu, semper malesuada augue urna dictumst sagittis. Luctus cum facilisi nostra sed enim dapibus sagittis, torquent viverra metus eget augue tortor porttitor vestibulum, conubia lectus nascetur

Box Padding

Padding Small

Lorem ipsum dolor sit amet consectetur adipiscing elit, venenatis ad justo himenaeos aliquet sociosqu, semper malesuada augue urna dictumst sagittis. Luctus cum facilisi nostra sed enim dapibus sagittis, torquent viverra metus eget augue tortor porttitor vestibulum, conubia lectus nascetur

Medium

Lorem ipsum dolor sit amet consectetur adipiscing elit, venenatis ad justo himenaeos aliquet sociosqu, semper malesuada augue urna dictumst sagittis. Luctus cum facilisi nostra sed enim dapibus sagittis, torquent viverra metus eget augue tortor porttitor vestibulum, conubia lectus nascetur

Padding Large

Lorem ipsum dolor sit amet consectetur adipiscing elit, venenatis ad justo himenaeos aliquet sociosqu, semper malesuada augue urna dictumst sagittis. Luctus cum facilisi nostra sed enim dapibus sagittis, torquent viverra metus eget augue tortor porttitor vestibulum, conubia lectus nascetur

Gap X-Large

Lorem ipsum dolor sit amet consectetur adipiscing elit, venenatis ad justo himenaeos aliquet sociosqu, semper malesuada augue urna dictumst sagittis. Luctus cum facilisi nostra sed enim dapibus sagittis, torquent viverra metus eget augue tortor porttitor vestibulum, conubia lectus nascetur

Button System

CTA V3

Icon System

icon-sm

icon-md

icon-lg

icon-xl

Border Radius

radius-sm

Lorem ipsum dolor sit amet consectetur adipiscing elit, venenatis ad justo himenaeos aliquet sociosqu, semper malesuada augue urna dictumst sagittis. Luctus cum facilisi nostra sed enim dapibus sagittis, torquent viverra metus eget augue tortor porttitor vestibulum, conubia lectus nascetur

radius-md

Lorem ipsum dolor sit amet consectetur adipiscing elit, venenatis ad justo himenaeos aliquet sociosqu, semper malesuada augue urna dictumst sagittis. Luctus cum facilisi nostra sed enim dapibus sagittis, torquent viverra metus eget augue tortor porttitor vestibulum, conubia lectus nascetur

radius-lg

Lorem ipsum dolor sit amet consectetur adipiscing elit, venenatis ad justo himenaeos aliquet sociosqu, semper malesuada augue urna dictumst sagittis. Luctus cum facilisi nostra sed enim dapibus sagittis, torquent viverra metus eget augue tortor porttitor vestibulum, conubia lectus nascetur

radius-xl

Lorem ipsum dolor sit amet consectetur adipiscing elit, venenatis ad justo himenaeos aliquet sociosqu, semper malesuada augue urna dictumst sagittis. Luctus cum facilisi nostra sed enim dapibus sagittis, torquent viverra metus eget augue tortor porttitor vestibulum, conubia lectus nascetur

radius-xxl

Lorem ipsum dolor sit amet consectetur adipiscing elit, venenatis ad justo himenaeos aliquet sociosqu, semper malesuada augue urna dictumst sagittis. Luctus cum facilisi nostra sed enim dapibus sagittis, torquent viverra metus eget augue tortor porttitor vestibulum, conubia lectus nascetur