Design foundations · Material 3
Um sistema preciso, consistente e expressivo.
Preto e branco conduzem a identidade. Electric Blue organiza foco, seleção e momentos de maior intenção.
Color system
Paletas tonais e papéis semânticos derivados das três cores centrais da marca.
Pure Black
#000000Pure White
#FFFFFFElectric Blue
#001EFFHCT palettes
Tonal progression
Os tons ampliam a aplicação sem diluir o azul original da marca.
Neutral13 tones
0
#00000010
#1B1B1B20
#30303030
#47474740
#5E5E5E50
#77777760
#91919170
#ABABAB80
#C6C6C690
#E2E2E295
#F1F1F199
#FCFCFC100
#FFFFFFElectric Blue13 tones
0
#00000010
#00066720
#000FA330
#001AE234
#001EFF40
#2C3EFF50
#5665FF60
#7985FF70
#9BA4FF80
#BDC2FF90
#E0E0FF95
#F1EFFF100
#FFFFFFError13 tones
0
#00000010
#41000220
#69000530
#93000A40
#BA1A1A50
#DE373060
#FF544970
#FF897D80
#FFB4AB90
#FFDAD695
#FFEDEA99
#FFFBFF100
#FFFFFFSemantic roles
Light and dark schemes
Todo token On deve ser usado sobre seu respectivo papel-base ou Container.
Primary
#FFFFFFOn Primary
#000000Primary Container
#303030On Primary Container
#FFFFFFSecondary
#C6C6C6On Secondary
#303030Secondary Container
#474747On Secondary Container
#E2E2E2Tertiary
#BDC2FFOn Tertiary
#000FA3Tertiary Container
#001AE2On Tertiary Container
#E0E0FFError
#FFB4ABOn Error
#690005Error Container
#93000AOn Error Container
#FFDAD6Background
#000000On Background
#FFFFFFSurface
#000000On Surface
#FFFFFFSurface Variant
#474747On Surface Variant
#C6C6C6Outline
#919191Outline Variant
#474747Inverse Surface
#FFFFFFInverse On Surface
#000000Surface Container Low
#1B1B1BSurface Container
#1F1F1FSurface Container High
#2A2A2ASurface Container Highest
#353535Primary
#000000On Primary
#FFFFFFPrimary Container
#E2E2E2On Primary Container
#1B1B1BSecondary
#5E5E5EOn Secondary
#FFFFFFSecondary Container
#E2E2E2On Secondary Container
#1B1B1BTertiary
#001EFFOn Tertiary
#FFFFFFTertiary Container
#E0E0FFOn Tertiary Container
#000667Error
#BA1A1AOn Error
#FFFFFFError Container
#FFDAD6On Error Container
#410002Background
#FFFFFFOn Background
#000000Surface
#FFFFFFOn Surface
#000000Surface Variant
#E2E2E2On Surface Variant
#474747Outline
#777777Outline Variant
#C6C6C6Inverse Surface
#000000Inverse On Surface
#FFFFFFSurface Container Low
#F3F3F3Surface Container
#EEEEEESurface Container High
#E8E8E8Surface Container Highest
#E2E2E2Type & spacing
SF Pro aplicada aos papéis do Material 3, com ritmo espacial de 4px e layout de 8px.
Display Large
57px / 64px · 400SF Pro
Display Medium
45px / 52px · 400SF Pro
Display Small
36px / 44px · 400SF Pro
Headline Large
32px / 40px · 400Design systems
Headline Medium
28px / 36px · 400Design systems
Headline Small
24px / 32px · 400Design systems
Title Large
22px / 28px · 500Paulo Martins Design
Title Medium
16px / 24px · 500Paulo Martins Design
Title Small
14px / 20px · 500Paulo Martins Design
Body Large
16px / 24px · 400Clareza, ritmo e consistência em cada interface.
Body Medium
14px / 20px · 400Clareza, ritmo e consistência em cada interface.
Body Small
12px / 16px · 400Clareza, ritmo e consistência em cada interface.
Label Large
14px / 20px · 500ACTION LABEL
Label Medium
12px / 16px · 500ACTION LABEL
Label Small
11px / 16px · 500ACTION LABEL
4px base grid
Spacing scale
Microalinhamentos usam 4px; componentes e ritmo vertical favorecem múltiplos de 8px.
space-0
00pxspace-1
1x4pxspace-2
2x8pxspace-3
3x12pxspace-4
4x16pxspace-5
5x20pxspace-6
6x24pxspace-8
8x32pxspace-10
10x40pxspace-12
12x48pxspace-16
16x64pxspace-20
20x80pxspace-24
24x96pxGutter · Mobile20px
Gutter · Tablet32px
Gutter · Desktop48px
Reading width720px
Content max1280px
Section · Mobile72px
Section · Desktop96px
Button system
Hierarquia de ações Material 3, iconografia Google e estados acessíveis para web.