Ember.Ember

Foundations

Foundations

What is shared by the whole app and the site: the logo, colors, typography, spacing, grid, radii, shadows, borders, icons and motion.

Brand colors

A single orange palette, ember from 50 to 950, the same in the app and on the site. Click a color to copy its value.

  • ember-50

    #fff9f5 · RGB 255 249 245

    Chip backgrounds, card icon, selected state

  • ember-100

    #fff2e8 · RGB 255 242 232

    Highlighted plan background, work halo

  • ember-200

    #ffe4d1 · RGB 255 228 209

    Chip borders

  • ember-300

    #ffcfa3 · RGB 255 207 163

    Border hover

  • ember-400

    #ffb374 · RGB 255 179 116

    Drag-and-drop border

  • ember-500

    #ff8c42 · RGB 255 140 66

    Logo orange: large buttons, active menu underline, timeline, chips, theme color

  • ember-600

    #f97316 · RGB 249 115 22

    Large button hover

  • ember-700

    #ea580c · RGB 234 88 12

    Small buttons (12 px and below), focus ring

  • ember-800

    #c2410c · RGB 194 65 12

    Small button hover, orange text, chips

  • ember-900

    #9a3412 · RGB 154 52 18

    Orange text hover

  • ember-950

    #7c2d12 · RGB 124 45 18

    Very dark orange text

Use of orange

Use of orange
RoleClasses
Large button (14 px text and up)bg-ember-500 text-white hover:bg-ember-600
Small button (13 px text and below)bg-ember-700 text-white hover:bg-ember-800
Orange texttext-ember-800, hover text-ember-900
Button backgroundember-500 for a large one, ember-700 for a small one, white text, never ember-800 at rest
Orange chipborder-ember-200 bg-ember-50 text-ember-800
Orange without textlogo, timeline, chips, gauges, menu underline: ember-500
Focus ringring-2 ring-ember-700 ring-offset-2
Rule
Text is white on every orange button, never dark. Orange is never used as text other than ember-800 and ember-900.

Gradients

Four 135° gradients, for decorative backgrounds only: end of page, illustrations. Never on a button, a chip, an avatar or a card.

  • bg-gradient-orange

    #ff8c42, #f97316, #ea580c

  • bg-gradient-orange-light

    #fff9f5, #ffe4d1, #ffcfa3

  • bg-gradient-dark

    #1c1917, #292524, #44403c

  • bg-gradient-subtle

    #fafaf9, #f5f5f4, #fff9f5

App dark mode

Dark values of the three light tints
TokenLightDark
ember-50#fff9f5rgb(43 29 19)
ember-100#fff2e8rgb(58 38 21)
ember-200#ffe4d1rgb(87 54 26)

Dark mode only redefines the backgrounds, borders, rings and gradients of these three tints. Oranges from 300 to 950 and texts do not change. The site has no dark mode: its brand surface is light.

Neutrals

neutral is the only gray: a warm gray, from 50 to 950. No cool gray mixes with it.

  • neutral-50

    #fafaf9 · RGB 250 250 249

    Composer background, chat frames, calm site sections

  • neutral-100

    #f5f5f4 · RGB 245 245 244

    User bubble, segmented track, hovers

  • neutral-200

    #e7e5e4 · RGB 231 229 228

    Standard border

  • neutral-300

    #d6d3d1 · RGB 214 211 209

    Secondary button border, code block frame

  • neutral-400

    #a8a29e · RGB 168 162 158

    Placeholder text only

  • neutral-500

    #78716c · RGB 120 113 108

    Captions, resting icons

  • neutral-600

    #57534e · RGB 87 83 78

    Secondary text, resting segment

  • neutral-700

    #44403c · RGB 68 64 60

    Navigation links, neutral button text

  • neutral-800

    #292524 · RGB 41 37 36

    Chat text, bubbles

  • neutral-900

    #1c1917 · RGB 28 25 23

    Headings and main text

  • neutral-950

    #0c0a09 · RGB 12 10 9

    High-contrast headings, black button

