Figma Tasarım Sistemi

PROMotor v4

Figma'nın pazarlama sitesi, tescilli figmaSans değişken yazı tipiyle desteklenen keskin siyah-beyaz tek renkli bir sistem kullanıyor. Tasarım tipografi ağırlıklı: 88px/56px boyutundaki büyük başlıklar sıkı harf aralığıyla (negatif letter-spacing) 330 ağırlığındaki hafif gövde metniyle tezat oluşturuyor. Eylem çağrısı düğmeleri (CTA), siyah zemin üzerine beyaz yazılı, tamamen yuvarlatılmış hap şeklinde (border-radius: 9999px) öğeler. Yerleşim, 1440px maksimum içerik genişliğine ve bölümler arasında geniş 80px dikey boşluğa sahip, ızgara temelli bir yapıda; zemin ise temiz beyaz. Derinlik çok az kullanılıyor; gölgeler oklch tabanlı, yumuşak katmanlar. Alt bilgi (footer) afişinde lavanta/mor vurgu rengi (#cb9fd2) yer alıyor. Genel estetik kendinden emin, tipografik olarak incelikli ve markayı öne çıkaran bir karakter taşıyor.

Görsel sistem

%100 güven

%97 güven

hero-displayDesign is intelligence made visibleFigma Sans88px / 400 / 1

display-lgDesign is intelligence made visibleFigma Sans56px / 400 / 1

display-mdDesign is intelligence made visibleFigma Sans44px / 400 / 1.1

title-lgDesign is intelligence made visibleFigma Sans30px / 400 / 1.2

body-lgDesign is intelligence made visibleFigma Sans18px / 330 / 1.4

bodyDesign is intelligence made visibleFigma Sans16px / 400 / 1.45

body-lightDesign is intelligence made visibleFigma Sans16px / 320 / 1.45

title-smDesign is intelligence made visibleFigma Sans16px / 400 / 1.4

nav-linkDesign is intelligence made visibleFigma Sans16px / 400 / 1.15

buttonDesign is intelligence made visibleFigma Sans14px / 400 / 1.15

captionDesign is intelligence made visibleFigma Sans14px / 400 / 1.45

eyebrow-monoDesign is intelligence made visibleFigma Mono16px / 400 / 1.3

label-monoDesign is intelligence made visibleFigma Mono12px / 400 / 1

%100 güven

header-gap
8px

button-ghost-padding-y
8px

button-ghost-padding-x
8px

button-primary-padding-y
12px

button-primary-padding-x
22px

button-primary-2-padding-y
24px

button-primary-2-padding-x
32px

section-padding-y
80px

%100 güven

xs · 2px

sm · 4px

md · 8px

lg · 16px

xl · 24px

full · 9999px

Bileşenler

Buttons4

%100 eşleşme

ghost · desktop

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

Orijinal

Render

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

Orijinal

Render

DESIGN.md içindeki tarif

%98 eşleşme

primary · desktop

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

Orijinal

Render

Hover%99 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

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

Orijinal

Render

DESIGN.md içindeki tarif

%99 eşleşme

primary · desktop

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

Sitedeki orijinal Button, primary (2), durağan — Orijinal

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

Hover%99 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Button, primary (2), hover — Orijinal

Button, primary (2) için ayrı render, hover — Render

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

Sitedeki orijinal Button, primary (2), focus — Orijinal

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

DESIGN.md içindeki tarif

%96 eşleşme

secondary · desktop

Kök height değeri 69px, sitede ise 46px; Group height değeri 45px, sitede ise 22px ve 1 tane daha.

Durağan%97 eşleşme44 ölçümden 3 tanesi farklı

Orijinal

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

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

Orijinal

Button, secondary için ayrı render, hover — Render

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

Orijinal

Button, secondary için ayrı render, focus — Render

DESIGN.md içindeki tarif

Extras2

%100 eşleşme

desktop

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

Sitedeki orijinal Navigation, durağan — Orijinal

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

DESIGN.md içindeki tarif

%100 eşleşme

desktop

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

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

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

DESIGN.md içindeki tarif

Headers2

%99 eşleşme

desktop

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

Sitedeki orijinal Header, durağan — Orijinal

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

Hoverkontrol edilmedi

Sitedeki orijinal Header, hover — Orijinal

Focuskontrol edilmedi

Sitedeki orijinal Header, focus — Orijinal

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

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

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

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

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

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

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

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

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

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

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

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

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

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

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

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

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

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

Kontrol edilmedi

mobile

Tarif oluşturulmadı: öğe görünür değildi.

Bu bileşen için hiçbir şey karşılaştırılmadı.

Footers2

%100 eşleşme

desktop

Columns height değeri 806px, sitede ise 959px; Column height değeri 806px, sitede ise 856px ve 15 tane daha.

Durağan%100 eşleşme1273 ölçümden 17 tanesi farklı

Sitedeki orijinal Footer, durağan — Orijinal

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

Hoverkontrol edilmedi

Sitedeki orijinal Footer, hover — Orijinal

Focuskontrol edilmedi

Sitedeki orijinal Footer, focus — Orijinal

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

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

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

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

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

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

mobile

Columns height değeri 1424px, sitede ise 3095px; Column height değeri 112px, sitede ise 118px ve 115 tane daha.

Durağan%100 eşleşme1735 ölçümden 117 tanesi farklı

Hoverkontrol edilmedi

Focuskontrol edilmedi

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

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

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

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

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

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

DESIGN.md

Figma

Overview

Figma's marketing site is a high-contrast monochrome canvas. Ink is pure black, surfaces are pure white, and the chrome carries no brand hue at all, so the saturated hero collage (coral grain gradients, deep indigo, lime dots, a lavender toolbar) supplies every bit of color on the page. The restraint is the point. The interface frames the product the way a canvas frames artwork.

Density is low and editorial. Sections breathe on a repeated 80px vertical rhythm. Copy is set in the custom variable Figma Sans at unusually light weights (320 and 330) for body and navigation. Headings stay at regular 400 and get their authority from size and tight negative tracking rather than from boldness. Figma Mono appears only as a small, widely tracked label voice, such as footer column headings and tiny badges.

Hierarchy comes from scale, black fills and inversion, not from color or shadow. The primary action is a solid black block. The secondary action is a transparent button drawn with a 1px inset ring at 16% black. The footer flips the whole scheme to white-on-black. Focus is a 2px dashed outline in the current ink color, set 4px off the element.

Key Characteristics:

