@nova/base

Design-system styleguide. Generated from src/tokens at build time.

Colors · background

bg-brand-dark-primary--background-color-brand-dark-primary#070b3b
bg-brand-dark-secondary--background-color-brand-dark-secondary#252770
bg-brand-dark-tertiary--background-color-brand-dark-tertiary#4d4f9e
bg-brand-light-primary--background-color-brand-light-primary#d8ff5a
bg-brand-light-secondary--background-color-brand-light-secondary#dfff8f
bg-brand-light-tertiary--background-color-brand-light-tertiary#f1ffcc
bg-clear--background-color-clear#ffffff00
bg-main-primary--background-color-main-primary#f3f4f5
bg-main-quaternary--background-color-main-quaternary#070b3b
bg-main-secondary--background-color-main-secondary#ffffff
bg-main-tertiary--background-color-main-tertiary#f9f9fa
bg-system-action--background-color-system-action#e6eaf8
bg-system-error--background-color-system-error#f5e8eb
bg-system-rating--background-color-system-rating#fff4cc
bg-system-success--background-color-system-success#e2f5ec
bg-system-warning--background-color-system-warning#fdeede

Colors · text

text-brand-dark-primary--text-color-brand-dark-primary#13155a
text-brand-dark-quaternary--text-color-brand-dark-quaternary#9194e0
text-brand-dark-secondary--text-color-brand-dark-secondary#393b87
text-brand-dark-tertiary--text-color-brand-dark-tertiary#6365b5
text-brand-light-primary--text-color-brand-light-primary#769700
text-brand-light-quaternary--text-color-brand-light-quaternary#d7ff70
text-brand-light-secondary--text-color-brand-light-secondary#b0ce00
text-brand-light-tertiary--text-color-brand-light-tertiary#ceff52
text-clear--text-color-clear#ffffff00
text-on-brand-on-dark-primary--text-color-on-brand-on-dark-primary#ffffff
text-on-brand-on-dark-secondary--text-color-on-brand-on-dark-secondary#ffffffa3
text-on-brand-on-dark-tertiary--text-color-on-brand-on-dark-tertiary#ffffff52
text-on-brand-on-light-primary--text-color-on-brand-on-light-primary#000000
text-on-brand-on-light-secondary--text-color-on-brand-on-light-secondary#000000a3
text-on-brand-on-light-tertiary--text-color-on-brand-on-light-tertiary#00000052
text-on-main-alternate-primary--text-color-on-main-alternate-primary#ffffff
text-on-main-alternate-quarternary--text-color-on-main-alternate-quarternary#ffffff29
text-on-main-alternate-secondary--text-color-on-main-alternate-secondary#ffffffa3
text-on-main-alternate-tertiary--text-color-on-main-alternate-tertiary#ffffff52
text-on-main-primary--text-color-on-main-primary#13155a
text-on-main-quaternary--text-color-on-main-quaternary#a2bfc9
text-on-main-secondary--text-color-on-main-secondary#6e838a
text-on-main-tertiary--text-color-on-main-tertiary#a9bec2
text-on-system-on-action--text-color-on-system-on-action#171f55
text-on-system-on-error--text-color-on-system-on-error#5c1223
text-on-system-on-rating--text-color-on-system-on-rating#253033
text-on-system-on-success--text-color-on-system-on-success#0e4a2d
text-on-system-on-warning--text-color-on-system-on-warning#5c2c08
text-system-action--text-color-system-action#4255c8
text-system-error--text-color-system-error#c4334a
text-system-rating--text-color-system-rating#fcb000
text-system-success--text-color-system-success#2d9e63
text-system-warning--text-color-system-warning#e07830

Colors · border

border-brand-dark-primary--border-color-brand-dark-primary#13155a
border-brand-dark-secondary--border-color-brand-dark-secondary#6365b5
border-brand-dark-tertiary--border-color-brand-dark-tertiary#9194e0
border-brand-light-primary--border-color-brand-light-primary#d8ff5a
border-brand-light-secondary--border-color-brand-light-secondary#dfff8f
border-brand-light-tertiary--border-color-brand-light-tertiary#f1ffcc
border-clear--border-color-clear#ffffff00
border-main-alternative-primary--border-color-main-alternative-primary#ffffff
border-main-alternative-quaternary--border-color-main-alternative-quaternary#ffffff0a
border-main-alternative-secondary--border-color-main-alternative-secondary#ffffff1f
border-main-alternative-tertiary--border-color-main-alternative-tertiary#ffffff14
border-main-primary--border-color-main-primary#000000
border-main-quaternary--border-color-main-quaternary#0000000a
border-main-secondary--border-color-main-secondary#0000001f
border-main-tertiary--border-color-main-tertiary#00000014
border-system-action--border-color-system-action#4255c8
border-system-error--border-color-system-error#c4334a
border-system-rating--border-color-system-rating#fcb000
border-system-success--border-color-system-success#2d9e63
border-system-warning--border-color-system-warning#e07830