App dark mode values

Light and dark values of the neutrals
TokenLightDark, textDark, background
neutral-50#fafaf9#1c1c1c#1c1c1c
neutral-100#f5f5f4#2e2e2e#2e2e2e
neutral-200#e7e5e4#3a3a3a#3a3a3a
neutral-300#d6d3d1#4a4a4a#4a4a4a
neutral-400#a8a29e#8f8f8f#5a5a5a
neutral-500#78716c#a3a3a3#6b6b6b
neutral-600#57534e#bdbdbd#4a4a4a
neutral-700#44403c#d4d4d4#3a3a3a
neutral-800#292524#e5e5e5#2a2a2a
neutral-900#1c1917#f2f2f2#0f0f0f
neutral-950#0c0a09#fafafa#0a0a0a
Dark mode surfaces
Dark surfaceValueNote
Page#141414Text #f2f2f2; a very dark gray, never deep black
Shell (rail, bar)#1a1a1adata-theme-dark="shell"
Panels, cards, menus, composer#262626White background rewritten, with variants from 95% to 60%
Border#3a3a3a
Prose text#d4d4d4 · #f2f2f2 · #a3a3a3Body, headings, captions; rules #3a3a3a

State colors

Four sets, one per role: success, warning, error, info. Each has five values (50, 200, 500, 700, 800) and a single pair for a message.

The four sets

Success success

  • success-50

    #ecfdf5 · RGB 236 253 245

  • success-200

    #a7f3d0 · RGB 167 243 208

  • success-500

    #10b981 · RGB 16 185 129

  • success-700

    #047857 · RGB 4 120 87

  • success-800

    #065f46 · RGB 6 95 70

Warning warning

  • warning-50

    #fffbeb · RGB 255 251 235

  • warning-200

    #fde68a · RGB 253 230 138

  • warning-500

    #f59e0b · RGB 245 158 11

  • warning-700

    #b45309 · RGB 180 83 9

  • warning-800

    #92400e · RGB 146 64 14

Error danger

  • danger-50

    #fef2f2 · RGB 254 242 242

  • danger-200

    #fecaca · RGB 254 202 202

  • danger-500

    #ef4444 · RGB 239 68 68

  • danger-700

    #b91c1c · RGB 185 28 28

  • danger-800

    #991b1b · RGB 153 27 27

Info info

  • info-50

    #f0f9ff · RGB 240 249 255

  • info-200

    #bae6fd · RGB 186 230 253

  • info-500

    #0ea5e9 · RGB 14 165 233

  • info-700

    #0369a1 · RGB 3 105 161

  • info-800

    #075985 · RGB 7 89 133

Usage

  • Success

    Text success-800, background success-50, border success-200.

    7.29:1 · AAA

  • Warning

    Text warning-800, background warning-50, border warning-200.

    6.84:1 · AA

  • Error

    Text danger-800, background danger-50, border danger-200.

    7.60:1 · AAA

  • Info

    Text info-800, background info-50, border info-200.

    7.09:1 · AAA

Use of state colors
UsageClasses
Message (alert, banner)rounded-xl border border-{role}-200 bg-{role}-50 px-4 py-3 text-{role}-800
Text alone on whitetext-{role}-700
Status dot or iconbg-{role}-500 or text-{role}-500
Field errorborder-danger-700, message text-sm text-danger-700 with role="alert"
Destructive buttonbg-danger-700 text-white hover:bg-danger-800
Module statusesavailable success-500, limited access warning-500, preview neutral-400, planned neutral-300
App dark modepositive #6ee7b7, negative #fda4af

Measured contrasts

WCAG 2.x ratios computed from the actual values. Thresholds: 4.5:1 for normal text (AA), 3:1 for large text (18.66 px bold or 24 px and up) and for interface elements, 7:1 for AAA. White text on button oranges is a brand choice.

