Magentix Studio Tasarım Sistemi

PROMotor v4

Magentix Studio, editoryal ve sanat galerisi estetiğiyle bir yapay zekâ öncelikli ürün stüdyosunun görsel dilini şekillendiriyor.

Görsel sistem

%100 güven

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 güven

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 güven

xs · 7px

sm · 12px

md · 15px

lg · 16px

xl · 22px

2xl · 24px

3xl · 64px

full · 9999px

Bileşenler

Buttons4

%100 eşleşme

ghost · desktop

Durağan%100 eşleşme34 ölçüm eşleşiyor

Orijinal

Render

Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%91 eşleşme

primary · desktop

Siteye %96 benzerlikte render ediliyor, bu %97 eşiğinin altında.

Durağan%96 eşleşme25 ölçüm eşleşiyor

Orijinal

Render

Hover%96 eşleşme22 ölçüm eşleşiyor

Orijinal

Render

Focus%91 eşleşme22 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%93 eşleşme

primary · desktop

Focus durumunda, siteye %93 benzerlikte render ediliyor, bu %97 eşiğinin altında.

Durağan%97 eşleşme25 ölçüm eşleşiyor

Orijinal

Render

Hover%97 eşleşme22 ölçüm eşleşiyor

Orijinal

Render

Focus%93 eşleşme22 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%93 eşleşme

secondary · desktop

Focus durumunda, siteye %93 benzerlikte render ediliyor, bu %97 eşiğinin altında.

Durağan%100 eşleşme25 ölçüm eşleşiyor

Orijinal

Render

Hover%98 eşleşme22 ölçüm eşleşiyor

Orijinal

Render

Focus%93 eşleşme22 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

Cards3

%100 eşleşme

desktop

Durağan%100 eşleşme77 ölçüm eşleşiyor

Sitedeki orijinal Card, durağan — Orijinal

Durağan, örnek 2%100 eşleşme77 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%100 eşleşme77 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 4%100 eşleşme77 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%95 eşleşme

desktop

Siteye %100 benzerlikte render ediliyor, bu %96 eşiğinin altında.

Durağan%100 eşleşme180 ölçüm eşleşiyor

Sitedeki orijinal Card (2), durağan — Orijinal

Card (2) için ayrı render, durağan — Render

Focus%100 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Card (2), focus — Orijinal

Card (2) için ayrı render, focus — Render

Durağan, örnek 2%100 eşleşme180 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%95 eşleşme180 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 4%95 eşleşme180 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 5%95 eşleşme180 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme326 ölçüm eşleşiyor

Sitedeki orijinal Card (3), durağan — Orijinal

Card (3) için ayrı render, durağan — Render

Durağan, örnek 2%100 eşleşme326 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%100 eşleşme326 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

Extras4

%100 eşleşme

desktop

Durağan%100 eşleşme44 ölçüm eşleşiyor

Sitedeki orijinal Hero, durağan — Orijinal

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme198 ölçüm eşleşiyor

Sitedeki orijinal Navigation, durağan — Orijinal

Navigation için ayrı render, durağan — Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme34 ölçüm eşleşiyor

Sitedeki orijinal Product thumbnail button, durağan — Orijinal

Product thumbnail button için ayrı render, durağan — Render

Focus%100 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Product thumbnail button, focus — Orijinal

Product thumbnail button için ayrı render, focus — Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme34 ölçüm eşleşiyor

Orijinal

Render

Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

Headers4

%100 eşleşme

desktop

Durağan%100 eşleşme253 ölçüm eşleşiyor

Sitedeki orijinal Header (inner), durağan — Orijinal

Header (inner) için ayrı render, durağan — Render

Focuskontrol edilmedi

Sitedeki orijinal Header (inner), focus — Orijinal

Header (inner) için ayrı render, focus — Render

cta üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

link üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

logo üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Siteye %100 benzerlikte render ediliyor, bu %96 eşiğinin altında.

Durağan%100 eşleşme292 ölçüm eşleşiyor

Sitedeki orijinal Header (landing), durağan — Orijinal

Header (landing) için ayrı render, durağan — Render

Hoverkontrol edilmedi

Sitedeki orijinal Header (landing), hover — Orijinal

Header (landing) için ayrı render, hover — Render

Focuskontrol edilmedi

Sitedeki orijinal Header (landing), focus — Orijinal

Header (landing) için ayrı render, focus — Render

cta 2 üzerinde Focus%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

cta 2 üzerinde Hover%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

