¿Qué equipo necesitas?

Tipography

Monserrat

Desktop XL

Mobile

heading-xl <h1></h1>

Tamaño:

38px

55px

Peso:

bold

Interlineado:

46px

45px

heading-lg <h2></h2>

Tamaño:

30px

40px

Peso:

bold

Interlineado:

36px

48px

heading-md <h3></h3>

Tamaño:

32px

Peso:

bold

Interlineado:

43px

title-xl <h4></h4>

Tamaño:

22px

Peso:

bold

Interlineado:

24px

27px

title-lg <h5></h5>

Tamaño:

18px

Peso:

bold

Interlineado:

23px

Colors

#FAA726

CSS use:

color: var(--bright-yellow);

Tailwind use:

bg-bright-yellow

#1E1E1E

CSS use:

color: var(--erie-black);

Tailwind use:

bg-erie-black

#1E40AF

CSS use:

color: var(--imperial-blue);

Tailwind use:

bg-imperial-blue

#1E40AF

CSS use:

color: var(--oxford-blue);

Tailwind use:

bg-oxford-blue

#FF4D4F

CSS use:

color: var(--orange-red);

Tailwind use:

bg-orange-red

#F5F5F5

CSS use:

color: var(--cultured);

Tailwind use:

bg-cultured

#B7B8BB

CSS use:

color: var(--app-gray);

Tailwind use:

bg-app-gray

#E9E9E9

CSS use:

color: var(--bright-gray);

Tailwind use:

bg-bright-gray

#1E40AF

CSS use:

color: var(--jordy-blue);

Tailwind use:

bg-jordy-blue

#F9FAFF

CSS use:

color: var(--ghost-white);

Tailwind use:

bg-ghost-white

#60D669

CSS use:

color: var(--success-green);

Tailwind use:

bg-success-green

State Colors

#E5E1E3

State: "Buscando"

Css use:

color: var(--platinum);

Tailwind use:

bg-platinum

#FFE1B3

State: "Oferta enviada"

Css use:

color: var(--peach);

Tailwind use:

bg-peach

#D8CEFF

State: "Oferta aceptada"

Css use:

color: var(--pale-lavender);

Tailwind use:

bg-pale-lavender

Buttons (Shadcn)

Forms

Dinamic form

Charts

Pie Chart - Donut with Text

January - June 2024

Trending up by 5.2% this month

Showing total visitors for the last 6 months

Bar Chart - Interactive

Showing total visitors for the last 3 months

Bar Chart - Multiple

January - June 2024

Trending up by 5.2% this month

Showing total visitors for the last 6 months

Tipography

Desktop XL

Mobile

heading-xl <h1></h1>

heading-lg <h2></h2>

heading-md <h3></h3>

title-xl <h4></h4>

title-lg <h5></h5>

Colors

#FAA726

CSS use:

Tailwind use:

#1E1E1E

CSS use:

Tailwind use:

#1E40AF

CSS use:

Tailwind use:

#1E40AF

CSS use:

Tailwind use:

#FF4D4F

CSS use:

Tailwind use:

#F5F5F5

CSS use:

Tailwind use:

#B7B8BB

CSS use:

Tailwind use:

#E9E9E9

CSS use:

Tailwind use:

#1E40AF

CSS use:

Tailwind use:

#F9FAFF

CSS use:

Tailwind use:

#60D669

CSS use:

Tailwind use:

State Colors

#E5E1E3

State: "Buscando"

Css use:

Tailwind use:

#FFE1B3

State: "Oferta enviada"

Css use:

Tailwind use:

#D8CEFF

State: "Oferta aceptada"

Css use:

Tailwind use:

Buttons (Shadcn)

Forms

Form use Form FormField from Shadcn UI

Dinamic form

Detalle de los Accesorios

Charts

Pie Chart - Donut with Text

Bar Chart - Interactive

Bar Chart - Multiple