Strictly monochrome chrome: primary/ink #000000 on surface #FFFFFF, inverting to surface-inverse #000000 with on-dark #FFFFFF in the footer.
Variable-weight typography uses three weights only: 320, 330 and 400. There is no bold.
Negative letter-spacing scales with size, from -0.12px on body up to -1.25px on the 56px and 88px displays. The mono labels are tracked positive.
Edges are drawn with box-shadow hairlines (#00000029 0px 0px 0px 1px inset) rather than CSS borders or soft drop shadows.
Buttons are rounded rectangles (8px on button-primary, 16px on button-primary-2). Generous 24px (rounded.xl) and pill (rounded.full) shapes live in the media and the chips.
Hover darkens nothing and lightens the black fill to #000000D9. Outlined buttons deepen their ring to #00000066.
The focus ring is a 2px dashed outline in the ink color, black on light and white on the dark footer.

Colors

The palette is two values used with discipline. Every functional role resolves to black or white, and translucency of those two creates the secondary tones.

Brand & Action

Ink Black (primary, #000000): fill for primary CTAs (button-primary, button-primary-2, header-cta-3). Black is also the brand's interactive color. There is no blue link color.
Paper White (on-primary, #FFFFFF): label color on black buttons.
Focus Black (focus-ring, #000000): the 2px dashed focus outline on light surfaces. On the dark footer the same outline is drawn in white.

Surface

Canvas (surface, #FFFFFF): page background and the fixed header background.
Night (surface-inverse, #000000): the footer background, a full inversion of the page.

Text

Ink (ink, #000000): all body, heading and navigation text on the light canvas.
On Dark (on-dark, #FFFFFF): footer text and the navigation-2 text.

Component & State Tints (measured on components, not in the page palette)

These are alpha variants of black and white read off component parts and states. They are not standalone tokens, so reproduce them as translucent ink rather than as new grays.

Hover Black: #000000D9 is the hover fill of button-primary, button-primary-2 and header-cta-3.
Hairline: #00000029 (16% black) is the inset ring of button-secondary and the bottom divider of header-group.
Hairline Hover: #00000066 is the hover ring of button-secondary and header-cta-2.
Footer Chip: #FFFFFF3D is the fill of the 36px social icon buttons (footer-link).
Footer Hairline: #FFFFFF29 is the footer top border and the fill of the footer-group-2 badges.
Footer Muted: #FFFFFF99 is the mono column headings (footer-column-heading-2).

Gradients

The UI system uses no gradients. The grainy coral and indigo gradients visible in the hero belong to product imagery and illustration, not to buttons, surfaces or text.

The captured dark-theme values keep the same two-ink logic with the roles swapped. #FFFFFF becomes the dominant text color and #000000 the dominant surface, and interactive fills follow that flip. Because the whole palette is black, white and their alpha tints, theming here is a straight inversion of the two inks rather than a separate dark palette.

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
Text	`primary`	#FFFFFF

Typography

Font Family

Figma Sans (figmaSans, fallback stack "SF Pro Display", system-ui, helvetica, sans-serif): the custom variable sans used for everything, including display, headings, body, navigation and buttons. Its variable weight axis is what allows the in-between 320 and 330 weights.
Figma Mono (figmaMono, fallback "SF Mono", menlo, monospace): reserved for eyebrow and section labels and tiny badges. It is always set at 400 with positive tracking.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`hero-display`	88px	400	1	-1.25px	Oversized hero statement
`display-lg`	56px	400	1	-1.25px	Page h1
`display-md`	44px	400	1.1	-0.66px	Section h2
`title-lg`	30px	400	1.2	-0.66px	Sub-section titles; label of the large `button-primary-2`
`body-lg`	18px	330	1.4	-0.14px	Dominant text style: nav items, list links, header CTAs, footer headings
`body`	16px	400	1.45	-0.14px	Standard running copy, quotes, captions
`body-light`	16px	320	1.45	-0.12px	Light secondary copy and footer link text
`title-sm`	16px	400	1.4	normal	Small card/feature headings (h3)
`nav-link`	16px	400	1.15	normal	Compact nav/button labels
`button`	14px	400	1.15	normal	Small button labels
`caption`	14px	400	1.45	normal	Fine print, small paragraphs
`eyebrow-mono`	16px	400	1.3	0.48px	Mono section eyebrows, footer column headings
`label-mono`	12px	400	1	0.6px	Tiny mono badges (`footer-text-3`)

Principles

Three weights only: 320, 330, 400. Weights 500 and up do not exist. Emphasis comes from size, never from bolding. Headings stay at 400 even at 88px.
Light reads as default. The most frequent style on the page is body-lg at 330. Do not "fix" body copy to 400 across the board, because the lightness is intentional.
Tracking tightens with size. Sans styles use -0.12px and -0.14px at body sizes, -0.66px at 30px and 44px, and -1.25px at 56px and 88px. Small UI labels (nav-link, button, caption, title-sm) sit at normal.
Mono is tracked open. eyebrow-mono uses 0.48px and label-mono uses 0.6px. Mono never appears at body length.
Line height compresses as size grows. Body runs at 1.4 to 1.45, titles at 1.2, and displays at 1 to 1.1. Compact controls use 1.15.

Note on Font Substitutes

Figma Sans and Figma Mono are proprietary.

For Figma Sans: substitute Inter (variable). Its continuous weight axis can render 320 and 330 exactly. Inter runs slightly wider, so add roughly -0.1px of extra tracking at display sizes. Keep the token sizes unchanged.
For Figma Mono: substitute JetBrains Mono or IBM Plex Mono at 400, keeping the positive 0.48px and 0.6px tracking.
Native Apple fallback: the fallback stack's "SF Pro Display" is an acceptable fallback there.

Layout

Spacing System

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

Token	Value	Measured on
`section-padding-y`	80px	Vertical padding repeated on the page's sections (16 section edges), measured on the page rather than on a component
`header-gap`	8px	Gap between items in `header-nav-2` (right-hand header actions)
`button-primary-padding-y`	12px	Vertical padding of `button-primary`
`button-primary-padding-x`	22px	Horizontal padding of `button-primary`
`button-primary-2-padding-y`	24px	Vertical padding of the large `button-primary-2`
`button-primary-2-padding-x`	32px	Horizontal padding of `button-primary-2`
`button-ghost-padding-y`	8px	Vertical padding of `button-ghost` (header nav triggers)
`button-ghost-padding-x`	8px	Horizontal padding of `button-ghost`

section-padding-y (80px) is the vertical rhythm between the page's sections. Every major band starts and ends on it.

Grid & Container

No container max-width or grid-gap token was verified.

On desktop the screenshots show:

Header: a full-width bar with the logo and dropdown nav triggers on the left. Log in, an outlined Contact sales button and a solid black CTA sit on the right, spaced by header-gap (8px).
Hero: a three-part horizontal composition, with a left-aligned large headline, a centered layered collage and a right-aligned black button.
Feature pairs: side-by-side blocks, each with an icon, a short title, a muted description and an underlined arrow link.
Footer: a multi-column link grid on black.

Whitespace Philosophy

Whitespace does the separating work that borders and backgrounds do elsewhere. Sections are divided by the consistent section-padding-y (80px) and nothing else, with no alternating section fills on the light page. Control padding is generous for a marketing site: button-primary-2 uses button-primary-2-padding-y (24px) and button-primary-2-padding-x (32px), which turns a CTA into a block-like statement. Nav triggers stay tight at button-ghost-padding-x (8px) so the header reads as one quiet row.

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: 16 section edges on 1 page)
header-gap: 8px (header, gap of header-nav-2)
button-primary-padding-y: 12px (button-primary, vertical padding of the root)
button-primary-padding-x: 22px (button-primary, horizontal padding of the root)
button-primary-2-padding-y: 24px (button-primary-2, vertical padding of the root)
button-primary-2-padding-x: 32px (button-primary-2, horizontal padding of the root)
button-ghost-padding-y: 8px (button-ghost, vertical padding of the root)
button-ghost-padding-x: 8px (button-ghost, horizontal padding of the root)

Elevation & Depth

Level	Treatment	Use
0 — Flat surface	No shadow; solid `surface` #FFFFFF or `surface-inverse` #000000	Page canvas, footer, primary black buttons (`button-primary`, `button-primary-2`)
1 — Header divider	`#00000029 0px 1px 0px 0px`	Bottom edge of the fixed header (`header-group`)
2 — Hairline ring	`#00000029 0px 0px 0px 1px inset`	Outline of `button-secondary` / `header-cta-2`
2h — Hairline ring, hover	`#00000066 0px 0px 0px 1px inset`	Hover state of `button-secondary` / `header-cta-2`
Dark divider	1px solid `#FFFFFF29` top border	Top edge of `footer` and `footer-mobile`
Focus	2px dashed outline, 4px offset, #000000 on light / #FFFFFF on dark	All interactive parts: buttons, nav links, logo, footer links
Blur	None measured	No backdrop-filter on header or any component

Shadow philosophy. Figma uses box-shadow as a drawing tool, not a lighting tool. Every measured shadow has zero blur and zero spread beyond 1px. Each is either a 1px inset ring that outlines a control or a 1px offset line that underlines the header, always in 16% black (#00000029). Interaction raises the ring's opacity to 40% (#00000066) instead of adding lift.

Depth beyond that comes from the imagery. The hero's overlapping colored panels and floating toolbar layer like cards inside the illustration, while the UI chrome stays on one plane. When building new components:

Outline with the inset hairline ring.
Separate stacked regions with the 1px offset line.
Do not introduce soft drop shadows or blur.

Shapes

Border Radius Scale

Token	Value	Use
`rounded.xs`	2px	Small detail elements (frequent on the page, exact targets not captured)
`rounded.sm`	4px	Tiny mono badges in the footer (`footer-group-2`)
`rounded.md`	8px	Standard buttons: `button-primary`, `button-secondary`, header CTAs
`rounded.lg`	16px	The oversized `button-primary-2` CTA
`rounded.xl`	24px	Cards and media containers
`rounded.full`	9999px	Pills and circles: chips, slider thumbs, toolbar elements, the 36px round social buttons

The geometry is soft-rectangular with a clear size-to-radius relationship:

Buttons: the 46px buttons take 8px and the 84px button-primary-2 takes 16px, so the radius scales with the control.
Large containers: cards and media step up to 24px.
Pill and circle shapes: rounded.full is used heavily (it is the joint most frequent radius), but on chips, toggles and icon buttons rather than on the main CTAs. The measured CTAs are rounded rectangles, not pills.
Hero collage: the panels are sharp-cornered, and circles and dotted grids add a basic-geometry vocabulary. That contrast belongs to the illustration and is not part of the UI radius scale.

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: verified against the live page at desktop.

Anatomy

button-primary: the component root, a <a> (.c-button-primary)
button-primary-group: inner group (.c-button-primary__group)
button-primary-label: label text, 20 characters (.c-button-primary__label)

Recipe

HTML · CSS

<div class="c-button-primary-scope">
  <a class="c-button-primary" href="#">
    <span class="c-button-primary__group">
      <span class="c-button-primary__label">lorem ipsum dolor si</span>
    </span>
  </a>
</div>

.c-button-primary-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 18px;
  font-weight: 330;
  line-height: 25.2px;
}

.c-button-primary {
  display: block;
  justify-content: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 12px 22px;
  background-color: #000000;
  color: #FFFFFF;
  border-radius: 8px;
  cursor: pointer;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 18px;
  font-weight: 330;
  line-height: 25.2px;
  letter-spacing: -0.14px;
  text-decoration-line: none;
  list-style-type: none;
  transition-duration: 0.18s, 0.18s;
  transition-timing-function: ease-out, ease-out;
  transition-property: background, box-shadow;
}

.c-button-primary__group {
  display: block;
  box-sizing: border-box;
  position: relative;
  font-size: 0px;
  line-height: 0px;
}

.c-button-primary__label {
  display: inline-block;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  text-align: center;
  transition: translate 0.18s ease-out;
  padding-right: 4px;
  padding-left: 4px;
}

.c-button-primary:hover {
  background-color: #000000D9;
}

.c-button-primary:focus {
  outline: 2px dashed #000000;
  outline-offset: 4px;
}

States

hover (button-primary-hover): background-color #000000D9
focus: outline 2px dashed #000000, outline-offset 4px

Button, primary (2)

Verification: verified against the live page at desktop.

Anatomy

button-primary-2: the component root, a <a> (.c-button-primary-2)
button-primary-2-group: inner group (.c-button-primary-2__group)
button-primary-2-label: label text, 11 characters (.c-button-primary-2__label)

Recipe

HTML · CSS

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

.c-button-primary-2-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
}

.c-button-primary-2 {
  display: inline-flex;
  justify-content: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 24px 32px;
  background-color: #000000;
  color: #FFFFFF;
  border-radius: 16px;
  cursor: pointer;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
  text-decoration-line: none;
  transition-duration: 0.18s, 0.18s;
  transition-timing-function: ease-out, ease-out;
  transition-property: background, box-shadow;
}

.c-button-primary-2__group {
  display: block;
  box-sizing: border-box;
  position: relative;
  font-size: 0px;
  line-height: 0px;
}

.c-button-primary-2__label {
  display: inline-block;
  box-sizing: border-box;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.66px;
  text-align: center;
  transition: translate 0.18s ease-out;
  padding-right: 8px;
  padding-left: 8px;
}

.c-button-primary-2:hover {
  background-color: #000000D9;
}

.c-button-primary-2:focus {
  outline: 2px dashed #000000;
  outline-offset: 4px;
}

States

hover (button-primary-2-hover): background-color #000000D9
focus: outline 2px dashed #000000, outline-offset 4px

Button, secondary

Verification: flagged, the button-secondary height did not reproduce the measured 46px after 2 correction attempts.

Anatomy

button-secondary: the component root, a <a> (.c-button-secondary)
button-secondary-group: inner group (.c-button-secondary__group)
button-secondary-label: label text, 13 characters (.c-button-secondary__label)

Recipe

HTML · CSS

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

.c-button-secondary-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 18px;
  font-weight: 330;
  line-height: 25.2px;
}

.c-button-secondary {
  display: block;
  justify-content: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 12px 22px;
  background-color: transparent;
  color: #000000;
  border-radius: 8px;
  box-shadow: #00000029 0px 0px 0px 1px inset;
  cursor: pointer;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
  text-decoration-line: none;
  list-style-type: none;
  transition-duration: 0.18s, 0.18s;
  transition-timing-function: ease-out, ease-out;
  transition-property: background, box-shadow;
}

.c-button-secondary__group {
  display: block;
  box-sizing: border-box;
  position: relative;
  font-size: 0px;
  line-height: 0px;
}

.c-button-secondary__label {
  display: inline-block;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 22.4px;
  text-align: center;
  transition: translate 0.18s ease-out;
  padding-right: 4px;
  padding-left: 4px;
}

.c-button-secondary:hover {
  box-shadow: #00000066 0px 0px 0px 1px inset;
}

.c-button-secondary:focus {
  outline: 2px dashed #000000;
  outline-offset: 4px;
}

States

hover: box-shadow #00000066 0px 0px 0px 1px inset
focus: outline 2px dashed #000000, outline-offset 4px

Button, ghost

Verification: verified against the live page at desktop.

Anatomy

button-ghost: the component root, a <button> (.c-button-ghost)
button-ghost-label: label text, 8 characters (.c-button-ghost__label)
button-ghost-icon: icon placeholder, 18px (.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__label">lorem ip</span>
    <span class="c-button-ghost__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 18px;
  font-weight: 330;
  line-height: 25.2px;
}

.c-button-ghost {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 8px;
  background-color: transparent;
  color: #000000;
  border: 0;
  cursor: pointer;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 18px;
  font-weight: 330;
  line-height: 25.2px;
  letter-spacing: -0.14px;
  text-transform: none;
  text-align: start;
  list-style-type: none;
}

.c-button-ghost::after {
  content: "";
  display: block;
  box-sizing: border-box;
  opacity: 0;
  transform: matrix(1, 0, 0, 0, 0, 3);
  transition-duration: 0.25s, 0.25s;
  transition-timing-function: ease, ease;
  transition-property: transform, opacity;
}

.c-button-ghost__label {
  display: block;
  box-sizing: border-box;
  position: relative;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
}

.c-button-ghost__label::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 65px;
  height: 1px;
  position: absolute;
  top: 22.1875px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #000000;
  opacity: 0;
  transform: matrix(1, 0, 0, 0, 0, 3);
  transition-duration: 0.25s, 0.25s;
  transition-timing-function: ease, ease;
  transition-property: transform, opacity;
}

.c-button-ghost__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transition: transform 0.25s ease;
  margin-left: 2px;
}

.c-button-ghost:focus {
  outline: 2px dashed #000000;
  outline-offset: 4px;
}

States

focus: outline 2px dashed #000000, outline-offset 4px

Navigation

Verification: verified against the live page at desktop.

Anatomy

navigation: the component root, a <nav> (.c-navigation)
navigation-list: inner flex row (.c-navigation__list)
navigation-group: inner flex column (.c-navigation__group, 4 instances)
navigation-button: button (.c-navigation__button, 4 instances), content not captured
navigation-link: link (.c-navigation__link)
navigation-text: label text, 7 characters (.c-navigation__text)

Recipe

HTML · CSS

<div class="c-navigation-scope">
  <nav class="c-navigation">
    <ul class="c-navigation__list">
      <div class="c-navigation__group">
        <button class="c-navigation__button" type="button"></button>
      </div>
      <div class="c-navigation__group">
        <button class="c-navigation__button" type="button"></button>
      </div>
      <div class="c-navigation__group">
        <button class="c-navigation__button" type="button"></button>
      </div>
      <div class="c-navigation__group">
        <button class="c-navigation__button" type="button"></button>
      </div>
      <a class="c-navigation__link" href="#">
        <span class="c-navigation__text">lorem i</span>
      </a>
    </ul>
  </nav>
</div>

.c-navigation-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
}

.c-navigation {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #000000;
  cursor: default;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
  letter-spacing: -0.14px;
}

.c-navigation__list {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  font-size: 18px;
  font-weight: 330;
  line-height: 25.2px;
  list-style-type: none;
}

.c-navigation__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.c-navigation__button {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 8px;
  background-color: transparent;
  color: #000000;
  border: 0;
  cursor: pointer;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 18px;
  font-weight: 330;
  line-height: 25.2px;
  letter-spacing: -0.14px;
  text-transform: none;
  text-align: start;
}

.c-navigation__button::after {
  content: "";
  display: block;
  box-sizing: border-box;
  opacity: 0;
  transform: matrix(1, 0, 0, 0, 0, 3);
  transition-duration: 0.25s, 0.25s;
  transition-timing-function: ease, ease;
  transition-property: transform, opacity;
}

.c-navigation__link {
  display: block;
  box-sizing: border-box;
  padding: 8px;
  color: #000000;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
  text-decoration-line: none;
}

.c-navigation__text {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
}

.c-navigation__text::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 51px;
  height: 1px;
  position: absolute;
  top: 22.1875px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #000000;
  opacity: 0;
  transform: matrix(1, 0, 0, 0, 0, 3);
  transition-duration: 0.25s, 0.25s;
  transition-timing-function: ease, ease;
  transition-property: transform, opacity;
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

navigation-2: the component root, a <nav> (.c-navigation-2)
navigation-2-button: button (.c-navigation-2__button)
navigation-2-icon: icon placeholder, 22px (.c-navigation-2__icon)
navigation-2-text: label text, 7 characters (.c-navigation-2__text)
navigation-2-icon-2: icon placeholder, 20px (.c-navigation-2__icon-2)

Recipe

HTML · CSS

<div class="c-navigation-2-scope">
  <nav class="c-navigation-2">
    <button class="c-navigation-2__button" type="button">
      <span class="c-navigation-2__icon" aria-hidden="true"></span>
      <span class="c-navigation-2__text">lorem i</span>
      <span class="c-navigation-2__icon-2" aria-hidden="true"></span>
    </button>
  </nav>
</div>

.c-navigation-2-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
}

.c-navigation-2 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #FFFFFF;
  cursor: default;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
}

