Styleguide

PALETTE COLORI

black
brown-gray
greyish-brown
white
very-light-pink
light-pink
green
red

TIPOGRAFIA

h1

H1

tw-eyelet
Occhiello
tw-head-group > (tw-eyelet h1)
Esempio di

Titolo completo

tw-font-light

LIGHT

tw-font-regular

REGULAR

tw-font-medium

MEDIUM

tw-font-bold

BOLD

tw-text-4xl 72px
tw-text-m-4xl 52px
tw-text-m-3xl 48px
tw-text-3xl 40px
tw-text-m-2xl 36px
tw-text-2xl 30px
tw-text-xl 24px
tw-text-l 20px
tw-text-m 16px
tw-text-s 14px
tw-text-xs 12px
tw-text-xxs 10px
tw-text-4xl 72px
tw-text-m-4xl 52px
tw-text-m-3xl 48px
tw-text-3xl 40px
tw-text-m-2xl 36px
tw-text-2xl 30px
tw-text-xl 24px
tw-text-l 20px
tw-text-m 16px
tw-text-s 14px
tw-text-xs 12px
tw-text-xxs 10px

BOTTONI

CLASSI

DISABLED

BASE

tw-btn CLICK ME! CLICK ME! tw-btn-0 CLICK ME! CLICK ME! tw-btn-1 CLICK ME! CLICK ME! tw-btn-2 CLICK ME! CLICK ME! tw-btn-3 CLICK ME! CLICK ME! tw-btn-4 CLICK ME! CLICK ME! tw-btn-5 CLICK ME! CLICK ME! tw-btn-6 CLICK ME! CLICK ME! tw-btn-7 CLICK ME! CLICK ME! tw-btn-filters

CLASSI

DISABLED

BASE

tw-cta-1 Add to bag Add to bag tw-cta-2 GO TO THE SHOPPING BAG GO TO THE SHOPPING BAG tw-cta-3 clear5 clear5 tw-large-pill-image T-SHIRT T-SHIRT tw-large-pill T-SHIRT T-SHIRT tw-small-pill T-SHIRT T-SHIRT tw-small-pill-with-icon T-SHIRT T-SHIRT tw-medium-pill
XS
XS

CLASSI

ENABLED

HOVER

tw-40-pill tw-40-pill-zoom-in tw-40-pill-horizontal-arrow tw-close-btn

CLASSI

INPUT

tw-input tw-input-select tw-select-mobile-menu tw-checkbox tw-popup-modal