100% 匹配度
ghost · desktop
提取置信度
- 组件与网站的匹配度为 99%
- 覆盖了网站 100% 的颜色
- 覆盖了网站 100% 的文字样式
- 100% 的令牌在网站上出现过
Magentix Studio 以编辑式、美术馆般的视觉语言，为一家以 AI 为核心的产品工作室塑造形象。
视觉系统
100% 置信度
100% 置信度
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% 置信度
header-inner-gap
2px
2px
header-inner-mobile-gap
2px
2px
button-ghost-padding-x
12px
12px
card-grid-gap
16px
16px
card-3-grid-gap
16px
16px
footer-landing-gap
56px
56px
footer-landing-mobile-column-gap
56px
56px
footer-landing-mobile-gap
56px
56px
footer-inner-gap
56px
56px
footer-inner-mobile-column-gap
56px
56px
footer-inner-mobile-gap
56px
56px
section-padding-y
80px
80px
footer-landing-column-gap
80px
80px
footer-inner-column-gap
80px
80px
header-inner-inner-max-width
180px
180px
header-inner-mobile-inner-max-width
180px
180px
footer-landing-inner-max-width
1080px
1080px
footer-landing-mobile-inner-max-width
1080px
1080px
footer-inner-inner-max-width
1080px
1080px
footer-inner-mobile-inner-max-width
1080px
1080px
100% 置信度
xs · 7px
sm · 12px
md · 15px
lg · 16px
xl · 22px
2xl · 24px
3xl · 64px
full · 9999px
组件
Buttons4
91% 匹配度
primary · desktop
它的渲染与网站的相似度为 96%，低于 97% 的标准。
默认匹配度 96%25 项测量全部一致
悬停匹配度 96%22 项测量全部一致
聚焦匹配度 91%22 项测量全部一致
93% 匹配度
primary · desktop
聚焦时，它的渲染与网站的相似度为 93%，低于 97% 的标准。
默认匹配度 97%25 项测量全部一致
悬停匹配度 97%22 项测量全部一致
聚焦匹配度 93%22 项测量全部一致
93% 匹配度
secondary · desktop
聚焦时，它的渲染与网站的相似度为 93%，低于 97% 的标准。
默认匹配度 100%25 项测量全部一致
悬停匹配度 98%22 项测量全部一致
聚焦匹配度 93%22 项测量全部一致
Cards3
100% 匹配度
desktop
默认匹配度 100%77 项测量全部一致
默认，实例 2匹配度 100%77 项测量全部一致
没有存储图片
没有存储图片
默认，实例 3匹配度 100%77 项测量全部一致
没有存储图片
没有存储图片
默认，实例 4匹配度 100%77 项测量全部一致
没有存储图片
没有存储图片
95% 匹配度
desktop
它的渲染与网站的相似度为 100%，低于 96% 的标准。
默认匹配度 100%180 项测量全部一致
聚焦匹配度 100%18 项测量全部一致
默认，实例 2匹配度 100%180 项测量全部一致
没有存储图片
没有存储图片
默认，实例 3匹配度 95%180 项测量全部一致
没有存储图片
没有存储图片
默认，实例 4匹配度 95%180 项测量全部一致
没有存储图片
没有存储图片
默认，实例 5匹配度 95%180 项测量全部一致
没有存储图片
没有存储图片
100% 匹配度
desktop
默认匹配度 100%326 项测量全部一致
默认，实例 2匹配度 100%326 项测量全部一致
没有存储图片
没有存储图片
默认，实例 3匹配度 100%326 项测量全部一致
没有存储图片
没有存储图片
Extras4
100% 匹配度
desktop
默认匹配度 100%44 项测量全部一致
100% 匹配度
desktop
默认匹配度 100%198 项测量全部一致
100% 匹配度
desktop
100% 匹配度
desktop
Headers4
100% 匹配度
desktop
默认匹配度 100%253 项测量全部一致
聚焦未检查
cta 上的聚焦匹配度 100%18 项测量全部一致
没有存储图片
没有存储图片
link 上的聚焦匹配度 100%18 项测量全部一致
没有存储图片
没有存储图片
logo 上的聚焦匹配度 100%18 项测量全部一致
没有存储图片
没有存储图片
100% 匹配度
desktop
它的渲染与网站的相似度为 100%，低于 96% 的标准。
默认匹配度 100%292 项测量全部一致
悬停未检查
聚焦未检查
cta 2 上的聚焦匹配度 100%22 项测量全部一致
没有存储图片
没有存储图片
cta 2 上的悬停匹配度 100%22 项测量全部一致
没有存储图片
没有存储图片
cta 上的聚焦匹配度 100%22 项测量全部一致
没有存储图片
没有存储图片
cta 上的悬停匹配度 100%22 项测量全部一致
没有存储图片
没有存储图片
100% 匹配度
mobile
默认匹配度 100%204 项测量全部一致
聚焦未检查
logo 上的聚焦匹配度 100%18 项测量全部一致
没有存储图片
没有存储图片
menu toggle 上的聚焦匹配度 100%18 项测量全部一致
没有存储图片
没有存储图片
98% 匹配度
mobile
Group 4 的 y 为 233px，网站上为 220px; Group 4 的 height 为 178px，网站上为 203px，另有 9 项。
默认匹配度 99%292 项测量中有 11 项不同
悬停未检查
聚焦未检查
cta 2 上的聚焦匹配度 99%22 项测量全部一致
没有存储图片
没有存储图片
cta 2 上的悬停匹配度 98%22 项测量全部一致
没有存储图片
没有存储图片
cta 上的聚焦匹配度 99%22 项测量全部一致
没有存储图片
没有存储图片
cta 上的悬停匹配度 99%22 项测量全部一致
没有存储图片
没有存储图片
Footers4
100% 匹配度
desktop
默认匹配度 100%627 项测量全部一致
悬停未检查
聚焦未检查
cta 上的聚焦匹配度 100%22 项测量全部一致
没有存储图片
没有存储图片
cta 上的悬停匹配度 100%22 项测量全部一致
没有存储图片
没有存储图片
link 上的悬停匹配度 100%18 项测量全部一致
没有存储图片
没有存储图片
100% 匹配度
desktop
默认匹配度 100%627 项测量全部一致
悬停未检查
聚焦未检查
link 2 上的悬停匹配度 100%18 项测量全部一致
没有存储图片
没有存储图片
link 上的聚焦匹配度 100%22 项测量全部一致
没有存储图片
没有存储图片
link 上的悬停匹配度 100%22 项测量全部一致
没有存储图片
没有存储图片
100% 匹配度
mobile
默认匹配度 100%627 项测量全部一致
悬停未检查
聚焦未检查
cta 上的聚焦匹配度 100%22 项测量全部一致
没有存储图片
没有存储图片
cta 上的悬停匹配度 100%22 项测量全部一致
没有存储图片
没有存储图片
link 上的悬停匹配度 100%18 项测量全部一致
没有存储图片
没有存储图片
100% 匹配度
mobile
默认匹配度 100%627 项测量全部一致
悬停未检查
聚焦未检查
link 2 上的悬停匹配度 100%18 项测量全部一致
没有存储图片
没有存储图片
link 上的聚焦匹配度 100%22 项测量全部一致
没有存储图片
没有存储图片
link 上的悬停匹配度 100%22 项测量全部一致
没有存储图片
没有存储图片
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 onsurface#F8F8F9, with grey tierssurface-raised#EDEDF0 andsurface-strong#DCDCE0. - Fraunces display serif at weight 350 for every heading from
title-md(24.9px) tohero-display(72px), always negatively tracked. - Three weights only: 350 (serif), 400 (text), 500 (Space Grotesk wordmark).
- Space Mono micro-labels (
mono-label, 13px) on tintedsurface-raisedchips 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 withsurface. - Bone (
surface-raised, #EDEDF0): inset panels and chips. Examples are the illustration well ofproduct-thumbnail-button, the badgecard-2-badge, the meta chipcard-3-textand the small tilescard-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) onheader-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-3andcard-2-group-6, and the active-tab pillheader-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 becomes1px solid #A1A1A1and 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
buttontoken. 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-linkandmono-label, 0.096px onlead). - Line-height tightens with size. Display lines run 1.05–1.1 and reading text 1.4.
body-smopens to 1.5 for narrow card columns. - The footer statement sits off-ladder. It is 42px Fraunces (
footer-inner-inner), betweendisplay-mdandtitle-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 thefooter-landing-columnsgrid)footer-landing-gap: 56px (footer-landing, gap offooter-landing-column-2)footer-landing-inner-max-width: 1080px (footer-landing, max width offooter-landing-columns)footer-landing-mobile-column-gap: 56px (footer-landing-mobile, column gap of thefooter-landing-mobile-columnsgrid)footer-landing-mobile-gap: 56px (footer-landing-mobile, gap offooter-landing-mobile-column-2)footer-landing-mobile-inner-max-width: 1080px (footer-landing-mobile, max width offooter-landing-mobile-columns)header-inner-gap: 2px (header-inner, gap ofheader-inner-group-2)header-inner-inner-max-width: 180px (header-inner, max width ofheader-inner-inner)footer-inner-column-gap: 80px (footer-inner, column gap of thefooter-inner-columnsgrid)footer-inner-gap: 56px (footer-inner, gap offooter-inner-column-2)footer-inner-inner-max-width: 1080px (footer-inner, max width offooter-inner-columns)header-inner-mobile-gap: 2px (header-inner-mobile, gap ofheader-inner-mobile-group-2)header-inner-mobile-inner-max-width: 180px (header-inner-mobile, max width ofheader-inner-mobile-inner)footer-inner-mobile-column-gap: 56px (footer-inner-mobile, column gap of thefooter-inner-mobile-columnsgrid)footer-inner-mobile-gap: 56px (footer-inner-mobile, gap offooter-inner-mobile-column-2)footer-inner-mobile-inner-max-width: 1080px (footer-inner-mobile, max width offooter-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.fullbelongs 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 capturedcard-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.
Navigation
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: thebutton-primarybutton, 12-character label (.c-header-landing__cta)header-landing-cta-2: thebutton-secondarybutton, 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-ctahover: opacity 0.85header-landing-ctafocus: 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 noneheader-landing-cta-2hover (header-landing-cta-2-hover): background-color #18181B24header-landing-cta-2focus: 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-ctahover: opacity 0.85 - mobile,
header-landing-mobile-ctafocus: 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-2hover (header-landing-mobile-cta-2-hover): background-color #18181B24 - mobile,
header-landing-mobile-cta-2focus: 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: thebutton-ghostbutton (.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-logofocus: 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 noneheader-inner-linkfocus: 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 noneheader-inner-ctafocus: 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-logofocus: 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-togglefocus: 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
Footer (landing)
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-linkhover: opacity 0.8footer-landing-linkfocus: 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 nonefooter-landing-link-2hover: opacity 0.7- mobile,
footer-landing-mobile-linkhover: opacity 0.8 - mobile,
footer-landing-mobile-linkfocus: 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-2hover: opacity 0.7
Footer (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
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: thebutton-primary-2button, 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-ctahover: opacity 0.8footer-inner-ctafocus: 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 nonefooter-inner-linkhover: opacity 0.7- mobile,
footer-inner-mobile-ctahover: opacity 0.8 - mobile,
footer-inner-mobile-ctafocus: 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-linkhover: 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 whatbutton-primary,button-secondaryandbutton-ghostall 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 itsblur(8px). This is the hero pattern inheader-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 0pxatrounded.xl(22px). This matchescardandcard-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-labelonsurface-raisedchips 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 ismuted#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.fullis reserved for true pill or circle elements. - Don't separate sections with hairlines or colour bands. Use the 80px
section-padding-yon the samesurfacecanvas. - Don't drop the
1px solid transparentborder on buttons. The focus state (1px solid #A1A1A1plus 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
leadsizes are unchanged (header-landing-mobile-inner-2stays 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-linkandfocus-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-lgandtitle-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 existingbutton-primary,button-secondaryandbutton-ghostrecipes, not as new shapes. - Elevation has exactly two shadows and two blurs. Use
#0A0A0C0F 0px 4px 20px 0pxfor cards and the capsule, and#00000014 0px 0.98px 11.74px 0pxfor the active pill. Useblur(24px) saturate(1.5)for the nav andblur(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-2andbutton-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) androunded.full(9999px) were seen on the page but on no measured component.mono-lgandaccent-linkeach 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-6andcard-3-group-4content, and the illustrations exist only as placeholders.
这份 DESIGN.md 文件使用英文，因为 AI 编程智能体以英文读取它。
提取自 Magentix Studio 的公开网站，并非官方品牌规范。查看其他网站的字体
相似示例
浏览全部
商业与专业服务
Shopify
Shopify 营销首页采用极具冲击力的全幅视频主视觉，近黑色背景（#02090a）与上方白色导航栏形成鲜明对比。品牌主色为醒目的薄荷绿（#36f4a4），克制地用于高亮和交互状态。字体分工明确：展示与编辑类标题使用 NeueHaasGrotesk，界面正文使用 Inter-Variable。CTA 按钮采用全圆角药丸形（border-radius: 9999px）。整体风格自信、高对比、充满憧憬，旨在将访客转化为商家。
旅行、交通与物流
Airbnb
Airbnb 的设计系统以一款专有的可变字体（Airbnb Cereal VF）为核心，配色接近单色的中性色调，以深炭色（#222222）和浅灰色为基调。品牌标志性的珊瑚粉色"Rausch"（#ff385c）仅用于主要行动按钮和标志。布局采用响应式图片卡片网格，图片与文字的比例宽松，卡片带有 20px 的柔和圆角，并通过多层环境阴影营造细微的层次感，避免强烈的明暗对比。搜索栏是一个醒目的胶囊形容器，统一了用户的核心操作。
电商与零售 · E-commerce Store
IKEA
IKEA的全球首页采用大胆、扁平的设计系统，以标志性的IKEA黄色（#ffdb00）作为主要操作区域，并以IKEA蓝色（#0058a3）作为品牌标识的点缀色。整个字体体系基于一款定制字体Noto IKEA构建，使用400和700两种字重，字号等级划分严谨，从14px的正文到51px的展示标题。层级主要通过色彩对比和版面结构来体现，而非依靠阴影。版面采用最大宽度为90rem的容器，桌面端网格间距为1.5rem，交互元素统一应用8px的圆角。米白色背景（#fffefb）与纯粹的#111111文字形成温和对比，营造出高对比度、易于阅读的无障碍浏览体验。
软件与 SaaS · Productivity & Notes
Notion
Notion 营销首页以深海军蓝（#02093a）的首屏区块搭配浅色（#f6f5f4）的主体背景，所有文字层级统一使用定制字体 NotionInter。设计采用 12 栏网格，栏间距为 28px，圆角体系兼顾两种规格：卡片使用 8px，药丸形按钮使用 9999px。浮层元素则采用多层递进式阴影系统。品牌蓝（#2537b1）用于行动按钮与重点强调，从 gray-200 到 gray-900 的语义化灰阶则负责所有文字与背景面的层级划分。
开发者与基础设施 · Developer Tools & IDEs
Railway
Railway 的设计系统是一套以深色为主的开发者平台界面，底色是近乎黑色的深海军蓝（#13111c、#0b0b0f），文字采用高对比度的米白色（#f7f7f8），品牌强调色为独特的紫色（#853bce / #553f83）。首屏使用 IBM Plex Serif 呈现编辑式的厚重感，界面文案统一使用 Inter，代码场景则使用 JetBrains Mono 与 SF Mono。层级关系主要依靠内嵌的白色发光描边（rgba(255,255,255,0.2) 1.5px inset）来实现，而非投影，使界面呈现玻璃面板般的质感。间距系统以 4px 为基础，节奏紧凑而明确，常用 8/12/16/24/32。圆角普遍较小，以 4px 为主，卡片与首屏容器则有选择地使用 8px 和 16px。
金融与金融科技
Stripe
Stripe 的营销首页采用一套严谨统一的设计系统（HDS，Stripe Design System），以可变字体 "sohne-var" 的细体至常规字重（300–400）为核心，配合从深海军蓝过渡到靛紫色的品牌色板，并以 #533afd（Stripe Indigo）为主色调；首屏采用标志性的满幅光谱渐变背景。组件圆角较小（4–6px），阴影平缓或极简，整体布局基于 8px 的基础间距网格。整体语调既权威又亲和：通过自信的字体排版和克制的色彩运用，传达金融基础设施的专业感。