Colors · global palette (73)

Every color of the Style Library's global layer, for design review. Reference only — global tokens have no utilities; use the semantic bg-* / text-* / border-* classes above.

base.black.100#000000
base.black.12#0000001f
base.black.16#00000029
base.black.24#0000003d
base.black.32#00000052
base.black.4#0000000a
base.black.48#0000007a
base.black.64#000000a3
base.black.8#00000014
base.black.80#000000cc
base.clear#ffffff00
base.white.100#ffffff
base.white.12#ffffff1f
base.white.16#ffffff29
base.white.24#ffffff3d
base.white.32#ffffff52
base.white.4#ffffff0a
base.white.48#ffffff7a
base.white.64#ffffffa3
base.white.8#ffffff14
base.white.80#ffffffcc
brand.dark.0#dcdeff
brand.dark.100#6365b5
brand.dark.120#4d4f9e
brand.dark.140#393b87
brand.dark.160#252770
brand.dark.180#13155a
brand.dark.20#c3c6f8
brand.dark.200#070b3b
brand.dark.40#aaadee
brand.dark.60#9194e0
brand.dark.80#7a7ccc
brand.light.0#f1ffcc
brand.light.10#eaffc4
brand.light.100#ceff52
brand.light.120#ccec00
brand.light.140#b0ce00
brand.light.160#92b200
brand.light.180#769700
brand.light.20#e8ffad
brand.light.200#5d8200
brand.light.40#dfff8f
brand.light.60#d7ff70
brand.light.80#d8ff5a
neutral.0#f9f9fa
neutral.100#a9bec2
neutral.120#90a0a5
neutral.140#6e838a
neutral.160#526166
neutral.180#364347
neutral.20#f3f4f5
neutral.200#253033
neutral.40#d1e7ef
neutral.60#bad3dc
neutral.80#a2bfc9
system.action.bleached#e6eaf8
system.action.darkened#171f55
system.action.primary#4255c8
system.error.bleached#f5e8eb
system.error.darkened#5c1223
system.error.primary#c4334a
system.rating.bleached#fff4cc
system.rating.darkened#7a5200
system.rating.primary#fcb000
system.success.bleached#e2f5ec
system.success.darkened#0e4a2d
system.success.primary#2d9e63
system.warning.bleached#fdeede
system.warning.darkened#5c2c08
system.warning.primary#e07830
system.yellow.bleached#ffeabb
system.yellow.darkened#584314
system.yellow.primary#fcb000

Typography

Each style is one composite class — text-h1 sets family, size, line-height, weight and letter-spacing together. For custom CSS, the adaptive properties are also exposed as runtime variables --nova-text-<style>-<property> (e.g. --nova-text-h1-font-size). px equivalents are shown at the browser default root font-size (1rem = 16px). The package does not fix html { font-size }, so a reader who has changed it in their browser settings gets proportionally different pixels.