.c-navigation-2__button {
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  padding: 8px;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  cursor: pointer;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
}

.c-navigation-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-navigation-2__icon-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  transition: transform 0.25s ease;
}

States

No hover or focus change was observed.

Header

Verification: verified against the live page at desktop.

Anatomy

header: the component root, a <header> (.c-header)
header-group: inner block (.c-header__group)
header-group-2: inner flex row (.c-header__group-2)
header-group-3: inner flex row (.c-header__group-3)
header-logo: link (.c-header__logo)
header-logo-icon: icon placeholder, 19x28px (.c-header__logo-icon)
header-nav: inner flex row (.c-header__nav)
header-group-4: inner flex column (.c-header__group-4, 4 instances)
header-cta: the button-ghost button (.c-header__cta, 3 instances), content not captured
header-menu-toggle: button (.c-header__menu-toggle), content not captured
header-nav-link: link (.c-header__nav-link)
header-text: label text, 7 characters (.c-header__text)
header-nav-2: inner flex row (.c-header__nav-2)
header-item: inner group (.c-header__item)
header-link: link (.c-header__link)
header-text-2: label text, 6 characters (.c-header__text-2)
header-cta-2: the button-secondary button (.c-header__cta-2)
header-group-5: inner group (.c-header__group-5, 2 instances)
header-text-3: label text, 13 characters (.c-header__text-3)
header-cta-3: the button-primary button (.c-header__cta-3)
header-text-4: label text, 20 characters (.c-header__text-4)

