Typography
HTML All Heading
Heading 01
Heading 01
Heading 01 - Outfit | 64px or 4rem font-size / Bold
Heading 02
Heading 02
Heading 02 - Outfit | 40px or 2.5rem font-size / Semi Bold
Heading 03
Heading 03
Heading 03 - Outfit | 38px or 2.375rem font-size / Semi Bold
Heading 04
Heading 04
Heading 04 - Outfit | 26px or 1.625rem font-size / Semi Bold
Heading 05
Heading 05
Heading 05 - Outfit | 24px or 1.5rem font-size / Semi Bold
Heading 06
Heading 06
Heading 06 - Outfit | 22px or 1.375rem font-size / Semi Bold
H2 Heading
Available H2 Size Variants
Utilitzem diverses mides H2 per admetre diferents dissenys,
mentre mantenim un SEO i una accessibilitat correctes.
L'etiqueta d'encapçalament controla el significat,
i la mida predefinida controla l'aspecte.
H2 / Large(26px)
Heading 02
H2 / Large(24px)
Heading 02
H2 / Large(24px)
Heading 02
H2 / Large(22px)
Heading 02
H2 / Default (20px)
Heading 02
H2 / Compact (18px)
Heading 02
H2 / Small (16px)
Heading 02
H2 / Micro (14px – optional)
Heading 02
Typography
HTML All Paragraph
Paragraph-Large
Paragraph - Outfit | 20px or 1.25rem font-size / 1.6em line-height / Semibold
Paragraph - Outfit | 20px or 1.25rem font-size / 1.6em line-height / Medium
Paragraph - Outfit | 20px or 1.25rem font-size / 1.6em line-height / Regular
Paragraph-Medium
Paragraph - Outfit | 18px or 1.125rem font-size / 1.6em line-height / Semibold
Paragraph - Outfit | 18px or 1.125rem font-size / 1.6em line-height / Medium
Paragraph - Outfit | 18px or 1.125rem font-size / 1.6em line-height / Regular
Paragraph-Small
Paragraph - Outfit | 16px or 1rem font-size / 1.5em line-height / Semibold
Paragraph - Outfit | 16px or 1rem font-size / 1.5em line-height / Medium
Paragraph - Outfit | 16px or 1rem font-size / 1.5em line-height / Regular
Paragraph-Extra small
Paragraph - Outfit | 14px or 0.875rem font-size / 1.5em line-height / Semibold
Paragraph - Outfit | 14px or 0.875rem font-size / 1.5em line-height / Medium
Paragraph - Outfit | 14px or 0.875rem font-size / 1.5em line-height / Regular
Colors
Color Pattle
“Aquest sistema de farciment de seccions està construït sobre una quadrícula de 8 punts, cosa que garanteix un espaiat consistent, una millor llegibilitat i una alineació perfecta en totes les mides de pantalla.”
Primary color
Primary color
Primary is the loudest voice - we use it carefully
El color primari es reserva per a les accions i els moments de marca més importants. En limitem l'ús perquè sempre sembli intencionat i fort.
Primary Color – Regles d'ús
-
S'utilitza per a la identitat de marca i les accions principals
-
Limitat a una crida a l'acció principal per secció
-
S'utilitza per a estats actius i aspectes destacats clau
-
Mai s'utilitza per a fons repetitius grans
Primary-900
Primary-800
Primary-700
Primary-600
Base Color
Primary-500
Primary-400
Primary-300
Primary-200
Primary-100
Primary-50
Primary-25
Primary-0
Neutral colors
Neutral colors
Neutral colors are the canvas; brand colors are the paint.
Els colors neutres fan que el contingut sigui llegible i els dissenys tranquils. Permeten que els colors de la marca destaquin sense aclaparar l'usuari
Neutral Color – Regles d'ús
-
S'utilitza per a tots els fons i superfícies principals
-
S'utilitza per a tot el text de format llarg
-
S'utilitza per a separadors de disseny i vores
-
Mai s'utilitza per a èmfasi o crides a l'acció
-
Constitueix la major part de la interfície d'usuari
Neutral-900
Neutral-800
Neutral-700
Neutral-600
Base Color
Neutral-500
Neutral-400
Neutral-300
Neutral-200
Neutral-100
Neutral-50
Neutral-25
Neutral-0
Secondary color
Secondary color
Secondary adds balance; Accent adds focus
El color secundari dóna estructura i variació al disseny sense sobrepassar la marca. Ajuda els usuaris a escanejar el contingut més fàcilment.
Secondary Color – Regles d'ús
-
S'utilitza per a l'agrupació de dissenys i la separació de seccions
-
S'utilitza per a accions secundàries
-
S'utilitza en superfícies grans on el Primària es sentiria pesat
-
Mai s'utilitza per a accions urgents o èmfasi
Sec-900
Sec-800
Sec-700
Sec-600
Base Color
Sec-500
Sec-400
Sec-300
Sec-200
Sec-100
Sec-50
Sec-25
Sec-0
Accent Color
Accent Color
El color d'accent només s'utilitza per guiar l'atenció de l'usuari.
L'utilitzem amb moderació per a preus, aspectes destacats i interaccions, de manera que les accions importants destaquin sense sobrecarregar el disseny.
Accent Color – Regles d'ús
- S'utilitza per a l'agrupació de dissenys i la separació de seccions
- S'utilitza per a accions secundàries
- S'utilitza en superfícies grans on el Primària es sentiria pesat
- Mai s'utilitza per a accions urgents o èmfasi
Acc-900
Acc-800
Acc-700
Acc-600
Base Color
Acc-500
Acc-400
Acc-300
Acc-200
Acc-100
Acc-50
Acc-25
Acc-0
Semantic Color
Semantic Color
Reutilitzem els colors aprovats per la marca per als estats del sistema per mantenir la coherència visual, reduir la sobrecàrrega de la paleta i millorar la usabilitat. El significat es defineix pel context, no afegint colors innecessaris.
Semantic Colorsr – Regles d'ús
- Els colors de la marca poden aparèixer a qualsevol lloc
- Els colors semàntics només poden aparèixer als comentaris del sistema
Success
Warning
Error / Danger
Info
Disabled State
Surface
Space
8PT Grid System
Utilitzem un sistema de quadrícula de 8 punts per garantir un espaiat consistent, una millor llegibilitat i un disseny escalable. Aquest enfocament l'utilitzen els millors sistemes de disseny i garanteix que el vostre lloc web es mantingui net, responsiu i fàcil de mantenir en el futur
Space 0.25
4px or 0.25rem
Space 0.5
8px or 0.5rem
Space 1
16px or 1rem
Space 1.5
24px or 1.5rem
Space 2
32px or 2rem
Space 2.5
40px or 2.5rem
Space 3
48px or 3rem
Space 3.5
56px or 3rem
Space 4
64px or 4rem
Space 4.5
72px or 4.5rem
Space 5
80px or 5rem
Space 5.5
88px or 5.5rem
Space 6
96px or 6rem
Space 6.5
104px or 6.5rem
Space 7
112px or 7rem
Space 7.5
120px or 7.5rem
Space 8
128px or 8rem
Sections
Section Size Variants
“Aquest sistema de farciment de seccions està construït sobre una quadrícula de 8 punts, cosa que garanteix un espaiat consistent, una millor llegibilitat i una alineació perfecta en totes les mides de pantalla.”
Section 01
Section/Primary
Section 02
Section/Default
Section 03
Section Optional / Utility
Section 04
Section/Subtle
Row
Row Size Variants
Per què la fila utilitza el farciment esquerre i dret, NO superior i inferior
La secció controla el ritme vertical
La fila controla l'amplada del contingut
El farciment de les files protegeix el contingut de les vores de la pantalla
No hi ha responsabilitat de duplicació de l'espaiat
Row 01
Row Size Normal
Row size Normal / 1024px or 64rem
Row 02
Row Size Default
Row size Defaultl / 1,280px or 80rem
Row 03
Row Size Wide
Row size Wide / 1,440px or 90rem
Text Column
Text Column Sizes
Using 50ch for paragraph measure is best-practice typography, and it’s exactly what modern design systems (Material, GOV.UK, Apple HIG, Framer, Stripe, Medium) follow.
50ch - Compact / UI text
Use when clarity and scanning are more important than long reading.
Using 60ch for paragraph measure is best-practice typography, and it’s exactly what modern design systems (Material, GOV.UK, Apple HIG, Framer, Stripe, Medium) follow.
60ch - Default paragraph (MOST IMPORTANT)
Use when clarity and scanning are more important than long reading.
Using 70ch for paragraph measure is best-practice typography, and it’s exactly what modern design systems (Material, GOV.UK, Apple HIG, Framer, Stripe, Medium) follow.
70ch - Long-form / storytelling
Use when clarity and scanning are more important than long reading.
Space
Margin & Padding
Top Margin
Top Margin: no
0px or 0rem
Top Margin: xxs
4px or 0.25rem
Top Margin: xs
8px or 0.5rem
Top Margin: md
16px or 1rem
Top Margin: lg
24px or 1.5rem
Bottom Margins
Bottom Margin: no
0px or 0rem
Bottom Margin: xxs
4px or 0.25rem
Bottom Margin: xs
8px or 0.5rem
Bottom Margin: md
16px or 1rem
Bottom Margin: lg
24px or 1.5rem
Left Margins
Left Margin: no
0px or 0rem
Left Margin: xxs
4px or 0.25rem
Left Margin: xs
8px or 0.5rem
Left Margin: md
16px or 1rem
Left Margin: lg
24px or 1.5rem
Right Margins
Right Margin: no
0px or 0rem
Right Margin: xxs
4px or 0.25rem
Right Margin: xs
8px or 0.5rem
Right Margin: md
16px or 1rem
Right Margin: lg
24px or 1.5rem
Top Padding
Top Padding: no
0px or 0rem
Top Padding: xxs
4px or 0.25rem
Top Padding: xs
8px or 0.5rem
Top Padding: md
16px or 1rem
Top Padding: lg
24px or 1.5rem
Bottom Padding
Bottom Padding: no
0px or 0rem
Bottom Padding: xxs
4px or 0.25rem
Bottom Padding: xs
8px or 0.5rem
Bottom Padding: md
16px or 1rem
Bottom Padding: lg
24px or 1.5rem
Left Padding
Left Padding: no
0px or 0rem
Left Padding: xxs
4px or 0.25rem
Left Padding: xs
8px or 0.5rem
Left Padding: md
16px or 1rem
Left Padding: lg
24px or 1.5rem
Right Padding
Right Padding: no
0px or 0rem
Right Padding: xxs
4px or 0.25rem
Right Padding: xs
8px or 0.5rem
Right Padding: md
16px or 1rem
Right Padding: lg
24px or 1.5rem
All Padding
All Padding: no
0px or 0rem
All Padding: xxs
4px or 0.25rem
All Padding: xs
8px or 0.5rem
All Padding: md
16px or 1rem
All Padding: lg
24px or 1.5rem
Border Radius
All Radius
Radius: xs
4px or 0.25rem
Radius: sm
6px or 0.375rem
Radius: md
8px or 0.5rem
Radius: lg
12px or 0.75rem
Radius: xl
16px or 1rem
Radius: xxl
32px or 1.5rem
Radius: xxxl
140px or 2rem
Radius: circle
500px or 10rem
Buttons
Buttons
Btn-primary-sm
Btn-primary-md
Btn-primary-lg
Btn-primary-xl
Btn-secondary-sm
Btn-secondary-md
Btn-secondary-lg
Btn-secondary-xl
Btn-outline-sm
Btn-outline-md
Btn-outline-lg
Btn-outline-xl
Borders
All Border
Guia d'estil
Aquest sistema de disseny no només es tracta d'aspecte, sinó també d'eficiència, claredat i escalabilitat. Ajuda a construir més ràpidament, mantenir la coherència i oferir una experiència d'usuari premium a cada pàgina.
Border 1px
Border 2px
Border 3px