text-h1 font-size mobile: 2.5rem 40px · tablet: 3.5rem 56px · desktop-sm: 4.5rem 72px · desktop: 4.5rem 72px  ·  line-height mobile: 3rem 48px · tablet: 4rem 64px · desktop-sm: 5.25rem 84px · desktop: 5.25rem 84px  ·  font-weight mobile: 800 · tablet: 800 · desktop-sm: 900 · desktop: 900  ·  letter-spacing mobile: 0 · tablet: 1px · desktop-sm: 2px · desktop: 2px
The quick brown fox jumps over the lazy dog
text-h2 font-size mobile: 2.25rem 36px · tablet: 2.5rem 40px · desktop-sm: 3rem 48px · desktop: 3rem 48px  ·  line-height mobile: 2.75rem 44px · tablet: 3rem 48px · desktop-sm: 3.5rem 56px · desktop: 3.5rem 56px  ·  font-weight 800  ·  letter-spacing mobile: 0 · tablet: 1px · desktop-sm: 1px · desktop: 1px
The quick brown fox jumps over the lazy dog
text-h3 font-size mobile: 2rem 32px · tablet: 2.25rem 36px · desktop-sm: 2.25rem 36px · desktop: 2.25rem 36px  ·  line-height mobile: 2.5rem 40px · tablet: 2.75rem 44px · desktop-sm: 2.75rem 44px · desktop: 2.75rem 44px  ·  font-weight 800  ·  letter-spacing 0
The quick brown fox jumps over the lazy dog
text-subline-l font-size mobile: 1rem 16px · tablet: 1.125rem 18px · desktop-sm: 1.125rem 18px · desktop: 1.125rem 18px  ·  line-height 1.5rem 24px  ·  font-weight 600  ·  letter-spacing 0
The quick brown fox jumps over the lazy dog
text-subline-m font-size mobile: 0.875rem 14px · tablet: 1rem 16px · desktop-sm: 1rem 16px · desktop: 1rem 16px  ·  line-height 1.25rem 20px  ·  font-weight 600  ·  letter-spacing 0
The quick brown fox jumps over the lazy dog
text-subline-s font-size mobile: 0.75rem 12px · tablet: 0.875rem 14px · desktop-sm: 0.875rem 14px · desktop: 0.875rem 14px  ·  line-height 1rem 16px  ·  font-weight 600  ·  letter-spacing 0
The quick brown fox jumps over the lazy dog
text-body-l font-size mobile: 1rem 16px · tablet: 1.125rem 18px · desktop-sm: 1.125rem 18px · desktop: 1.125rem 18px  ·  line-height 1.5rem 24px  ·  font-weight 400  ·  letter-spacing 0
The quick brown fox jumps over the lazy dog
text-body-m font-size mobile: 0.875rem 14px · tablet: 1rem 16px · desktop-sm: 1rem 16px · desktop: 1rem 16px  ·  line-height 1.5rem 24px  ·  font-weight 400  ·  letter-spacing 0
The quick brown fox jumps over the lazy dog
text-body-s font-size mobile: 0.75rem 12px · tablet: 0.875rem 14px · desktop-sm: 0.875rem 14px · desktop: 0.875rem 14px  ·  line-height 1rem 16px  ·  font-weight 400  ·  letter-spacing 0
The quick brown fox jumps over the lazy dog
text-button-l font-size mobile: 1rem 16px · tablet: 1.125rem 18px · desktop-sm: 1.125rem 18px · desktop: 1.125rem 18px  ·  line-height 1.5rem 24px  ·  font-weight 700  ·  letter-spacing 0
The quick brown fox jumps over the lazy dog
text-button-m font-size mobile: 0.875rem 14px · tablet: 1rem 16px · desktop-sm: 1rem 16px · desktop: 1rem 16px  ·  line-height 1.25rem 20px  ·  font-weight 700  ·  letter-spacing 0
The quick brown fox jumps over the lazy dog
text-button-s font-size mobile: 0.75rem 12px · tablet: 0.875rem 14px · desktop-sm: 0.875rem 14px · desktop: 0.875rem 14px  ·  line-height 1rem 16px  ·  font-weight 700  ·  letter-spacing 0
The quick brown fox jumps over the lazy dog
text-caption-l font-size 0.875rem 14px  ·  line-height 1rem 16px  ·  font-weight 500  ·  letter-spacing 0
The quick brown fox jumps over the lazy dog
text-caption-m font-size 0.75rem 12px  ·  line-height 1rem 16px  ·  font-weight 400  ·  letter-spacing 0
The quick brown fox jumps over the lazy dog
text-caption-s font-size 0.625rem 10px  ·  line-height 0.75rem 12px  ·  font-weight 400  ·  letter-spacing 0
The quick brown fox jumps over the lazy dog

Measurements

px equivalents are shown at the browser default root font-size (1rem = 16px). The package does not fix html { font-size }, so a reader who has changed it in their browser settings gets proportionally different pixels.

padding

Classes: p- px- py- pt- pr- pb- pl-