White text on oranges (buttons)

Text stays white on every orange button. The contrast of ember-500 is a brand choice.
White text on oranges (buttons)
PreviewPairRatioLevelUsage
white #ffffff on ember-500 #ff8c422.31:1brand choiceLarge button
white #ffffff on ember-600 #f973162.80:1brand choiceLarge button hover
white #ffffff on ember-700 #ea580c3.56:1brand choiceSmall button
white #ffffff on ember-800 #c2410c5.18:1AASmall button hover

Orange used as text

Orange used as text
PreviewPairRatioLevelUsage
ember-800 #c2410c on white #ffffff5.18:1AAReference orange text
ember-800 #c2410c on ember-50 #fff9f54.96:1AAOrange chip
ember-800 #c2410c on ember-100 #fff2e84.71:1AAHighlighted plan
ember-900 #9a3412 on white #ffffff7.31:1AAAOrange text hover
ember-700 #ea580c on white #ffffff3.56:1large textFocus ring (indicator, 3:1 required)

Neutrals

Neutrals
PreviewPairRatioLevelUsage
neutral-900 #1c1917 on white #ffffff17.49:1AAAHeadings and main text
neutral-800 #292524 on white #ffffff15.17:1AAAChat text
neutral-800 #292524 on neutral-50 #fafaf914.52:1AAAChat frames
neutral-700 #44403c on white #ffffff10.27:1AAANavigation links
neutral-600 #57534e on white #ffffff7.63:1AAASecondary text
neutral-600 #57534e on neutral-100 #f5f5f46.99:1AAResting segment
neutral-500 #78716c on white #ffffff4.80:1AACaptions, resting icons
neutral-500 #78716c on neutral-50 #fafaf94.59:1AACaptions on calm frame
neutral-400 #a8a29e on white #ffffff2.52:1failPlaceholder text only
white #ffffff on neutral-900 #1c191717.49:1AAABlack button

State colors

State colors
PreviewPairRatioLevelUsage
success-800 #065f46 on success-50 #ecfdf57.29:1AAASuccess message
success-700 #047857 on white #ffffff5.48:1AASuccess text
warning-800 #92400e on warning-50 #fffbeb6.84:1AAWarning message
warning-700 #b45309 on white #ffffff5.02:1AAWarning text
danger-800 #991b1b on danger-50 #fef2f27.60:1AAAError message
danger-700 #b91c1c on white #ffffff6.47:1AAError text
info-800 #075985 on info-50 #f0f9ff7.09:1AAAInfo message
info-700 #0369a1 on white #ffffff5.93:1AAInfo text
white #ffffff on danger-700 #b91c1c6.47:1AADestructive button

App dark mode

App dark mode
PreviewPairRatioLevelUsage
#f2f2f2 on #14141416.46:1AAAText on the page
#f2f2f2 on #26262613.52:1AAAText on a panel
#d4d4d4 on #26262610.21:1AAAProse text
#bdbdbd on #2626268.06:1AAAdark neutral-600
#a3a3a3 on #1414147.30:1AAADark neutral-500 on the page
#a3a3a3 on #2626266.00:1AADark neutral-500 on a panel
ember-500 #ff8c42 on #2626266.54:1AAOrange text on dark panel
#6ee7b7 on #2626269.93:1AAADark success
#fda4af on #2626268.00:1AAADark error

Typography

Two brand families and one code family. Satoshi carries the logo and headings, Inter the interface and body text.

  • Aa

    Satoshi

    Logo and headings

    ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 & ? ! €

    Class font-satoshi. Local files in woff2 (weights 500 and 700) and otf; weight 700 is preloaded. Weights used: Bold 700 and Medium 500.

  • Aa

    Inter

    Interface and body text

    ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 & ? ! €

    Class font-sans, loaded by next/font in both products (variable --font-inter, display: swap). Weights used: Regular 400, Medium 500, Semibold 600.

