Magentix Studio Design System

magentix.studio

PROEngine v4

Visual system

100% confidence

hero-displayDesign is intelligence made visibleFraunces72px / 350 / 1.1

display-lgDesign is intelligence made visibleFraunces58px / 350 / 1.05

display-mdDesign is intelligence made visibleFraunces44px / 350 / 1.05

title-lgDesign is intelligence made visibleFraunces33px / 350 / 1.1

title-mdDesign is intelligence made visibleFraunces24.9px / 350 / 1.1

leadDesign is intelligence made visibleHanken Grotesk19.2px / 400 / 1.3

mono-lgDesign is intelligence made visibleSpace Mono19px / 400 / 1.4

body-lgDesign is intelligence made visibleHanken Grotesk17px / 400 / 1.4

bodyDesign is intelligence made visibleHanken Grotesk16px / 400 / 1.4

buttonDesign is intelligence made visibleSpace Grotesk16px / 500 / 1.4

nav-linkDesign is intelligence made visibleHanken Grotesk15px / 400 / 1.4

body-smDesign is intelligence made visibleHanken Grotesk15px / 400 / 1.5

captionDesign is intelligence made visibleHanken Grotesk14px / 400 / 1.4

mono-labelDesign is intelligence made visibleSpace Mono13px / 400 / 1.4

100% confidence

header-inner-gap
2px

header-inner-mobile-gap
2px

button-ghost-padding-x
12px

card-grid-gap
16px

card-3-grid-gap
16px

footer-landing-gap
56px

footer-landing-mobile-column-gap
56px

footer-landing-mobile-gap
56px

footer-inner-gap
56px

footer-inner-mobile-column-gap
56px

footer-inner-mobile-gap
56px

section-padding-y
80px

footer-landing-column-gap
80px

footer-inner-column-gap
80px

header-inner-inner-max-width
180px

header-inner-mobile-inner-max-width
180px

footer-landing-inner-max-width
1080px

footer-landing-mobile-inner-max-width
1080px

footer-inner-inner-max-width
1080px

footer-inner-mobile-inner-max-width
1080px

100% confidence

xs · 7px

sm · 12px

md · 15px

lg · 16px

xl · 22px

2xl · 24px

3xl · 64px

full · 9999px

Components

Button4

100% match

ghost · desktop

At rest100% match34 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

91% match

primary · desktop

It renders 96% like the site, below the 97% bar.

At rest96% match25 measurements match

Original

Render

Hover96% match22 measurements match

Original

Render

Focus91% match22 measurements match

Original

Render

Recipe in DESIGN.md

93% match

primary · desktop

On focus, it renders 93% like the site, below the 97% bar.

At rest97% match25 measurements match

Original

Render

Hover97% match22 measurements match

Original

Render

Focus93% match22 measurements match

Original

Render

Recipe in DESIGN.md

93% match

secondary · desktop

On focus, it renders 93% like the site, below the 97% bar.

At rest100% match25 measurements match

Original

Render

Hover98% match22 measurements match

Original

Render

Focus93% match22 measurements match

Original

Render

Recipe in DESIGN.md

Card3

100% match

desktop

At rest100% match77 measurements match

Original Card on the site, at rest — Original

Isolated render of Card, at rest — Render

At rest, instance 2100% match77 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match77 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match77 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

95% match

desktop

It renders 100% like the site, below the 96% bar.

At rest100% match180 measurements match

Original Card (2) on the site, at rest — Original

Isolated render of Card (2), at rest — Render

Focus100% match18 measurements match

Original Card (2) on the site, focus — Original

Isolated render of Card (2), focus — Render

At rest, instance 2100% match180 measurements match

Original

No image stored

Render

No image stored

At rest, instance 395% match180 measurements match

Original

No image stored

Render

No image stored

At rest, instance 495% match180 measurements match

Original

No image stored

Render

No image stored

At rest, instance 595% match180 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match326 measurements match

Original Card (3) on the site, at rest — Original

Isolated render of Card (3), at rest — Render

At rest, instance 2100% match326 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match326 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Extra4

100% match

desktop

At rest100% match44 measurements match

Original Hero on the site, at rest — Original

Isolated render of Hero, at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match198 measurements match

Original Navigation on the site, at rest — Original

Isolated render of Navigation, at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match34 measurements match

Original Product thumbnail button on the site, at rest — Original

Isolated render of Product thumbnail button, at rest — Render

Focus100% match18 measurements match

Original Product thumbnail button on the site, focus — Original

Isolated render of Product thumbnail button, focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match34 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

Header4

100% match

desktop

At rest100% match253 measurements match

Original Header (inner) on the site, at rest — Original

Isolated render of Header (inner), at rest — Render

Focusnot checked

Original Header (inner) on the site, focus — Original

Isolated render of Header (inner), focus — Render

Focus on cta100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on logo100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

It renders 100% like the site, below the 96% bar.

At rest100% match292 measurements match

Original Header (landing) on the site, at rest — Original

Isolated render of Header (landing), at rest — Render

Hovernot checked

Original Header (landing) on the site, hover — Original

Isolated render of Header (landing), hover — Render

Focusnot checked

Original Header (landing) on the site, focus — Original

Isolated render of Header (landing), focus — Render

Focus on cta 2100% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta 2100% match22 measurements match

Original

No image stored

Render

No image stored

Focus on cta100% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta100% match22 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

At rest100% match204 measurements match

Focusnot checked

Focus on logo100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on menu toggle100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

98% match

mobile

Group 4 y is 233px, the site has 220px; Group 4 height is 178px, the site has 203px and 9 more.

At rest99% match11 of 292 measurements differ

Hovernot checked

Focusnot checked

Focus on cta 299% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta 298% match22 measurements match

Original

No image stored

Render

No image stored

Focus on cta99% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta99% match22 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Footer4

100% match

desktop

At rest100% match627 measurements match

Original Footer (inner) on the site, at rest — Original

Isolated render of Footer (inner), at rest — Render

Hovernot checked

Original Footer (inner) on the site, hover — Original

Isolated render of Footer (inner), hover — Render

Focusnot checked

Original Footer (inner) on the site, focus — Original

Isolated render of Footer (inner), focus — Render

Focus on cta100% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta100% match22 measurements match

Original

No image stored

Render

No image stored

Hover on link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match627 measurements match

Original Footer (landing) on the site, at rest — Original

Isolated render of Footer (landing), at rest — Render

Hovernot checked

Original Footer (landing) on the site, hover — Original

Isolated render of Footer (landing), hover — Render

Focusnot checked

Original Footer (landing) on the site, focus — Original

Isolated render of Footer (landing), focus — Render

Hover on link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link100% match22 measurements match

Original

No image stored

Render

No image stored

Hover on link100% match22 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

At rest100% match627 measurements match

Hovernot checked

Focusnot checked

Focus on cta100% match22 measurements match

Original

No image stored

Render

No image stored

Hover on cta100% match22 measurements match

Original

No image stored

Render

No image stored

Hover on link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

At rest100% match627 measurements match

Hovernot checked

Focusnot checked

Hover on link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link100% match22 measurements match

Original

No image stored

Render

No image stored

Hover on link100% match22 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

DESIGN.md

Magentix Studio

Overview