p-compact--padding-compactmobile: 0.5rem 8px · tablet: 0.5rem 8px · desktop-sm: 1rem 16px · desktop: 1.5rem 24px (adaptive)
p-extra-large--padding-extra-largemobile: 3rem 48px · tablet: 3.5rem 56px · desktop-sm: 5rem 80px · desktop: 6rem 96px (adaptive)
p-large--padding-largemobile: 1.5rem 24px · tablet: 2rem 32px · desktop-sm: 3rem 48px · desktop: 4rem 64px (adaptive)
p-medium--padding-mediummobile: 1rem 16px · tablet: 1.5rem 24px · desktop-sm: 2rem 32px · desktop: 3rem 48px (adaptive)
p-micro--padding-micro0.25rem 4px
p-nano--padding-nano0.125rem 2px
p-regular--padding-regularmobile: 0.75rem 12px · tablet: 1rem 16px · desktop-sm: 1.5rem 24px · desktop: 2rem 32px (adaptive)
p-semi-compact--padding-semi-compact0.75rem 12px
p-semi-regular--padding-semi-regular1.25rem 20px
p-small--padding-small0.5rem 8px
p-tiny--padding-tiny0.375rem 6px
p-x-compact--padding-x-compact0.875rem 14px
p-x-large--padding-x-large4rem 64px
p-x-regular--padding-x-regular1.125rem 18px
p-x-small--padding-x-small0.625rem 10px
p-xx-large--padding-xx-large6rem 96px

gap

Classes: gap- gap-x- gap-y- — margins (m- mx- my- mt- mr- mb- ml-) use this same scale

gap-compact--gap-compact0.5rem 8px
gap-extra-large--gap-extra-largemobile: 3rem 48px · tablet: 4rem 64px · desktop-sm: 3rem 48px · desktop: 4rem 64px (adaptive)
gap-large--gap-largemobile: 1.5rem 24px · tablet: 2rem 32px · desktop-sm: 2rem 32px · desktop: 3rem 48px (adaptive)
gap-medium--gap-mediummobile: 1rem 16px · tablet: 1.5rem 24px · desktop-sm: 1.5rem 24px · desktop: 2rem 32px (adaptive)
gap-nano--gap-nano0.125rem 2px
gap-regular--gap-regularmobile: 0.75rem 12px · tablet: 1rem 16px · desktop-sm: 1rem 16px · desktop: 1.5rem 24px (adaptive)
gap-semi-medium--gap-semi-medium1.25rem 20px
gap-semi-regular--gap-semi-regular0.75rem 12px
gap-tiny--gap-tiny0.25rem 4px

size

Classes: size- w- h-

size-2xl--size-2xl1.75rem 28px
size-3xl--size-3xl2rem 32px
size-4xl--size-4xl2.25rem 36px
size-5xl--size-5xl2.5rem 40px
size-6xl--size-6xl3rem 48px
size-7xl--size-7xl4rem 64px
size-8xl--size-8xl6.5rem 104px
size-compact--size-compact0.75rem 12px
size-l--size-l1.25rem 20px
size-m--size-m1rem 16px
size-nano--size-nano0.125rem 2px
size-s--size-s0.625rem 10px
size-xl--size-xl1.5rem 24px
size-xs--size-xs0.5rem 8px

corner

Classes: rounded- and every core per-side/corner variant (rounded-t-, rounded-bl-, …)

rounded-compact--radius-compact8px
rounded-full--radius-full1000px
rounded-large--radius-large32px
rounded-medium--radius-medium24px
rounded-none--radius-none0
rounded-regular--radius-regular16px
rounded-semi-compact--radius-semi-compact12px
rounded-small--radius-small6px

border-width

Classes: border- border-x- border-y- border-t- border-r- border-b- border-l- (the same classes also carry the border colors above)

border-default--border-width-default1px
border-medium--border-width-medium2px
border-thick--border-width-thick3px
border-x-thick--border-width-x-thick4px

Containers

Engineering-owned — the kit ships no container variables, so these are derived from the 1440 artboards. Each class centers the box, caps the content width and applies the adaptive side paddings by itself.

container-page--container-page--nova-page-margincontent 1248px · side margin 24 / 32 / 48 / 64 / 96px at 0 / 600 / 960 / 1280 / 1440
container-section--container-section--nova-section-margincontent 1376px · side margin 24 → 32px at 1280
max-w-page max-w-section--container-page--container-sectionwidth ceiling only — no centering, no paddings

Elevation

Figma effect styles (not variables — snapshot in figma-data/raw/effect-styles.json). shadow-elevation-level-1 is the kit's own transparent no-op — use it to remove elevation on hover/pressed states.

