Ember.Ember

Patterns

Page patterns

The assemblies that make up pages: header, dropdown menus, page headers, pricing cards, FAQ, footer and app shell.

Page headers

The home page fills the screen height; inner pages start with a title, an intro and an action.

Page headers

Site

Live preview (inner page)

A short, precise title.

The intro explains the page in two lines, without jargon.

Start for freeDiscover
Page headers
Page headerValues
Homemin-h-[calc(100svh-64px)] md:min-h-[calc(100svh-72px)]; H1 centered from md; subtitle mt-5 md:mt-7; composer mt-8 md:mt-10
Inner pageSITE_H1_LARGE; intro 17 then 20 px; pt-14 md:pt-20; the next section carries py-16 md:py-28
Section rhythmSITE_SECTION_Y = py-16 md:py-28 (64 then 112 px)
Primary buttonfull width below 640 px: SITE_CTA_WIDTH = w-full sm:w-auto

Pricing cards

Four plans in a grid: Free, Starter, Pro, Max. Only Pro is highlighted, with a 2 px border and an ember-100 background. There is no "Recommended" badge.

Pricing cards

Site

Live preview (faithful reproduction, without prices or shadow: no shadow behind a button)

Free

Price: Satoshi 56 px

Choose

Features: 18 px icons, 1.6 stroke.

Starter

Price: Satoshi 56 px

Choose

Features: 18 px icons, 1.6 stroke.

Pro

Price: Satoshi 56 px

Choose

Features: 18 px icons, 1.6 stroke.

Max

Price: Satoshi 56 px

Choose

Features: 18 px icons, 1.6 stroke.

Pricing card anatomy
ElementValue
Gridmd:grid-cols-2 xl:grid-cols-4
Cardrounded-3xl border hover:-translate-y-1 (280 ms); standard border-neutral-200 bg-neutral-200/60 xl:h-[770px]; highlighted border-2 border-ember-500 bg-ember-100 xl:-mt-6 xl:h-[794px]
Card toprounded-[calc(1.5rem-1px)] bg-white p-5 sm:p-6, no shadow
Namefont-satoshi text-2xl font-bold
PriceSatoshi 56 px, tracking-[-0.045em], digit rolling animation; "excl. tax / month" text-xs
Featureslucide icons size-[18px] stroke-[1.6] text-neutral-700
Badgethe only badge: "N months free"
CTAPro and Team with highlight; Free in text-sm with ember-700 ring; secondary border-neutral-300 bg-white hover:bg-neutral-50

FAQ

An exclusive-open accordion, openable by anchor, without details or summary.

FAQ

Site

Live preview (the actual Faq component)

1h. We get to the point, no endless slides, no theory. We work together.

FAQ anatomy
ElementValue
Behaviorbutton aria-expanded + inert region; one answer at a time; openable by anchor #…
Titlefont-satoshi text-[32px] font-bold sm:text-4xl, centered
Listmax-w-2xl border-t border-neutral-200
Elementborder-b border-neutral-200 scroll-mt-28
Questionmin-h-14 gap-5 py-5 font-satoshi text-[18px] font-medium leading-7, focus ring-inset ring-ember-700
Answerpb-6 pr-10 text-[16px] leading-[1.65] text-neutral-600
Chevronsize-5, rotates

Footer

The usual site footer: a white card placed on the end-of-page gradient. The "Brand Guidelines" link is in the Resources column.

Footer

Site

Live preview (schematic reproduction)

Ember. Your AI team for entrepreneurs.

Product

  • Second Brain
  • Creation

Solutions

  • Pricing
  • FAQ

Resources

  • In the press
  • Brand Guidelines

About us

  • The story and the team
  • Our vision

Terms of use · Privacy · Manage cookies

Footer anatomy
ElementValue
Wrapperborder-y border-neutral-200 bg-white with closing HeroGradient and optional HomeFinalCta (disabled on /design: showFinalCta={false})
Cardmx-3 mb-8 rounded-3xl border border-white bg-white shadow-footer md:mx-8; content max-w-[1440px] px-4 pb-6 pt-10 sm:px-6 lg:px-12 md:pt-14
Brand column64 px symbol, "Ember. Your AI team for entrepreneurs." (Satoshi 24 px), "Back to top ↑"
ColumnsProduct, Solutions, Resources, About us: md:grid grid-cols-4 gap-8, headings text-sm font-semibold, accordions on mobile, links text-[15px] leading-6 text-neutral-600 hover:text-neutral-900
Socialh-11 w-11 rounded-full border border-neutral-200, 20 px icons
Language"Français / English", active underline decoration-ember-500 underline-offset-4
Legal bannertext-xs text-neutral-500

Brand Guidelines link, Resources column

{ label: tFooter('designSystem'), href: `/${locale}${LINKS.DESIGN_SYSTEM}` }

App shell

A 56 px top bar, a collapsible left rail, and a gray content area.

App shell

App

Live preview (faithful reproduction at scale)

Ember.

HomeSecond BrainFund Your GrowthCreationLead intelligenceVisibility
Top bar: 56 px
Content: bg-neutral-50
App shell anatomy
ElementValue
Rootflex h-[100dvh] overflow-hidden bg-white
Top barh-14 (56 px) border-b border-neutral-200 px-6
Contentsbg-neutral-50
Railw-[13.5rem] (216 px) expanded, w-20 (80 px) collapsed; border-r border-neutral-200/70 bg-white/90 backdrop-blur-xl, 300 ms width transition
Rail entrymin-h-11 gap-2.5 px-2.5 py-2 rounded-lg expanded, h-11 w-11 collapsed; 18 px icon; active bg-ember-50 text-ember-800 + h-5 w-1 rounded-r-full bg-ember-500 bar; rest text-neutral-600 hover:bg-neutral-100
Conversations panelbg-neutral-50, 288 px by default (220 to 480, resizable)
Avatarh-8 w-8 rounded-full bg-ember-600 text-xs font-semibold text-white
Other8 px scrollbar (.custom-scrollbar, .no-scrollbar); glass effect .glass bg-white/70 backdrop-blur-xl border border-neutral-200/50
Rule
bg-ember-50 text-ember-800, bar bg-ember-500.