Recipe

HTML · CSS

<div class="c-header-scope">
  <header class="c-header">
    <div class="c-header__group">
      <div class="c-header__group-2">
        <div class="c-header__group-3">
          <a class="c-header__logo" href="#">
            <span class="c-header__logo-icon" aria-hidden="true"></span>
          </a>
          <ul class="c-header__nav">
            <div class="c-header__group-4">
              <button class="c-header__cta" type="button"></button>
            </div>
            <div class="c-header__group-4">
              <button class="c-header__cta" type="button"></button>
            </div>
            <div class="c-header__group-4">
              <button class="c-header__cta" type="button"></button>
            </div>
            <div class="c-header__group-4">
              <button class="c-header__menu-toggle" type="button"></button>
            </div>
            <a class="c-header__nav-link" href="#">
              <span class="c-header__text">lorem i</span>
            </a>
          </ul>
        </div>
        <ul class="c-header__nav-2">
          <li class="c-header__item">
            <a class="c-header__link" href="#">
              <span class="c-header__text-2">lorem</span>
            </a>
          </li>
          <a class="c-header__cta-2" href="#">
            <span class="c-header__group-5">
              <span class="c-header__text-3">lorem ipsum d</span>
            </span>
          </a>
          <a class="c-header__cta-3" href="#">
            <span class="c-header__group-5">
              <span class="c-header__text-4">lorem ipsum dolor si</span>
            </span>
          </a>
        </ul>
      </div>
    </div>
  </header>
</div>

.c-header-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
}

.c-header {
  display: flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 25;
  background-color: #FFFFFF;
  color: #000000;
  cursor: default;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
  letter-spacing: -0.14px;
  transition: background 0.4s cubic-bezier(0.8, 0, 0.2, 1);
}

.c-header__group {
  display: block;
  box-sizing: border-box;
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: #00000029 0px 1px 0px 0px;
}

.c-header__group-2 {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 1360px;
  padding-top: 16px;
  padding-bottom: 16px;
  margin-right: auto;
  margin-left: auto;
}

.c-header__group-3 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 42px;
}

.c-header__logo {
  display: block;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #000000;
  margin-right: 24px;
}

.c-header__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 19px;
  height: 28px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header__nav {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  font-size: 18px;
  font-weight: 330;
  line-height: 25.2px;
  list-style-type: none;
}

.c-header__group-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.c-header__cta {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 8px;
  background-color: transparent;
  color: #000000;
  border: 0;
  cursor: pointer;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 18px;
  font-weight: 330;
  line-height: 25.2px;
  letter-spacing: -0.14px;
  text-transform: none;
  text-align: start;
}

.c-header__cta::after {
  content: "";
  display: block;
  box-sizing: border-box;
  opacity: 0;
  transform: matrix(1, 0, 0, 0, 0, 3);
  transition-duration: 0.25s, 0.25s;
  transition-timing-function: ease, ease;
  transition-property: transform, opacity;
}

.c-header__menu-toggle {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 8px;
  background-color: transparent;
  color: #000000;
  border: 0;
  cursor: pointer;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 18px;
  font-weight: 330;
  line-height: 25.2px;
  letter-spacing: -0.14px;
  text-transform: none;
  text-align: start;
}