Type families
FamilyRoleClassWeights
SatoshiLogo, headingsfont-satoshi500, 700
InterInterface, textfont-sans400, 500, 600
MonoCodefont-mono400, 500

Site scale

The site scale is written in site-container.ts and tested. Each sample below uses the actual constant: resize the window to see the switch from phone to desktop.

  • Page H1

    Fund, create, prospect.

    Phone
    40 px
    Desktop
    56 px (md)
    Weight
    Satoshi 700
    Line height
    1.04 then 1.02
    Tracking
    -0.02em

    max-w-[900px]

  • Product, Solutions, Pricing H1

    Fund, create, prospect.

    Phone
    40 px
    Desktop
    64 px
    Weight
    Satoshi 700
    Line height
    1.04 then 1.02
    Tracking
    -0.02em

  • Section H2

    Fund, create, prospect.

    Phone
    32 px
    Desktop
    44 px
    Weight
    Satoshi 700
    Line height
    1.08
    Tracking
    -0.02em

  • H3 (cards, questions)

    Fund, create, prospect.

    Phone
    24 px
    Desktop
    28 px
    Weight
    Satoshi 700
    Line height
    1.2
    Tracking
    -0.02em

  • Module card title

    Fund, create, prospect.

    Phone
    20 px
    Desktop
    20 px
    Weight
    Satoshi 700

  • Price (Pricing)

    0 €

    Phone
    56 px
    Desktop
    56 px
    Weight
    Satoshi 700
    Line height
    1
    Tracking
    -0.045em, tabular figures

  • Page header subtitle

    Tell us what is blocking you, Ember takes care of it.

    Phone
    17 px
    Desktop
    20 px
    Weight
    400
    Line height
    1.5
    Tracking
    neutral-600

  • Inner page intro

    An inner page starts with a short intro.

    Phone
    17 px
    Desktop
    20 px
    Weight
    400
    Line height
    1.6
    Tracking
    neutral-600, max-w-[720px]

  • FAQ question

    How long does the live session last?

    Phone
    18 px
    Desktop
    18 px
    Weight
    Satoshi 500
    Line height
    28 px

  • FAQ answer

    One hour, and not a minute of theory.

    Phone
    16 px
    Desktop
    16 px
    Weight
    400
    Line height
    1.65
    Tracking
    neutral-600

  • Navigation link

    Solutions

    Desktop
    15 px
    Weight
    500
    Tracking
    neutral-700

  • Mega menu entry

    Fund Your Growth

    A sourced financing file.

    Desktop
    title 15 px, text 13 px
    Weight
    Satoshi 500
    Line height
    24 / 20 px

  • Eyebrow (menu, columns)

    Resources

    Phone
    11 px
    Desktop
    11 px
    Weight
    600, uppercase
    Line height
    20 px
    Tracking
    +0.12em, neutral-500

    Reference for all eyebrows

  • Button

    Start for free

    Phone
    16 px (inherited) or 15 px
    Weight
    600

  • Footer link

    FAQ

    Phone
    15 px
    Weight
    400
    Line height
    24 px
    Tracking
    neutral-600

  • Legal notice

    Terms of use

    Phone
    12 px
    Weight
    400
    Tracking
    neutral-500

The home H1 is 40 px, 56 px from md and 64 px from lg, centered from md, max-w-[900px]. Pages checked at 768 px keep the phone scale up to 1,024 px thanks to SITE_H1_TABLET_OVERRIDE and SITE_H2_TABLET_OVERRIDE.