shadow-elevation-level-1--shadow-elevation-level-10 0 0 0 #070B3B00
shadow-elevation-level-2--shadow-elevation-level-20 4px 16px 0 #070B3B29
shadow-elevation-level-3--shadow-elevation-level-30 8px 24px 0 #070B3B3D
shadow-elevation-level-4--shadow-elevation-level-40 12px 32px 0 #070B3B52

Motion

Hover a row to play it. Engineering-owned — the kit carries no motion variables, so these come from src/motion.json, not from Figma. Interactive elements (a, button, input, [role=button]…) already ease their colours, borders and elevation via base.css; add transition-interactive where movement should animate too, and duration-* / ease-* to retime it. Everything collapses to 1ms under prefers-reduced-motion: reduce.

duration-fast--transition-duration-fast120ms
duration-medium--transition-duration-medium200ms
duration-slow--transition-duration-slow320ms
ease-standard--ease-standardcubic-bezier(0.2, 0, 0, 1)
ease-entrance--ease-entrancecubic-bezier(0, 0, 0.2, 1)
ease-exit--ease-exitcubic-bezier(0.4, 0, 1, 1)

Icons (51)

Usage: <span class="icon-nova-<name>"></span> — sized by the font-size, colored by the text color (text-*).

icon-nova-app-store
icon-nova-app-store-badge
icon-nova-apparel
icon-nova-arrow-backward
icon-nova-arrow-down
icon-nova-arrow-forward
icon-nova-arrow-left
icon-nova-arrow-outward
icon-nova-arrow-right
icon-nova-arrow-up
icon-nova-bank
icon-nova-buildings
icon-nova-calendar
icon-nova-call
icon-nova-categories
icon-nova-cherdraui
icon-nova-circle
icon-nova-coins
icon-nova-copy
icon-nova-costco
icon-nova-credit-card
icon-nova-cross
icon-nova-device-mobile
icon-nova-dollar-hand
icon-nova-done
icon-nova-error
icon-nova-facebook
icon-nova-files
icon-nova-gas-station
icon-nova-gavel
icon-nova-google-play
icon-nova-google-play-badge
icon-nova-health-cross
icon-nova-heart
icon-nova-id-badge
icon-nova-instagram
icon-nova-master-card
icon-nova-menu
icon-nova-nova
icon-nova-payments
icon-nova-plus
icon-nova-restaurant
icon-nova-search
icon-nova-security
icon-nova-shopping-cart
icon-nova-soriana
icon-nova-tiktok
icon-nova-walmart
icon-nova-warning
icon-nova-x
icon-nova-youtube

+ Material icons: icon-[mdi--home]

Logo

Components (50)

Every prop combination of every contract, per breakpoint range (real iframes — adaptive tokens and lg: fire truthfully). Contracts: @nova/base/components-json/<level>/<slug>.json · reference markup: @nova/base/components/<slug>.html · specs: @nova/base/components-spec/<slug>.md.

separator primitive · 2 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

surface primitive · 4 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

visual-image primitive · 3 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

badge atom · 16 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

bullet-point atom · 8 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

button-card atom · 4 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

button-store atom · 6 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

button atom · 90 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

cell-faq atom · 4 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

cell-list atom · 6 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

cell-step atom · 2 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

dots-picker atom · 1 combination ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

input-field atom · 36 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

notification-message atom · 2 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

rating-stars atom · 1 combination ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

section-heading atom · 15 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

segment atom · 9 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

slider atom · 1 combination ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

stepper atom · 1 combination ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

tag atom · 12 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

trust-item atom · 6 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

card-autoridades molecule · 1 combination ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

card-avatar molecule · 1 combination ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

card-benefit molecule · 30 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

card-contact molecule · 1 combination ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

card-example molecule · 1 combination ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

card-proposal molecule · 6 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

card-step molecule · 1 combination ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

card-testimonial molecule · 1 combination ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

form molecule · 1 combination ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

group-badge molecule · 1 combination ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

group-bullet-point molecule · 4 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

group-button-store molecule · 4 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

group-button molecule · 6 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

group-cell-faq molecule · 2 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

group-cell-list molecule · 3 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

group-cell-step molecule · 2 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

group-segment molecule · 1 combination ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

group-social-media molecule · 2 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

group-tag molecule · 4 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

group-trust molecule · 4 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

tabs-categories molecule · 2 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

grid organism · 1 combination ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

section-base-body organism · 2 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

section-base organism · 5 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px

section-card-base-surface organism · 2 combinations ↑

mobile · <600 — 375px
tablet · 600–959 — 600px
desktop · ≥960 — 960px