.c-header__menu-toggle::after {
  content: "";
  display: block;
  box-sizing: border-box;
  opacity: 0;
  transform: matrix(1, 0, 0, 0, 0, 3);
  transition-duration: 0.25s, 0.25s;
  transition-timing-function: ease, ease;
  transition-property: transform, opacity;
}

.c-header__nav-link {
  display: block;
  box-sizing: border-box;
  padding: 8px;
  color: #000000;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
  text-decoration-line: none;
}

.c-header__text {
  display: inline-block;
  box-sizing: border-box;
  position: relative;
}

.c-header__text::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 51px;
  height: 1px;
  position: absolute;
  top: 22.1875px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #000000;
  opacity: 0;
  transform: matrix(1, 0, 0, 0, 0, 3);
  transition-duration: 0.25s, 0.25s;
  transition-timing-function: ease, ease;
  transition-property: transform, opacity;
}

.c-header__nav-2 {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 46px;
  padding: 0px;
  margin: 0px;
  font-size: 18px;
  font-weight: 330;
  line-height: 25.2px;
  list-style-type: none;
}

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

.c-header__link {
  display: inline-flex;
  justify-content: center;
  box-sizing: border-box;
  padding: 8px;
  color: #000000;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
  text-decoration-line: none;
  margin-right: 4px;
}

.c-header__text-2 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-header__text-2::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 43px;
  height: 1px;
  position: absolute;
  top: 22.1875px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #000000;
  opacity: 0;
  transform: matrix(1, 0, 0, 0, 0, 3);
  transition-duration: 0.25s, 0.25s;
  transition-timing-function: ease, ease;
  transition-property: transform, opacity;
}

.c-header__cta-2 {
  display: block;
  justify-content: center;
  box-sizing: border-box;
  padding: 12px 22px;
  background-color: transparent;
  color: #000000;
  border-radius: 8px;
  box-shadow: #00000029 0px 0px 0px 1px inset;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
  text-decoration-line: none;
  transition-duration: 0.18s, 0.18s;
  transition-timing-function: ease-out, ease-out;
  transition-property: background, box-shadow;
}

.c-header__group-5 {
  display: block;
  box-sizing: border-box;
  position: relative;
  font-size: 0px;
  line-height: 0px;
}

.c-header__text-3 {
  display: inline-block;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 22.4px;
  text-align: center;
  transition: translate 0.18s ease-out;
  padding-right: 4px;
  padding-left: 4px;
}

.c-header__cta-3 {
  display: block;
  justify-content: center;
  box-sizing: border-box;
  padding: 12px 22px;
  background-color: #000000;
  color: #FFFFFF;
  border-radius: 8px;
  cursor: pointer;
  text-decoration-line: none;
  transition-duration: 0.18s, 0.18s;
  transition-timing-function: ease-out, ease-out;
  transition-property: background, box-shadow;
}

.c-header__text-4 {
  display: inline-block;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  text-align: center;
  transition: translate 0.18s ease-out;
  padding-right: 4px;
  padding-left: 4px;
}

.c-header__logo:focus {
  outline: 2px dashed #000000;
  outline-offset: 4px;
}

.c-header__cta:focus {
  outline: 2px dashed #000000;
  outline-offset: 4px;
}

.c-header__menu-toggle:focus {
  outline: 2px dashed #000000;
  outline-offset: 4px;
}

.c-header__nav-link:focus {
  outline: 2px dashed #000000;
  outline-offset: 4px;
}

.c-header__link:focus {
  outline: 2px dashed #000000;
  outline-offset: 4px;
}

.c-header__cta-2:hover {
  box-shadow: #00000066 0px 0px 0px 1px inset;
}

.c-header__cta-2:focus {
  outline: 2px dashed #000000;
  outline-offset: 4px;
}

.c-header__cta-3:hover {
  background-color: #000000D9;
}

.c-header__cta-3:focus {
  outline: 2px dashed #000000;
  outline-offset: 4px;
}

States

header-logo focus: outline 2px dashed #000000, outline-offset 4px
header-cta focus: outline 2px dashed #000000, outline-offset 4px
header-menu-toggle focus: outline 2px dashed #000000, outline-offset 4px
header-nav-link focus: outline 2px dashed #000000, outline-offset 4px
header-link focus: outline 2px dashed #000000, outline-offset 4px
header-cta-2 hover: box-shadow #00000066 0px 0px 0px 1px inset
header-cta-2 focus: outline 2px dashed #000000, outline-offset 4px
header-cta-3 hover (header-cta-3-hover): background-color #000000D9
header-cta-3 focus: outline 2px dashed #000000, outline-offset 4px

Verification: desktop flagged, the footer-columns height did not reproduce the measured 959px after 2 correction attempts; mobile flagged, the footer-mobile-columns height did not reproduce the measured 3095px after 2 correction attempts.

Anatomy

footer: the component root, a <footer> (.c-footer)
footer-columns: inner grid (.c-footer__columns), content not captured
footer-column: inner block (.c-footer__column, 3 instances)
footer-icon: icon placeholder, 120x44px (.c-footer__icon)
footer-group: inner block (.c-footer__group, 3 instances)
footer-column-heading: heading, 13 characters (.c-footer__column-heading)
footer-list: inner flex row (.c-footer__list)
footer-link: link (.c-footer__link, 4 instances)
footer-link-icon: icon placeholder, 24px (.c-footer__link-icon, 4 instances)
footer-column-heading-2: heading, 7 characters (.c-footer__column-heading-2, 3 instances)
footer-list-2: inner group (.c-footer__list-2, 3 instances), content not captured
footer-item: inner group (.c-footer__item, 3 instances)
footer-text: label text, 12 characters (.c-footer__text, 22 instances)
footer-item-2: inner group (.c-footer__item-2, 24 instances)
footer-link-2: link (.c-footer__link-2, 5 instances)
footer-text-2: label text, 11 characters (.c-footer__text-2, 5 instances)
footer-group-2: inner block (.c-footer__group-2, 4 instances)
footer-text-3: label text, 3 characters (.c-footer__text-3, 4 instances)
footer-group-3: inner block (.c-footer__group-3)

Desktop recipe

HTML · CSS

