100% ตรงกัน
ghost · desktop
สถานะปกติตรงกัน 100%ค่าที่วัดได้ 34 ค่าตรงกัน
Focusตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน
ความมั่นใจของการดึงดีไซน์
- คอมโพเนนต์ตรงกับเว็บไซต์ 99%
- ครอบคลุมสีของเว็บไซต์ 100%
- ครอบคลุมสไตล์ข้อความของเว็บไซต์ 94%
- โทเค็นที่พบบนเว็บไซต์จริง 100%
Figma ใช้ระบบสีขาวดำแบบโมโนโครมที่เรียบจัด โดยมีฟอนต์ตัวแปรเฉพาะของตัวเองคือ figmaSans เป็นหลัก การออกแบบขับเคลื่อนด้วยงานตัวอักษรเป็นสำคัญ หัวข้อขนาดใหญ่ที่ 88px/56px ใช้ letter-spacing ติดลบแบบแน่น ตัดกับเนื้อหาเนื้อความที่ใช้น้ำหนักบาง 330 ปุ่มเรียกร้องให้กระทำ (CTA) ใช้รูปทรงแคปซูลโค้งเต็ม (border-radius: 9999px) พื้นดำทึบพร้อมตัวอักษรสีขาว โครงหน้าอิงตารางกริดกว้างสูงสุด 1440px มีระยะเว้นแนวตั้งของแต่ละส่วนที่ 80px และพื้นผิวหลักเป็นสีขาวสะอาด ความลึกมีน้อยมาก เงาเป็นชั้นจางๆ ที่คำนวณจาก oklch โทนลาเวนเดอร์/ม่วงที่ใช้เป็นสีเน้น #cb9fd2 ปรากฏในแบนเนอร์ส่วนท้ายของเว็บไซต์ โดยรวมบุคลิกของงานดูมั่นใจ มีความประณีตทางการจัดตัวอักษร และให้ความสำคัญกับแบรนด์เป็นอันดับแรก
ระบบภาพ
100% ความมั่นใจ
97% ความมั่นใจ
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% ความมั่นใจ
header-gap
8px
8px
button-ghost-padding-y
8px
8px
button-ghost-padding-x
8px
8px
button-primary-padding-y
12px
12px
button-primary-padding-x
22px
22px
button-primary-2-padding-y
24px
24px
button-primary-2-padding-x
32px
32px
section-padding-y
80px
80px
100% ความมั่นใจ
xs · 2px
sm · 4px
md · 8px
lg · 16px
xl · 24px
full · 9999px
คอมโพเนนต์
Buttons4
98% ตรงกัน
primary · desktop
สถานะปกติตรงกัน 99%ค่าที่วัดได้ 44 ค่าตรงกัน
Hoverตรงกัน 99%ค่าที่วัดได้ 18 ค่าตรงกัน
Focusตรงกัน 98%ค่าที่วัดได้ 18 ค่าตรงกัน
99% ตรงกัน
primary · desktop
สถานะปกติตรงกัน 100%ค่าที่วัดได้ 43 ค่าตรงกัน
Hoverตรงกัน 99%ค่าที่วัดได้ 18 ค่าตรงกัน
Focusตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน
96% ตรงกัน
secondary · desktop
Root height เป็น 69px แต่บนเว็บไซต์เป็น 46px; Group height เป็น 45px แต่บนเว็บไซต์เป็น 22px และอีก 1 รายการ
สถานะปกติตรงกัน 97%ค่าที่วัดได้ 3 จาก 44 ค่าแตกต่างกัน
Hoverตรงกัน 96%ค่าที่วัดได้ 18 ค่าตรงกัน
Focusตรงกัน 96%ค่าที่วัดได้ 18 ค่าตรงกัน
Extras2
100% ตรงกัน
desktop
สถานะปกติตรงกัน 100%ค่าที่วัดได้ 235 ค่าตรงกัน
100% ตรงกัน
desktop
สถานะปกติตรงกัน 100%ค่าที่วัดได้ 65 ค่าตรงกัน
Headers2
99% ตรงกัน
desktop
สถานะปกติตรงกัน 100%ค่าที่วัดได้ 475 ค่าตรงกัน
Hoverไม่ได้ตรวจสอบ
Focusไม่ได้ตรวจสอบ
Focus บน cta 2ตรงกัน 99%ค่าที่วัดได้ 18 ค่าตรงกัน
ไม่มีภาพที่จัดเก็บไว้
ไม่มีภาพที่จัดเก็บไว้
Hover บน cta 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน
ไม่มีภาพที่จัดเก็บไว้
ไม่มีภาพที่จัดเก็บไว้
Focus บน cta 3ตรงกัน 99%ค่าที่วัดได้ 18 ค่าตรงกัน
ไม่มีภาพที่จัดเก็บไว้
ไม่มีภาพที่จัดเก็บไว้
Hover บน cta 3ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน
ไม่มีภาพที่จัดเก็บไว้
ไม่มีภาพที่จัดเก็บไว้
Focus บน ctaตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน
ไม่มีภาพที่จัดเก็บไว้
ไม่มีภาพที่จัดเก็บไว้
Focus บน linkตรงกัน 99%ค่าที่วัดได้ 18 ค่าตรงกัน
ไม่มีภาพที่จัดเก็บไว้
ไม่มีภาพที่จัดเก็บไว้
Focus บน logoตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน
ไม่มีภาพที่จัดเก็บไว้
ไม่มีภาพที่จัดเก็บไว้
Focus บน menu toggleตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน
ไม่มีภาพที่จัดเก็บไว้
ไม่มีภาพที่จัดเก็บไว้
Focus บน nav linkตรงกัน 99%ค่าที่วัดได้ 18 ค่าตรงกัน
ไม่มีภาพที่จัดเก็บไว้
ไม่มีภาพที่จัดเก็บไว้
ไม่ได้ตรวจสอบ
mobile
ไม่ได้สร้างสูตร: องค์ประกอบไม่ปรากฏให้เห็น
ไม่มีการเปรียบเทียบสำหรับคอมโพเนนต์นี้
Footers2
100% ตรงกัน
desktop
Columns height เป็น 806px แต่บนเว็บไซต์เป็น 959px; Column height เป็น 806px แต่บนเว็บไซต์เป็น 856px และอีก 15 รายการ
สถานะปกติตรงกัน 100%ค่าที่วัดได้ 17 จาก 1273 ค่าแตกต่างกัน
Hoverไม่ได้ตรวจสอบ
Focusไม่ได้ตรวจสอบ
Focus บน link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน
ไม่มีภาพที่จัดเก็บไว้
ไม่มีภาพที่จัดเก็บไว้
Hover บน link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน
ไม่มีภาพที่จัดเก็บไว้
ไม่มีภาพที่จัดเก็บไว้
Focus บน linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน
ไม่มีภาพที่จัดเก็บไว้
ไม่มีภาพที่จัดเก็บไว้
100% ตรงกัน
mobile
Columns height เป็น 1424px แต่บนเว็บไซต์เป็น 3095px; Column height เป็น 112px แต่บนเว็บไซต์เป็น 118px และอีก 115 รายการ
สถานะปกติตรงกัน 100%ค่าที่วัดได้ 117 จาก 1735 ค่าแตกต่างกัน
Hoverไม่ได้ตรวจสอบ
Focusไม่ได้ตรวจสอบ
Focus บน link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน
ไม่มีภาพที่จัดเก็บไว้
ไม่มีภาพที่จัดเก็บไว้
Hover บน link 2ตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน
ไม่มีภาพที่จัดเก็บไว้
ไม่มีภาพที่จัดเก็บไว้
Focus บน linkตรงกัน 100%ค่าที่วัดได้ 18 ค่าตรงกัน
ไม่มีภาพที่จัดเก็บไว้
ไม่มีภาพที่จัดเก็บไว้
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 onsurface#FFFFFF, inverting tosurface-inverse#000000 withon-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 onbutton-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 fixedheaderbackground. - Night (
surface-inverse, #000000): thefooterbackground, 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 thenavigation-2text.
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:
#000000D9is the hover fill ofbutton-primary,button-primary-2andheader-cta-3. - Hairline:
#00000029(16% black) is the inset ring ofbutton-secondaryand the bottom divider ofheader-group. - Hairline Hover:
#00000066is the hover ring ofbutton-secondaryandheader-cta-2. - Footer Chip:
#FFFFFF3Dis the fill of the 36px social icon buttons (footer-link). - Footer Hairline:
#FFFFFF29is thefootertop border and the fill of thefooter-group-2badges. - Footer Muted:
#FFFFFF99is 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-lgat 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-monouses 0.48px andlabel-monouses 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 ofheader-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-2takes 16px, so the radius scales with the control. - Large containers: cards and media step up to 24px.
- Pill and circle shapes:
rounded.fullis 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
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 capturednavigation-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.
Navigation (2)
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: thebutton-ghostbutton (.c-header__cta, 3 instances), content not capturedheader-menu-toggle: button (.c-header__menu-toggle), content not capturedheader-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: thebutton-secondarybutton (.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: thebutton-primarybutton (.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-logofocus: outline 2px dashed #000000, outline-offset 4pxheader-ctafocus: outline 2px dashed #000000, outline-offset 4pxheader-menu-togglefocus: outline 2px dashed #000000, outline-offset 4pxheader-nav-linkfocus: outline 2px dashed #000000, outline-offset 4pxheader-linkfocus: outline 2px dashed #000000, outline-offset 4pxheader-cta-2hover: box-shadow #00000066 0px 0px 0px 1px insetheader-cta-2focus: outline 2px dashed #000000, outline-offset 4pxheader-cta-3hover (header-cta-3-hover): background-color #000000D9header-cta-3focus: outline 2px dashed #000000, outline-offset 4px
Footer
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 capturedfooter-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 capturedfooter-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 capturedfooter-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 capturedfooter-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-linkfocus: outline 2px dashed #FFFFFF, outline-offset 4pxfooter-link-2hover: text-decoration-line underlinefooter-link-2focus: outline 2px dashed #FFFFFF, outline-offset 4px- mobile,
footer-mobile-linkfocus: outline 2px dashed #FFFFFF, outline-offset 4px - mobile,
footer-mobile-link-2hover: text-decoration-line underline - mobile,
footer-mobile-link-2focus: 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-monoandlabel-monolabels. - 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 andon-primarylabels. That fill is shared bybutton-primaryand the largebutton-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-primaryandbutton-secondaryuserounded.md(8px) andbutton-primary-2usesrounded.lg(16px). - Control heights. Keep the observed heights:
button-primary46px,button-primary-284px,button-ghost39px. - Hairline edges. Draw outlines with the shadow tiers:
#00000029 0px 0px 0px 1px insetat rest, deepening to#00000066 0px 0px 0px 1px inseton 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, infocus-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
inkoron-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 atlabel-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
#FFFFFF99for footer mono headings (footer-column-heading-2). - Don't swap
rounded.mdbuttons for full pills.rounded.fullbelongs to chips and round icon buttons such as the 36pxfooter-link. - Don't copy
button-secondary(flagged: its height did not reproduce the measured 46px after 2 correction attempts) orfooter(flagged: thefooter-columnsheight 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-mobilemeasures 3224px tall against 1200px for the desktopfooter. - 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-darkandfocus-ring. - The only non-token colors allowed are the measured alpha tints, and only on the components that carry them:
#000000D9for hover,#00000029and#00000066for hairlines, and the#FFFFFF29,#FFFFFF3Dand#FFFFFF99footer tints.
- Use
- 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.
- Pick an existing token (
- Buttons have variants, not ad-hoc styles.
- Solid black is
button-primary(46px, 8px radius) orbutton-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.
- Solid black is
- 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#FFFFFF29border. - Never add blur radius or backdrop-filter.
- Use the three measured shadows (
- 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.
- New page sections use
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-columnsheight did not reproduce the measured 959px).footer-mobile(flagged:footer-mobile-columnsheight 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-2lists 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
basestep was verified. Breakpoint values are unknown. - Radius usage: the exact targets of
rounded.xs(2px) androunded.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.
ไฟล์ DESIGN.md นี้เป็นภาษาอังกฤษ ซึ่งเป็นภาษาที่เอเจนต์เขียนโค้ด AI ใช้อ่านไฟล์นี้
ดึงจากเว็บไซต์สาธารณะของ Figma ไม่ใช่แนวทางแบรนด์อย่างเป็นทางการ ตรวจสอบฟอนต์ของเว็บไซต์อื่น
รายการที่คล้ายกัน
ดูทั้งหมด
ซอฟต์แวร์และ SaaS · Productivity & Notes
Notion
Notion หน้าแรกของหน้าการตลาดใช้ส่วนฮีโร่สีน้ำเงินเข้มโทนลึก (#02093a) คู่กับเนื้อหาส่วนอื่นพื้นสว่าง (#f6f5f4) โดยใช้ฟอนต์เฉพาะ NotionInter กับข้อความทุกระดับ ดีไซน์ใช้กริดสิบสองคอลัมน์ที่มีร่อง 28px และระบบมุมโค้งสองแบบ คือ 8px สำหรับการ์ด และ 9999px สำหรับปุ่มทรงแคปซูล สำหรับองค์ประกอบลอยตัวใช้ระบบเงาหลายชั้นที่เข้มขึ้นตามลำดับ ปุ่มเรียกการกระทำและจุดเน้นสำคัญใช้สีน้ำเงินของแบรนด์ (#2537b1) ส่วนลำดับความสำคัญของข้อความและพื้นผิวทั้งหมดจัดโครงสร้างด้วยชุดสีเทาตามความหมาย ตั้งแต่ gray-200 ถึง gray-900
ซอฟต์แวร์และ SaaS · Productivity & Notes
Linear
Design ของ Linear เป็นระบบที่เน้นโหมดมืดเป็นหลัก เป็นอินเทอร์เฟซผลิตภัณฑ์ที่มีความหนาแน่นของข้อมูลสูง ออกแบบมาสำหรับทีมวิศวกร ชุดสีพื้นผิวอิงกับสีดำเกือบสนิท (#08090a, #0f1011) พร้อมเฉดสีเทาเข้มที่ซ้อนกันเป็นชั้นเพื่อแยกแถบข้าง การ์ด และแผงต่าง ๆ การจัดตัวอักษรใช้ Inter Variable เพียงอย่างเดียว โดยปรับระยะห่างตัวอักษรให้แคบลงอย่างแม่นยำในขนาดตัวอักษรใหญ่ และใช้ Berkeley Mono สำหรับโค้ดแบบอินไลน์ ภาษาของการขอบมุมถูกกำหนดให้เล็กโดยตั้งใจ ส่วนใหญ่อยู่ที่ 2–6px ขณะที่รูปทรงแคปซูลสงวนไว้สำหรับป้ายกำกับและชิปสถานะ การยกระดับของวัตถุแสดงผ่านเส้นขอบ inset 1px ที่แผ่วเบาและเงาตกกระทบความทึบต่ำ มากกว่าการซ้อนชั้นที่โดดเด่น สีปุ่มเรียกให้ดำเนินการหลักคือสีคราม #5e6ad2 ซึ่งเป็นเอกลักษณ์ของ Linear ใช้กับปุ่ม Sign Up และลิงก์สำคัญ
ธุรกิจและบริการวิชาชีพ
Shopify
Shopify ใช้หน้าแรกการตลาดที่มีส่วนฮีโร่เป็นวิดีโอเต็มความกว้างอย่างโดดเด่น โดยมีพื้นหลังสีดำเกือบสนิท (#02090a) ที่ตัดกับแถบนำทางสีขาวด้านบนอย่างชัดเจน สีเน้นหลักของแบรนด์คือสีเขียวมิ้นต์สด (#36f4a4) ซึ่งใช้อย่างประหยัดสำหรับจุดเด่นและสถานะการโต้ตอบ ตัวอักษรแบ่งเป็นสองแบบ คือ NeueHaasGrotesk สำหรับหัวข้อตัวใหญ่และหัวข้อแบบบรรณาธิการ และ Inter-Variable สำหรับเนื้อหาส่วนการใช้งาน ปุ่มเรียกให้ดำเนินการใช้รูปทรงแคปซูลโค้งมนเต็มที่ (border-radius: 9999px) ภาพรวมของระบบดีไซน์นี้มั่นใจ มีคอนทราสต์สูง และมุ่งสร้างแรงบันดาลใจ ออกแบบมาเพื่อเปลี่ยนผู้เข้าชมให้เป็นผู้ขาย
สื่อ คอนเทนต์ และความบันเทิง · Editorial & Blog
WIRED
WIRED เป็นระบบการออกแบบแบบโมโนโครมที่มีคอนทราสต์สูงและขับเคลื่อนด้วยงานบรรณาธิการ สร้างขึ้นจากระบบตัวอักษรเฉพาะของตนเอง (Breve Text, WIRED Mono, WiredDisplay และ Apercu) พร้อมโทนสีที่แทบไม่มีสีสัน สีดำ (#000000) เป็นสีหลักด้วยจำนวน 2961 ครั้ง ใช้กับข้อความ เส้นขอบ ไอคอน และสถานะการโต้ตอบ ส่วนสีขาว (#ffffff) เป็นพื้นผิวหลัก สีเน้นถูกใช้อย่างประหยัด โดยมีเพียง #057dbc ที่ปรากฏเป็นสีน้ำเงินของแบรนด์สำหรับปุ่มเรียกให้สมัครสมาชิก โครงสร้างเลย์เอาต์ใช้กริดเรื่องราวหลายคอลัมน์ที่เป็นระเบียบ ระยะห่างฐาน 8px ที่กระชับ พื้นผิวแบนราบไม่มีเงาของกล่อง และมุมโค้งเล็กน้อย โดยทั่วไปอยู่ที่ 4px ตัวอักษรคือจุดเด่นหลัก เนื้อหาบทความใช้ Breve Text ขนาด 19px ป้ายชื่อส่วนใช้ WIRED Mono พิมพ์ตัวใหญ่พร้อมระยะห่างตัวอักษรกว้าง ส่วนหัวข้อขนาดใหญ่ใช้ WiredDisplay โดยรวมแล้วบุคลิกของงานดูน่าเชื่อถือ มีข้อมูลแน่น และให้ความสำคัญกับการอ่านเป็นลำดับเป็นอันดับแรก
การท่องเที่ยว การขนส่ง และโลจิสติกส์
Airbnb
Airbnb ใช้ระบบการออกแบบที่ตั้งอยู่บนฟอนต์แบบ variable ตัวเดียวที่เป็นกรรมสิทธิ์ (Airbnb Cereal VF) และชุดสีกลางเกือบเป็นขาวดำ โดยมีสีถ่านเข้ม (#222222) และสีเทาอ่อนเป็นหลัก ส่วนสีชมพูปะการัง "Rausch" (#ff385c) ซึ่งเป็นเอกลักษณ์ของแบรนด์ ถูกสงวนไว้เฉพาะสำหรับปุ่มเรียกร้องการกระทำหลัก (CTA) และโลโก้เท่านั้น เลย์เอาต์เป็นกริดการ์ดภาพที่ปรับตามขนาดหน้าจอ มีสัดส่วนพื้นที่ภาพต่อข้อความที่กว้างขวาง การ์ดมีมุมโค้งมน 20px ที่นุ่มนวล และระบบเงาแบบหลายชั้นที่ช่วยสร้างความลึกอย่างละมุน โดยไม่มีความตัดกันที่แข็งกระด้าง แถบค้นหาเป็นกล่องรูปแคปซูลที่เด่นชัด ทำหน้าที่รวมการกระทำหลักของผู้ใช้เข้าด้วยกัน
การค้าและค้าปลีก · E-commerce Store
IKEA
IKEA ใช้ระบบออกแบบแบบแบนและกล้าหาญบนหน้าแรกระดับโลก โดยมีสีเหลือง IKEA (#ffdb00) เป็นพื้นผิวหลักสำหรับการดำเนินการ และใช้สีน้ำเงิน IKEA (#0058a3) เป็นจุดเน้นของโลโก้แบรนด์ ระบบตัวอักษรทั้งหมดสร้างจากแบบอักษรเฉพาะเพียงหนึ่งแบบคือ Noto IKEA ซึ่งใช้น้ำหนัก 400 และ 700 ตามสเกลที่กำหนดอย่างชัดเจน ตั้งแต่ข้อความเนื้อหาขนาด 14px ไปจนถึงหัวข้อแสดงผลขนาด 51px การยกระดับองค์ประกอบอาศัยความต่างของสีและโครงสร้างเลย์เอาต์เท่านั้น ไม่ใช้เงา เลย์เอาต์ใช้คอนเทนเนอร์ความกว้างสูงสุด 90rem และช่องว่างกริดบนเดสก์ท็อป 1.5rem พร้อมโทเคนรัศมีมุม 8px ที่ใช้อย่างสม่ำเสมอกับองค์ประกอบที่โต้ตอบได้ พื้นหลังสีขาวนวล (#fffefb) ช่วยให้ดูอบอุ่นเมื่อตัดกับข้อความสี #111111 ที่เข้มจัด ทำให้การอ่านมีคอนทราสต์สูงและเข้าถึงได้ง่าย