Pricing

Insight and Collaboration platform for creative minds

Marketing4 Websites1 Products
Search Moderne screensVisit website

Websites 4

All websites
Pro1 more websites from ModerneUnlock every screen, flow and Figma design with SaaSFrame Pro.See plans
Index of all 4 Moderne websites examples

Products 1

All products

Design reference

Moderne — design reference

Source: https://moderne.st/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.

Typography

  • font-family: Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif — selector .login,.login-button,.rFerister,.rFerister-button
  • font-family: Inter,Arial,sans-serif — selector #asm-faq-reviews .asm-container
  • font-family: var(--font-family-primary-semibold) — selector .btn
  • font-family: var(--font-family-display) — selector .btn--big
  • font-family: var(--font-family-primary-bold) — selector .btn--large
  • font-family: -apple-system — selector .apple-pay-button-with-text>.text
  • font-family: var(--font-family-primary) — selector .tp-input-field-password-pattern**title
  • font-family: sans-serif — selector .sizechart-holder .sizechart .header h1 span
  • font-size: 12px — selector .login,.login-button,.rFerister,.rFerister-button
  • font-size: 18px — selector #asm-faq-reviews .asm-title
  • font-size: 16px — selector #asm-faq-reviews .asm-title
  • font-size: var(--font-size-small-400) — selector .btn--segmented
  • font-size: var(--font-size-medium-300) — selector .btn--big
  • font-size: var(--font-size-medium-100) — selector .btn--large
  • font-size: var(--font-size-small-300) — selector .btn--medium
  • font-weight: 900 — selector .login,.login-button,.rFerister,.rFerister-button
  • font-weight: 800 — selector .asm-lanang-btn
  • font-weight: 600 — selector .btn--cta
  • font-weight: bold — selector .h**header,.h**h4,.h**h4--loud,.h**h3--secondary--sm,.h**h3--primary--sm,.h**h3,.h**h3--loud,.h**h2--secondary,.h**h2,.h**h2--sm,.h**h2--loud,.h**h1--sm,.h**h1,.h**h1--loud,.h**h1--hero
  • font-weight: 300 — selector .apple-pay-button-with-text>.text
  • font-weight: 500 — selector .tp-input-field-password-pattern**title
  • font-weight: normal — selector .reveal-modal p,.reveal-nominate-modal p
  • font-weight: 700 — selector .tp-btn--medium
  • line-height: 1.6 — selector #asm-faq-reviews .asm-acc-panel p
  • line-height: 1 — selector .btn
  • line-height: var(--font-size-large-100) — selector .btn--big
  • line-height: 24px — selector .btn--cta
  • line-height: 1.15em — selector .h**header,.h**h4,.h**h4--loud,.h**h3--secondary--sm,.h**h3--primary--sm,.h**h3,.h**h3--loud,.h**h2--secondary,.h**h2,.h**h2--sm,.h**h2--loud,.h**h1--sm,.h**h1,.h**h1--loud,.h**h1--hero
  • line-height: normal — selector p
  • line-height: 1.5 — selector .text-height
  • line-height: 1.4 — selector .text-note--warn
  • letter-spacing: .85px — selector .login,.login-button,.rFerister,.rFerister-button
  • letter-spacing: .8px — selector .asm-lanang-btn a
  • letter-spacing: .35px — selector #asm-faq-reviews .asm-title
  • letter-spacing: 0 — selector .h**header,.h**h4,.h**h4--loud,.h**h3--secondary--sm,.h**h3--primary--sm,.h**h3,.h**h3--loud,.h**h2--secondary,.h**h2,.h**h2--sm,.h**h2--loud,.h**h1--sm,.h**h1,.h**h1--loud,.h**h1--hero

Colors and surfaces

  • color: #fff — selector a:hover
  • color: #fff!important — selector .login,.login-button,.rFerister,.rFerister-button
  • color: #fff5f5 — selector #asm-faq-reviews .asm-card
  • color: #e10600!important — selector #asm-faq-reviews .asm-title
  • color: #ffe5e5!important — selector #asm-faq-reviews .asm-acc-panel p
  • color: var(--color-primary-500) — selector a
  • color: var(--color-neutral-600) — selector a:active,a:focus
  • background-color: var(--color-danger-500) — selector .btn--segmented--danger:active,.btn--segmented--danger:focus,.btn--segmented--danger:hover
  • background-color: var(--color-neutral-100) — selector body
  • background-color: black — selector .apple-pay-button-black-with-text
  • background-color: white — selector .apple-pay-button-white-with-text
  • background-color: var(--color-danger-100) — selector .tp-input-field--wrapper.tp-input-field--text-error .tp-input-field--text,.tp-input-field--wrapper.tp-input-field--text-error select
  • background-color: var(--color-neutral-200) — selector .tp-input-field--wrapper.tp-input-field--text-disabled .tp-input-field--text
  • background-color: var(--color-primary-100) — selector .tp-input-field--hosted-field-container.braintree-hosted-fields-focused
  • background-color: #ebebeb — selector #commission-modal .modal-container div table th