<div class="c-footer-scope">
  <footer class="c-footer">
    <div class="c-footer__columns">
      <div class="c-footer__column">
        <span class="c-footer__icon" aria-hidden="true"></span>
        <div class="c-footer__group">
          <h2 class="c-footer__column-heading">lorem ipsum d</h2>
          <ul class="c-footer__list">
            <a class="c-footer__link" href="#">
              <span class="c-footer__link-icon" aria-hidden="true"></span>
            </a>
            <a class="c-footer__link" href="#">
              <span class="c-footer__link-icon" aria-hidden="true"></span>
            </a>
            <a class="c-footer__link" href="#">
              <span class="c-footer__link-icon" aria-hidden="true"></span>
            </a>
            <a class="c-footer__link" href="#">
              <span class="c-footer__link-icon" aria-hidden="true"></span>
            </a>
          </ul>
        </div>
      </div>
      <div class="c-footer__column">
        <div class="c-footer__group">
          <h2 class="c-footer__column-heading-2">lorem i</h2>
          <ul class="c-footer__list-2">
            <li class="c-footer__item">
              <span class="c-footer__text">lorem ipsum</span>
            </li>
            <li class="c-footer__item-2">
              <span class="c-footer__text">lorem ipsu</span>
            </li>
            <li class="c-footer__item-2">
              <a class="c-footer__link-2" href="#">
                <span class="c-footer__text-2">lorem ipsum</span>
                <div class="c-footer__group-2">
                  <span class="c-footer__text-3">lor</span>
                </div>
              </a>
            </li>
            <li class="c-footer__item-2">
              <span class="c-footer__text">lorem ip</span>
            </li>
            <li class="c-footer__item-2">
              <a class="c-footer__link-2" href="#">
                <span class="c-footer__text-2">lorem ipsum</span>
                <div class="c-footer__group-2">
                  <span class="c-footer__text-3">lor</span>
                </div>
              </a>
            </li>
            <li class="c-footer__item-2">
              <span class="c-footer__text">lorem</span>
            </li>
            <li class="c-footer__item-2">
              <span class="c-footer__text">lorem ipsum</span>
            </li>
            <li class="c-footer__item-2">
              <span class="c-footer__text">lorem ipsu</span>
            </li>
            <li class="c-footer__item-2">
              <a class="c-footer__link-2" href="#">
                <span class="c-footer__text-2">lorem ipsum</span>
                <div class="c-footer__group-2">
                  <span class="c-footer__text-3">lore</span>
                </div>
              </a>
            </li>
            <li class="c-footer__item-2">
              <a class="c-footer__link-2" href="#">
                <span class="c-footer__text-2">lorem ipsu</span>
                <div class="c-footer__group-2">
                  <span class="c-footer__text-3">lore</span>
                </div>
              </a>
            </li>
            <li class="c-footer__item-2">
              <span class="c-footer__text">lorem ipsum dolor</span>
            </li>
            <li class="c-footer__item-2">
              <span class="c-footer__text">lorem ipsum dolor sit a</span>
            </li>
            <li class="c-footer__item-2">
              <span class="c-footer__text">lorem ipsum</span>
            </li>
            <li class="c-footer__item-2">
              <span class="c-footer__text">lorem ipsum d</span>
            </li>
            <li class="c-footer__item-2">
              <span class="c-footer__text">lorem ips</span>
            </li>
          </ul>
        </div>
        <div class="c-footer__group-3">
          <h2 class="c-footer__column-heading-2">lorem</h2>
          <ul class="c-footer__list-2">
            <li class="c-footer__item">
              <span class="c-footer__text">lorem i</span>
            </li>
            <li class="c-footer__item-2">
              <span class="c-footer__text">lorem ipsu</span>
            </li>
            <li class="c-footer__item-2">
              <span class="c-footer__text">lorem ipsum</span>
            </li>
            <li class="c-footer__item-2">
              <span class="c-footer__text">lorem ipsum</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="c-footer__column">
        <div class="c-footer__group">
          <h2 class="c-footer__column-heading-2">lorem ips</h2>
          <ul class="c-footer__list-2">
            <li class="c-footer__item">
              <span class="c-footer__text">lorem ips</span>
            </li>
            <li class="c-footer__item-2">
              <span class="c-footer__text">lorem ips</span>
            </li>
            <li class="c-footer__item-2">
              <span class="c-footer__text">lorem ipsum</span>
            </li>
            <li class="c-footer__item-2">
              <span class="c-footer__text">lorem ipsum</span>
            </li>
            <li class="c-footer__item-2">
              <span class="c-footer__text">lorem ipsum</span>
            </li>
            <li class="c-footer__item-2">
              <span class="c-footer__text">lorem ipsum d</span>
            </li>
            <li class="c-footer__item-2">
              <span class="c-footer__text">lorem ipsum dolor</span>
            </li>
            <li class="c-footer__item-2">
              <a class="c-footer__link-2" href="#">
                <span class="c-footer__text-2">lorem ipsum dolor</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</div>

.c-footer-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
}

.c-footer {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #000000;
  color: #FFFFFF;
  cursor: default;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
  padding-top: 120px;
  padding-bottom: 120px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #FFFFFF29;
}

.c-footer__columns {
  display: grid;
  column-gap: 60px;
  grid-template-columns: 390px repeat(4, 180px);
  box-sizing: border-box;
  width: 1320px;
  margin-right: auto;
  margin-left: auto;
}

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

.c-footer__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 120px;
  height: 44px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  cursor: pointer;
}

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

.c-footer__column-heading {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: 0px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  cursor: text;
  font-size: 18px;
  font-weight: 330;
  line-height: 25.2px;
  white-space: nowrap;
}

.c-footer__list {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 0px;
  margin: 32px 0px 0px;
  font-size: 18px;
  font-weight: 330;
  line-height: 25.2px;
  list-style-type: none;
}

.c-footer__link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  background-color: #FFFFFF3D;
  color: #FFFFFF;
  border-radius: 50%;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #FFFFFF;
  padding-right: 6px;
  padding-left: 6px;
}

.c-footer__link-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-footer__column-heading-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 16px;
  color: #FFFFFF99;
  cursor: text;
  font-family: figmaMono, "figmaMono Fallback", "SF Mono", menlo, monospace;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.8px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
}

.c-footer__list-2 {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  font-size: 18px;
  font-weight: 330;
  line-height: 25.2px;
  list-style-type: none;
}

.c-footer__item {
  display: list-item;
  box-sizing: border-box;
}

.c-footer__text {
  display: inline;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 16px;
  font-weight: 320;
  line-height: 23.2px;
  letter-spacing: -0.12px;
}

.c-footer__item-2 {
  display: list-item;
  box-sizing: border-box;
  margin-top: 12px;
}

.c-footer__link-2 {
  display: inline;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer__text-2 {
  display: inline;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 320;
  line-height: 23.2px;
  letter-spacing: -0.12px;
}

.c-footer__group-2 {
  display: inline-block;
  box-sizing: border-box;
  padding: 4.5px 8px;
  position: relative;
  top: -2px;
  background-color: #FFFFFF29;
  border-radius: 4px;
  font-size: 0px;
  line-height: 0px;
  margin-left: 8px;
}

.c-footer__text-3 {
  display: inline;
  box-sizing: border-box;
  font-family: figmaMono, "figmaMono Fallback", "SF Mono", menlo, monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.c-footer__group-3 {
  display: block;
  box-sizing: border-box;
  margin-top: 48px;
}

.c-footer__link:focus {
  outline: 2px dashed #FFFFFF;
  outline-offset: 4px;
}

.c-footer__link-2:hover {
  text-decoration-line: underline;
}

.c-footer__link-2:focus {
  outline: 2px dashed #FFFFFF;
  outline-offset: 4px;
}

Mobile anatomy

footer-mobile: the component root, a <footer> (.c-footer-mobile)
footer-mobile-columns: inner grid (.c-footer-mobile__columns), content not captured
footer-mobile-column: inner block (.c-footer-mobile__column)
footer-mobile-icon: icon placeholder, 120x44px (.c-footer-mobile__icon)
footer-mobile-group: inner block (.c-footer-mobile__group, 3 instances)
footer-mobile-column-heading: heading, 13 characters (.c-footer-mobile__column-heading)
footer-mobile-list: inner flex row (.c-footer-mobile__list)
footer-mobile-link: link (.c-footer-mobile__link, 4 instances)
footer-mobile-link-icon: icon placeholder, 24px (.c-footer-mobile__link-icon, 4 instances)
footer-mobile-item: inner group (.c-footer-mobile__item, 4 instances)
footer-mobile-column-2: inner block (.c-footer-mobile__column-2)
footer-mobile-heading: heading, 7 characters (.c-footer-mobile__heading, 3 instances)
footer-mobile-list-2: inner group (.c-footer-mobile__list-2, 3 instances), content not captured
footer-mobile-link-2: link (.c-footer-mobile__link-2, 27 instances)
footer-mobile-text: label text, 12 characters (.c-footer-mobile__text, 27 instances)
footer-mobile-item-2: inner group (.c-footer-mobile__item-2, 24 instances)
footer-mobile-group-2: inner block (.c-footer-mobile__group-2, 4 instances)
footer-mobile-text-2: label text, 3 characters (.c-footer-mobile__text-2, 4 instances)
footer-mobile-group-3: inner block (.c-footer-mobile__group-3)
footer-mobile-column-3: inner block (.c-footer-mobile__column-3)

Mobile recipe

HTML · CSS

<div class="c-footer-mobile-scope">
  <footer class="c-footer-mobile">
    <div class="c-footer-mobile__columns">
      <div class="c-footer-mobile__column">
        <span class="c-footer-mobile__icon" aria-hidden="true"></span>
        <div class="c-footer-mobile__group">
          <h2 class="c-footer-mobile__column-heading">lorem ipsum d</h2>
          <ul class="c-footer-mobile__list">
            <a class="c-footer-mobile__link" href="#">
              <span class="c-footer-mobile__link-icon" aria-hidden="true"></span>
            </a>
            <a class="c-footer-mobile__link" href="#">
              <span class="c-footer-mobile__link-icon" aria-hidden="true"></span>
            </a>
            <a class="c-footer-mobile__link" href="#">
              <span class="c-footer-mobile__link-icon" aria-hidden="true"></span>
            </a>
            <li class="c-footer-mobile__item">
              <a class="c-footer-mobile__link" href="#">
                <span class="c-footer-mobile__link-icon" aria-hidden="true"></span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="c-footer-mobile__column-2">
        <div class="c-footer-mobile__group">
          <h2 class="c-footer-mobile__heading">lorem i</h2>
          <ul class="c-footer-mobile__list-2">
            <li class="c-footer-mobile__item">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsum</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsu</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsum</span>
                <div class="c-footer-mobile__group-2">
                  <span class="c-footer-mobile__text-2">lor</span>
                </div>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ip</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsum</span>
                <div class="c-footer-mobile__group-2">
                  <span class="c-footer-mobile__text-2">lor</span>
                </div>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsum</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsu</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsum</span>
                <div class="c-footer-mobile__group-2">
                  <span class="c-footer-mobile__text-2">lore</span>
                </div>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsu</span>
                <div class="c-footer-mobile__group-2">
                  <span class="c-footer-mobile__text-2">lore</span>
                </div>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsum dolor</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsum dolor sit a</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsum</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsum d</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ips</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="c-footer-mobile__group-3">
          <h2 class="c-footer-mobile__heading">lorem</h2>
          <ul class="c-footer-mobile__list-2">
            <li class="c-footer-mobile__item">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem i</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsu</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsum</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsum</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="c-footer-mobile__column-3">
        <div class="c-footer-mobile__group">
          <h2 class="c-footer-mobile__heading">lorem ips</h2>
          <ul class="c-footer-mobile__list-2">
            <li class="c-footer-mobile__item">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ips</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ips</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsum</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsum</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsum</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsum d</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsum dolor</span>
              </a>
            </li>
            <li class="c-footer-mobile__item-2">
              <a class="c-footer-mobile__link-2" href="#">
                <span class="c-footer-mobile__text">lorem ipsum dolor</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</div>

.c-footer-mobile-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
}

.c-footer-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #000000;
  color: #FFFFFF;
  cursor: default;
  font-family: figmaSans, "figmaSans Fallback", "SF Pro Display", system-ui, helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
  padding-top: 80px;
  padding-bottom: 48px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #FFFFFF29;
}

