Style Guide

COLORI

Brand

  • brand 
    tw-bg-brand
  • white 
    tw-bg-white

Grayscale

  • black50 
    tw-bg-black50
  • black100 
    tw-bg-black100
  • black200 
    tw-bg-black200
  • black300 
    tw-bg-black300
  • black400 
    tw-bg-black400
  • black500 
    tw-bg-black500
  • black600 
    tw-bg-black600
  • black700 
    tw-bg-black700
  • black800 
    tw-bg-black800
  • black900 
    tw-bg-black900
  • black950 
    tw-bg-black950
  • black 
    tw-bg-black

Semantic

Success

  • success50 
    tw-bg-success50
  • success100 
    tw-bg-success100
  • success200 
    tw-bg-success200

Error

  • error50 
    tw-bg-error50
  • error100 
    tw-bg-error100
  • error200 
    tw-bg-error200

Info

  • info50 
    tw-bg-info50
  • info100 
    tw-bg-info100
  • info200 
    tw-bg-info200

FONT

Typography scale and font classes used throughout the theme.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
tw-text-heading-m

Size: 4.0rem | Line height: 133%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
tw-text-heading-s

Size: 3.2rem | Line height: 133%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
tw-text-subheading-l

Size: 2.4rem | Line height: 133%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
tw-text-subheading-m

Size: 2.0rem | Line height: 133%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
tw-text-subheading-s

Size: 1.8rem | Line height: 133%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
tw-text-body-l

Size: 1.8rem | Line height: 150%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
tw-text-body-m

Size: 1.6rem | Line height: 150%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
tw-text-body-s

Size: 1.4rem | Line height: 150%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
tw-text-body-xs

Size: 1.2rem | Line height: 150%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
tw-text-label-l

Size: 1.6rem | Line height: 133%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
tw-text-label-m

Size: 1.4rem | Line height: 133%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
tw-text-label-s

Size: 1.2rem | Line height: 133%

BUTTONS

Button variants and states available in the design system.

Default Button

LINK BUTTON 
tw-button

XS Button

XS LINK BUTTON 
tw-button-xs

XXS Button

XXS LINK BUTTON 
tw-button-xxs

Primary Button

LINK BUTTON DISABLED LINK BUTTON 
tw-button-primary

Primary Button XS

LINK BUTTON DISABLED LINK BUTTON 
tw-button-primary-xs

Primary Button XXS

LINK BUTTON DISABLED LINK BUTTON 
tw-button-primary-xxs

Outline Button

LINK BUTTON DISABLED LINK BUTTON 
tw-button-outline

Outline Button XS

LINK BUTTON DISABLED LINK BUTTON 
tw-button-outline-xs

Outline Button XXS

LINK BUTTON DISABLED LINK BUTTON 
tw-button-outline-xxs

Tertiary Button

LINK BUTTON DISABLED LINK BUTTON 
tw-button-tertiary

Tertiary Button XS

LINK BUTTON DISABLED LINK BUTTON 
tw-button-tertiary-xs

Tertiary Button XXS

LINK BUTTON DISABLED LINK BUTTON 
tw-button-tertiary-xxs

Text Link Button

LINK BUTTON DISABLED LINK BUTTON 
tw-button-text-link

Text Link Button XS

LINK BUTTON DISABLED LINK BUTTON 
tw-button-text-link-xs

Text Link Button XXS

LINK BUTTON DISABLED LINK BUTTON 
tw-button-text-link-xxs

Icon Button

tw-button-icon

Note: Must be use with any oder button class (in the example is used with tw-button-outline)

Icon Button XS

tw-button-icon-xs

Note: Must be use with any oder button XS class (in the example is used with tw-button-outline-xs)

Icon Button XXS

tw-button-text-link-xxs

Note: Must be use with any oder button XXS class (in the example is used with tw-button-outline-xxs)

INPUTS

Input variants and states available in the design system. 

                Input class: tw-input
                Label class: tw-label

SELECT

 
                tw-input-select

INPUT FILE

Nessun file selezionato

CHECKBOX

Checkbox variants and states available in the design system. 

tw-checkbox

PRODUCT CARD

Standard product card component with image, title, price, and interactive elements.

HORIZONTAL PRODUCT CARD

Compact horizontal product card layout for cart, wishlist, and similar contexts.

BREADCRUMBS

Breadcrumbs are a secondary navigation pattern that help users understand their current location within the site hierarchy and easily navigate back to previous levels.

SLIDER

Demo of the reusable slider component with external controls.

SWIPER SLIDER

Demo of the reusable bog-slider component with external navigation controls.
This slider is fully customizable and can be customized.