Magentix Studio reads like a well-kept studio notebook: calm, editorial and near-monochrome. A cool off-white canvas, Studio Ink (ink, #18181B) text and a light-weight display serif do almost all the work. Colour is withheld on purpose. The only chromatic note in the page palette is Margin Blue (accent-link, #3563AD), and it shows up on inline links only. The personality comes from type contrast and the isometric cube illustrations, not from colour.

Density is low and generous. Sections breathe on an 80px vertical rhythm, and cards carry large internal padding with big soft radii. Long stretches of empty canvas are part of the composition. Hierarchy comes from typeface switching more than from weight. Fraunces at weight 350 with negative tracking sets every headline. Hanken Grotesk at 400 carries reading text. Space Mono marks meta labels, and Space Grotesk 500 is reserved for the wordmark. Nothing on the site is bold.

Depth is tonal and atmospheric. White cards (card, #FFFFFF) sit on the off-white surface and lift with a single faint, diffuse shadow. The floating navigation capsule is a translucent grey glass panel with a 24px backdrop blur. Hairline borders are effectively absent from the UI chrome. Buttons carry a 1px transparent border that only becomes visible as a grey ring on focus.

Key Characteristics:

Near-monochrome palette: ink #18181B on surface #F8F8F9, with grey tiers surface-raised #EDEDF0 and surface-strong #DCDCE0.
Fraunces display serif at weight 350 for every heading from title-md (24.9px) to hero-display (72px), always negatively tracked.
Three weights only: 350 (serif), 400 (text), 500 (Space Grotesk wordmark).
Space Mono micro-labels (mono-label, 13px) on tinted surface-raised chips give a technical, builder's voice.
Soft geometry: 15px controls, 22px cards, 7px chips, with occasional 64px oversized corners on media panels.
Elevation is one ambient shadow (#0A0A0C0F 0px 4px 20px 0px) plus frosted glass (blur(24px) saturate(1.5)) on the nav capsule.
Primary actions are solid ink rectangles with white text. Secondary actions are translucent ink tints with an 8px blur.
A real dark theme ships alongside light, and it swaps the same roles.

Colors

The palette is a cool zinc greyscale anchored on one ink colour. Blue is the only hue, and it is reserved for inline links. The site uses no gradients; depth inside illustrations comes from flat isometric face shading, not colour ramps.

Ink & Accent

Studio Ink (primary / ink, #18181B): all body and heading text, plus the solid fill of primary CTAs (button-primary (flagged: the render matched 96% of the original pixels, below the 97% required after 2 correction attempts), footer-inner-cta). It is never pure black.
Margin Blue (accent-link, #3563AD): inline text links only. It appeared 4 times on 1 page, so keep it rare. Never use it as a button fill or a surface.

Surface

Paper (surface, #F8F8F9): the page canvas behind everything (header-landing-group-2).
On-Dark (on-dark, #F8F8F9): text placed on an ink fill. It shares its hex with surface.
Bone (surface-raised, #EDEDF0): inset panels and chips. Examples are the illustration well of product-thumbnail-button, the badge card-2-badge, the meta chip card-3-text and the small tiles card-3-group-4.
Fog (surface-strong, #DCDCE0): the strongest grey tier. At 60% alpha (#DCDCE099) it forms the glass capsule behind the nav (navigation-group, header-inner-group).

Text

Studio Ink (ink, #18181B): primary text. The hero lead is set at 70% alpha (#18181BB3) on header-landing-inner-2.
Slate (muted, #6B6B70): secondary copy, card bodies (card-body, card-3-body), footer column headings (footer-inner-text) and the second half of the wordmark (header-inner-logo-text-2).

Hairlines & Borders

Fog Hairline (hairline, #DCDCE0): the only hairline colour. Borders are used sparingly; most separation is tonal.

Component & State Colors

These were measured on components, not in page sampling.

Card White (#FFFFFF): the fill of card, card-3 and card-2-group-6, and the active-tab pill header-inner-group-3. It is also the text colour on ink buttons.
Ink Tint (#18181B12): the translucent fill of button-secondary (flagged: the render matched 93% of the original pixels, below the 97% required on focus after 2 correction attempts). It deepens to #18181B24 on hover (button-secondary-hover).
Focus Grey (focus-ring, #A1A1A1): the focus treatment on filled buttons. The border becomes 1px solid #A1A1A1 and a 3px ring of #A1A1A180 appears.
Focus Cyan (#42B5DC4D): the 3px focus ring on transparent controls (button-ghost, theme-toggle, header-inner-link, product-thumbnail-button).

The dark theme inverts the same roles rather than restyling anything. Text flips to a pale grey (#EDEDEF) and muted copy to #98989F. The canvas becomes a near-black #17171A, and raised panels and chips become #2B2B30. The few borders move to #38383E, and the link accent lightens to #86A8E6 to hold contrast. Because every role keeps its slot, the system is clearly built on role-named variables swapped per theme, with geometry, type and elevation left untouched.

Dark Mode

The dark values below were measured with the dark color scheme forced on the page; the light values are the page's normal render.

Role	Light	Dark
Surface	`surface-raised`	#2B2B30
Surface (secondary)	`on-dark`	#17171A
Text	`primary`	#EDEDEF
Text (secondary)	`muted`	#98989F
Dark only	not observed	#86A8E6
Dark only	not observed	#38383E

Typography

Font Family

Fraunces (variable serif): every headline and display line, always at weight 350. Italics are used for emphasis inside the hero headline.
Hanken Grotesk (grotesque sans): the workhorse. It sets body, lead copy, navigation links, footer links and button labels.
Space Mono (monospace): meta text such as badges, status chips, dates and footer fine print. It carries the technical, code-like voice.
Space Grotesk (geometric sans, 500): the button token. On the page it is measured on the wordmark (header-inner-inner, 16px / 500 / -0.4px). Measured button labels actually use Hanken Grotesk 15px at 400 (button-primary).

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`hero-display`	72px	350	1.1	-1.3px	Landing hero headline (Fraunces)
`display-lg`	58px	350	1.05	-0.58px	Page H1 on inner pages (`hero-title`)
`display-md`	44px	350	1.05	-0.58px	Section H2
`title-lg`	33px	350	1.1	-0.33px	Large card titles (`card-2-title`)
`title-md`	24.9px	350	1.1	-0.2px	Feature card titles (`card-title`)
`lead`	19.2px	400	1.3	0.096px	Hero and page intro copy (`hero-body`)
`mono-lg`	19px	400	1.4	normal	Large monospace display spans
`body-lg`	17px	400	1.4	normal	Default root text size
`body`	16px	400	1.4	normal	Card body paragraphs (`card-body`)
`button`	16px	500	1.4	-0.4px	Space Grotesk wordmark / UI label
`nav-link`	15px	400	1.4	0.075px	Nav and footer links
`body-sm`	15px	400	1.5	normal	Compact paragraphs (`card-3-body`)
`caption`	14px	400	1.4	normal	Footer column headings (`footer-inner-text`)
`mono-label`	13px	400	1.4	0.075px	Badges, chips, footer fine print

Principles

Three weights, no bold. The system uses 350 for Fraunces, 400 for Hanken Grotesk and Space Mono, and 500 only for Space Grotesk. Do not introduce 600 or 700. Emphasis comes from switching family or setting the serif in italic.
Tracking scales with size. Fraunces is always tracked negative: -1.3px at 72px, -0.58px at 58px and 44px, -0.33px at 33px, -0.2px at 24.9px. Small sans and mono text gets a hair of positive tracking (0.075px on nav-link and mono-label, 0.096px on lead).
Line-height tightens with size. Display lines run 1.05–1.1 and reading text 1.4. body-sm opens to 1.5 for narrow card columns.
The footer statement sits off-ladder. It is 42px Fraunces (footer-inner-inner), between display-md and title-lg. Treat it as a one-off.

Note on Font Substitutes

All four families are open-source Google Fonts, so no substitution is needed. Load Fraunces as the variable font so weight 350 renders exactly. A static 300 or 400 cut will read noticeably lighter or heavier. If you must fall back, use Georgia for Fraunces and keep the negative tracking. Use system-ui for the grotesques and ui-monospace for Space Mono, matching the fallback stacks measured in the recipes.

Layout

Spacing System

No base step was extracted. Spacing is expressed as measured tokens:

Token	Value	Read on
`section-padding-y`	80px	Vertical rhythm between page sections (measured on the page, not a component)
`footer-inner-column-gap` / `footer-landing-column-gap`	80px	Gap between the statement column and the link columns of the desktop footer
`footer-inner-gap` / `footer-landing-gap`	56px	Gap between the footer link groups (`footer-inner-column-2`)
`footer-inner-mobile-column-gap` / `footer-landing-mobile-column-gap`	56px	The footer column gap at mobile
`footer-inner-mobile-gap` / `footer-landing-mobile-gap`	56px	Link-group gap at mobile
`card-grid-gap`	16px	Gutter of the feature `card` grid
`card-3-grid-gap`	16px	Gutter of the `card-3` work grid
`button-ghost-padding-x`	12px	Horizontal padding of icon/ghost buttons
`header-inner-gap` / `header-inner-mobile-gap`	2px	Gap between tabs inside the nav capsule

Large structural gaps (80px, 56px) contrast with tight component gaps (16px, 2px). That contrast is the system.

Grid & Container

Content containers cap at 1080px (footer-inner-inner-max-width, footer-landing-inner-max-width). The same value holds on mobile (footer-inner-mobile-inner-max-width).
The wordmark group inside the nav is capped at 180px (header-inner-inner-max-width).
Card grids use equal-width columns with a 16px gutter (card-grid-gap, card-3-grid-gap).
The footer splits into a statement-and-CTA column on the left and link columns on the right.
The process section uses a split text-left, image-right layout.
The hero is a centred single column.

Whitespace Philosophy

Whitespace is the primary separator. Sections are not divided by rules or colour bands; each sits 80px (section-padding-y) from the next on the same surface canvas. Inside the footer, 80px and 56px gaps keep the statement isolated from the link lists. Within grids, gutters shrink to 16px, so cards read as one set while sections read as distinct chapters. Do not fill the empty canvas: the long quiet stretches around the hero are intentional.

Measured Layout

Every spacing token restates a measurement of a verified component recipe, or the step those measurements share. section-padding-y is measured directly on the page sections and feeds no step.

section-padding-y: 80px (vertical padding repeated on the page sections: 1 section edge on 1 page)
footer-landing-column-gap: 80px (footer-landing, column gap of the footer-landing-columns grid)
footer-landing-gap: 56px (footer-landing, gap of footer-landing-column-2)
footer-landing-inner-max-width: 1080px (footer-landing, max width of footer-landing-columns)
footer-landing-mobile-column-gap: 56px (footer-landing-mobile, column gap of the footer-landing-mobile-columns grid)
footer-landing-mobile-gap: 56px (footer-landing-mobile, gap of footer-landing-mobile-column-2)
footer-landing-mobile-inner-max-width: 1080px (footer-landing-mobile, max width of footer-landing-mobile-columns)
header-inner-gap: 2px (header-inner, gap of header-inner-group-2)
header-inner-inner-max-width: 180px (header-inner, max width of header-inner-inner)
footer-inner-column-gap: 80px (footer-inner, column gap of the footer-inner-columns grid)
footer-inner-gap: 56px (footer-inner, gap of footer-inner-column-2)
footer-inner-inner-max-width: 1080px (footer-inner, max width of footer-inner-columns)
header-inner-mobile-gap: 2px (header-inner-mobile, gap of header-inner-mobile-group-2)
header-inner-mobile-inner-max-width: 180px (header-inner-mobile, max width of header-inner-mobile-inner)
footer-inner-mobile-column-gap: 56px (footer-inner-mobile, column gap of the footer-inner-mobile-columns grid)
footer-inner-mobile-gap: 56px (footer-inner-mobile, gap of footer-inner-mobile-column-2)
footer-inner-mobile-inner-max-width: 1080px (footer-inner-mobile, max width of footer-inner-mobile-columns)
card-grid-gap: 16px (card, column gap of the grid its instances sit in)
card-3-grid-gap: 16px (card-3, column gap of the grid its instances sit in)
button-ghost-padding-x: 12px (button-ghost, horizontal padding of the root)

The card grid lays out in 4 columns; the footer in 2 columns; the card-3 grid in 3 columns at desktop.

Elevation & Depth

Depth on Magentix Studio is built in three layers: tonal surface steps, one faint diffuse shadow, and frosted glass on floating chrome. Every lift is low-contrast and wide-radius, so nothing reads as a hard drop.

Level	Treatment	Use
0 · Canvas	Tonal only: Mist (`surface`, #F8F8F9) page fill, no lift	Page background behind everything (`header-landing-group-2`, #F8F8F9)
0 · Inset panel	Tonal step down to Fog (`surface-raised`, #EDEDF0), no lift	Illustration wells and chips inside white cards: `product-thumbnail-button` (#EDEDF0, 16px radius), `card-3-button`, `card-3-text`, `card-3-group-4`, `card-2-badge`
0 · Latent hairline	`1px solid transparent` border reserved on the control, invisible at rest	`button-primary`, `button-secondary`, `footer-landing-link`, `footer-inner-cta`. The border slot exists so focus can paint it without layout shift
1 · Ambient card shadow	`transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0A0A0C0F 0px 4px 20px 0px`	White (#FFFFFF) cards on the Mist canvas: `card` (22px radius), `card-3` (22px radius), `card-2-group-3` and `card-2-group-6` inside `card-2` (flagged: the render came out 3100 px shorter than the original (instance 1) after 2 correction attempts)
1 · Tight pill shadow	`transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #00000014 0px 0.98px 11.74px 0px`	The white active-tab pill inside the nav capsule (`header-inner-group-3`, #FFFFFF, 15px radius)
2 · Frosted capsule	`backdrop-filter: blur(24px) saturate(1.5)` over a translucent #DCDCE099 fill, plus the ambient `#0A0A0C0F 0px 4px 20px 0px` shadow	The fixed floating nav: `navigation-group`, `header-inner-group`, `header-inner-mobile-group` (22px radius, 8px padding)
2 · Frosted button	`backdrop-filter: blur(8px)` over a translucent #18181B12 fill (#18181B24 on hover)	Secondary CTAs: `button-secondary` (flagged: the render matched 93% of the original pixels, below the 97% required on focus after 2 correction attempts), `header-landing-cta-2`, `header-landing-mobile-cta-2`
Focus ring (neutral)	`#A1A1A180 0px 0px 0px 3px` ring plus border switched to `1px solid #A1A1A1` (Focus Grey, `focus-ring`, #A1A1A1)	Filled CTAs: `button-primary`, `button-primary-2`, `button-secondary`, `footer-landing-link`, `footer-inner-cta`
Focus ring (cyan)	`#42B5DC4D 0px 0px 0px 3px` ring, no border change	Transparent icon and nav controls: `button-ghost`, `theme-toggle`, `product-thumbnail-button`, `header-inner-logo`, `header-inner-link`, `header-inner-mobile-menu-toggle`

Shadow philosophy. Shadows are part of this system, and they do one job: they separate pure-white content from the off-white canvas. There are exactly two box-shadows. The ambient #0A0A0C0F 0px 4px 20px 0px (about 6% near-black, 20px blur, 4px drop) goes on every card and the nav capsule. The tighter #00000014 0px 0.98px 11.74px 0px is reserved for the small active pill sitting inside that capsule.

Both are written as five-layer stacks whose first four layers are transparent. Keep that shape so focus rings can occupy the fourth slot without overwriting the lift.

Do not darken these shadows, stack them, or add hard hairline borders around cards. Separation comes from white-on-Mist contrast plus the soft halo. Inner hierarchy steps down tonally to surface-raised instead of up via shadow.

Blur is the second elevation device and belongs only to floating or overlaying chrome. The nav capsule uses blur(24px) saturate(1.5) and secondary buttons use blur(8px). Both sit on translucent fills, so never swap them for opaque colors.

Shapes

Border Radius Scale

Token	Value	Use
`rounded.xs`	7px	Small tiles and chips inside work cards (`card-3-group-4`)
`rounded.sm`	12px	Observed on one page; no recipe carries it. Reserve for small inset elements
`rounded.md`	15px	The control radius: every button (`button-primary`, `button-secondary`, `button-ghost`), nav links (`navigation-link`, `header-inner-link`), the active nav pill (`header-inner-group-3`), badges (`card-2-badge`, `card-3-text`)
`rounded.lg`	16px	Illustration wells inside cards (`product-thumbnail-button`, `card-3-button`)
`rounded.xl`	22px	Cards (`card`, `card-3`) and the nav capsule (`navigation-group`, `header-inner-group`)
`rounded.2xl`	24px	Floating white inset panels (`card-2-group-6`)
`rounded.3xl`	64px	Oversized media corners (`card-2-group-3`), such as the big rounded corner on the process imagery
`rounded.full`	9999px	True pills and circles; seen sparingly on the page

The geometry is soft and nested.

Nesting rule. Containers get larger radii than the controls inside them: a 22px card holds a 16px well, which holds 7px chips. The nav capsule at 22px holds 15px tabs, separated by its 8px padding.
Buttons are not pills. They are 15px rounded rectangles. rounded.full belongs to genuinely circular or pill elements only.
Corners stay round. Squared corners never appear in the UI.
Angular art is the counterpoint. The crisp isometric cube illustrations supply the angles, and they read clearly because every container around them is rounded.

Components

Each component below was distilled from the live page: the recipe is a standalone, placeholder-filled reproduction with literal values, and every frontmatter key named in the anatomy carries the same measurements. A verified component reproduced the original in every check; a flagged one is shipped with the reason it did not; one marked not verifiable could not be compared with the original, which says nothing about the recipe.

Button, primary

Verification: flagged, the render matched 96% of the original pixels, below the 97% required after 2 correction attempts.

Anatomy

button-primary: the component root, a <a> (.c-button-primary), 12-character label

Recipe

HTML · CSS

<div class="c-button-primary-scope">
  <a class="c-button-primary" href="#">lorem ipsum</a>
</div>

.c-button-primary-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-button-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B;
  background-clip: padding-box;
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  text-align: center;
  white-space: nowrap;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-button-primary:hover {
  opacity: 0.85;
}

.c-button-primary:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

hover: opacity 0.85
focus: border 1px solid #A1A1A1, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px, outline none

Button, secondary

Verification: flagged, the render matched 93% of the original pixels, below the 97% required on focus after 2 correction attempts.

Anatomy

button-secondary: the component root, a <a> (.c-button-secondary), 12-character label

Recipe

HTML · CSS

<div class="c-button-secondary-scope">
  <a class="c-button-secondary" href="#">lorem ipsum</a>
</div>

.c-button-secondary-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-button-secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B12;
  background-clip: padding-box;
  color: #18181B;
  border: 1px solid transparent;
  border-radius: 15px;
  backdrop-filter: blur(8px);
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  text-align: center;
  white-space: nowrap;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-button-secondary:hover {
  background-color: #18181B24;
}

.c-button-secondary:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

hover (button-secondary-hover): background-color #18181B24
focus: border 1px solid #A1A1A1, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px, outline none

Card

Verification: verified against the live page at desktop.

Anatomy

Group: 4 instances in a 4-column grid, 16px gap; the recipe carries the values they all share
card: the component root, a <div> (.c-card)
card-group: inner flex row (.c-card__group)
card-icon: icon placeholder, 16px (.c-card__icon)
card-title: heading, 15 characters (.c-card__title)
card-body: label text, 130 characters (.c-card__body)

Recipe

HTML · CSS

<div class="c-card-scope">
  <div class="c-card">
    <div class="c-card__group">
      <span class="c-card__icon" aria-hidden="true"></span>
    </div>
    <h3 class="c-card__title">lorem ipsum dol</h3>
    <p class="c-card__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing eli</p>
  </div>
</div>

.c-card-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-card {
  display: inline-flex;
  flex-direction: column;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 32px;
  position: relative;
  background-color: #FFFFFF;
  color: #18181B;
  border-radius: 22px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0A0A0C0F 0px 4px 20px 0px;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-card__group {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
}

.c-card__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix3d(0.885139, -0.322726, 0.335226, -0.00465592, 0.156074, 0.884582, 0.439495, -0.0061041, -0.438371, -0.336694, 0.833347, -0.0115743, 0, 0, 0, 1);
}

.c-card__title {
  display: block;
  box-sizing: border-box;
  margin: 24px 0px 0px;
  font-family: Fraunces, "Fraunces Fallback", Georgia, serif;
  font-size: 24.9px;
  font-weight: 350;
  line-height: 27.39px;
  letter-spacing: -0.2px;
}

.c-card__body {
  display: block;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  margin: 12px 0px 0px;
  color: #6B6B70;
  font-size: 16px;
  line-height: 22.4px;
}

States

No hover or focus change was observed.

Card (2)

Verification: flagged, the render came out 3100 px shorter than the original (instance 1) after 2 correction attempts.

Anatomy

Group: 5 instances in a 1-column grid; the recipe carries the values they all share
card-2: the component root, a <div> (.c-card-2)
card-2-group: inner grid (.c-card-2__group)
card-2-group-2: inner block (.c-card-2__group-2)
card-2-badge: label text, 4 characters (.c-card-2__badge)
card-2-title: heading, 31 characters (.c-card-2__title)
card-2-body: label text, 157 characters (.c-card-2__body)
card-2-group-3: inner block (.c-card-2__group-3)
card-2-group-4: inner block (.c-card-2__group-4)
card-2-media: image placeholder, 817x647px (.c-card-2__media)
card-2-group-5: inner flex row (.c-card-2__group-5)
card-2-group-6: inner block (.c-card-2__group-6), content not captured

Recipe

HTML · CSS

<div class="c-card-2-scope">
  <div class="c-card-2">
    <div class="c-card-2__group">
      <div class="c-card-2__group-2">
        <span class="c-card-2__badge">lore</span>
        <h3 class="c-card-2__title">lorem ipsum dolor sit amet cons</h3>
        <p class="c-card-2__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lor</p>
      </div>
      <div class="c-card-2__group-3">
        <div class="c-card-2__group-4">
          <span class="c-card-2__media" aria-hidden="true"></span>
        </div>
        <div class="c-card-2__group-5">
          <div class="c-card-2__group-6"></div>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-2-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-card-2 {
  display: flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-card-2__group {
  display: grid;
  align-items: center;
  gap: 48px;
  grid-template-columns: 280px 1fr;
  box-sizing: border-box;
  width: 100%;
  max-width: 1080px;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.c-card-2__group-2 {
  display: block;
  box-sizing: border-box;
}

.c-card-2__badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  width: fit-content;
  padding: 4px 12px;
  background-color: #EDEDF0;
  border-radius: 15px;
  font-family: "Space Mono", "Space Mono Fallback", ui-monospace, monospace;
  font-size: 13px;
  line-height: 18.2px;
  letter-spacing: 0.075px;
  white-space: nowrap;
}

.c-card-2__title {
  display: block;
  box-sizing: border-box;
  margin: 16px 0px 0px;
  font-family: Fraunces, "Fraunces Fallback", Georgia, serif;
  font-size: 33px;
  font-weight: 350;
  line-height: 36.3px;
  letter-spacing: -0.33px;
}

.c-card-2__body {
  display: block;
  box-sizing: border-box;
  margin: 16px 0px 0px;
  color: #6B6B70;
  font-size: 16px;
  line-height: 22.4px;
}

.c-card-2__group-3 {
  display: block;
  box-sizing: border-box;
  height: 558px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 64px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0A0A0C0F 0px 4px 20px 0px;
}

.c-card-2__group-4 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: -8%;
  right: -8%;
  bottom: -8%;
  left: -8%;
  transform: matrix(1.06, 0, 0, 1.06, 0, -16.1812);
}

.c-card-2__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 817px;
  height: 647px;
  max-width: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-card-2__group-5 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.c-card-2__group-6 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 448px;
  padding: 12px;
  background-color: #FFFFFF;
  border-radius: 24px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0A0A0C0F 0px 4px 20px 0px;
}

.c-card-2:focus {
  z-index: 5;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

States

focus: z-index 5, transform matrix(1, 0, 0, 1, 0, 0)

Verification: verified against the live page at desktop.

Anatomy

navigation: the component root, a <nav> (.c-navigation)
navigation-group: inner block (.c-navigation__group)
navigation-group-2: inner flex row (.c-navigation__group-2)
navigation-link: link (.c-navigation__link)
navigation-icon: icon placeholder, 22px (.c-navigation__icon)
navigation-link-2: link, 4-character label (.c-navigation__link-2, 3 instances)
navigation-group-3: inner flex row (.c-navigation__group-3)
navigation-button: button (.c-navigation__button), content not captured

Recipe

HTML · CSS

<div class="c-navigation-scope">
  <nav class="c-navigation">
    <div class="c-navigation__group">
      <div class="c-navigation__group-2">
        <a class="c-navigation__link" href="#">
          <span class="c-navigation__icon" aria-hidden="true"></span>
        </a>
        <a class="c-navigation__link-2" href="#">lore</a>
        <a class="c-navigation__link-2" href="#">lore</a>
        <a class="c-navigation__link-2" href="#">lorem i</a>
        <div class="c-navigation__group-3">
          <button class="c-navigation__button" type="button"></button>
        </div>
      </div>
    </div>
  </nav>
</div>

.c-navigation-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-navigation {
  display: flex;
  justify-content: center;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 16px;
  right: 0px;
  left: 0px;
  z-index: 20;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  padding-right: 24px;
  padding-left: 24px;
}

.c-navigation__group {
  display: block;
  box-sizing: border-box;
  padding: 8px;
  background-color: #DCDCE099;
  border-radius: 22px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0A0A0C0F 0px 4px 20px 0px;
  backdrop-filter: blur(24px) saturate(1.5);
}

.c-navigation__group-2 {
  display: flex;
  gap: 2px;
  box-sizing: border-box;
  position: relative;
}

.c-navigation__link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 16px;
  position: relative;
  z-index: 2;
  color: #18181B;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  letter-spacing: -0.4px;
  text-decoration-line: none;
}

.c-navigation__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix3d(0.913545, -0.139112, 0.382207, -0.00159253, 0, 0.939693, 0.34202, -0.00142508, -0.406737, -0.312451, 0.858452, -0.00357688, 0, 0, 0, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-navigation__link-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 16px;
  position: relative;
  z-index: 2;
  color: #18181B;
  border-radius: 15px;
  cursor: pointer;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
}

.c-navigation__group-3 {
  display: flex;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.c-navigation__button {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 0px 12px;
  background-color: transparent;
  color: #18181B;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

States

No hover or focus change was observed.

Theme toggle

Verification: verified against the live page at desktop.

Anatomy

theme-toggle: the component root, a <button> (.c-theme-toggle)
theme-toggle-icon: icon placeholder, 16px (.c-theme-toggle__icon)

Recipe

HTML · CSS

<div class="c-theme-toggle-scope">
  <button class="c-theme-toggle" type="button">
    <span class="c-theme-toggle__icon" aria-hidden="true"></span>
  </button>
</div>

.c-theme-toggle-scope {
  background-color: #DCDCE099;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-theme-toggle {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px 12px;
  background-color: transparent;
  color: #18181B;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-theme-toggle__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-theme-toggle:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px, outline none

Header (landing)

Verification: desktop flagged, the render came out 1268 px shorter and 16 px wider than the original after 2 correction attempts; mobile flagged, the header-landing-mobile-group-4 y did not reproduce the measured 220px after 2 correction attempts.

Variant observed on https://www.magentix.studio.

Anatomy

header-landing: the component root, a <header> (.c-header-landing)
header-landing-group: inner block (.c-header-landing__group)
header-landing-group-2: inner block (.c-header-landing__group-2)
header-landing-group-3: inner flex column (.c-header-landing__group-3)
header-landing-logo: heading, 43 characters (.c-header-landing__logo)
header-landing-group-4: inner grid (.c-header-landing__group-4)
header-landing-group-5: inner flex column (.c-header-landing__group-5)
header-landing-inner: inner block (.c-header-landing__inner)
header-landing-text: label text, 17 characters (.c-header-landing__text)
header-landing-text-2: label text, 11 characters (.c-header-landing__text-2)
header-landing-inner-2: label text, 113 characters (.c-header-landing__inner-2)
header-landing-group-6: inner flex row (.c-header-landing__group-6)
header-landing-cta: the button-primary button, 12-character label (.c-header-landing__cta)
header-landing-cta-2: the button-secondary button, 12-character label (.c-header-landing__cta-2)
header-landing-group-7: inner block (.c-header-landing__group-7)
header-landing-group-8: inner block (.c-header-landing__group-8)
header-landing-icon: icon placeholder, 1350x341px (.c-header-landing__icon)

Desktop recipe

HTML · CSS

<div class="c-header-landing-scope">
  <header class="c-header-landing">
    <div class="c-header-landing__group">
      <div class="c-header-landing__group-2"></div>
      <div class="c-header-landing__group-3">
        <h1 class="c-header-landing__logo">lorem ipsum dolor sit amet consectetur adip</h1>
        <div class="c-header-landing__group-4">
          <div class="c-header-landing__group-5">
            <div class="c-header-landing__inner">
              <span class="c-header-landing__text">lorem ipsum dolor</span>
              <em class="c-header-landing__text-2">lorem ipsum</em>
            </div>
            <p class="c-header-landing__inner-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectet</p>
          </div>
        </div>
        <div class="c-header-landing__group-6">
          <a class="c-header-landing__cta" href="#">lorem ipsum</a>
          <a class="c-header-landing__cta-2" href="#">lorem ipsum</a>
        </div>
      </div>
      <div class="c-header-landing__group-7">
        <div class="c-header-landing__group-8">
          <span class="c-header-landing__icon" aria-hidden="true"></span>
        </div>
      </div>
    </div>
  </header>
</div>

.c-header-landing-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-header-landing {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 2700px;
  position: relative;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-header-landing__group {
  display: block;
  box-sizing: border-box;
  height: 900px;
  min-height: 560px;
  position: sticky;
  top: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-landing__group-2 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #F8F8F9;
}

.c-header-landing__group-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 303.75px;
  left: 0px;
  z-index: 10;
  text-align: center;
  padding-top: 80px;
  padding-right: 24px;
  padding-left: 24px;
}

.c-header-landing__logo {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  font-size: 17px;
  font-weight: 400;
  white-space: nowrap;
}

.c-header-landing__group-4 {
  display: grid;
  box-sizing: border-box;
}

.c-header-landing__group-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  transition: all 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.c-header-landing__inner {
  display: block;
  box-sizing: border-box;
  max-width: 702.089px;
  font-family: Fraunces, "Fraunces Fallback", Georgia, serif;
  font-size: 72px;
  font-weight: 350;
  line-height: 79.2px;
  letter-spacing: -1.3px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing__text-2 {
  display: inline;
  box-sizing: border-box;
  font-style: italic;
}

.c-header-landing__inner-2 {
  display: block;
  box-sizing: border-box;
  max-width: 430.08px;
  margin: 24px auto 0px;
  color: #18181BB3;
  font-size: 19.2px;
  line-height: 24.96px;
  letter-spacing: 0.096px;
}

.c-header-landing__group-6 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  box-sizing: border-box;
  margin-top: 32px;
}

.c-header-landing__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B;
  background-clip: padding-box;
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 15px;
  cursor: pointer;
  font-size: 15px;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-header-landing__cta-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B12;
  background-clip: padding-box;
  color: #18181B;
  border: 1px solid transparent;
  border-radius: 15px;
  backdrop-filter: blur(8px);
  cursor: pointer;
  font-size: 15px;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  white-space: nowrap;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header-landing__group-7 {
  display: block;
  box-sizing: border-box;
  width: 1350px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-landing__group-8 {
  display: block;
  box-sizing: border-box;
  width: 1350px;
  position: relative;
  left: 50%;
}

.c-header-landing__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 1350px;
  height: 341px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-landing__cta:hover {
  opacity: 0.85;
}

.c-header-landing__cta:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-header-landing__cta-2:hover {
  background-color: #18181B24;
}

.c-header-landing__cta-2:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

Mobile anatomy

header-landing-mobile: the component root, a <header> (.c-header-landing-mobile)
header-landing-mobile-group: inner block (.c-header-landing-mobile__group)
header-landing-mobile-group-2: inner block (.c-header-landing-mobile__group-2)
header-landing-mobile-group-3: inner flex column (.c-header-landing-mobile__group-3)
header-landing-mobile-logo: heading, 43 characters (.c-header-landing-mobile__logo)
header-landing-mobile-group-4: inner grid (.c-header-landing-mobile__group-4)
header-landing-mobile-group-5: inner flex column (.c-header-landing-mobile__group-5)
header-landing-mobile-inner: inner block (.c-header-landing-mobile__inner)
header-landing-mobile-text: label text, 17 characters (.c-header-landing-mobile__text)
header-landing-mobile-text-2: label text, 11 characters (.c-header-landing-mobile__text-2)
header-landing-mobile-inner-2: label text, 113 characters (.c-header-landing-mobile__inner-2)
header-landing-mobile-group-6: inner flex row (.c-header-landing-mobile__group-6)
header-landing-mobile-cta: link, 12-character label (.c-header-landing-mobile__cta)
header-landing-mobile-cta-2: link, 12-character label (.c-header-landing-mobile__cta-2)
header-landing-mobile-group-7: inner block (.c-header-landing-mobile__group-7)
header-landing-mobile-group-8: inner block (.c-header-landing-mobile__group-8)
header-landing-mobile-icon: icon placeholder, 900x227px (.c-header-landing-mobile__icon)

Mobile recipe

HTML · CSS

<div class="c-header-landing-mobile-scope">
  <header class="c-header-landing-mobile">
    <div class="c-header-landing-mobile__group">
      <div class="c-header-landing-mobile__group-2"></div>
      <div class="c-header-landing-mobile__group-3">
        <h1 class="c-header-landing-mobile__logo">lorem ipsum dolor sit amet consectetur adip</h1>
        <div class="c-header-landing-mobile__group-4">
          <div class="c-header-landing-mobile__group-5">
            <div class="c-header-landing-mobile__inner">
              <span class="c-header-landing-mobile__text">lorem ipsum dolor</span>
              <em class="c-header-landing-mobile__text-2">lorem ipsum</em>
            </div>
            <p class="c-header-landing-mobile__inner-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectet</p>
          </div>
        </div>
        <div class="c-header-landing-mobile__group-6">
          <a class="c-header-landing-mobile__cta" href="#">lorem ipsum</a>
          <a class="c-header-landing-mobile__cta-2" href="#">lorem ipsum</a>
        </div>
      </div>
      <div class="c-header-landing-mobile__group-7">
        <div class="c-header-landing-mobile__group-8">
          <span class="c-header-landing-mobile__icon" aria-hidden="true"></span>
        </div>
      </div>
    </div>
  </header>
</div>

.c-header-landing-mobile-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-header-landing-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 2532px;
  position: relative;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-header-landing-mobile__group {
  display: block;
  box-sizing: border-box;
  height: 844px;
  min-height: 560px;
  position: sticky;
  top: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-landing-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #F8F8F9;
}

.c-header-landing-mobile__group-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 202.5px;
  left: 0px;
  z-index: 10;
  text-align: center;
  padding-top: 80px;
  padding-right: 24px;
  padding-left: 24px;
}

.c-header-landing-mobile__logo {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  font-size: 17px;
  font-weight: 400;
  white-space: nowrap;
}

.c-header-landing-mobile__group-4 {
  display: grid;
  box-sizing: border-box;
}

.c-header-landing-mobile__group-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  transition: all 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.c-header-landing-mobile__inner {
  display: block;
  box-sizing: border-box;
  max-width: 361.963px;
  font-family: Fraunces, "Fraunces Fallback", Georgia, serif;
  font-size: 36px;
  font-weight: 350;
  line-height: 39.6px;
  letter-spacing: -1.3px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing-mobile__text-2 {
  display: inline;
  box-sizing: border-box;
  font-style: italic;
}

.c-header-landing-mobile__inner-2 {
  display: block;
  box-sizing: border-box;
  max-width: 430.08px;
  margin: 24px auto 0px;
  color: #18181BB3;
  font-size: 19.2px;
  line-height: 24.96px;
  letter-spacing: 0.096px;
}

.c-header-landing-mobile__group-6 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  box-sizing: border-box;
  margin-top: 32px;
}

.c-header-landing-mobile__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B;
  background-clip: padding-box;
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 15px;
  cursor: pointer;
  font-size: 15px;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-header-landing-mobile__cta-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B12;
  background-clip: padding-box;
  color: #18181B;
  border: 1px solid transparent;
  border-radius: 15px;
  backdrop-filter: blur(8px);
  cursor: pointer;
  font-size: 15px;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  white-space: nowrap;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
}

.c-header-landing-mobile__group-7 {
  display: block;
  box-sizing: border-box;
  width: 390px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-header-landing-mobile__group-8 {
  display: block;
  box-sizing: border-box;
  width: 900px;
  position: relative;
  left: 50%;
}

.c-header-landing-mobile__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 900px;
  height: 227px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-landing-mobile__cta:hover {
  opacity: 0.85;
}

.c-header-landing-mobile__cta:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-header-landing-mobile__cta-2:hover {
  background-color: #18181B24;
}

.c-header-landing-mobile__cta-2:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

header-landing-cta hover: opacity 0.85
header-landing-cta focus: border 1px solid #A1A1A1, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px, outline none
header-landing-cta-2 hover (header-landing-cta-2-hover): background-color #18181B24
header-landing-cta-2 focus: border 1px solid #A1A1A1, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px, outline none
mobile, header-landing-mobile-cta hover: opacity 0.85
mobile, header-landing-mobile-cta focus: border 1px solid #A1A1A1, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px, outline none
mobile, header-landing-mobile-cta-2 hover (header-landing-mobile-cta-2-hover): background-color #18181B24
mobile, header-landing-mobile-cta-2 focus: border 1px solid #A1A1A1, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px, outline none

Verification: desktop verified against the live page at desktop; mobile verified against the live page at mobile.

Variant observed on https://www.magentix.studio.

Anatomy

footer-landing: the component root, a <footer> (.c-footer-landing)
footer-landing-columns: inner grid (.c-footer-landing__columns)
footer-landing-column: inner block (.c-footer-landing__column)
footer-landing-inner: label text, 57 characters (.c-footer-landing__inner)
footer-landing-link: link, 12-character label (.c-footer-landing__link)
footer-landing-column-2: inner grid (.c-footer-landing__column-2)
footer-landing-group: inner block (.c-footer-landing__group, 3 instances)
footer-landing-text: label text, 5 characters (.c-footer-landing__text, 3 instances)
footer-landing-list: inner group (.c-footer-landing__list, 3 instances)
footer-landing-item: inner group (.c-footer-landing__item, 6 instances)
footer-landing-link-2: link, 4-character label (.c-footer-landing__link-2, 9 instances)
footer-landing-item-2: inner group (.c-footer-landing__item-2, 3 instances)
footer-landing-group-2: inner block (.c-footer-landing__group-2)
footer-landing-logo: icon placeholder, 28px (.c-footer-landing__logo)
footer-landing-text-2: label text, 44 characters (.c-footer-landing__text-2)

Desktop recipe

HTML · CSS

<div class="c-footer-landing-scope">
  <footer class="c-footer-landing">
    <div class="c-footer-landing__columns">
      <div class="c-footer-landing__column">
        <p class="c-footer-landing__inner">lorem ipsum dolor sit amet consectetur adipiscing elit se</p>
        <a class="c-footer-landing__link" href="#">lorem ipsum</a>
      </div>
      <div class="c-footer-landing__column-2">
        <div class="c-footer-landing__group">
          <div class="c-footer-landing__text">lorem</div>
          <ul class="c-footer-landing__list">
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link-2" href="#">lore</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link-2" href="#">lore</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link-2" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link-2" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing__item-2">
              <a class="c-footer-landing__link-2" href="#">lorem i</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-landing__group">
          <div class="c-footer-landing__text">lorem i</div>
          <ul class="c-footer-landing__list">
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link-2" href="#">l</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link-2" href="#">lorem ip</a>
            </li>
            <li class="c-footer-landing__item-2">
              <a class="c-footer-landing__link-2" href="#">lorem</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-landing__group">
          <div class="c-footer-landing__text">lorem ip</div>
          <ul class="c-footer-landing__list">
            <li class="c-footer-landing__item-2">
              <a class="c-footer-landing__link-2" href="#">lorem ipsum dolor sit a</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="c-footer-landing__group-2">
      <span class="c-footer-landing__logo" aria-hidden="true"></span>
      <p class="c-footer-landing__text-2">lorem ipsum dolor sit amet consectetur adipi</p>
    </div>
  </footer>
</div>

.c-footer-landing-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-footer-landing {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-footer-landing__columns {
  display: grid;
  gap: 80px;
  grid-template-columns: 1fr auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 1080px;
  padding-right: 24px;
  padding-bottom: 96px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing__column {
  display: block;
  box-sizing: border-box;
}

.c-footer-landing__inner {
  display: block;
  box-sizing: border-box;
  max-width: 421.05px;
  margin: 0px;
  font-family: Fraunces, "Fraunces Fallback", Georgia, serif;
  font-size: 42px;
  font-weight: 350;
  line-height: 46.2px;
  letter-spacing: -0.58px;
}

.c-footer-landing__link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B;
  background-clip: padding-box;
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 15px;
  cursor: pointer;
  font-size: 15px;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 32px;
}

.c-footer-landing__column-2 {
  display: grid;
  gap: 40px 56px;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-landing__group {
  display: block;
  box-sizing: border-box;
}

.c-footer-landing__text {
  display: block;
  box-sizing: border-box;
  color: #6B6B70;
  font-size: 14px;
  line-height: 19.6px;
}

.c-footer-landing__list {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 16px 0px 0px;
  list-style-type: none;
}

.c-footer-landing__item {
  display: list-item;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.c-footer-landing__link-2 {
  display: inline;
  box-sizing: border-box;
  color: #18181B;
  cursor: pointer;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-footer-landing__item-2 {
  display: list-item;
  box-sizing: border-box;
}

.c-footer-landing__group-2 {
  display: block;
  box-sizing: border-box;
  text-align: center;
  padding-bottom: 56px;
}

.c-footer-landing__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix3d(0.913545, -0.139112, 0.382207, -0.00159253, 0, 0.939693, 0.34202, -0.00142508, -0.406737, -0.312451, 0.858452, -0.00357688, 0, 0, 0, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  margin-right: 706px;
  margin-left: 706px;
}

.c-footer-landing__text-2 {
  display: block;
  box-sizing: border-box;
  margin: 20px 0px 0px;
  font-family: "Space Mono", "Space Mono Fallback", ui-monospace, monospace;
  font-size: 13px;
  line-height: 20.8px;
  letter-spacing: 0.075px;
}

.c-footer-landing__link:hover {
  opacity: 0.8;
}

.c-footer-landing__link:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-footer-landing__link-2:hover {
  opacity: 0.7;
}

Mobile anatomy

footer-landing-mobile: the component root, a <footer> (.c-footer-landing-mobile)
footer-landing-mobile-columns: inner grid (.c-footer-landing-mobile__columns)
footer-landing-mobile-column: inner block (.c-footer-landing-mobile__column)
footer-landing-mobile-inner: label text, 57 characters (.c-footer-landing-mobile__inner)
footer-landing-mobile-link: link, 12-character label (.c-footer-landing-mobile__link)
footer-landing-mobile-column-2: inner grid (.c-footer-landing-mobile__column-2)
footer-landing-mobile-group: inner block (.c-footer-landing-mobile__group, 3 instances)
footer-landing-mobile-text: label text, 5 characters (.c-footer-landing-mobile__text, 3 instances)
footer-landing-mobile-list: inner group (.c-footer-landing-mobile__list, 3 instances)
footer-landing-mobile-item: inner group (.c-footer-landing-mobile__item, 6 instances)
footer-landing-mobile-link-2: link, 4-character label (.c-footer-landing-mobile__link-2, 9 instances)
footer-landing-mobile-item-2: inner group (.c-footer-landing-mobile__item-2, 3 instances)
footer-landing-mobile-group-2: inner block (.c-footer-landing-mobile__group-2)
footer-landing-mobile-logo: icon placeholder, 28px (.c-footer-landing-mobile__logo)
footer-landing-mobile-text-2: label text, 44 characters (.c-footer-landing-mobile__text-2)

Mobile recipe

HTML · CSS

<div class="c-footer-landing-mobile-scope">
  <footer class="c-footer-landing-mobile">
    <div class="c-footer-landing-mobile__columns">
      <div class="c-footer-landing-mobile__column">
        <p class="c-footer-landing-mobile__inner">lorem ipsum dolor sit amet consectetur adipiscing elit se</p>
        <a class="c-footer-landing-mobile__link" href="#">lorem ipsum</a>
      </div>
      <div class="c-footer-landing-mobile__column-2">
        <div class="c-footer-landing-mobile__group">
          <div class="c-footer-landing-mobile__text">lorem</div>
          <ul class="c-footer-landing-mobile__list">
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link-2" href="#">lore</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link-2" href="#">lore</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link-2" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link-2" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing-mobile__item-2">
              <a class="c-footer-landing-mobile__link-2" href="#">lorem i</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-landing-mobile__group">
          <div class="c-footer-landing-mobile__text">lorem i</div>
          <ul class="c-footer-landing-mobile__list">
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link-2" href="#">l</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link-2" href="#">lorem ip</a>
            </li>
            <li class="c-footer-landing-mobile__item-2">
              <a class="c-footer-landing-mobile__link-2" href="#">lorem</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-landing-mobile__group">
          <div class="c-footer-landing-mobile__text">lorem ip</div>
          <ul class="c-footer-landing-mobile__list">
            <li class="c-footer-landing-mobile__item-2">
              <a class="c-footer-landing-mobile__link-2" href="#">lorem ipsum dolor sit a</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="c-footer-landing-mobile__group-2">
      <span class="c-footer-landing-mobile__logo" aria-hidden="true"></span>
      <p class="c-footer-landing-mobile__text-2">lorem ipsum dolor sit amet consectetur adipi</p>
    </div>
  </footer>
</div>

.c-footer-landing-mobile-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-footer-landing-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-footer-landing-mobile__columns {
  display: grid;
  gap: 56px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1080px;
  padding-right: 24px;
  padding-bottom: 96px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing-mobile__column {
  display: block;
  box-sizing: border-box;
}

.c-footer-landing-mobile__inner {
  display: block;
  box-sizing: border-box;
  max-width: 282.629px;
  margin: 0px;
  font-family: Fraunces, "Fraunces Fallback", Georgia, serif;
  font-size: 28px;
  font-weight: 350;
  line-height: 30.8px;
  letter-spacing: -0.58px;
}

.c-footer-landing-mobile__link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B;
  background-clip: padding-box;
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 15px;
  cursor: pointer;
  font-size: 15px;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 32px;
}

.c-footer-landing-mobile__column-2 {
  display: grid;
  gap: 40px 56px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-landing-mobile__group {
  display: block;
  box-sizing: border-box;
}

.c-footer-landing-mobile__text {
  display: block;
  box-sizing: border-box;
  color: #6B6B70;
  font-size: 14px;
  line-height: 19.6px;
}

.c-footer-landing-mobile__list {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 16px 0px 0px;
  list-style-type: none;
}

.c-footer-landing-mobile__item {
  display: list-item;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.c-footer-landing-mobile__link-2 {
  display: inline;
  box-sizing: border-box;
  color: #18181B;
  cursor: pointer;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-footer-landing-mobile__item-2 {
  display: list-item;
  box-sizing: border-box;
}

.c-footer-landing-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  text-align: center;
  padding-bottom: 56px;
}

.c-footer-landing-mobile__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix3d(0.913545, -0.139112, 0.382207, -0.00159253, 0, 0.939693, 0.34202, -0.00142508, -0.406737, -0.312451, 0.858452, -0.00357688, 0, 0, 0, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  margin-right: 181px;
  margin-left: 181px;
}

.c-footer-landing-mobile__text-2 {
  display: block;
  box-sizing: border-box;
  margin: 20px 0px 0px;
  font-family: "Space Mono", "Space Mono Fallback", ui-monospace, monospace;
  font-size: 13px;
  line-height: 20.8px;
  letter-spacing: 0.075px;
}

.c-footer-landing-mobile__link:hover {
  opacity: 0.8;
}

.c-footer-landing-mobile__link:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-footer-landing-mobile__link-2:hover {
  opacity: 0.7;
}

States

footer-landing-link hover: opacity 0.8
footer-landing-link focus: border 1px solid #A1A1A1, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px, outline none
footer-landing-link-2 hover: opacity 0.7
mobile, footer-landing-mobile-link hover: opacity 0.8
mobile, footer-landing-mobile-link focus: border 1px solid #A1A1A1, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px, outline none
mobile, footer-landing-mobile-link-2 hover: opacity 0.7

Button, primary (2)

Verification: flagged, the render matched 93% of the original pixels, below the 97% required on focus after 2 correction attempts.

Anatomy

button-primary-2: the component root, a <a> (.c-button-primary-2), 12-character label

Recipe

HTML · CSS

<div class="c-button-primary-2-scope">
  <a class="c-button-primary-2" href="#">lorem ipsum</a>
</div>

.c-button-primary-2-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-button-primary-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B;
  background-clip: padding-box;
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-button-primary-2:hover {
  opacity: 0.8;
}

.c-button-primary-2:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

hover: opacity 0.8
focus: border 1px solid #A1A1A1, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px, outline none

Button, ghost

Verification: verified against the live page at desktop.

Anatomy

button-ghost: the component root, a <button> (.c-button-ghost)
button-ghost-icon: icon placeholder, 16px (.c-button-ghost__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-scope">
  <button class="c-button-ghost" type="button">
    <span class="c-button-ghost__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-scope {
  background-color: #DCDCE099;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-button-ghost {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px 12px;
  background-color: transparent;
  color: #18181B;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-button-ghost__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-button-ghost:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px, outline none

Card (3)

Verification: verified against the live page at desktop.

Anatomy

Group: 3 instances in a 3-column grid, 16px gap; the recipe carries the values they all share
card-3: the component root, a <article> (.c-card-3)
card-3-button: button (.c-card-3__button)
card-3-icon: icon placeholder, 192px (.c-card-3__icon)
card-3-group: inner block (.c-card-3__group)
card-3-group-2: inner flex row (.c-card-3__group-2)
card-3-text: label text, 15 characters (.c-card-3__text)
card-3-text-2: label text, 12 characters (.c-card-3__text-2)
card-3-title: heading, 0 characters (.c-card-3__title)
card-3-text-3: label text, 0 characters (.c-card-3__text-3)
card-3-text-4: label text, 7 characters (.c-card-3__text-4, 3 instances)
card-3-group-3: inner flex row (.c-card-3__group-3)
card-3-group-4: inner flex row (.c-card-3__group-4, 8 instances), content not captured
card-3-body: label text, 92 characters (.c-card-3__body)

Recipe

HTML · CSS

<div class="c-card-3-scope">
  <article class="c-card-3">
    <button class="c-card-3__button" type="button">
      <span class="c-card-3__icon" aria-hidden="true"></span>
    </button>
    <div class="c-card-3__group">
      <div class="c-card-3__group-2">
        <span class="c-card-3__text">lorem ipsum dol</span>
        <span class="c-card-3__text-2">lorem ipsum</span>
      </div>
      <h2 class="c-card-3__title">
        <span class="c-card-3__text-3">
          <span class="c-card-3__text-4">lorem i</span>
          <span class="c-card-3__text-4">lorem ipsum dol</span>
          <span class="c-card-3__text-4">lorem i</span>
        </span>
        <span class="c-card-3__group-3">
          <span class="c-card-3__group-4"></span>
          <span class="c-card-3__group-4"></span>
          <span class="c-card-3__group-4"></span>
          <span class="c-card-3__group-4"></span>
          <span class="c-card-3__group-4"></span>
          <span class="c-card-3__group-4"></span>
          <span class="c-card-3__group-4"></span>
          <span class="c-card-3__group-4"></span>
        </span>
      </h2>
      <p class="c-card-3__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dol</p>
    </div>
  </article>
</div>

.c-card-3-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-card-3 {
  display: inline-flex;
  flex-direction: column;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 12px;
  background-color: #FFFFFF;
  color: #18181B;
  border-radius: 22px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0A0A0C0F 0px 4px 20px 0px;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-card-3__button {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  padding: 0px;
  position: relative;
  background-color: #EDEDF0;
  color: #18181B;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-card-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 192px;
  height: 192px;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-card-3__group {
  display: block;
  box-sizing: border-box;
  padding: 20px 12px 12px;
}

.c-card-3__group-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 12px;
  box-sizing: border-box;
}

.c-card-3__text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  width: fit-content;
  padding: 4px 12px;
  background-color: #EDEDF0;
  border-radius: 15px;
  font-family: "Space Mono", "Space Mono Fallback", ui-monospace, monospace;
  font-size: 13px;
  line-height: 18.2px;
  letter-spacing: 0.075px;
  white-space: nowrap;
}

.c-card-3__text-2 {
  display: block;
  box-sizing: border-box;
  color: #6B6B70;
  font-family: "Space Mono", "Space Mono Fallback", ui-monospace, monospace;
  font-size: 13px;
  line-height: 18.2px;
  letter-spacing: 0.075px;
  white-space: nowrap;
}

.c-card-3__title {
  display: block;
  box-sizing: border-box;
  margin: 16px 0px 0px;
  font-size: 17px;
  font-weight: 400;
}

.c-card-3__text-3 {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.c-card-3__group-3 {
  display: flex;
  gap: 4px;
  box-sizing: border-box;
}

.c-card-3__group-4 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 28px;
  height: 38px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #EDEDF0;
  border-radius: 7px;
  font-family: "Space Mono", "Space Mono Fallback", ui-monospace, monospace;
  font-size: 19px;
  line-height: 26.6px;
}

.c-card-3__body {
  display: block;
  box-sizing: border-box;
  margin: 12px 0px 0px;
  color: #6B6B70;
  font-size: 15px;
  line-height: 22.5px;
}

States

No hover or focus change was observed.

Product thumbnail button

Verification: verified against the live page at desktop.

Anatomy

product-thumbnail-button: the component root, a <button> (.c-product-thumbnail-button)
product-thumbnail-button-icon: icon placeholder, 192px (.c-product-thumbnail-button__icon)

Recipe

HTML · CSS

<div class="c-product-thumbnail-button-scope">
  <button class="c-product-thumbnail-button" type="button">
    <span class="c-product-thumbnail-button__icon" aria-hidden="true"></span>
  </button>
</div>

.c-product-thumbnail-button-scope {
  background-color: #FFFFFF;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-product-thumbnail-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  padding: 0px;
  position: relative;
  background-color: #EDEDF0;
  color: #18181B;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-product-thumbnail-button__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 192px;
  height: 192px;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-product-thumbnail-button:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px, outline none

Hero

Verification: verified against the live page at desktop.

Anatomy

hero: the component root, a <header> (.c-hero)
hero-title: heading, 29 characters (.c-hero__title)
hero-body: label text, 68 characters (.c-hero__body)

Recipe

HTML · CSS

<div class="c-hero-scope">
  <header class="c-hero">
    <h1 class="c-hero__title">lorem ipsum dolor sit amet co</h1>
    <p class="c-hero__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmo</p>
  </header>
</div>

.c-hero-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-hero {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 1080px;
  padding: 144px 24px 56px;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  text-align: center;
}

.c-hero__title {
  display: block;
  box-sizing: border-box;
  max-width: 573.666px;
  margin: 0px auto;
  font-family: Fraunces, "Fraunces Fallback", Georgia, serif;
  font-size: 58px;
  font-weight: 350;
  line-height: 60.9px;
  letter-spacing: -0.58px;
}

.c-hero__body {
  display: block;
  box-sizing: border-box;
  max-width: 494.592px;
  margin: 24px auto 0px;
  color: #6B6B70;
  font-size: 19.2px;
  line-height: 24.96px;
  letter-spacing: 0.096px;
}

States

No hover or focus change was observed.

Header (inner)

Verification: desktop verified against the live page at desktop; mobile verified against the live page at mobile.

Variant observed on https://www.magentix.studio/work.

Anatomy

header-inner: the component root, a <nav> (.c-header-inner)
header-inner-group: inner block (.c-header-inner__group)
header-inner-group-2: inner flex row (.c-header-inner__group-2)
header-inner-group-3: inner group (.c-header-inner__group-3)
header-inner-logo: link (.c-header-inner__logo)
header-inner-logo-icon: icon placeholder, 22px (.c-header-inner__logo-icon)
header-inner-inner: inner group (.c-header-inner__inner)
header-inner-logo-text: label text, 8 characters (.c-header-inner__logo-text)
header-inner-logo-text-2: label text, 6 characters (.c-header-inner__logo-text-2)
header-inner-link: link, 4-character label (.c-header-inner__link, 3 instances)
header-inner-group-4: inner flex row (.c-header-inner__group-4)
header-inner-cta: the button-ghost button (.c-header-inner__cta)
header-inner-cta-icon: icon placeholder, 16px (.c-header-inner__cta-icon)

Desktop recipe

HTML · CSS

<div class="c-header-inner-scope">
  <nav class="c-header-inner">
    <div class="c-header-inner__group">
      <div class="c-header-inner__group-2">
        <span class="c-header-inner__group-3"></span>
        <a class="c-header-inner__logo" href="#">
          <span class="c-header-inner__logo-icon" aria-hidden="true"></span>
          <span class="c-header-inner__inner">
            <span class="c-header-inner__logo-text">lorem ip</span>
            <span class="c-header-inner__logo-text-2">lorem</span>
          </span>
        </a>
        <a class="c-header-inner__link" href="#">lore</a>
        <a class="c-header-inner__link" href="#">lore</a>
        <a class="c-header-inner__link" href="#">lorem i</a>
        <div class="c-header-inner__group-4">
          <button class="c-header-inner__cta" type="button">
            <span class="c-header-inner__cta-icon" aria-hidden="true"></span>
          </button>
        </div>
      </div>
    </div>
  </nav>
</div>

.c-header-inner-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-header-inner {
  display: flex;
  justify-content: center;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 16px;
  right: 0px;
  left: 0px;
  z-index: 20;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  padding-right: 24px;
  padding-left: 24px;
}

.c-header-inner__group {
  display: block;
  box-sizing: border-box;
  padding: 8px;
  background-color: #DCDCE099;
  border-radius: 22px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0A0A0C0F 0px 4px 20px 0px;
  backdrop-filter: blur(24px) saturate(1.5);
}

.c-header-inner__group-2 {
  display: flex;
  gap: 2px;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner__group-3 {
  display: block;
  box-sizing: border-box;
  width: 69px;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 188px;
  z-index: 1;
  background-color: #FFFFFF;
  border-radius: 15px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #00000014 0px 0.98px 11.74px 0px;
}

.c-header-inner__logo {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 16px;
  position: relative;
  z-index: 2;
  color: #18181B;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  letter-spacing: -0.4px;
  text-decoration-line: none;
}

.c-header-inner__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix3d(0.913545, -0.139112, 0.382207, -0.00159253, 0, 0.939693, 0.34202, -0.00142508, -0.406737, -0.312451, 0.858452, -0.00357688, 0, 0, 0, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-header-inner__inner {
  display: block;
  box-sizing: border-box;
  max-width: 180px;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  margin-left: 10px;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-property: max-width, opacity, margin-left;
}

.c-header-inner__logo-text-2 {
  display: inline;
  box-sizing: border-box;
  color: #6B6B70;
}

.c-header-inner__link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 16px;
  position: relative;
  z-index: 2;
  color: #18181B;
  border-radius: 15px;
  cursor: pointer;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
}

.c-header-inner__group-4 {
  display: flex;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.c-header-inner__cta {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 0px 12px;
  background-color: transparent;
  color: #18181B;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-inner__cta-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-inner__logo:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-header-inner__link:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-header-inner__cta:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

Mobile anatomy

header-inner-mobile: the component root, a <nav> (.c-header-inner-mobile)
header-inner-mobile-group: inner block (.c-header-inner-mobile__group)
header-inner-mobile-group-2: inner flex row (.c-header-inner-mobile__group-2)
header-inner-mobile-logo: link (.c-header-inner-mobile__logo)
header-inner-mobile-logo-icon: icon placeholder, 22px (.c-header-inner-mobile__logo-icon)
header-inner-mobile-inner: inner group (.c-header-inner-mobile__inner)
header-inner-mobile-logo-text: label text, 8 characters (.c-header-inner-mobile__logo-text)
header-inner-mobile-logo-text-2: label text, 6 characters (.c-header-inner-mobile__logo-text-2)
header-inner-mobile-menu-toggle: button (.c-header-inner-mobile__menu-toggle)
header-inner-mobile-group-3: inner group (.c-header-inner-mobile__group-3)
header-inner-mobile-group-4: inner group (.c-header-inner-mobile__group-4)
header-inner-mobile-group-5: inner group (.c-header-inner-mobile__group-5)

Mobile recipe

HTML · CSS

<div class="c-header-inner-mobile-scope">
  <nav class="c-header-inner-mobile">
    <div class="c-header-inner-mobile__group">
      <div class="c-header-inner-mobile__group-2">
        <a class="c-header-inner-mobile__logo" href="#">
          <span class="c-header-inner-mobile__logo-icon" aria-hidden="true"></span>
          <span class="c-header-inner-mobile__inner">
            <span class="c-header-inner-mobile__logo-text">lorem ip</span>
            <span class="c-header-inner-mobile__logo-text-2">lorem</span>
          </span>
        </a>
        <button class="c-header-inner-mobile__menu-toggle" type="button">
          <span class="c-header-inner-mobile__group-3">
            <span class="c-header-inner-mobile__group-4"></span>
            <span class="c-header-inner-mobile__group-5"></span>
          </span>
        </button>
      </div>
    </div>
  </nav>
</div>

.c-header-inner-mobile-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-header-inner-mobile {
  display: flex;
  justify-content: center;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 16px;
  right: 0px;
  left: 0px;
  z-index: 20;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
  padding-right: 24px;
  padding-left: 24px;
}

.c-header-inner-mobile__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 8px;
  background-color: #DCDCE099;
  border-radius: 22px;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #0A0A0C0F 0px 4px 20px 0px;
  backdrop-filter: blur(24px) saturate(1.5);
}

.c-header-inner-mobile__group-2 {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-mobile__logo {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 16px;
  position: relative;
  z-index: 2;
  color: #18181B;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  letter-spacing: -0.4px;
  text-decoration-line: none;
}

.c-header-inner-mobile__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix3d(0.913545, -0.139112, 0.382207, -0.00159253, 0, 0.939693, 0.34202, -0.00142508, -0.406737, -0.312451, 0.858452, -0.00357688, 0, 0, 0, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.c-header-inner-mobile__inner {
  display: block;
  box-sizing: border-box;
  max-width: 180px;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  margin-left: 10px;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-property: max-width, opacity, margin-left;
}

.c-header-inner-mobile__logo-text-2 {
  display: inline;
  box-sizing: border-box;
  color: #6B6B70;
}

.c-header-inner-mobile__menu-toggle {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 16px;
  position: relative;
  z-index: 2;
  background-color: transparent;
  color: #18181B;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.075px;
  text-transform: none;
  text-align: center;
  appearance: button;
}

.c-header-inner-mobile__group-3 {
  display: block;
  box-sizing: border-box;
  width: 16px;
  height: 14px;
  position: relative;
}

.c-header-inner-mobile__group-4 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 1.6px;
  position: absolute;
  top: 3px;
  left: 0px;
  background-color: #18181B;
  border-radius: 3.35544e+07px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-header-inner-mobile__group-5 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 1.6px;
  position: absolute;
  bottom: 3px;
  left: 0px;
  background-color: #18181B;
  border-radius: 3.35544e+07px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-property: transform, translate, scale, rotate;
}

.c-header-inner-mobile__logo:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-header-inner-mobile__menu-toggle:focus {
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

States

header-inner-logo focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px, outline none
header-inner-link focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px, outline none
header-inner-cta focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px, outline none
mobile, header-inner-mobile-logo focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px, outline none
mobile, header-inner-mobile-menu-toggle focus: box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #42B5DC4D 0px 0px 0px 3px, transparent 0px 0px 0px 0px, outline none

Verification: desktop verified against the live page at desktop; mobile verified against the live page at mobile.

Variant observed on https://www.magentix.studio/work.

Anatomy

footer-inner: the component root, a <footer> (.c-footer-inner)
footer-inner-columns: inner grid (.c-footer-inner__columns)
footer-inner-column: inner block (.c-footer-inner__column)
footer-inner-inner: label text, 57 characters (.c-footer-inner__inner)
footer-inner-cta: the button-primary-2 button, 12-character label (.c-footer-inner__cta)
footer-inner-column-2: inner grid (.c-footer-inner__column-2)
footer-inner-group: inner block (.c-footer-inner__group, 3 instances)
footer-inner-text: label text, 5 characters (.c-footer-inner__text, 3 instances)
footer-inner-list: inner group (.c-footer-inner__list, 3 instances)
footer-inner-item: inner group (.c-footer-inner__item, 6 instances)
footer-inner-link: link, 4-character label (.c-footer-inner__link, 9 instances)
footer-inner-item-2: inner group (.c-footer-inner__item-2, 3 instances)
footer-inner-group-2: inner block (.c-footer-inner__group-2)
footer-inner-logo: icon placeholder, 28px (.c-footer-inner__logo)
footer-inner-text-2: label text, 44 characters (.c-footer-inner__text-2)

Desktop recipe

HTML · CSS

<div class="c-footer-inner-scope">
  <footer class="c-footer-inner">
    <div class="c-footer-inner__columns">
      <div class="c-footer-inner__column">
        <p class="c-footer-inner__inner">lorem ipsum dolor sit amet consectetur adipiscing elit se</p>
        <a class="c-footer-inner__cta" href="#">lorem ipsum</a>
      </div>
      <div class="c-footer-inner__column-2">
        <div class="c-footer-inner__group">
          <div class="c-footer-inner__text">lorem</div>
          <ul class="c-footer-inner__list">
            <li class="c-footer-inner__item">
              <a class="c-footer-inner__link" href="#">lore</a>
            </li>
            <li class="c-footer-inner__item">
              <a class="c-footer-inner__link" href="#">lore</a>
            </li>
            <li class="c-footer-inner__item">
              <a class="c-footer-inner__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-inner__item">
              <a class="c-footer-inner__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-inner__item-2">
              <a class="c-footer-inner__link" href="#">lorem i</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-inner__group">
          <div class="c-footer-inner__text">lorem i</div>
          <ul class="c-footer-inner__list">
            <li class="c-footer-inner__item">
              <a class="c-footer-inner__link" href="#">l</a>
            </li>
            <li class="c-footer-inner__item">
              <a class="c-footer-inner__link" href="#">lorem ip</a>
            </li>
            <li class="c-footer-inner__item-2">
              <a class="c-footer-inner__link" href="#">lorem</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-inner__group">
          <div class="c-footer-inner__text">lorem ip</div>
          <ul class="c-footer-inner__list">
            <li class="c-footer-inner__item-2">
              <a class="c-footer-inner__link" href="#">lorem ipsum dolor sit a</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="c-footer-inner__group-2">
      <span class="c-footer-inner__logo" aria-hidden="true"></span>
      <p class="c-footer-inner__text-2">lorem ipsum dolor sit amet consectetur adipi</p>
    </div>
  </footer>
</div>

.c-footer-inner-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-footer-inner {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-footer-inner__columns {
  display: grid;
  gap: 80px;
  grid-template-columns: 1fr auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 1080px;
  padding-right: 24px;
  padding-bottom: 96px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner__column {
  display: block;
  box-sizing: border-box;
}

.c-footer-inner__inner {
  display: block;
  box-sizing: border-box;
  max-width: 421.05px;
  margin: 0px;
  font-family: Fraunces, "Fraunces Fallback", Georgia, serif;
  font-size: 42px;
  font-weight: 350;
  line-height: 46.2px;
  letter-spacing: -0.58px;
}

.c-footer-inner__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B;
  background-clip: padding-box;
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 15px;
  cursor: pointer;
  font-size: 15px;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 32px;
}

.c-footer-inner__column-2 {
  display: grid;
  gap: 40px 56px;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-inner__group {
  display: block;
  box-sizing: border-box;
}

.c-footer-inner__text {
  display: block;
  box-sizing: border-box;
  color: #6B6B70;
  font-size: 14px;
  line-height: 19.6px;
}

.c-footer-inner__list {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 16px 0px 0px;
  list-style-type: none;
}

.c-footer-inner__item {
  display: list-item;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.c-footer-inner__link {
  display: inline;
  box-sizing: border-box;
  color: #18181B;
  cursor: pointer;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-footer-inner__item-2 {
  display: list-item;
  box-sizing: border-box;
}

.c-footer-inner__group-2 {
  display: block;
  box-sizing: border-box;
  text-align: center;
  padding-bottom: 56px;
}

.c-footer-inner__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix3d(0.913545, -0.139112, 0.382207, -0.00159253, 0, 0.939693, 0.34202, -0.00142508, -0.406737, -0.312451, 0.858452, -0.00357688, 0, 0, 0, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  margin-right: 706px;
  margin-left: 706px;
}

.c-footer-inner__text-2 {
  display: block;
  box-sizing: border-box;
  margin: 20px 0px 0px;
  font-family: "Space Mono", "Space Mono Fallback", ui-monospace, monospace;
  font-size: 13px;
  line-height: 20.8px;
  letter-spacing: 0.075px;
}

.c-footer-inner__cta:hover {
  opacity: 0.8;
}

.c-footer-inner__cta:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-footer-inner__link:hover {
  opacity: 0.7;
}

Mobile anatomy

footer-inner-mobile: the component root, a <footer> (.c-footer-inner-mobile)
footer-inner-mobile-columns: inner grid (.c-footer-inner-mobile__columns)
footer-inner-mobile-column: inner block (.c-footer-inner-mobile__column)
footer-inner-mobile-inner: label text, 57 characters (.c-footer-inner-mobile__inner)
footer-inner-mobile-cta: link, 12-character label (.c-footer-inner-mobile__cta)
footer-inner-mobile-column-2: inner grid (.c-footer-inner-mobile__column-2)
footer-inner-mobile-group: inner block (.c-footer-inner-mobile__group, 3 instances)
footer-inner-mobile-text: label text, 5 characters (.c-footer-inner-mobile__text, 3 instances)
footer-inner-mobile-list: inner group (.c-footer-inner-mobile__list, 3 instances)
footer-inner-mobile-item: inner group (.c-footer-inner-mobile__item, 6 instances)
footer-inner-mobile-link: link, 4-character label (.c-footer-inner-mobile__link, 9 instances)
footer-inner-mobile-item-2: inner group (.c-footer-inner-mobile__item-2, 3 instances)
footer-inner-mobile-group-2: inner block (.c-footer-inner-mobile__group-2)
footer-inner-mobile-logo: icon placeholder, 28px (.c-footer-inner-mobile__logo)
footer-inner-mobile-text-2: label text, 44 characters (.c-footer-inner-mobile__text-2)

Mobile recipe

HTML · CSS

<div class="c-footer-inner-mobile-scope">
  <footer class="c-footer-inner-mobile">
    <div class="c-footer-inner-mobile__columns">
      <div class="c-footer-inner-mobile__column">
        <p class="c-footer-inner-mobile__inner">lorem ipsum dolor sit amet consectetur adipiscing elit se</p>
        <a class="c-footer-inner-mobile__cta" href="#">lorem ipsum</a>
      </div>
      <div class="c-footer-inner-mobile__column-2">
        <div class="c-footer-inner-mobile__group">
          <div class="c-footer-inner-mobile__text">lorem</div>
          <ul class="c-footer-inner-mobile__list">
            <li class="c-footer-inner-mobile__item">
              <a class="c-footer-inner-mobile__link" href="#">lore</a>
            </li>
            <li class="c-footer-inner-mobile__item">
              <a class="c-footer-inner-mobile__link" href="#">lore</a>
            </li>
            <li class="c-footer-inner-mobile__item">
              <a class="c-footer-inner-mobile__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-inner-mobile__item">
              <a class="c-footer-inner-mobile__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-inner-mobile__item-2">
              <a class="c-footer-inner-mobile__link" href="#">lorem i</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-inner-mobile__group">
          <div class="c-footer-inner-mobile__text">lorem i</div>
          <ul class="c-footer-inner-mobile__list">
            <li class="c-footer-inner-mobile__item">
              <a class="c-footer-inner-mobile__link" href="#">l</a>
            </li>
            <li class="c-footer-inner-mobile__item">
              <a class="c-footer-inner-mobile__link" href="#">lorem ip</a>
            </li>
            <li class="c-footer-inner-mobile__item-2">
              <a class="c-footer-inner-mobile__link" href="#">lorem</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-inner-mobile__group">
          <div class="c-footer-inner-mobile__text">lorem ip</div>
          <ul class="c-footer-inner-mobile__list">
            <li class="c-footer-inner-mobile__item-2">
              <a class="c-footer-inner-mobile__link" href="#">lorem ipsum dolor sit a</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="c-footer-inner-mobile__group-2">
      <span class="c-footer-inner-mobile__logo" aria-hidden="true"></span>
      <p class="c-footer-inner-mobile__text-2">lorem ipsum dolor sit amet consectetur adipi</p>
    </div>
  </footer>
</div>

.c-footer-inner-mobile-scope {
  background-color: #F8F8F9;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-footer-inner-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #18181B;
  font-family: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 23.8px;
}

.c-footer-inner-mobile__columns {
  display: grid;
  gap: 56px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1080px;
  padding-right: 24px;
  padding-bottom: 96px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner-mobile__column {
  display: block;
  box-sizing: border-box;
}

.c-footer-inner-mobile__inner {
  display: block;
  box-sizing: border-box;
  max-width: 282.629px;
  margin: 0px;
  font-family: Fraunces, "Fraunces Fallback", Georgia, serif;
  font-size: 28px;
  font-weight: 350;
  line-height: 30.8px;
  letter-spacing: -0.58px;
}

.c-footer-inner-mobile__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 12px 24px;
  background-color: #18181B;
  background-clip: padding-box;
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 15px;
  cursor: pointer;
  font-size: 15px;
  line-height: 20.25px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  white-space: nowrap;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 32px;
}

.c-footer-inner-mobile__column-2 {
  display: grid;
  gap: 40px 56px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  box-sizing: border-box;
}

.c-footer-inner-mobile__group {
  display: block;
  box-sizing: border-box;
}

.c-footer-inner-mobile__text {
  display: block;
  box-sizing: border-box;
  color: #6B6B70;
  font-size: 14px;
  line-height: 19.6px;
}

.c-footer-inner-mobile__list {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 16px 0px 0px;
  list-style-type: none;
}

.c-footer-inner-mobile__item {
  display: list-item;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.c-footer-inner-mobile__link {
  display: inline;
  box-sizing: border-box;
  color: #18181B;
  cursor: pointer;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.075px;
  text-decoration-line: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-footer-inner-mobile__item-2 {
  display: list-item;
  box-sizing: border-box;
}

.c-footer-inner-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  text-align: center;
  padding-bottom: 56px;
}

.c-footer-inner-mobile__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix3d(0.913545, -0.139112, 0.382207, -0.00159253, 0, 0.939693, 0.34202, -0.00142508, -0.406737, -0.312451, 0.858452, -0.00357688, 0, 0, 0, 1);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  margin-right: 181px;
  margin-left: 181px;
}

.c-footer-inner-mobile__text-2 {
  display: block;
  box-sizing: border-box;
  margin: 20px 0px 0px;
  font-family: "Space Mono", "Space Mono Fallback", ui-monospace, monospace;
  font-size: 13px;
  line-height: 20.8px;
  letter-spacing: 0.075px;
}

.c-footer-inner-mobile__cta:hover {
  opacity: 0.8;
}

.c-footer-inner-mobile__cta:focus {
  border: 1px solid #A1A1A1;
  box-shadow: transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px;
  outline: none;
}

.c-footer-inner-mobile__link:hover {
  opacity: 0.7;
}

States

footer-inner-cta hover: opacity 0.8
footer-inner-cta focus: border 1px solid #A1A1A1, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px, outline none
footer-inner-link hover: opacity 0.7
mobile, footer-inner-mobile-cta hover: opacity 0.8
mobile, footer-inner-mobile-cta focus: border 1px solid #A1A1A1, box-shadow transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, transparent 0px 0px 0px 0px, #A1A1A180 0px 0px 0px 3px, transparent 0px 0px 0px 0px, outline none
mobile, footer-inner-mobile-link hover: opacity 0.7

Do's and Don'ts

Do

Set every headline in Fraunces at weight 350 with the negative tracking from its token (hero-display -1.3px, display-lg -0.58px, title-md -0.2px). Use only the observed weights: 350, 400 and 500.
Give every button the 15px control radius (rounded.md). This is what button-primary, button-secondary and button-ghost all share.
Size controls as measured: 46px tall for text CTAs (button-primary) and 42px for icon/ghost buttons (button-ghost), with 12px horizontal padding (button-ghost-padding-x).
Pair a solid primary (#18181B) CTA with a translucent ink-tint secondary (#18181B12, hover #18181B24) that keeps its blur(8px). This is the hero pattern in header-landing (flagged: the render came out 1268 px shorter and 16 px wider than the original after 2 correction attempts).
Lift white cards with the single ambient shadow #0A0A0C0F 0px 4px 20px 0px at rounded.xl (22px). This matches card and card-3.
Keep the frosted nav capsule as measured: #DCDCE099 fill, blur(24px) saturate(1.5), 8px padding and 22px radius (navigation-group). The active tab is a white pill with #00000014 0px 0.98px 11.74px 0px.
Space sections 80px apart (section-padding-y) and hold content to 1080px (footer-inner-inner-max-width). Grid cards sit 16px apart (card-grid-gap, card-3-grid-gap).
Use Space Mono mono-label on surface-raised chips for meta information such as dates, statuses and tags.

Don't

Don't use bold or semibold anywhere. Emphasis is a family switch or a Fraunces italic.
Don't introduce new hues. accent-link (#3563AD) is the only colour, and it stays on inline text links. Never use it as a button or surface fill.
Don't use pure black for text or fills. Ink is always ink #18181B, and secondary text is muted #6B6B70.
Don't describe or rebuild the system as flat. The ambient shadow and the two blurs (blur(24px) saturate(1.5), blur(8px)) are part of it.
Don't stack or darken shadows. There is one ambient tier and one active-pill tier, nothing heavier.
Don't turn buttons into full pills. rounded.full is reserved for true pill or circle elements.
Don't separate sections with hairlines or colour bands. Use the 80px section-padding-y on the same surface canvas.
Don't drop the 1px solid transparent border on buttons. The focus state (1px solid #A1A1A1 plus a 3px #A1A1A180 ring) depends on it to avoid layout shift.

Responsive Behavior

Scope

This analysis compares two viewports only: one desktop capture and one mobile capture. No intermediate breakpoints were observed, so no breakpoint pixel values are stated.

What changes on mobile

Element	Desktop	Mobile
Hero headline	72px Fraunces, `hero-display` (`header-landing-inner`)	36px Fraunces at the same -1.3px tracking (`header-landing-mobile-inner`)
Footer statement	42px Fraunces (`footer-inner-inner`)	28px Fraunces (`footer-inner-mobile-inner`)
Footer column gap	80px (`footer-inner-column-gap`)	56px (`footer-inner-mobile-column-gap`)
Footer height	484px (`footer-inner`)	741px (`footer-inner-mobile`), because columns stack
Navigation	Capsule with inline links and an icon button	Capsule with the wordmark and a hamburger toggle
Header bar height	58px (`header-inner`)	58px (`header-inner-mobile`)

The mobile header recipe is flagged: header-landing-mobile (flagged: the header-landing-mobile-group-4 y did not reproduce the measured 220px after 2 correction attempts).

Behaviour

Navigation. It keeps its glass capsule, with the same #DCDCE099 fill, blur(24px) saturate(1.5), 22px radius and 8px padding (header-inner-mobile-group). The link row collapses into a 48×42px menu toggle (header-inner-mobile-menu-toggle) drawn with ink bars.
Cards. Card grids stack to full-width single cards.
Hero. The CTA pair stays side by side.
Typography. Headings shrink but stay in Fraunces 350. Body and lead sizes are unchanged (header-landing-mobile-inner-2 stays 19.2px).
Container. The container cap remains 1080px (footer-inner-mobile-inner-max-width) and simply exceeds the viewport.

Touch targets

Interactive controls measure 42px tall for icon and ghost buttons and the menu toggle, and 46px for text CTAs (button-primary). Keep new controls at or above 42px.

Iteration Guide

Reference tokens, never raw hex. Use ink, muted, surface, surface-raised, surface-strong, hairline, accent-link and focus-ring. The dark theme swaps these same roles, so hard-coded hex breaks dark mode.
Headlines are Fraunces 350 only. Pick from hero-display, display-lg, display-md, title-lg and title-md, and keep their negative tracking. Any new text size must use an existing weight (350, 400 or 500).
Controls use rounded.md (15px) and 42px or 46px heights. Add new button variants as fill and alpha changes on the existing button-primary, button-secondary and button-ghost recipes, not as new shapes.
Elevation has exactly two shadows and two blurs. Use #0A0A0C0F 0px 4px 20px 0px for cards and the capsule, and #00000014 0px 0.98px 11.74px 0px for the active pill. Use blur(24px) saturate(1.5) for the nav and blur(8px) for the secondary CTA. Do not invent a third tier.
Nest radii downward. A 22px card (rounded.xl) holds 16px wells (rounded.lg), which hold 7px chips (rounded.xs). A child must never be rounder than its parent.
Keep spacing on the measured scale. Use 80px between sections (section-padding-y), 16px grid gutters (card-grid-gap), 56px or 80px footer gaps, and cap content at 1080px.
Keep colour scarce. Blue (accent-link) stays on inline links. Every other accent must come from the illustration layer, not the UI chrome.

Known Gaps

Flagged recipes did not reproduce exactly. Treat their values as close but unconfirmed:
- button-primary (flagged: 96% pixel match)
- button-primary-2 and button-secondary (flagged: 93% match on focus)
- card-2 (flagged: the render came out 3100 px shorter than the original)
- header-landing (flagged: the render came out 1268 px shorter and 16 px wider)
- header-landing-mobile (flagged: group y offset did not reproduce)
Hover states are partial. Only the secondary-button hover fill (#18181B24) was measured. Hover treatments for the primary CTA, nav links and footer links are listed as states but carry no values.
Scroll-driven content is unverified. The landing header measures 2700px tall, and the visual analysis notes long blank stretches. These suggest scroll-triggered animation that a static capture cannot reproduce.
Motion was not captured. Transitions, durations and easing are not recorded.
Responsive evidence is two-viewport. Breakpoints, tablet layouts and column-collapse thresholds are unknown.
Some tokens lack recipes. rounded.sm (12px) and rounded.full (9999px) were seen on the page but on no measured component. mono-lg and accent-link each appear on a single page only.
No forms were measured. The contact page was captured, but no input or form recipe was produced, so field styling is undefined.
Dark-mode depth is unconfirmed. Dark-theme colours were sampled, but dark-mode shadows, blur tints and component-level values were not.
Some content was not captured. Several anatomy parts are empty, including navigation-button, card-2-group-6 and card-3-group-4 content, and the illustrations exist only as placeholders.

Extracted from Magentix Studio’s public website, not official brand guidelines.

More like this

Browse all

Business & Professional Services

Shopify

Shopify's marketing homepage uses a dramatic full-bleed video hero with a near-black (#02090a) background that contrasts sharply with the white navigation bar above. The primary brand accent is a vivid mint green (#36f4a4) used sparingly for highlights and interactive states. Typography is split between NeueHaasGrotesk for display/editorial headings and Inter-Variable for UI body copy. CTAs use fully-rounded pill shapes (border-radius: 9999px). The overall system is confident, high-contrast, and aspirational — built to convert visitors into merchants.

Travel, Transport & Logistics

Airbnb

Airbnb's design system is built around a single proprietary variable font (Airbnb Cereal VF), a near-monochrome neutral palette anchored by deep charcoal (#222222) and light grays, with the brand's signature "Rausch" coral-pink (#ff385c) reserved exclusively for primary CTAs and the logo. The layout is a responsive photo-card grid with generous image-to-text ratios, soft 20px rounded corners on cards, and a multi-layer ambient shadow system that creates subtle depth without harsh contrast. The search bar is a prominent pill-shaped container that unifies the core user action.

Commerce & Retail · E-commerce Store

IKEA

IKEA's global homepage uses a bold, flat design system anchored by the iconic IKEA Yellow (#ffdb00) as the primary action surface and IKEA Blue (#0058a3) as the brand logo accent. The entire typographic system is built on a single custom typeface — Noto IKEA — spanning weights 400 and 700 across a tightly defined scale from 14px body text to 51px display headings. Elevation is conveyed entirely through color contrast and layout structure rather than shadows. The layout uses a max-width container of 90rem with a 1.5rem desktop grid gap, and a consistent 8px border-radius token applied to interactive elements. The off-white background (#fffefb) provides warmth against the stark #111111 text, creating a high-contrast, accessible reading experience.

Software & SaaS · Productivity & Notes

Notion

Notion's marketing homepage pairs a deep navy (#02093a) hero section with a light (#f6f5f4) body, using a custom typeface (NotionInter) across all text roles. The design employs a 12-column grid with 28px gutters, a dual-radius language (8px for cards, 9999px for pills), and a multi-layer progressive shadow system for floating UI elements. Brand blue (#2537b1) drives CTAs and accent highlights, while a semantic gray-scale ladder (gray-200 through gray-900) structures all text and surface hierarchy.

Developer & Infrastructure · Developer Tools & IDEs

Railway

Railway's design system is a dark-first developer platform UI anchored in deep near-black navy surfaces (#13111c, #0b0b0f), high-contrast off-white text (#f7f7f8), and a distinctive purple brand accent (#853bce / #553f83). The hero uses IBM Plex Serif for editorial weight, while Inter handles all UI copy and JetBrains Mono / SF Mono serve code contexts. Elevation is achieved through inset white-glow borders (rgba(255,255,255,0.2) 1.5px inset) rather than drop shadows, giving the UI a glass-panel aesthetic. The spacing system is 4px-based with a strong 8/12/16/24/32 rhythm. Border radii are tight (4px dominant) with selective 8px and 16px for cards and hero containers.

Finance & Fintech

Stripe

Stripe's marketing homepage uses a tightly controlled design system (HDS — Stripe Design System) built around the variable font "sohne-var" at light weights (300–400), a deep navy-to-indigo brand palette anchored by #533afd (Stripe Indigo), and a signature full-bleed spectral gradient hero. Components are low-radius (4–6px), flat-to-minimal-shadow, and structured around an 8px base spacing grid. The overall tone is authoritative yet approachable — financial infrastructure communicated through confident typography and restrained color use.

Magentix Studio Design System

Button4

Card3

Extra4

Header4

Footer4

Overview

Colors

Ink & Accent

Surface

Text

Hairlines & Borders

Component & State Colors

Dark Mode

Typography

Font Family

Hierarchy

Principles

Note on Font Substitutes

Layout

Spacing System

Grid & Container

Whitespace Philosophy

Measured Layout

Elevation & Depth

Shapes

Border Radius Scale

Components

Button, primary

Button, secondary

Card

Card (2)

Navigation

Theme toggle

Header (landing)

Footer (landing)

Button, primary (2)

Button, ghost

Card (3)

Product thumbnail button

Hero

Header (inner)

Footer (inner)

Do's and Don'ts

Do

Don't

Responsive Behavior

Scope

What changes on mobile

Behaviour

Touch targets

Iteration Guide

Known Gaps

More like this

Shopify

Airbnb

IKEA

Notion

Railway

Stripe