Text formatting rules

  • No orphan word: h1 to h4 in text-wrap: balance and hyphens: manual, p and li in text-wrap: pretty (#2573). Utility .text-balance, also available in the app.
  • Smoothing: -webkit-font-smoothing: antialiased in both apps.
  • Two-step headings (Solutions pages): the audience on its line, the promise below, non-breaking spaces before ":" and between the first two words.
  • Markdown emphasis: italic; quotes add no quotation marks.

Interface scale

A single scale for the app and site interface. Floor: 11 px for a non-essential label, 12 px for any useful text.
Interface scale
RoleSizePreviewClasses
Eyebrow, column label11 pxResourcestext-[11px] font-semibold uppercase tracking-[0.12em] text-neutral-500
Caption, chip, small button12 pxEdited yesterdaytext-xs
Dense text: table, email header, menu13 pxSubject: meetingtext-[13px]
Interface (default), button14 pxSavetext-sm
Messages, navigation and footer links15 pxHere is the plan proposed for your decision.text-[15px] leading-relaxed
Body, fields on phones16 pxWrite a one-pagertext-base
FAQ question18 pxHow long does the live session last?font-satoshi text-[18px] font-medium
Card, dialog, screen section title20 pxNew filefont-satoshi text-xl font-bold
Screen title24 then 30 pxSecond Brainfont-satoshi text-2xl font-bold md:text-[30px]
App home title30 pxWhat shall we build together?font-satoshi text-3xl font-bold tracking-tight
Code13 px, line height 1.6const total = 12;font-mono text-[13px] leading-[1.6]
Rule
Headings: the scale SITE_H1, SITE_H2, SITE_H3. Eyebrows: a single letter spacing, tracking-[0.12em]. Headings: tracking-[-0.02em]. Forbidden sizes: 8, 9, 10 px and half pixels.

Spacing

The scale is Tailwind's, in steps of 4 px: 1 = 4 px, 2 = 8 px, 4 = 16 px, 16 = 64 px.

The scale

  • p-14 px
  • p-28 px
  • p-312 px
  • p-416 px
  • p-624 px
  • p-832 px
  • p-1248 px
  • p-1664 px
  • p-28112 px
Rule
18 px icon: h-[18px] w-[18px].

Gutters

SITE_CONTAINER = mx-auto w-full max-w-[1280px] px-4 sm:px-6 lg:px-12: 16 px on phones, 24 px on tablets, 48 px on desktop.

Phone

< 640 px

16 px

Tablet

640 to 1,023 px

24 px

Desktop

≥ 1,024 px

48 px

Vertical rhythm of sections

SITE_SECTION_Y = 'py-16 md:py-28': 64 px on phones, 112 px from 768 px, for every public page section. Page header: pt-14 md:pt-20.

Preview at scale: top and bottom margin of a section

Phone
64 px
Desktop
112 px

Padding

Tinted areas are the padding, in px.

Live preview, measured padding

content
24 px

Site card, phone: p-6

content
32 px

Site card, desktop: md:p-8

content
20 px

Pricing card: p-5 sm:p-6

content
16 px

App card: p-4

content
12 px

Alert: px-4 py-3

Padding
SurfacePadding
Site: cardp-6 md:p-8
Site: pricing cardp-5 sm:p-6
Site: choice cardp-5
Site: mega menu columnp-6
App: cardp-4 (p-3 for a dense card)
App: alertpx-4 py-3
App: composerrow px-2.5 py-2 gap-1.5; frame px-4 md:px-8 pt-3

App screen

App screen rhythm
ElementValue
Screen marginspx-4 md:px-8
Gap between blocksspace-y-6 (24 px)
Inside a cardp-4 (16 px)
Page titlefont-satoshi text-2xl font-bold md:text-[30px]
Section titlefont-satoshi text-xl font-bold

Grid and breakpoints

Tailwind's breakpoints, with 1,024 px as the desktop threshold shared by the app and the site.

Breakpoints

To scale

xs
475 px
sm
640 px
md
768 px
lg
1024 px
xl
1280 px
2xl
1536 px
Breakpoints
ThresholdUsage
xsSmall phones (app)
sm24 px gutter, page header buttons at their natural size
mdOne column becomes two, 44 px section titles
lgDesktop threshold: full header menu, expanded app rail, compact targets
xlFour-column pricing grid
2xlLarge screens

Mobile rule

Shared mobile rule
SubjectPhone (< 640)Tablet (640 to 1,023)Desktop (≥ 1,024)
Gutter16 px24 px48 px
H140 px40 px56 to 64 px
H232 px32 px40 to 44 px
H324 px24 px28 px
Rhythm between sections64 px64 px112 px
Page header primary buttonfull width (w-full sm:w-auto)at its natural sizeat its natural size
Touch targets44 px44 pxat least 40 px
  • Full header menu from 1,024 px; below that, a full-screen mobile menu.
  • Card grids in one column below 768 px; no cropped image.

Containers and reading widths

Site container, 1,280 px at most

48
1,184 px usable
Containers and reading widths
WhereValue
Site contentSITE_CONTAINER: 1,184 px usable
Full-width sections beyond 1,920 pxSITE_CONTAINER_WIDE: max-w-[1440px]
Long text, intros, answersmax-w-[680px]
Headingsmax-w-[900px]
Conversation thread and composer (app)max-w-3xl
Bubbles (app)85% (user), 92% (assistant)
Pricing gridmd:grid-cols-2 xl:grid-cols-4
Footermd:grid grid-cols-4 gap-8

Radii

Five values, from the small control to the card, and the round one for chips.

  • rounded

    4 px

    Inline code

  • rounded-lg

    8 px

    Small controls, menu entries, burger button

  • rounded-xl

    12 px

    Buttons, fields, app cards, icon badges

  • rounded-2xl

    16 px

    Dialogs, floating menus, empty states

  • rounded-3xl

    24 px

    Site cards, composer, panels

  • rounded-full

    full

    Chips, round icon buttons, segmented controls

Rule
A 24 px block with a 1 px border that contains another: rounded-[calc(1.5rem-1px)]. Every rectangular button is rounded-xl; rounded-full is reserved for round icon buttons, chips and segmented controls.

Shadows and elevations

Three shadows for floating panels, and nothing elsewhere: not on buttons, not on cards, not on segmented controls, not on chips.

The levels

  • 0

    Flat

    none

    Buttons, cards, chips, segmented controls, cookie banner

  • 1

    shadow-menu

    0 8px 24px rgba(0,0,0,0.06)

    Menus, popovers, toasts

  • 2

    shadow-modal

    0 18px 48px rgba(41,37,36,0.08)

    Dialogs, mobile sheets, viewers

  • 3

    shadow-footer

    0 20px 60px rgba(88,48,20,0.12)

    Site footer card

Tokens

The active thumb of a segmented control is border border-neutral-200 bg-white, without shadow. Active dictation carries ring-4 ring-danger-500/20.

Borders

1 px everywhere. neutral-200 to separate, neutral-300 for a control, ember-500 for selection or hover.

  • Card

    border border-neutral-200

    1 px neutral-200; hover ember-500 (site) or neutral-300 (app)

  • Field

    border border-neutral-200

    1 px neutral-200; focus ember-700

  • Secondary button

    border border-neutral-300

    1 px neutral-300

  • Empty state

    border-dashed border-neutral-300

    1 px dashes

  • Underlined tab

    border-b-2 border-ember-500

    Active: 2 px ember-500

  • Selection

    border-2 border-ember-500

    Highlighted plan: 2 px ember-500

Site header: transparent bottom border, then neutral-200 after 24 px of scrolling. Dark mode: the light border becomes #3a3a3a. No pale orange border.

Icons

A single library: lucide-react, with a stroke of 2, using the h-* w-*syntax. Brand icons (LinkedIn, X, YouTube) are dedicated components.

Most used

  • Loader2
  • X
  • Check
  • Sparkles
  • FileText
  • Mail
  • ArrowRight
  • ChevronDown
  • Plus
  • Minus
  • ArrowUp
  • ArrowDown
  • Square
  • Search
  • Globe
  • Menu
  • Sun
  • Moon
  • CheckCircle2

Sizes

Live preview, real sizes

12 px
14 px
16 px
18 px
20 px
Icon sizes
SizeClassesUsage
12 pxh-3 w-3Chip icons, attachment spinner
14 pxh-3.5 w-3.5In 12 px text, language chevron
16 pxh-4 w-4Default size: buttons, menus, composer
18 pxh-[18px] w-[18px]App rail, pricing features
20 pxh-5 w-544 px icon buttons, burger, close, social, card icon
Rule
16 px by default; 20 px for 44 px icon buttons.

Stroke

Live preview, stroke of 2

24 px
32 px
40 px

The stroke is lucide's default: 2. No explicit strokeWidth.

Icon badge

Live preview

Site

h-11 w-11 rounded-xl bg-ember-50 text-ember-800 + 20 px icon

App

h-9 w-9 rounded-lg bg-neutral-50 text-ember-800 + 16 px icon

Rule
No icon or logo in an action button, except the loading spinner and the arrow of the two sign-up buttons.

Motion

A soft ease-out, no bounce, and two durations: 150 ms for hover, 280 ms for appearances. The same tokens serve the app and the site.

Replayable demos

Durations

Same distance, same curve: only the duration changes.

fast
150 ms
base
280 ms

Cascade

40 ms step, 240 ms ceiling, 6 px rise over 280 ms (motion-fade-up).

Hover and press of a filled button

On hover: 2 px lift and 1.02 scale-up over 280 ms. On press: 0.98 over 150 ms. Never a shadow. Move the pointer over it or press.

--motion-lift-y: -2px · --motion-lift-scale: 1.02 · --motion-press-scale: 0.98

Tokens

CSS variables and Tailwind classes from the shared preset. Click to copy.

Tailwind classes

duration-fast  duration-base  ease-motion  motion-reduce:transition-none

Motion templates

Motion templates
TemplateEffect
.transition-interactiveColor, background, border, transform, opacity, filter at --motion-fast
.hover-liftFilled buttons: on hover with a real pointer, translateY(-2px) scale(1.02) over 280 ms; on press scale(0.98) over 150 ms; never a shadow; excluded when disabled
.motion-fade-upEntrance with a 6 px rise
.motion-reveal-wordWord by word: 8 px and 6 px blur
.motion-dialog-inDialog: scale 0.97
.motion-sheet-inMobile sheet: 12 px
.motion-pop-inMenu: 150 ms
.motion-backdrop-inBackdrop
.motion-brand-inLogo entrance: 360 ms
.motion-delayed-inFade after 300 ms: discreet loading
.motion-curtainHeight expansion, from 0fr to 1fr
Siterotating chevron, sliding menu underline, grid-rows accordions, segmented thumb: all at 280 ms; mega menu: opens after 120 ms, closes after 200 ms

CTA highlight

Described here, not replayed: the design system page shows no highlight effect.
CTA highlight
ElementValue
Classember-primary-cta-highlight
Shine42% band, white gradient at 100° (peak 68%), skewX(-18°). Crosses between 4% and 20% of a 4 s ease-in-out loop, max opacity 0.88
Haloinset 0 0 13px rgb(255 255 255 / 48%), opacity from 0.18 to 0.52 over 2.5 s
DisabledAnimation off
Reduced motionShine frozen (width 100%, opacity 0.12), halo at 0.24
Buttons concernedOnly three: "Start for free" in the header, "Choose Pro" and "Build my team"
Rule
One highlighted button per screen. Every other button stays solid, without shine, halo or shadow.

Reduced motion

  • All entrances are cut, transitions drop to 0.01 ms, no movement on hover or press. Incognito mode keeps a 200 ms fade, confetti is hidden, slides switch with a 120 ms fade.
  • motion-reduce:transition-none in all transition classes; CTA shine frozen; motion-safe:animate-hero-rise.
  • scroll-behavior: smooth on html.
Rule
The demos on this page respect the system preference: try "Reduce motion" in your system.