Design System Magentix Studio

magentix.studio

PROEngine v4

Magentix Studio membalut sebuah studio produk berbasis AI dengan nuansa editorial, seperti pakaian galeri seni.

Sistem visual

100% keyakinan

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% keyakinan

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% keyakinan

xs · 7px

sm · 12px

md · 15px

lg · 16px

xl · 22px

2xl · 24px

3xl · 64px

full · 9999px

Komponen

Buttons4

100% kecocokan

ghost · desktop

DiamKecocokan 100%34 ukuran cocok

Asli

Render

FocusKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

91% kecocokan

primary · desktop

Hasil render-nya 96% mirip dengan situs, di bawah ambang 97%.

DiamKecocokan 96%25 ukuran cocok

Asli

Render

HoverKecocokan 96%22 ukuran cocok

Asli

Render

FocusKecocokan 91%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

93% kecocokan

primary · desktop

Saat focus, hasil render-nya 93% mirip dengan situs, di bawah ambang 97%.

DiamKecocokan 97%25 ukuran cocok

Asli

Render

HoverKecocokan 97%22 ukuran cocok

Asli

Render

FocusKecocokan 93%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

93% kecocokan

secondary · desktop

Saat focus, hasil render-nya 93% mirip dengan situs, di bawah ambang 97%.

DiamKecocokan 100%25 ukuran cocok

Asli

Render

HoverKecocokan 98%22 ukuran cocok

Asli

Render

FocusKecocokan 93%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

Cards3

100% kecocokan

desktop

DiamKecocokan 100%77 ukuran cocok

Render terpisah dari Card, diam — Render

Diam, instance 2Kecocokan 100%77 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%77 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%77 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

95% kecocokan

desktop

Hasil render-nya 100% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 100%180 ukuran cocok

Render terpisah dari Card (2), diam — Render

FocusKecocokan 100%18 ukuran cocok

Render terpisah dari Card (2), focus — Render

Diam, instance 2Kecocokan 100%180 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 95%180 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 95%180 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 95%180 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%326 ukuran cocok

Render terpisah dari Card (3), diam — Render

Diam, instance 2Kecocokan 100%326 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%326 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Extras4

100% kecocokan

desktop

DiamKecocokan 100%44 ukuran cocok

Render terpisah dari Hero, diam — Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%198 ukuran cocok

Render terpisah dari Navigation, diam — Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%34 ukuran cocok

Product thumbnail button asli di situs, diam — Asli

Render terpisah dari Product thumbnail button, diam — Render

FocusKecocokan 100%18 ukuran cocok

Product thumbnail button asli di situs, focus — Asli

Render terpisah dari Product thumbnail button, focus — Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%34 ukuran cocok

Asli

Render

FocusKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

Headers4

100% kecocokan

desktop

DiamKecocokan 100%253 ukuran cocok

Header (inner) asli di situs, diam — Asli

Render terpisah dari Header (inner), diam — Render

Focustidak dicek

Header (inner) asli di situs, focus — Asli

Render terpisah dari Header (inner), focus — Render

Focus pada ctaKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada linkKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada logoKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

Hasil render-nya 100% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 100%292 ukuran cocok

Header (landing) asli di situs, diam — Asli

Render terpisah dari Header (landing), diam — Render

Hovertidak dicek

Header (landing) asli di situs, hover — Asli

Render terpisah dari Header (landing), hover — Render

Focustidak dicek

Header (landing) asli di situs, focus — Asli

Render terpisah dari Header (landing), focus — Render

Focus pada cta 2Kecocokan 100%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada cta 2Kecocokan 100%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada ctaKecocokan 100%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada ctaKecocokan 100%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

mobile

DiamKecocokan 100%204 ukuran cocok

Focustidak dicek

Focus pada logoKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada menu toggleKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

98% kecocokan

mobile

Group 4 y bernilai 233px, sedangkan situs memakai 220px; Group 4 height bernilai 178px, sedangkan situs memakai 203px dan 9 lainnya.

DiamKecocokan 99%11 dari 292 ukuran berbeda

Hovertidak dicek

Focustidak dicek

Focus pada cta 2Kecocokan 99%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada cta 2Kecocokan 98%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada ctaKecocokan 99%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada ctaKecocokan 99%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Footers4

100% kecocokan

desktop

DiamKecocokan 100%627 ukuran cocok

Footer (inner) asli di situs, diam — Asli

Render terpisah dari Footer (inner), diam — Render

Hovertidak dicek

Footer (inner) asli di situs, hover — Asli

Render terpisah dari Footer (inner), hover — Render

Focustidak dicek

Footer (inner) asli di situs, focus — Asli

Render terpisah dari Footer (inner), focus — Render

Focus pada ctaKecocokan 100%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada ctaKecocokan 100%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada linkKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%627 ukuran cocok

Footer (landing) asli di situs, diam — Asli

Render terpisah dari Footer (landing), diam — Render

Hovertidak dicek

Footer (landing) asli di situs, hover — Asli

Render terpisah dari Footer (landing), hover — Render

Focustidak dicek

Footer (landing) asli di situs, focus — Asli

Render terpisah dari Footer (landing), focus — Render

Hover pada link 2Kecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada linkKecocokan 100%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada linkKecocokan 100%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

mobile

DiamKecocokan 100%627 ukuran cocok

Hovertidak dicek

Focustidak dicek

Focus pada ctaKecocokan 100%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada ctaKecocokan 100%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada linkKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

mobile

DiamKecocokan 100%627 ukuran cocok

Hovertidak dicek

Focustidak dicek

Hover pada link 2Kecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada linkKecocokan 100%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada linkKecocokan 100%22 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di 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.

Buttons

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

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

Cards

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)

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.

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

Headers

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

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

Footers

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

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

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.

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.