Components and layout

  • border-radius: 9px!important — selector .login,.login-button,.rFerister,.rFerister-button
  • border-radius: 10px!important — selector .asm-lanang-btn a
  • border-radius: 14px — selector #asm-faq-reviews .asm-card
  • border-radius: 11px — selector #asm-faq-reviews .asm-card
  • border-radius: 12px — selector .btn
  • border-radius: 3px — selector .btn--segmented
  • border-radius: 0 — selector .btn-segmented-group .btn
  • border-radius: 5px — selector .btn--medium-2
  • box-shadow: 0 0 0 1px rgba(225, 6, 0,.12),0 0 15px rgba(225, 6, 0,.24),0 9px 22px rgba(0,0,0,.42),inset 0 0 22px rgba(225, 6, 0,.11)!important — selector .login,.login-button
  • box-shadow: 0 0 0 1px rgba(107,243,255,.16),0 0 20px rgba(41,172,255,.36),0 10px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.22)!important — selector .rFerister,.rFerister-button
  • box-shadow: none!important — selector .login::after,.login-button::after,.rFerister::after,.rFerister-button::after
  • box-shadow: 0 0 0 1px rgba(225, 6, 0,.16),0 0 25px rgba(225, 6, 0,.38),0 12px 27px rgba(0,0,0,.44),inset 0 0 25px rgba(225, 6, 0,.16)!important — selector .login:hover,.login-button:hover
  • box-shadow: 0 0 0 1px rgba(143,255,255,.2),0 0 29px rgba(45,202,255,.47),0 13px 29px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.27)!important — selector .rFerister:hover,.rFerister-button:hover
  • box-shadow: 0 0 0 1px rgba(225, 6, 0,.06),0 0 14px rgba(225, 6, 0,.2),0 9px 20px rgba(0,0,0,.34),inset 0 0 22px rgba(225, 6, 0,.1)!important — selector .login,.login-button
  • box-shadow: 0 0 0 1px rgba(225, 6, 0,.1),0 0 18px rgba(225, 6, 0,.3),0 10px 22px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.2)!important — selector .rFerister,.rFerister-button
  • box-shadow: 0 0 0 1px rgba(225, 6, 0,.12),0 0 23px rgba(225, 6, 0,.32),0 12px 26px rgba(0,0,0,.38),inset 0 0 24px rgba(225, 6, 0,.15)!important — selector .login:hover,.login-button:hover
  • max-width: 1100px — selector #asm-faq-reviews .asm-container
  • max-width: 100% — selector .btn
  • max-width: 575px — selector .text-contain
  • max-width: 475px — selector .text-contain-s1
  • max-width: 610px — selector .text-contain-l1
  • max-width: 260px — selector .design-block .thumb-container .thumb
  • max-width: 400px — selector #product-display-preferences
  • max-width: 700px — selector #garment-modal .modal-container
  • padding: 15px 42px — selector .asm-lanang-btn a
  • padding: 12px 32px — selector .asm-lanang-btn a
  • padding: 0 15px — selector #asm-faq-reviews .asm-container
  • padding: 17px — selector #asm-faq-reviews .asm-card
  • padding: 0 10px — selector #asm-faq-reviews .asm-container
  • padding: 13px — selector #asm-faq-reviews .asm-card
  • padding: 6px 12px — selector .btn
  • gap: 15px — selector .asm-lanang-btn
  • gap: 9px — selector .asm-lanang-btn
  • gap: 8px — selector .btn .button**content
  • gap: 0 — selector .vc-header**shop-button,.vc-header**cart-button .button**content,.vc-header**account-button:has(.teepublicon),.vc-header**account-button:has(.vc-header**avatar) .button**content
  • gap: 16px — selector .vc-header**actions-container
  • gap: 28px — selector .vc-header**actions-container
  • gap: 40px — selector .vc-banner-sale-countdown**content-container
  • gap: 12px — selector .vc-banner-sale-countdown**messaging-cta-container
  • transition: transform .18s ease,opacity .18s ease — selector .login,.login-button,.rFerister,.rFerister-button
  • transition: none — selector .login,.login-button,.rFerister,.rFerister-button
  • transition: transform .18s ease — selector .asm-lanang-btn a
  • transition: none!important — selector .asm-lanang-btn a
  • transition: all 0.15s ease-in-out — selector .btn
  • transition: all 0.1s ease-in-out — selector a,span.a
  • transition: -webkit-transform 0.15s cubic-bezier(0.8, 0, 0, 1.12) — selector .c-tray**container
  • transition: transform 0.15s cubic-bezier(0.8, 0, 0, 1.12) — selector .c-tray\_\_container

Responsive rules

(max-width:480px)
(prefers-reduced-motion:reduce)
(min-width: 992px)
(min-width: 768px)
(min-width: 600px)
(max-width: 374px)
screen and (max-width: 768px)
(min-width: 1024px)
(min-width: 1025px)
(min-width: 480px)
(min-width: 1280px)
(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi)
screen and (max-width: 480px)
(max-width: 767px)
only screen and (max-width: 992px)
(max-width: 1024px)
(max-width: 413px)
(max-width: 1279px)
screen and (max-width: 767px)
(min-width: 768px) and (max-width: 1023px)
(max-width: 344px)
(max-width: 480px)
(max-width: 1023px)
(max-width: 1023px) and (min-width: 768px) and (max-width: 1023px)
(hover: hover) and (pointer: fine)

Tech stack