.c-footer-mobile__columns {
  display: grid;
  grid-template-columns: 1fr;
  box-sizing: border-box;
  width: 342px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-mobile__column {
  display: block;
  box-sizing: border-box;
  margin-bottom: 48px;
}

.c-footer-mobile__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 120px;
  height: 44px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  cursor: pointer;
}

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

.c-footer-mobile__column-heading {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: 0px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  cursor: text;
  font-size: 18px;
  font-weight: 330;
  line-height: 25.2px;
  white-space: nowrap;
}

.c-footer-mobile__list {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  padding: 0px;
  margin: 32px 0px 0px;
  font-size: 18px;
  font-weight: 330;
  line-height: 25.2px;
  list-style-type: none;
}

.c-footer-mobile__link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  background-color: #FFFFFF3D;
  color: #FFFFFF;
  border-radius: 50%;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #FFFFFF;
  padding-right: 6px;
  padding-left: 6px;
}

.c-footer-mobile__link-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

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

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

.c-footer-mobile__heading {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 16px;
  color: #FFFFFF99;
  cursor: text;
  font-family: figmaMono, "figmaMono Fallback", "SF Mono", menlo, monospace;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.8px;
  letter-spacing: 0.64px;
  text-transform: uppercase;
}

.c-footer-mobile__list-2 {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  font-size: 18px;
  font-weight: 330;
  line-height: 25.2px;
  list-style-type: none;
}