You can destroy the slider on specific breakpoints by adding the param slider_breakpoint.
K-Jacket in cotone tinto in capo blu K-Jacket in cotone tinto in capo blu
K-Jacket in cotone tinto in capo verde K-Jacket in cotone tinto in capo verde
Blazer in suede marrone Blazer in suede marrone
K-Jacket in lana e cashmere High Performance beige K-Jacket in lana e cashmere High Performance beige
K-Jacket in lana e cashmere High Performance verde K-Jacket in lana e cashmere High Performance verde
K-Jacket in hopsack High Performance grigio K-Jacket in hopsack High Performance grigio
K-Jacket in lino cashmere e seta marrone chiaro K-Jacket in lino cashmere e seta marrone chiaro
K-Jacket in lana leggera a nido d'ape marrone K-Jacket in lana leggera a nido d'ape marrone
K-Jacket in lana leggera a nido d'ape marrone chiaro K-Jacket in lana leggera a nido d'ape marrone chiaro
K-Jacket in lana leggera a nido d'ape blu K-Jacket in lana leggera a nido d'ape blu
K-Jacket in lana leggera nera a nido d'ape K-Jacket in lana leggera nera a nido d'ape
K-Jacket in cotone stretch tinto in capo marrone K-Jacket in cotone stretch tinto in capo marrone
K-Jacket in cotone stretch tinto in capo blu K-Jacket in cotone stretch tinto in capo blu
K-Jacket in cotone stretch tinto in capo beige K-Jacket in cotone stretch tinto in capo beige
K-Jacket in cotone stretch tinto in capo verde K-Jacket in cotone stretch tinto in capo verde
K-Jacket in lana lino e seta tartan marrone fantasia K-Jacket in lana lino e seta tartan marrone fantasia
K-Jacket doppiopetto in lana leggera a nido d'ape blu K-Jacket doppiopetto in lana leggera a nido d'ape blu
K-Jacket doppiopetto in lana leggera a nido d'ape blu K-Jacket doppiopetto in lana leggera a nido d'ape blu
K-Jacket in cotone stretch tinto in capo beige K-Jacket in cotone stretch tinto in capo beige
K-Jacket in cotone stretch tinto in capo marrone K-Jacket in cotone stretch tinto in capo marrone
K-Jacket in cotone stretch tinto in capo verde K-Jacket in cotone stretch tinto in capo verde
K-Jacket in cotone stretch tinto in capo blu K-Jacket in cotone stretch tinto in capo blu
K-Jacket doppiopetto in lino Principe di Galles grano fantasia K-Jacket doppiopetto in lino Principe di Galles grano fantasia
K-Jacket in lana e cashmere High Performance verde K-Jacket in lana e cashmere High Performance verde
K-Jacket in lana e cashmere High Performance beige K-Jacket in lana e cashmere High Performance beige
Giacca Dover in cotone e cashmere satin tinta in capo crema Giacca Dover in cotone e cashmere satin tinta in capo crema
K-Jacket in lana leggera a nido d'ape blu K-Jacket in lana leggera a nido d'ape blu
K-Jacket in lana High Performance blu K-Jacket in lana High Performance blu
K-Jacket in cotone cashmere e seta rosa K-Jacket in cotone cashmere e seta rosa
Giacca Sartoria doppiopetto in lino e mohair marrone Giacca Sartoria doppiopetto in lino e mohair marrone
Giacca Sartoria doppiopetto in lino e mohair verde Giacca Sartoria doppiopetto in lino e mohair verde
K-Jacket in lana con micro-struttura verde K-Jacket in lana con micro-struttura verde
K-Jacket in cotone stretch tinto in capo verde K-Jacket in cotone stretch tinto in capo verde
K-Jacket in cotone stretch tinto in capo marrone K-Jacket in cotone stretch tinto in capo marrone
K-Jacket in cotone stretch tinto in capo blu K-Jacket in cotone stretch tinto in capo blu
K-Jacket in cotone stretch tinto in capo beige K-Jacket in cotone stretch tinto in capo beige
K-Jacket in cotone stretch tinto in capo blu K-Jacket in cotone stretch tinto in capo blu
K-Jacket in cotone stretch tinto in capo beige K-Jacket in cotone stretch tinto in capo beige
K-Jacket in cotone stretch tinto in capo marrone K-Jacket in cotone stretch tinto in capo marrone
K-Jacket in cotone stretch tinto in capo verde K-Jacket in cotone stretch tinto in capo verde
K-Jacket doppiopetto in lana leggera a nido d'ape blu K-Jacket doppiopetto in lana leggera a nido d'ape blu
K-Jacket in lana leggera a nido d'ape marrone chiaro K-Jacket in lana leggera a nido d'ape marrone chiaro
K-Jacket in lana leggera nera a nido d'ape K-Jacket in lana leggera nera a nido d'ape
K-Jacket in lino a quadri grigio fantasia K-Jacket in lino a quadri grigio fantasia
Giacca Workwear in lino e lana a spina di pesce marrone chiaro Giacca Workwear in lino e lana a spina di pesce marrone chiaro
Giacca Dover doppiopetto in jersey grigio Giacca Dover doppiopetto in jersey grigio
Giacca Sartoria doppiopetto in lino e mohair verde Giacca Sartoria doppiopetto in lino e mohair verde
Giacca Sartoria doppiopetto in lino e mohair marrone Giacca Sartoria doppiopetto in lino e mohair marrone
K-Jacket in lana ultralight e seta verde K-Jacket in lana ultralight e seta verde
Giacca Milano dinner in lana seta e lino rosa Giacca Milano dinner in lana seta e lino rosa
Giacca Khaki in lino a spina di pesce verde chiaro Giacca Khaki in lino a spina di pesce verde chiaro
Giacca Khaki in popeline tinto in capo beige Giacca Khaki in popeline tinto in capo beige
Giacca Khaki in popeline tinto in capo verde Giacca Khaki in popeline tinto in capo verde
Giacca Khaki in popeline tinto in capo verde Giacca Khaki in popeline tinto in capo verde
Giacca Khaki in popeline tinto in capo beige Giacca Khaki in popeline tinto in capo beige
Giacca Dover doppiopetto in jersey beige Giacca Dover doppiopetto in jersey beige
Giacca Dover doppiopetto in jersey cannella Giacca Dover doppiopetto in jersey cannella
Giacca Dover doppiopetto in lino tinto in capo rosa pastello Giacca Dover doppiopetto in lino tinto in capo rosa pastello
K-Jacket in lana High Performance marrone K-Jacket in lana High Performance marrone
K-Jacket in cotone tinto in capo verde K-Jacket in cotone tinto in capo verde
K-Jacket in cotone tinto in capo blu K-Jacket in cotone tinto in capo blu
K-Jacket in lino Principe di Galles marrone K-Jacket in lino Principe di Galles marrone
K-Jacket in lino tinto in capo cammello K-Jacket in lino tinto in capo cammello
K-Jacket in lino tinto in capo blu K-Jacket in lino tinto in capo blu
K-Jacket in lino tinto in capo blu K-Jacket in lino tinto in capo blu
K-Jacket in lino tinto in capo cammello K-Jacket in lino tinto in capo cammello
K-Jacket in misto cotone tinto in capo verde K-Jacket in misto cotone tinto in capo verde
K-Jacket in jersey di lana leggera verde scuro K-Jacket in jersey di lana leggera verde scuro
K-Jacket in jersey di lana leggera blu K-Jacket in jersey di lana leggera blu
K-Jacket in cashmere e seta tinta in capo verde K-Jacket in cashmere e seta tinta in capo verde
K-Jacket in cashmere e seta tinta in capo blu K-Jacket in cashmere e seta tinta in capo blu
K-Jacket in cashmere e seta tinta in capo blu K-Jacket in cashmere e seta tinta in capo blu
K-Jacket in cashmere e seta tinta in capo verde K-Jacket in cashmere e seta tinta in capo verde
K-Jacket in lana seta e lino rosa K-Jacket in lana seta e lino rosa
K-Jacket in lana leggera a nido d'ape marrone chiaro K-Jacket in lana leggera a nido d'ape marrone chiaro
K-Jacket in cotone e tencel tinto in capo blu K-Jacket in cotone e tencel tinto in capo blu
K-Jacket in cotone e tencel tinto in capo marrone chiaro K-Jacket in cotone e tencel tinto in capo marrone chiaro
K-Jacket in cotone e tencel tinto in capo marrone chiaro K-Jacket in cotone e tencel tinto in capo marrone chiaro
K-Jacket in cotone e tencel tinto in capo blu K-Jacket in cotone e tencel tinto in capo blu
Giacca Dover in misto cotone soft khaki Giacca Dover in misto cotone soft khaki
Giacca Dover in misto cotone soft blu Giacca Dover in misto cotone soft blu
Giacca Dover in misto cotone soft verde Giacca Dover in misto cotone soft verde
Giacca Dover in misto cotone soft bianco caldo Giacca Dover in misto cotone soft bianco caldo
K-Jacket in cotone e lino satin verde K-Jacket in cotone e lino satin verde

ACCORDION

accordion component for collapsible content sections.

This is the accordion title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.