cta üzerinde Focus%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

cta üzerinde Hover%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

mobile

Durağan%100 eşleşme204 ölçüm eşleşiyor

Focuskontrol edilmedi

logo üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

menu toggle üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%98 eşleşme

mobile

Group 4 y değeri 233px, sitede ise 220px; Group 4 height değeri 178px, sitede ise 203px ve 9 tane daha.

Durağan%99 eşleşme292 ölçümden 11 tanesi farklı

Hoverkontrol edilmedi

Focuskontrol edilmedi

cta 2 üzerinde Focus%99 eşleşme22 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

cta 2 üzerinde Hover%98 eşleşme22 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

cta üzerinde Focus%99 eşleşme22 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

cta üzerinde Hover%99 eşleşme22 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

Footers4

%100 eşleşme

desktop

Durağan%100 eşleşme627 ölçüm eşleşiyor

Sitedeki orijinal Footer (inner), durağan — Orijinal

Footer (inner) için ayrı render, durağan — Render

Hoverkontrol edilmedi

Sitedeki orijinal Footer (inner), hover — Orijinal

Footer (inner) için ayrı render, hover — Render

Focuskontrol edilmedi

Sitedeki orijinal Footer (inner), focus — Orijinal

Footer (inner) için ayrı render, focus — Render

cta üzerinde Focus%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

cta üzerinde Hover%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

link üzerinde Hover%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme627 ölçüm eşleşiyor

Sitedeki orijinal Footer (landing), durağan — Orijinal

Footer (landing) için ayrı render, durağan — Render

Hoverkontrol edilmedi

Sitedeki orijinal Footer (landing), hover — Orijinal

Footer (landing) için ayrı render, hover — Render

Focuskontrol edilmedi

Sitedeki orijinal Footer (landing), focus — Orijinal

Footer (landing) için ayrı render, focus — Render

link 2 üzerinde Hover%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

link üzerinde Focus%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

link üzerinde Hover%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

mobile

Durağan%100 eşleşme627 ölçüm eşleşiyor

Hoverkontrol edilmedi

Focuskontrol edilmedi

cta üzerinde Focus%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

cta üzerinde Hover%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

link üzerinde Hover%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

mobile

Durağan%100 eşleşme627 ölçüm eşleşiyor

Hoverkontrol edilmedi

Focuskontrol edilmedi

link 2 üzerinde Hover%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

link üzerinde Focus%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

link üzerinde Hover%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

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.

Bu DESIGN.md dosyası, AI kodlama ajanlarının onu okuduğu dil olan İngilizcedir.

Magentix Studio web sitesinin herkese açık sayfalarından çıkarıldı, resmi marka yönergeleri değildir. Başka bir sitenin fontlarını kontrol et

Benzerleri

Tümüne göz at

İş ve Profesyonel Hizmetler

Shopify

Shopify'ın pazarlama ana sayfası, üstteki beyaz gezinme çubuğuyla keskin bir kontrast oluşturan, tam genişlikte ve dramatik bir video kahraman alanına sahip. Arka plan neredeyse siyah (#02090a). Birincil marka vurgusu canlı bir nane yeşili (#36f4a4) ve bu renk vurgulamalarda ve etkileşimli durumlarda ölçülü biçimde kullanılıyor. Tipografi, görünen başlık ve editoryal metinler için NeueHaasGrotesk, arayüz gövde metinleri için ise Inter-Variable arasında bölünmüş. Eylem çağrıları (CTA) tamamen yuvarlatılmış hap şeklinde (border-radius: 9999px). Genel sistem özgüven veren, yüksek kontrastlı ve ilham verici; ziyaretçileri satıcıya dönüştürmek üzere tasarlanmış.

Seyahat, Ulaşım ve Lojistik

Airbnb

Airbnb'nin tasarım sistemi, tek bir özel değişken yazı tipi (Airbnb Cereal VF) etrafında kurulmuş. Renk paleti neredeyse tek renkli; derin kömür grisi (#222222) ve açık gri tonlar bu paletin omurgasını oluşturuyor. Markanın imza rengi olan "Rausch" mercan-pembesi (#ff385c) yalnızca birincil eylem düğmeleri ve logo için ayrılmış. Yerleşim, geniş görsel-metin oranlarına sahip, duyarlı bir fotoğraf kartı ızgarası. Kartlarda 20px yumuşak köşe yuvarlaması var; sert bir kontrast yaratmadan ince bir derinlik veren çok katmanlı ortam gölge sistemi kullanılıyor. Arama çubuğu, temel kullanıcı eylemini bir araya getiren, dikkat çekici hap şeklinde bir kapsayıcı.