.c-footer-mobile__link-2 {
  display: inline;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-mobile__text {
  display: inline;
  box-sizing: border-box;
  font-size: 22px;
  font-weight: 320;
  line-height: 29.7px;
  letter-spacing: -0.11px;
}

.c-footer-mobile__item-2 {
  display: list-item;
  box-sizing: border-box;
  margin-top: 12px;
}

.c-footer-mobile__group-2 {
  display: inline-block;
  box-sizing: border-box;
  padding: 4.5px 8px;
  position: relative;
  top: -2px;
  background-color: #FFFFFF29;
  border-radius: 4px;
  font-size: 0px;
  line-height: 0px;
  margin-left: 8px;
}

.c-footer-mobile__text-2 {
  display: inline;
  box-sizing: border-box;
  font-family: figmaMono, "figmaMono Fallback", "SF Mono", menlo, monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.c-footer-mobile__group-3 {
  display: block;
  box-sizing: border-box;
  margin-top: 32px;
}

.c-footer-mobile__column-3 {
  display: block;
  box-sizing: border-box;
  margin-top: 32px;
}

.c-footer-mobile__link:focus {
  outline: 2px dashed #FFFFFF;
  outline-offset: 4px;
}

.c-footer-mobile__link-2:hover {
  text-decoration-line: underline;
}

.c-footer-mobile__link-2:focus {
  outline: 2px dashed #FFFFFF;
  outline-offset: 4px;
}

States

footer-link focus: outline 2px dashed #FFFFFF, outline-offset 4px
footer-link-2 hover: text-decoration-line underline
footer-link-2 focus: outline 2px dashed #FFFFFF, outline-offset 4px
mobile, footer-mobile-link focus: outline 2px dashed #FFFFFF, outline-offset 4px
mobile, footer-mobile-link-2 hover: text-decoration-line underline
mobile, footer-mobile-link-2 focus: outline 2px dashed #FFFFFF, outline-offset 4px

Do's and Don'ts

Do

Two typefaces. Keep the split exactly: Figma Sans for everything and Figma Mono only for eyebrow-mono and label-mono labels.
Three weights. Set copy in the observed weights only: 320 (body-light), 330 (body-lg) and 400 (headings, body, labels).
Black is the action color. Fill primary actions with primary #000000 and on-primary labels. That fill is shared by button-primary and the large button-primary-2, so black signals "action" generally, not just one hierarchy level.
Radius by variant. Match radius to button size as the site does: button-primary and button-secondary use rounded.md (8px) and button-primary-2 uses rounded.lg (16px).
Control heights. Keep the observed heights: button-primary 46px, button-primary-2 84px, button-ghost 39px.
Hairline edges. Draw outlines with the shadow tiers: #00000029 0px 0px 0px 1px inset at rest, deepening to #00000066 0px 0px 0px 1px inset on hover. This is a hairline system, not a flat one.
Hover and focus. Hover black fills to #000000D9. Focus every interactive element with a 2px dashed outline at 4px offset, in focus-ring #000000 on light and white on the footer.
Section rhythm. Space page sections on section-padding-y (80px).

Don't

Don't add a third typeface or a weight above 400. Emphasis comes from size steps like display-md → display-lg → hero-display.
Don't introduce brand hues (blue links, colored buttons) into the chrome. Color belongs to imagery. Text stays ink or on-dark.
Don't tighten tracking on mono labels or loosen it on displays. Sans styles go negative with size (-1.25px at hero-display) and mono stays positive (0.6px at label-mono).
Don't use soft blurred drop shadows or backdrop blur. None exist in the measured surfaces.
Don't create new grays. Secondary tones are alpha tints of black or white, such as #FFFFFF99 for footer mono headings (footer-column-heading-2).
Don't swap rounded.md buttons for full pills. rounded.full belongs to chips and round icon buttons such as the 36px footer-link.
Don't copy button-secondary (flagged: its height did not reproduce the measured 46px after 2 correction attempts) or footer (flagged: the footer-columns height did not reproduce the measured 959px) blindly. Verify their box dimensions against the site.

Responsive Behavior

Scope

This analysis is two-viewport (one desktop, one mobile capture). No breakpoint values were observed, so treat the behavior below as endpoints rather than a breakpoint map.

Observed Changes

Header: collapses to the logo, a hamburger (header-menu-toggle, 39px tall) and a single CTA. The desktop dropdown triggers and the secondary "Contact sales" button drop out.
Hero: the three-part desktop row stacks into one column. The headline wraps over two lines, the collage scales to full width, and the black button sits below it, nearly full-width.
Feature pairs: the side-by-side blocks stack vertically.
Footer: the multi-column grid becomes a long single column. footer-mobile measures 3224px tall against 1200px for the desktop footer.
Footer link text grows on mobile. Text goes from 16px at weight 320 (footer-text) to 22px at weight 320 with 29.7px line height (footer-mobile-text). This turns each link into a comfortable tap row.

Touch Targets

Component	Measured size
`button-primary`	46px tall
`button-ghost` / `header-menu-toggle`	39px tall
Footer social icon buttons (`footer-mobile-link`)	36px circles

Mobile appears to keep a consistent left margin in the screenshots, but no mobile gutter value was measured.

Iteration Guide

Reference tokens, never raw hex.
- Use primary, ink, surface, surface-inverse, on-dark and focus-ring.
- The only non-token colors allowed are the measured alpha tints, and only on the components that carry them: #000000D9 for hover, #00000029 and #00000066 for hairlines, and the #FFFFFF29, #FFFFFF3D and #FFFFFF99 footer tints.
Keep the monochrome boundary.
- New UI chrome may not introduce a hue.
- If something needs emphasis, use a black fill, inversion, or a larger type token.
Typography changes go through the ladder.
- Pick an existing token (hero-display … label-mono); do not invent sizes.
- Weights are capped at 400 and the floor is 320.
- Preserve each token's letter-spacing exactly; the tracking is part of the identity.
Buttons have variants, not ad-hoc styles.
- Solid black is button-primary (46px, 8px radius) or button-primary-2 (84px, 16px radius).
- The outlined variant is button-secondary, which uses the inset hairline ring.
- Text-only triggers are button-ghost (39px, 8px padding).
- Add a variant by extending these recipes, not by restyling one instance.
Elevation is hairline-only.
- Use the three measured shadows (#00000029 0px 0px 0px 1px inset, #00000066 0px 0px 0px 1px inset, #00000029 0px 1px 0px 0px) or the footer's 1px #FFFFFF29 border.
- Never add blur radius or backdrop-filter.
Every interactive element gets the dashed focus outline.
- Use 2px dashed, 4px offset, in ink on light and white on dark. Do not remove or restyle it.
Vertical rhythm is fixed.
- New page sections use section-padding-y (80px) top and bottom.
- Control padding comes from the button padding tokens.

Known Gaps

Coverage: only one page (https://figma.com/) was captured, at two viewports. Other templates (pricing, product pages, blog) and any authenticated app surfaces were not reached.
Flagged recipes:
- button-secondary (flagged: height did not reproduce the measured 46px after 2 correction attempts).
- footer (flagged: footer-columns height did not reproduce the measured 959px).
- footer-mobile (flagged: footer-mobile-columns height did not reproduce the measured 3095px).
Uncaptured content: several parts report "content not captured": the header dropdown triggers, the menu toggle and the footer column grids. Dropdown menu panels and the opened mobile menu were never observed. A large empty region below the hero suggests scroll-triggered content that did not render during capture.
States: hover was captured for black buttons and the outlined button only. Hover on nav links, footer links (footer-link-2 lists a hover state with no changes recorded) and active/pressed/disabled states are unknown. No form inputs were present.
Layout: no container max-width, grid gap or spacing base step was verified. Breakpoint values are unknown.
Radius usage: the exact targets of rounded.xs (2px) and rounded.xl (24px) were not tied to a measured component.
Motion: transitions, scroll animations and the hero collage's interactive behavior were not captured.
Dark theme: the dark-theme capture records only aggregate black/white role usage, not per-component dark recipes.

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

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

Benzerleri

Tümüne göz at

Yazılım ve SaaS · Productivity & Notes

Notion

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

Yazılım ve SaaS · Productivity & Notes

Linear

Linear'ın tasarım sistemi, mühendislik ekipleri için tasarlanmış, öncelikle koyu tema kullanan ve yüksek yoğunluklu bir ürün arayüzüdür. Yüzey paleti, kenar çubuğu, kart ve panel ayrımı için katmanlı koyu griler içeren neredeyse siyah tonlara (#08090a, #0f1011) dayanır. Tipografide yalnızca Inter Variable kullanılır; büyük başlık boyutlarında hassas negatif harf aralığı uygulanır, satır içi kod için ise Berkeley Mono tercih edilir. Köşe yuvarlaklığı bilinçli olarak küçük tutulmuştur (ağırlıklı olarak 2–6px); hap şeklindeki hatlar yalnızca rozet ve durum çipleri için ayrılmıştır. Yükseklik hissi, dramatik katmanlamadan çok 1px iç kenarlıklar ve düşük opaklıklı gölgelerle sağlanır. Birincil CTA rengi, Linear'ın imza niteliğindeki indigo tonu (#5e6ad2) olup Kayıt Ol düğmesinde ve önemli bağlantılarda kullanılır.

İş ve Profesyonel Hizmetler

Shopify

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

Medya, İçerik ve Eğlence · Editorial & Blog

WIRED

WIRED'ın tasarım sistemi, özel bir yazı tipi sistemi (Breve Text, WIRED Mono, WiredDisplay, Apercu) etrafında kurulmuş, yüksek kontrastlı ve editoryal odaklı bir tek renkli çerçevedir ve neredeyse hiç renk kullanmaz. Siyah (#000000), 2961 kullanımla baskındır; metinleri, kenarlıkları, ikonları ve etkileşimli durumları belirler. Birincil yüzey beyaz (#ffffff) tonundadır. Vurgu rengi çok seyrek kullanılır: abone ol çağrılarında marka mavisi olarak yalnızca #057dbc görülür. Yerleşim, sıkı 8px temel boşluklarla düzenlenmiş çok sütunlu bir haber ızgarasına dayanır; yüzeyler düzdür, gölge yoktur ve standart köşe yuvarlaklığı 4px'tir. Tipografi temel ayırt edici unsurdur: editoryal gövde metni 19px Breve Text ile, bölüm etiketleri büyük harfli ve harf aralığı açılmış WIRED Mono ile, büyük başlıklar ise WiredDisplay ile yazılır. Genel izlenim otoriter, bilgi yoğun ve önce okuma akışını gözeten bir estetiktir.

Seyahat, Ulaşım ve Lojistik

Airbnb

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

Ticaret ve Perakende · E-commerce Store

IKEA

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

Figma Tasarım Sistemi

Bileşenler

Buttons4

Extras2

Headers2

Footers2

Overview

Colors

Brand & Action

Surface

Text

Component & State Tints (measured on components, not in the page palette)

Gradients

Dark Mode

Typography

Font Family

Hierarchy

Principles

Note on Font Substitutes

Layout

Spacing System

Grid & Container

Whitespace Philosophy

Measured Layout

Elevation & Depth

Shapes

Border Radius Scale

Components

Buttons

Navigation

Header

Footer

Do's and Don'ts

Do

Don't

Responsive Behavior

Scope

Observed Changes

Touch Targets

Iteration Guide

Known Gaps

Benzerleri

Notion

Linear

Shopify

WIRED

Airbnb

IKEA

Benzer paletler