File DESIGN.md ini berbahasa Inggris, bahasa yang dibaca oleh agen coding AI.

Diekstrak dari website publik Magentix Studio, bukan pedoman brand resmi. Cek font situs lain

Serupa dengan ini

Lihat semua

Bisnis & Layanan Profesional

Shopify

Halaman beranda pemasaran Shopify menggunakan hero video layar penuh yang dramatis dengan latar belakang hampir hitam (#02090a) yang kontras tajam dengan bilah navigasi putih di atasnya. Aksen merek utamanya adalah hijau mint cerah (#36f4a4) yang digunakan secara hemat untuk sorotan dan status interaktif. Tipografinya terbagi antara NeueHaasGrotesk untuk judul display dan editorial, serta Inter-Variable untuk teks isi UI. CTA menggunakan bentuk pill dengan sudut membulat penuh (border-radius: 9999px). Secara keseluruhan, sistem ini terkesan percaya diri, berkontras tinggi, dan aspiratif, dirancang untuk mengubah pengunjung menjadi pedagang.

Perjalanan, Transportasi & Logistik

Airbnb

Sistem desain Airbnb dibangun di sekitar satu font variabel milik sendiri (Airbnb Cereal VF), dengan palet netral hampir monokrom yang berpusat pada abu-abu arang tua (#222222) dan abu-abu terang. Warna coral-pink khas merek, "Rausch" (#ff385c), hanya digunakan untuk CTA utama dan logo. Tata letaknya berupa grid kartu foto yang responsif, dengan rasio gambar terhadap teks yang lega, sudut kartu membulat 20px yang lembut, serta sistem bayangan ambient berlapis banyak yang menciptakan kedalaman halus tanpa kontras yang keras. Bilah pencarian berbentuk pil yang menonjol menyatukan aksi utama pengguna.

Perdagangan & Ritel · E-commerce Store

IKEA

IKEA-Yellow (#ffdb00) berfungsi sebagai permukaan aksi utama dan IKEA Blue (#0058a3) sebagai aksen logo merek, dalam sistem desain IKEA yang tegas dan datar pada beranda globalnya. Seluruh sistem tipografi dibangun dengan satu huruf kustom, Noto IKEA, dengan bobot 400 dan 700 pada skala yang ketat, dari teks isi 14px hingga judul display 51px. Elevasi dibentuk sepenuhnya lewat kontras warna dan struktur tata letak, bukan bayangan. Tata letak memakai kontainer lebar maksimum 90rem dengan jarak grid desktop 1.5rem, serta token radius sudut 8px yang konsisten untuk elemen interaktif. Latar belakang off-white #fffefb memberi kesan hangat di samping teks #111111 yang tegas, sehingga pengalaman membaca tetap berkontras tinggi dan mudah diakses.

Software & SaaS · Productivity & Notes

Notion

Halaman beranda pemasaran Notion memadukan bagian hero navy tua (#02093a) dengan badan halaman yang terang (#f6f5f4), dan menggunakan tipografi kustom (NotionInter) untuk semua peran teks. Desainnya memakai grid 12 kolom dengan gutter 28px, serta bahasa radius ganda: 8px untuk kartu dan 9999px untuk pill. Sistem bayangan progresif berlapis banyak diterapkan pada elemen UI yang tampak melayang. Warna biru merek (#2537b1) menjadi penggerak CTA dan sorotan aksen, sementara tangga skala abu-abu semantik (gray-200 hingga gray-900) menata hierarki teks dan permukaan.

Developer & Infrastruktur · Developer Tools & IDEs

Railway

Sistem desain Railway adalah antarmuka platform pengembang yang mengutamakan mode gelap, berakar pada permukaan biru laut hampir hitam yang pekat (#13111c, #0b0b0f), teks off-white berkontras tinggi (#f7f7f8), dan aksen merek ungu yang khas (#853bce / #553f83). Bagian hero menggunakan IBM Plex Serif untuk kesan editorial yang tegas, sedangkan Inter menangani seluruh teks antarmuka dan JetBrains Mono / SF Mono digunakan untuk konteks kode. Elevasi dicapai melalui border dengan cahaya putih di bagian dalam (rgba(255,255,255,0.2) 1.5px inset), bukan bayangan jatuh, sehingga antarmuka memiliki nuansa panel kaca. Sistem spasinya berbasis kelipatan 4px dengan ritme 8/12/16/24/32 yang kuat. Radius sudutnya rapat (dominan 4px), dengan 8px dan 16px yang digunakan secara selektif untuk kartu dan wadah hero.

Keuangan & Fintech

Stripe

Homepage marketing Stripe menggunakan sistem desain yang sangat terkontrol (HDS — Stripe Design System) yang dibangun di sekitar font variabel "sohne-var" pada bobot ringan (300–400), palet merek dari navy tua hingga indigo yang berpusat pada #533afd (Stripe Indigo), dan hero dengan gradien spektral tepi-ke-tepi yang menjadi ciri khasnya. Komponennya memiliki radius sudut rendah (4–6px), bayangan datar hingga minimal, serta tersusun di atas grid spasi dasar 8px. Nuansa keseluruhannya berwibawa namun tetap ramah, menyampaikan infrastruktur keuangan lewat tipografi yang percaya diri dan penggunaan warna yang terukur.

Design System Magentix Studio

Komponen

Buttons4

Cards3

Extras4

Headers4

Footers4

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

Buttons

Cards

Navigation

Theme toggle

Headers

Footers

Product thumbnail button

Hero

Do's and Don'ts

Do

Don't

Responsive Behavior

Scope

What changes on mobile

Behaviour

Touch targets

Iteration Guide

Known Gaps

Serupa dengan ini

Shopify

Airbnb

IKEA

Notion

Railway

Stripe

Palet serupa