Ticaret ve Perakende · E-commerce Store

IKEA

IKEA'nın küresel ana sayfası, birincil eylem yüzeyi olarak ikonik IKEA Sarısı'nı (#ffdb00) ve marka logosundaki vurgu rengi olarak IKEA Mavisi'ni (#0058a3) kullanan, cesur ve düz bir tasarım sistemine dayanıyor. Tüm tipografik sistem, 14px gövde metninden 51px görüntü başlıklarına uzanan sıkı tanımlı bir ölçek üzerinde, 400 ve 700 ağırlıklarını kapsayan tek bir özel yazı tipi olan Noto IKEA üzerine kurulu. Yükseklik hissi gölge yerine tamamen renk kontrastı ve yerleşim yapısıyla sağlanıyor. Düzen, 90rem maksimum genişlikli bir kapsayıcı ve masaüstünde 1.5rem ızgara boşluğu kullanıyor; etkileşimli öğelerde tutarlı şekilde 8px köşe yarıçapı tokenı uygulanıyor. Saf #111111 metin rengiyle buluşan #fffefb kırık beyaz arka plan sıcaklık katarak yüksek kontrastlı ve erişilebilir bir okuma deneyimi yaratıyor.

Yazılım ve SaaS · Productivity & Notes

Notion

Notion'ın pazarlama ana sayfası, koyu lacivert (#02093a) bir kahraman bölümünü açık (#f6f5f4) bir gövdeyle birleştirir ve tüm metin rolleri için özel bir yazı tipi (NotionInter) kullanır. Tasarım, 28px oluklu 12 sütunlu bir ızgara, kartlar için 8px ve haplar için 9999px olmak üzere çift köşe yarıçapı dili ve yüzen arayüz öğeleri için çok katmanlı kademeli bir gölge sistemi kullanır. Marka mavisi (#2537b1) CTA'ları ve vurgu noktalarını yönlendirir; anlamsal gri tonları basamağı (gray-200'den gray-900'e) tüm metin ve yüzey hiyerarşisini düzenler.

Geliştirici ve Altyapı · Developer Tools & IDEs

Railway

Railway'in tasarım sistemi, derin, neredeyse siyah lacivert yüzeylere (#13111c, #0b0b0f) dayanan, karanlık temalı öncelikli bir geliştirici platformu arayüzüdür. Yüksek kontrastlı kırık beyaz metin (#f7f7f8) ve belirgin bir mor marka vurgusu (#853bce / #553f83) kullanır. Kahraman bölümünde editoryal bir ağırlık için IBM Plex Serif kullanılır; tüm arayüz metinleri Inter ile yazılır, kod alanlarında ise JetBrains Mono ve SF Mono tercih edilir. Yükseklik hissi gölge yerine, rgba(255,255,255,0.2) 1.5px inset beyaz parıltılı kenarlıklarla sağlanır; bu da arayüze cam panel estetiği kazandırır. Boşluk sistemi 4px temellidir ve 8/12/16/24/32 ritmiyle sıkı bir düzen izler. Köşe yuvarlaklıkları dar tutulur: baskın olan 4px'tir, kartlar ve kahraman kapsayıcılarında ise seçici olarak 8px ve 16px kullanılır.

Finans ve Fintech

Stripe

Stripe'ın pazarlama ana sayfası, "sohne-var" değişken yazı tipinin hafif ağırlıklarında (300–400) ve #533afd (Stripe Indigo) ile belirlenen, koyu lacivertten indigoya uzanan bir marka paleti üzerine kurulu, sıkı biçimde kontrol edilen bir tasarım sistemi (HDS — Stripe Design System) kullanıyor. Tam genişlikte, imza niteliğindeki spektral gradyan kahraman alanı öne çıkıyor. Bileşenler 4–6px köşe yarıçapına sahip, düz ya da minimal gölgeli ve 8px temel boşluk ızgarası etrafında düzenlenmiş. Genel ton, güven veren ama samimi: finansal altyapı, özgüvenli tipografi ve ölçülü renk kullanımıyla aktarılıyor.

Magentix Studio Tasarım Sistemi

Bileşenler

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

Benzerleri

Shopify

Airbnb

IKEA

Notion

Railway

Stripe

Benzer paletler