Design System Dribbble

PROEngine v4

Sistem desain Dribbble dibangun di atas navy hampir hitam yang dalam (#0d0c22) yang dipadukan dengan permukaan putih yang bersih, diselingi aksen pink-panas khas (#ea4c89) yang digunakan secukupnya untuk penekanan editorial dan sorotan interaktif. Seluruh sistem tipografinya hanya mengandalkan Mona Sans di semua ketebalan, sehingga hierarki dibentuk melalui ketebalan dan ukuran saja. Tombol berbentuk pil (border-radius: 1e+07px) dan kartu dengan sudut membulat (radius 12px) menjadi bahasa geometri utamanya. Tata letaknya lapang dengan grid dasar 8px, dan elevasi dihadirkan melalui drop shadow yang halus, bukan tumpukan lapisan yang berat.

Sistem visual

100% keyakinan

93% keyakinan

hero-displayDesign is intelligence made visibleMajor Mono Display94px / 400 / 1.2

display-lgDesign is intelligence made visibleMona Sans52px / 600 / 1.2

title-lgDesign is intelligence made visibleMona Sans32px / 700 / 1.2

body-lgDesign is intelligence made visibleMona Sans16px / 400 / 1.3

bodyDesign is intelligence made visibleMona Sans14px / 400 / 1.45

body-relaxedDesign is intelligence made visibleMona Sans14px / 400 / 2

body-mediumDesign is intelligence made visibleMona Sans14px / 500 / 1.45

body-strongDesign is intelligence made visibleMona Sans14px / 600 / 1.45

nav-linkDesign is intelligence made visibleMona Sans14px / 600 / 2.15

buttonDesign is intelligence made visibleMona Sans14px / 600 / 1

labelDesign is intelligence made visibleMona Sans13px / 600 / 1

captionDesign is intelligence made visibleMona Sans12px / 400 / 1.5

caption-mediumDesign is intelligence made visibleMona Sans12px / 500 / 1.35

micro-badgeDesign is intelligence made visibleMona Sans9px / 800 / 2.2

100% keyakinan

button-secondary-4-padding-y
10px

button-ghost-2-padding-left
14px

button-secondary-3-padding-y
18px

button-secondary-3-padding-left
18px

button-secondary-2-padding-right
18.5px

button-ghost-4-padding-right
18.5px

button-secondary-4-padding-x
20px

input-padding-left
24px

input-2-padding-left
24px

input-3-padding-left
24px

footer-landing-column-gap
32px

footer-inner-column-gap
32px

button-ghost-2-padding-right
34px

button-secondary-3-padding-right
35px

footer-landing-gap
48px

footer-inner-gap
48px

footer-landing-inner-max-width
1200px

footer-inner-inner-max-width
1200px

100% keyakinan

2xs · 3px

xs · 4px

xs-plus · 5px

sm · 6px

md · 8px

lg · 12px

xl · 16px

2xl · 20px

3xl · 24px

4xl · 30px

5xl · 36px

6xl · 40px

7xl · 50px

8xl · 70px

9xl · 90px

full · 9999px

Komponen

Buttons9

99% kecocokan

ghost · desktop

Root height bernilai 47px, sedangkan situs memakai 31px; Icon width bernilai 47px, sedangkan situs memakai 31px dan 1 lainnya.

DiamKecocokan 100%3 dari 34 ukuran berbeda

Asli

Render

HoverKecocokan 100%18 ukuran cocok

Asli

Render

FocusKecocokan 99%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

99% kecocokan

ghost · desktop

DiamKecocokan 99%27 ukuran cocok

Asli

Render

HoverKecocokan 99%22 ukuran cocok

Asli

Render

FocusKecocokan 99%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

ghost · desktop

DiamKecocokan 100%38 ukuran cocok

Asli

Render

HoverKecocokan 100%22 ukuran cocok

Asli

Render

FocusKecocokan 100%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

99% kecocokan

ghost · desktop

DiamKecocokan 99%24 ukuran cocok

Asli

Render

HoverKecocokan 99%18 ukuran cocok

Asli

Render

FocusKecocokan 99%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

27% kecocokan

primary · desktop

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

DiamKecocokan 99%21 ukuran cocok

Asli

Render

FocusKecocokan 27%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

secondary · desktop

DiamKecocokan 100%38 ukuran cocok

Asli

Render

HoverKecocokan 100%22 ukuran cocok

Asli

Render

FocusKecocokan 100%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

99% kecocokan

secondary · desktop

DiamKecocokan 99%24 ukuran cocok

Asli

Render

HoverKecocokan 99%18 ukuran cocok

Asli

Render

FocusKecocokan 99%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

secondary · desktop

DiamKecocokan 100%39 ukuran cocok

Asli

Render

HoverKecocokan 100%22 ukuran cocok

Asli

Render

FocusKecocokan 100%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

secondary · desktop

DiamKecocokan 100%38 ukuran cocok

Asli

Render

HoverKecocokan 100%22 ukuran cocok

Asli

Render

FocusKecocokan 100%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

Inputs3

100% kecocokan

desktop

DiamKecocokan 100%22 ukuran cocok

Render terpisah dari Input, diam — Render

FocusKecocokan 100%18 ukuran cocok

Render terpisah dari Input, focus — Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%22 ukuran cocok

Render terpisah dari Input (2), diam — Render

FocusKecocokan 100%18 ukuran cocok

Render terpisah dari Input (2), focus — Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%22 ukuran cocok

Render terpisah dari Input (3), diam — Render

FocusKecocokan 100%18 ukuran cocok

Render terpisah dari Input (3), focus — Render

Resep di DESIGN.md

Cards8

96% kecocokan

desktop

Group 4 height bernilai 16px, sedangkan situs memakai 24px; Group 5 y bernilai 239px, sedangkan situs memakai 231px dan 8 lainnya.

DiamKecocokan 100%10 dari 252 ukuran berbeda

Render terpisah dari Card, diam — Render

Diam, instance 2Kecocokan 96%10 dari 252 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%10 dari 252 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%10 dari 252 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 100%10 dari 252 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 6Kecocokan 100%10 dari 252 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Tidak dicek

desktop

Resep tidak dapat dirender secara terpisah.

Tidak ada yang dibandingkan untuk komponen ini.

Resep di DESIGN.md

95% kecocokan

desktop

Root width bernilai 48px, sedangkan situs memakai 412px; Group width bernilai 0px, sedangkan situs memakai 364px dan 30 lainnya.

DiamKecocokan 100%32 dari 616 ukuran berbeda

Render terpisah dari Card (3), diam — Render

HoverKecocokan 100%18 ukuran cocok

Render terpisah dari Card (3), hover — Render

FocusKecocokan 100%1 dari 18 ukuran berbeda

Render terpisah dari Card (3), focus — Render

Diam, instance 2Kecocokan 95%32 dari 616 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 95%32 dari 616 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

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

DiamKecocokan 100%287 ukuran cocok

Render terpisah dari Card (4), diam — Render

Diam, instance 2Kecocokan 100%287 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%287 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%287 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 100%287 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

87% kecocokan

desktop

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

DiamKecocokan 91%83 ukuran cocok

Render terpisah dari Card (5), diam — Render

FocusKecocokan 87%18 ukuran cocok

Render terpisah dari Card (5), focus — Render

Diam, instance 2Kecocokan 91%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 91%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 91%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 91%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 6Kecocokan 94%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Tidak dapat diverifikasi

desktop

Tidak dapat diverifikasi: foto, media, atau iklan yang dipasang halaman di dalamnya menutupi sebagian besar elemen dan tidak ada perbedaan lain, jadi perbandingan tidak mengatakan apa pun tentang resepnya.

DiamKecocokan 100%122 ukuran cocok

Render terpisah dari Card (6), diam — Render

Diam, instance 2Kecocokan 100%122 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%122 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%122 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 100%122 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 6Kecocokan 100%122 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

86% kecocokan

desktop

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

DiamKecocokan 91%83 ukuran cocok

Render terpisah dari Card (7), diam — Render

FocusKecocokan 86%18 ukuran cocok

Render terpisah dari Card (7), focus — Render

Diam, instance 2Kecocokan 91%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 91%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 94%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 90%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 6Kecocokan 91%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

91% kecocokan

desktop

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

DiamKecocokan 91%83 ukuran cocok

Render terpisah dari Card (8), diam — Render

Diam, instance 2Kecocokan 92%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 92%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 91%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 92%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 6Kecocokan 92%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Extras7

94% kecocokan

desktop

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

DiamKecocokan 94%842 ukuran cocok

Category carousel asli di situs, diam — Asli

Render terpisah dari Category carousel, diam — Render

Resep di DESIGN.md

86% kecocokan

desktop

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

DiamKecocokan 91%83 ukuran cocok

Category link asli di situs, diam — Asli

Render terpisah dari Category link, diam — Render

FocusKecocokan 86%18 ukuran cocok

Category link asli di situs, focus — Asli

Render terpisah dari Category link, focus — Render

Diam, instance 2Kecocokan 91%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 91%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 91%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 91%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 6Kecocokan 91%83 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

98% kecocokan

desktop

DiamKecocokan 100%39 ukuran cocok

Render terpisah dari Dropdown, diam — Render

HoverKecocokan 100%22 ukuran cocok

Render terpisah dari Dropdown, hover — Render

FocusKecocokan 98%22 ukuran cocok

Render terpisah dari Dropdown, focus — Render

Resep di DESIGN.md

99% kecocokan

desktop

DiamKecocokan 99%842 ukuran cocok

Dropdown menu asli di situs, diam — Asli

Render terpisah dari Dropdown menu, diam — Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%34 ukuran cocok

Asli

Render

FocusKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

99% kecocokan

desktop

DiamKecocokan 100%34 ukuran cocok

Asli

Render

FocusKecocokan 99%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%202 ukuran cocok

Render terpisah dari Tabs, diam — Render

Resep di DESIGN.md

Headers4

99% kecocokan

desktop

DiamKecocokan 99%201 ukuran cocok

Header (inner) asli di situs, diam — Asli

Render terpisah dari Header (inner), diam — Render

Hovertidak dicek

Header (inner) asli di situs, hover — Asli

Render terpisah dari Header (inner), hover — Render

Hover pada nav linkKecocokan 99%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

99% kecocokan

desktop

DiamKecocokan 99%201 ukuran cocok

Header (landing) asli di situs, diam — Asli

Render terpisah dari Header (landing), diam — Render

Hovertidak dicek

Header (landing) asli di situs, hover — Asli

Render terpisah dari Header (landing), hover — Render

Focustidak dicek

Header (landing) asli di situs, focus — Asli

Render terpisah dari Header (landing), focus — Render

Focus pada nav linkKecocokan 99%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 99%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Tidak dicek

mobile

Tidak ada resep yang dibuat: elemen tidak terlihat.

Tidak ada yang dibandingkan untuk komponen ini.

Tidak dicek

mobile

Tidak ada resep yang dibuat: elemen tidak terlihat.

Tidak ada yang dibandingkan untuk komponen ini.

Footers4

99% kecocokan

desktop

DiamKecocokan 99%1887 ukuran cocok

Footer (inner) asli di situs, diam — Asli

Render terpisah dari Footer (inner), diam — Render

Resep di DESIGN.md

99% kecocokan

desktop

DiamKecocokan 99%1887 ukuran cocok

Footer (landing) asli di situs, diam — Asli

Render terpisah dari Footer (landing), diam — Render

Focustidak dicek

Footer (landing) asli di situs, focus — Asli

Render terpisah dari Footer (landing), focus — Render

Focus pada link 2Kecocokan 99%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada link 3Kecocokan 99%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada linkKecocokan 99%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

mobile

Inner height bernilai 314px, sedangkan situs memakai 342px; Group 6 height bernilai 84px, sedangkan situs memakai 112px.

DiamKecocokan 100%2 dari 1925 ukuran berbeda

Resep di DESIGN.md

100% kecocokan

mobile

Inner height bernilai 312px, sedangkan situs memakai 340px; Group 6 height bernilai 84px, sedangkan situs memakai 112px.

DiamKecocokan 100%2 dari 1887 ukuran berbeda

Focustidak dicek

Focus pada link 2Kecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada link 3Kecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada linkKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

DESIGN.md

Dribbble

Overview

Dribbble is a gallery first and an interface second. The chrome is white, hairline-thin and almost colorless, so user-submitted shot thumbnails supply nearly all of the page's color. The UI frames them and does not compete. The brand voice comes from three moves only: a deep violet-black ink for text and primary CTAs, a single hot Dribbble Pink (primary, #EA4C89) used sparingly for sign-up actions and highlights, and friendly rounded geometry. That geometry runs from 8px controls to full pills.

Density is split by zone. Navigation, meta rows and controls are compact, with 12–14px semibold Mona Sans, 40px buttons and 16px icons. The thumbnail grid and the space between bands are generous. Hierarchy comes from weight and ink tier rather than size. Most UI text sits at 14px and is separated into roles by weight (400 / 500 / 600) and by stepping text color down from ink through body, muted-violet and subtle. Large display type appears only in hero moments.

Depth is minimal but real. Thumbnails sit flat on the canvas. White controls carry barely visible 2–4px shadows that deepen slightly on hover. Mega-menu panels float on soft, diffuse shadows. Focus is always a visible pink halo.

Key Characteristics:

Content-first thumbnail grid on a pure white surface (#FFFFFF); the chrome stays neutral.
One accent: Dribbble Pink (primary, #EA4C89), reserved for sign-up and high-intent actions, with a lighter hover (primary-hover, #EC5E95).
Violet-tinted neutrals: text steps from ink (#060318) to body (#3A3546) to muted-violet (#7B7194) to subtle (#9E9EA7).
Mona Sans everywhere. Weight 600 is the UI workhorse for links, buttons and labels.
Controls share a 40px height (button-secondary, button-secondary-3, button-secondary-4, button-ghost-4). Search inputs run taller at 54px (input, input-2, input-3).
Radii cluster at rounded.md (8px) and rounded.lg (12px), with rounded.full pills for CTAs and chips.
Whisper-level shadows (e.g. #00000003 0px 2px 2px 0px) instead of borders-plus-drop-shadows.
Focus is a 2px Blush Halo outline (primary-focus, #F3AFE4) on links, buttons and tiles.

Colors

The palette is a white canvas, a violet-black ink ladder and one pink accent. Use tokens by role and never introduce new hues; the artwork already supplies the color.

Brand & Accent

Dribbble Pink (primary, #EA4C89): the only brand hue. It is the fill and 1px border of the pink action buttons (button-secondary, button-ghost-3, white text). It also marks highlights and featured-plan outlines. Keep it to one or two instances per viewport.
Blush (primary-soft, #FAEBF9): pale pink surface for promo banners and soft highlighted regions. Never use it as a text color on white.

Ink & Text

Midnight Ink (ink, #060318): default text color for headings, nav links (header-landing-nav-link) and input text (input). It is the dominant color on every page.
Ink Black (ink-black, #070707): neutral near-black secondary text; second most common text color.
Graphite (ink-graphite, #262627): low-frequency dark text variant.
Slate Violet (body, #3A3546): text of ghost/secondary text buttons (button-secondary-2, button-ghost-4) and supporting copy.
Dusk (body-muted, #524B63): hover text color of the icon ghost button (button-ghost).
Muted Gray (muted, #6E6D7A): footer legal/secondary text (footer-landing-group-5) and the 1px focus outline of white buttons.
Muted Violet (muted-violet, #7B7194): the universal hover color for text links and text buttons (header-landing-nav-link-hover, button-secondary-2-hover). It also serves as resting color for icon ghost buttons and small meta text.
Subtle Gray (subtle, #9E9EA7): counts and meta (like/view numbers via like-button-2, card-4-group-6). It is also the placeholder fill behind category tiles.
Lavender Mist (subtle-lavender, #BEB9CA): faintest text tier, seen on one page; use for disabled or de-emphasized labels only.
Hyperlink Blue (link, #0000FD): raw inline-link blue on content pages. It is not part of the chrome.

Surface & Hairlines

Canvas White (surface, #FFFFFF): page, footer (footer-landing), dropdown and white button fills. It also serves as the 2px separating border on category tiles.
On Pink (on-primary, #FFFFFF): text and icons on primary fills.
Mist (surface-muted, #E7E7E9): search/field tint and the 1px border of white buttons (button-secondary-4).
Hairline (hairline, #DBDADE): dividers and card outlines; slightly darker than surface-muted.

Component & State Colors

These were measured only on component states, never in page sampling:

Pink Hover (primary-hover, #EC5E95): hover/focus fill and border of button-secondary and button-ghost-3.
Blush Halo (primary-focus, #F3AFE4): the 2px focus outline on buttons, nav links, footer links and category tiles.
Focus Blue (focus-ring, #005FCC): a single browser-default style focus ring. Treat it as a fallback, not the system focus style.

Gradients

The system uses no CSS gradients. The gradient seen in the hero is part of the image, not a token. Do not add gradient fills to UI.

Typography

Font Family

Mona Sans is the single UI family for nav, buttons, body copy, captions, badges and display headlines (display-lg, title-lg). Recipes ship it with the fallback stack "Helvetica Neue", Helvetica, Arial, sans-serif.
Major Mono Display appears only in hero-display, a 94px monospaced display face used once on a marketing page. Treat it as an art-directed exception, not a scale step.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`hero-display`	94px	400	1.2	-0.94px	One-off art-directed marketing headline
`display-lg`	52px	600	1.2	normal	Hero H1 on landing pages
`title-lg`	32px	700	1.2	normal	Page titles and section H1s
`body-lg`	16px	400	1.3	normal	Lead paragraphs, pricing copy
`body`	14px	400	1.45	normal	Default reading text, list items
`body-relaxed`	14px	400	2	normal	Menu lists, input text, airy link lists
`body-medium`	14px	500	1.45	normal	Names, tile labels, emphasized inline text
`body-strong`	14px	600	1.45	normal	Strong inline links and labels
`nav-link`	14px	600	2.15	normal	Header navigation links
`button`	14px	600	1	normal	Button labels, tabs
`label`	13px	600	1	normal	Compact CTA labels, chips; most frequent style site-wide
`caption`	12px	400	1.5	normal	Meta text, small buttons
`caption-medium`	12px	500	1.35	normal	Counts, filter-button labels (`button-ghost-2`)
`micro-badge`	9px	800	2.2	normal	PRO / TEAM badges

Principles

The UI lives at 12–14px. Size barely changes across the chrome. Role is carried by weight: 400 reads, 500 names, 600 acts. Weight 700 is kept for title-lg, and weight 800 only for micro-badge.
Semibold is the action weight. Every clickable label (nav-link, button, label, body-strong) is 600. Don't set buttons at 400 or 700.
Letter-spacing is normal everywhere except hero-display (-0.94px). Never track UI text.
Line-height encodes the job. Use 1 for single-line controls (button, label), 1.35–1.5 for reading and captions, and 2–2.15 for vertical link lists and nav, where rows need tap height.
Display is tight. All display tokens use 1.2.

Note on Font Substitutes

Mona Sans (GitHub) and Major Mono Display (Google Fonts) are both openly licensed, so load the originals rather than substituting. If Mona Sans fails to load, the shipped fallback is Helvetica Neue / Arial. Arial runs slightly wider, so keep weights at 600 rather than bumping to bold to compensate. The site also used an expanded-width Mona Sans cut for some H1s; that cut was not retained in the tokens. Use regular-width Mona Sans at display-lg instead of faking width with letter-spacing.

Layout

Spacing System

No base spacing step was verified. The measured spacing comes from component padding and the footer grid:

Token	Value	Read on
`button-secondary-4-padding-y`	10px	vertical padding of the bordered white button `button-secondary-4`
`button-secondary-4-padding-x`	20px	horizontal padding of `button-secondary-4`
`button-ghost-2-padding-left`	14px	left padding of the filter button `button-ghost-2`
`button-ghost-2-padding-right`	34px	right padding of `button-ghost-2`; room for its trailing chevron
`button-secondary-3-padding-left`	18px	left padding of the white dropdown-style button `button-secondary-3`
`button-secondary-3-padding-y`	18px	vertical padding of `button-secondary-3`
`button-secondary-3-padding-right`	35px	right padding of `button-secondary-3`; trailing icon space
`button-secondary-2-padding-right`	18.5px	right padding of the text button `button-secondary-2`
`button-ghost-4-padding-right`	18.5px	right padding of the text button `button-ghost-4`
`input-padding-left`	24px	left inset of the wide search `input`
`input-2-padding-left` / `input-3-padding-left`	24px	left inset of the compact search fields
`footer-landing-column-gap` / `footer-inner-column-gap`	32px	column gap of the footer link grid
`footer-landing-gap` / `footer-inner-gap`	48px	gap between footer nav-row items

Two patterns repeat. Buttons with a trailing icon carry asymmetric padding: a short leading side (14px or 18px) against a long trailing side (34px or 35px). Text fields always inset 24px from the left. Page-level section rhythm was not measured.

Grid & Container

Content is capped at a 1200px container (footer-landing-inner-max-width, footer-inner-inner-max-width), centered on the white canvas.
Footer link columns sit 32px apart (footer-landing-column-gap). The footer nav row spaces items 48px apart (footer-landing-gap).
The shot feed is a uniform grid of equal 4:3 thumbnails, each with a one-line meta row beneath it (avatar, name, badge, like/view counts).
The landing page opens with a split hero: copy and CTA on one side, imagery on the other.
Tab switchers, a full-width search bar and a chip row stack above the feed. A horizontally scrolling category carousel sits above the footer. The pricing page uses a row of equal plan cards.

Whitespace Philosophy

Whitespace is the frame around the artwork. Gutters stay uniform so no thumbnail outranks another. Bands are separated by generous empty space rather than rules or tinted backgrounds. Chrome is compact so that space goes to the grid. When adding a section, give it the same open vertical breathing room as its neighbors. Never fill gaps with decorative dividers.

Measured Layout

Every spacing token restates a measurement of a verified component recipe, or the step those measurements share.

footer-landing-column-gap: 32px (footer-landing, column gap of the footer-landing-columns grid)
footer-landing-gap: 48px (footer-landing, gap of footer-landing-list)
footer-landing-inner-max-width: 1200px (footer-landing, max width of footer-landing-inner)
footer-inner-column-gap: 32px (footer-inner, column gap of the footer-inner-columns grid)
footer-inner-gap: 48px (footer-inner, gap of footer-inner-list)
footer-inner-inner-max-width: 1200px (footer-inner, max width of footer-inner-inner)
button-ghost-2-padding-left: 14px (button-ghost-2, left padding of the root)
button-ghost-2-padding-right: 34px (button-ghost-2, right padding of the root)
input-padding-left: 24px (input, left padding of the root)
button-secondary-2-padding-right: 18.5px (button-secondary-2, right padding of the root)
input-2-padding-left: 24px (input-2, left padding of the root)
button-secondary-3-padding-y: 18px (button-secondary-3, vertical padding of the root)
button-secondary-3-padding-left: 18px (button-secondary-3, left padding of the root)
button-secondary-3-padding-right: 35px (button-secondary-3, right padding of the root)
button-secondary-4-padding-y: 10px (button-secondary-4, vertical padding of the root)
button-secondary-4-padding-x: 20px (button-secondary-4, horizontal padding of the root)
button-ghost-4-padding-right: 18.5px (button-ghost-4, right padding of the root)
input-3-padding-left: 24px (input-3, left padding of the root)

Elevation & Depth

Level	Treatment	Use
0: Flat	No shadow, no border	Shot thumbnails, hero imagery and footer sit directly on `surface`
1: Hairline	1px solid #E7E7E9 (`button-secondary-4`); 1px solid #DBDADEE6 (`button-ghost-2`); 1px solid #E7E7E9E6 (`button-secondary-3`, `dropdown`); 2px solid #FFFFFF separating category tiles (`category-link`, flagged: render matched 91% of pixels, below the 96% required)	Bordered white controls, plan cards, tile separation
2: Whisper lift	#00000003 0px 2px 2px 0px (`button-secondary-3`, `dropdown`); #06031803 0px 4px 4px 0px (`button-ghost-2`)	Resting white buttons and dropdown triggers
3: Hover lift	#00000008 0px 4px 4px 0px (`button-secondary-3`, `dropdown` hover); #06031808 0px 4px 4px 0px (`button-ghost-2` hover/focus)	Feedback that a white control is pressable
4: Floating chip	#00000024 0px 3px 6px 0px (`card-2-cta`, part of `card-2`, flagged: the recipe could not be rendered on its own)	Small white CTA chips floating over imagery
5: Overlay	rgba(0, 0, 0, 0.1) 0px 20px 48px 0px; rgba(0, 0, 0, 0.15) 2px 2px 20px 0px (page-sampled)	Mega-menu and popover panels
Focus	2px solid #F3AFE4 outline (pink buttons, links, tiles); 1px solid #6E6D7A outline, 1px offset (white buttons)	Keyboard focus
Blur	None measured	Backdrop blur is not used

Shadow philosophy. Dribbble uses real shadows, but at whisper strength. Resting controls carry a 2–4px shadow at roughly 1% opacity, enough to read as paper, not as a floating card. Hover raises that to about 3% (#00000008 / #06031808) and never changes the offset dramatically. Strong, diffuse shadows appear only on genuinely overlapping layers, such as the mega-menu panels and the chip floating over a shot. Artwork itself is never shadowed. Featured content is distinguished with a primary outline or badge, not extra depth. Shadows are tinted either neutral black or with ink (#060318 base); keep that tint, and keep opacity in these bands.

Shapes

Border Radius Scale

Token	Value	Use
`rounded.2xs`	3px	Rare micro elements
`rounded.xs`	4px	Small badges and tags (PRO labels)
`rounded.xs-plus`	5px	Rare one-off
`rounded.sm`	6px	Small inline controls
`rounded.md`	8px	Default control and thumbnail radius: `button-ghost-2`, `button-secondary-2`, `button-secondary-3`, `button-ghost-4`, `dropdown`, shot thumbnails (`card-4-group`), category tiles
`rounded.lg`	12px	Search inputs (`input`, `input-3`) and shot card media (`card-group`)
`rounded.xl`	16px	Pricing plan cards (`card-3`)
`rounded.2xl`	20px	Large marketing containers
`rounded.3xl`	24px	Hero mockups and large media panels
`rounded.4xl`	30px	Marketing-page one-off
`rounded.5xl`	36px	Marketing-page one-off
`rounded.6xl`	40px	Large rounded marketing blocks
`rounded.7xl`	50px	Marketing-page one-off
`rounded.8xl`	70px	Oversized decorative shapes
`rounded.9xl`	90px	Oversized decorative shapes
`rounded.full`	9999px	Pills: primary CTAs, Log in, search pill, filter chips, the bordered button `button-secondary-4`; circles: avatars and icon buttons

The geometry is soft and friendly, never sharp. Two radii do almost all the work: rounded.md (8px) for buttons, dropdowns and thumbnails, and rounded.lg (12px) for inputs and card media. rounded.full is the third pillar. The pink icon buttons (button-secondary, button-ghost-3) are fully round, and pill shapes mark the most important CTAs and every chip. Avatars are always circles. Radii above rounded.3xl appear on single marketing pages only; don't use them in product UI. No element in the system uses square corners.

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, secondary

Verification: verified against the live page at desktop.

Anatomy

button-secondary: the component root, a <button> (.c-button-secondary)
button-secondary-icon: icon placeholder, 20px (.c-button-secondary__icon)

Recipe

HTML · CSS

<div class="c-button-secondary-scope">
  <button class="c-button-secondary" type="button">
    <span class="c-button-secondary__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-secondary-scope {
  background-color: #F3F3F6;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
}

.c-button-secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #EA4C89;
  color: #FFFFFF;
  border: 1px solid #EA4C89;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 13px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  transition-duration: 0.05s;
  transition-timing-function: cubic-bezier(0.32, 0, 0.59, 0.03);
  transition-property: color, background-color, border, border-radius, padding;
}

.c-button-secondary::before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 2;
  background-color: #EA4C89;
  opacity: 0;
}

.c-button-secondary::after {
  content: "";
  display: flex;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 9px;
  right: 9px;
  bottom: 9px;
  left: 9px;
  z-index: 2;
  border-radius: 50%;
  opacity: 0;
  transform: matrix(-0.868409, 0.495848, -0.495848, -0.868409, 0, 0);
  border-top: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
}

.c-button-secondary__icon {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  transition-duration: 0.05s;
  transition-timing-function: cubic-bezier(0.32, 0, 0.59, 0.03);
  transition-property: color, background-color, border, border-radius, padding;
}

.c-button-secondary:hover {
  background-color: #EC5E95;
  border: 1px solid #EC5E95;
}

.c-button-secondary:hover::after {
  transform: matrix(0.997711, -0.0676272, 0.0676272, 0.997711, 0, 0);
}

.c-button-secondary:focus {
  background-color: #EC5E95;
  border: 1px solid #EC5E95;
  outline: 2px solid #F3AFE4;
  outline-offset: 0px;
}

.c-button-secondary:focus::after {
  transform: matrix(0.0120275, 0.999928, -0.999928, 0.0120275, 0, 0);
}

States

hover (button-secondary-hover): background-color #EC5E95, border 1px solid #EC5E95, ::after transform matrix(0.997711, -0.0676272, 0.0676272, 0.997711, 0, 0)
focus (button-secondary-focus): background-color #EC5E95, border 1px solid #EC5E95, outline 2px solid #F3AFE4, outline-offset 0px, ::after transform matrix(0.0120275, 0.999928, -0.999928, 0.0120275, 0, 0)

Button, ghost

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

Anatomy

button-ghost: the component root, a <button> (.c-button-ghost)
button-ghost-icon: icon placeholder, 31px (.c-button-ghost__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-scope">
  <button class="c-button-ghost" type="button">
    <span class="c-button-ghost__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-scope {
  background-color: #F4D7F34D;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.c-button-ghost {
  display: inline-flex;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  z-index: 2;
  background-color: transparent;
  color: #7B7194;
  border: 0;
  cursor: pointer;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

.c-button-ghost__icon {
  display: block;
  flex-shrink: 0;
  width: 31px;
  height: 31px;
  padding: 8px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-button-ghost:hover {
  color: #524B63;
}

.c-button-ghost:focus {
  outline: 2px solid #F3AFE4;
  outline-offset: 0px;
}

States

hover (button-ghost-hover): color #524B63
focus: outline 2px solid #F3AFE4, outline-offset 0px

Button, ghost (2)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-2: the component root, a <button> (.c-button-ghost-2)
button-ghost-2-label: label text, 7 characters (.c-button-ghost-2__label)

Recipe

HTML · CSS

<div class="c-button-ghost-2-scope">
  <button class="c-button-ghost-2" type="button">
    <span class="c-button-ghost-2__label">lorem i</span>
  </button>
</div>

.c-button-ghost-2-scope {
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
}

.c-button-ghost-2 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  border-spacing: 0px;
  box-sizing: border-box;
  width: fit-content;
  height: 35px;
  min-height: 35px;
  padding: 0px 34px 0px 14px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFFFFF;
  color: #0D0C22;
  border: 1px solid #DBDADEE6;
  border-radius: 8px;
  box-shadow: #06031803 0px 4px 4px 0px;
  cursor: pointer;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-property: color, box-shadow, border, background-color, -webkit-box-shadow;
}

.c-button-ghost-2::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 16.5px;
  right: 14px;
  bottom: 0.5px;
  left: 62.4531px;
  transform: matrix(1, 0, 0, 1, 0, -8);
}

.c-button-ghost-2__label {
  display: block;
}

.c-button-ghost-2:hover {
  border: 1px solid #9E9EA7B3;
  box-shadow: #06031808 0px 4px 4px 0px;
}

.c-button-ghost-2:focus {
  border: 1px solid #9E9EA7B3;
  box-shadow: #06031808 0px 4px 4px 0px;
  outline: none;
}

States

hover: border 1px solid #9E9EA7B3, box-shadow #06031808 0px 4px 4px 0px
focus: border 1px solid #9E9EA7B3, box-shadow #06031808 0px 4px 4px 0px, outline none

Button, secondary (2)

Verification: verified against the live page at desktop.

Anatomy

button-secondary-2: the component root, a <button> (.c-button-secondary-2)
button-secondary-2-label: label text, 5 characters (.c-button-secondary-2__label)

Recipe

HTML · CSS

<div class="c-button-secondary-2-scope">
  <button class="c-button-secondary-2" type="button">
    <span class="c-button-secondary-2__label">lorem</span>
  </button>
</div>

.c-button-secondary-2-scope {
  background-color: #F3F3F6;
  color: #060318;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
}

.c-button-secondary-2 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  padding: 0px 18.5px 0px 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: transparent;
  color: #3A3546;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
}

.c-button-secondary-2::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 20px;
  right: 0px;
  bottom: 6px;
  left: 43.4219px;
  transform: matrix(1, 0, 0, 1, 0, -7);
}

.c-button-secondary-2__label {
  display: block;
  box-sizing: border-box;
}

.c-button-secondary-2:hover {
  color: #7B7194;
}

.c-button-secondary-2:hover::after {
  color: #7B7194;
}

.c-button-secondary-2:focus {
  outline: none;
}

States

hover (button-secondary-2-hover): color #7B7194, ::after color #7B7194
focus: outline none

Button, ghost (3)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-3: the component root, a <button> (.c-button-ghost-3)
button-ghost-3-icon: icon placeholder, 20px (.c-button-ghost-3__icon)

Recipe

HTML · CSS

<div class="c-button-ghost-3-scope">
  <button class="c-button-ghost-3" type="button">
    <span class="c-button-ghost-3__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-3-scope {
  background-color: #F2F2F5;
  color: #060318;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
}

.c-button-ghost-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #EA4C89;
  color: #FFFFFF;
  border: 1px solid #EA4C89;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 13px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  transition-duration: 0.05s;
  transition-timing-function: cubic-bezier(0.32, 0, 0.59, 0.03);
  transition-property: color, background-color, border, border-radius, padding;
}

.c-button-ghost-3::before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 2;
  background-color: #EA4C89;
  opacity: 0;
}

.c-button-ghost-3::after {
  content: "";
  display: flex;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 9px;
  right: 9px;
  bottom: 9px;
  left: 9px;
  z-index: 2;
  border-radius: 50%;
  opacity: 0;
  transform: matrix(0.832262, -0.554383, 0.554383, 0.832262, 0, 0);
  border-top: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
}

.c-button-ghost-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  transition-duration: 0.05s;
  transition-timing-function: cubic-bezier(0.32, 0, 0.59, 0.03);
  transition-property: color, background-color, border, border-radius, padding;
}

.c-button-ghost-3:hover {
  background-color: #EC5E95;
  border: 1px solid #EC5E95;
}

.c-button-ghost-3:hover::after {
  transform: matrix(0.0884413, 0.996081, -0.996081, 0.0884413, 0, 0);
}

.c-button-ghost-3:focus {
  background-color: #EC5E95;
  border: 1px solid #EC5E95;
}

.c-button-ghost-3:focus::after {
  transform: matrix(-0.987736, 0.156133, -0.156133, -0.987736, 0, 0);
}

States

hover (button-ghost-3-hover): background-color #EC5E95, border 1px solid #EC5E95, ::after transform matrix(0.0884413, 0.996081, -0.996081, 0.0884413, 0, 0)
focus (button-ghost-3-focus): background-color #EC5E95, border 1px solid #EC5E95, ::after transform matrix(-0.987736, 0.156133, -0.156133, -0.987736, 0, 0)

Button, primary

Verification: flagged, the render matched 27% of the original pixels, below the 97% required on focus after 2 correction attempts.

Anatomy

button-primary: the component root, a <a> (.c-button-primary), 19-character label

Recipe

HTML · CSS

<div class="c-button-primary-scope">
  <a class="c-button-primary" href="#">lorem ipsum dolor s</a>
</div>

.c-button-primary-scope {
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
}

.c-button-primary {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 40px;
  max-width: 400px;
  padding: 10px 20px;
  position: relative;
  background-color: #0D0C22;
  color: #FFFFFF;
  border-radius: 1e+07px;
  cursor: pointer;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  text-decoration-line: none;
  text-align: center;
  transition: color 0.2s ease;
}

.c-button-primary:focus {
  outline: none;
}

States

focus: outline none

Button, secondary (3)

Verification: verified against the live page at desktop.

Anatomy

button-secondary-3: the component root, a <a> (.c-button-secondary-3)
button-secondary-3-icon: icon placeholder, 10px (.c-button-secondary-3__icon)
button-secondary-3-label: label text, 7 characters (.c-button-secondary-3__label)

Recipe

HTML · CSS

<div class="c-button-secondary-3-scope">
  <a class="c-button-secondary-3" href="#">
    <span class="c-button-secondary-3__icon" aria-hidden="true"></span>
    <span class="c-button-secondary-3__label">lorem i</span>
  </a>
</div>

.c-button-secondary-3-scope {
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.c-button-secondary-3 {
  display: flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 40px;
  min-width: 115px;
  padding: 18px 35px 18px 18px;
  position: relative;
  background-color: #FFFFFF;
  color: #0D0C22;
  border: 1px solid #E7E7E9E6;
  border-radius: 8px;
  box-shadow: #00000003 0px 2px 2px 0px;
  cursor: pointer;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  text-decoration-line: none;
  text-align: left;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.c-button-secondary-3__icon {
  display: block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 19px;
  right: 15px;
  bottom: 9px;
  left: 88px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, -5);
  transition-duration: 0.2s, 0.2s;
  transition-timing-function: ease-in-out, ease-in-out;
  transition-property: transform, -webkit-transform;
}

.c-button-secondary-3:hover {
  box-shadow: #00000008 0px 4px 4px 0px;
}

.c-button-secondary-3:focus {
  outline: 1px solid #6E6D7A;
  outline-offset: 1px;
}

States

hover: box-shadow #00000008 0px 4px 4px 0px
focus: outline 1px solid #6E6D7A, outline-offset 1px

Button, secondary (4)

Verification: verified against the live page at desktop.

Anatomy

button-secondary-4: the component root, a <a> (.c-button-secondary-4)
button-secondary-4-icon: icon placeholder, 13px (.c-button-secondary-4__icon)
button-secondary-4-label: label text, 7 characters (.c-button-secondary-4__label)

Recipe

HTML · CSS

<div class="c-button-secondary-4-scope">
  <a class="c-button-secondary-4" href="#">
    <span class="c-button-secondary-4__icon" aria-hidden="true"></span>
    <span class="c-button-secondary-4__label">lorem i</span>
  </a>
</div>

.c-button-secondary-4-scope {
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.c-button-secondary-4 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 40px;
  padding: 10px 20px;
  position: relative;
  background-color: #FFFFFF;
  color: #0D0C22;
  border: 1px solid #E7E7E9;
  border-radius: 1e+07px;
  cursor: pointer;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  text-decoration-line: none;
  text-align: center;
  transition: color 0.2s ease;
}

.c-button-secondary-4__icon {
  display: inline-block;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  margin-top: -3px;
  margin-right: 4px;
}

.c-button-secondary-4__label {
  display: inline;
  font-weight: 400;
}

.c-button-secondary-4:hover {
  border: 1px solid #DBDBDE;
}

.c-button-secondary-4:focus {
  border: 1px solid #DBDBDE;
  outline: 1px solid #6E6D7A;
  outline-offset: 1px;
}

States

hover: border 1px solid #DBDBDE
focus: border 1px solid #DBDBDE, outline 1px solid #6E6D7A, outline-offset 1px

Button, ghost (4)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-4: the component root, a <button> (.c-button-ghost-4)
button-ghost-4-label: label text, 5 characters (.c-button-ghost-4__label)

Recipe

HTML · CSS

<div class="c-button-ghost-4-scope">
  <button class="c-button-ghost-4" type="button">
    <span class="c-button-ghost-4__label">lorem</span>
  </button>
</div>

.c-button-ghost-4-scope {
  background-color: #F3F3F6;
  color: #060318;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.c-button-ghost-4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  padding: 0px 18.5px 0px 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: transparent;
  color: #3A3546;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
}

.c-button-ghost-4::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 20px;
  right: 0px;
  bottom: 6px;
  left: 43.4219px;
  transform: matrix(1, 0, 0, 1, 0, -7);
}

.c-button-ghost-4__label {
  display: block;
}

.c-button-ghost-4:hover {
  color: #7B7194;
}

.c-button-ghost-4:hover::after {
  color: #7B7194;
}

.c-button-ghost-4:focus {
  outline: none;
}

States

hover (button-ghost-4-hover): color #7B7194, ::after color #7B7194
focus: outline none

Inputs

Input

Verification: verified against the live page at desktop.

Anatomy

input: the component root, a <input> (.c-input), 42-character placeholder

Recipe

HTML · CSS

<div class="c-input-scope">
  <input class="c-input" type="search" placeholder="lorem ipsum dolor sit amet consectetur adi">
</div>

.c-input-scope {
  background-color: #F3F3F6;
  color: #262627;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
}

.c-input {
  display: inline-block;
  flex-grow: 1;
  flex-basis: 0%;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 1234px;
  height: 54px;
  padding: 0px 0px 0px 24px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: transparent;
  color: #060318;
  border: 0;
  border-radius: 12px;
  cursor: text;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  text-overflow: ellipsis;
  appearance: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease;
  transition-property: background-color, outline, color, box-shadow, -webkit-box-shadow;
}

.c-input:focus {
  outline: none;
}

States

focus: outline none

Input (2)

Verification: verified against the live page at desktop.

Anatomy

input-2: the component root, a <input> (.c-input-2), 25-character placeholder

Recipe

HTML · CSS

<div class="c-input-2-scope">
  <input class="c-input-2" type="search" placeholder="lorem ipsum dolor sit ame">
</div>

.c-input-2-scope {
  background-color: #F2F2F5;
  color: #262627;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
}

.c-input-2 {
  display: inline-block;
  flex-grow: 1;
  flex-basis: 0%;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 389px;
  height: 54px;
  padding: 0px 0px 0px 24px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: transparent;
  color: #060318;
  border: 0;
  cursor: text;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  text-overflow: ellipsis;
  appearance: none;
}

.c-input-2:focus {
  outline: none;
}

States

focus: outline none

Input (3)

Verification: verified against the live page at desktop.

Anatomy

input-3: the component root, a <input> (.c-input-3), 25-character placeholder

Recipe

HTML · CSS

<div class="c-input-3-scope">
  <input class="c-input-3" type="search" placeholder="lorem ipsum dolor sit ame">
</div>

.c-input-3-scope {
  background-color: #F2F2F5;
  color: #262627;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
}

.c-input-3 {
  display: inline-block;
  flex-grow: 1;
  flex-basis: 0%;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 389px;
  height: 54px;
  padding: 0px 0px 0px 24px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: transparent;
  color: #060318;
  border: 0;
  border-radius: 12px;
  cursor: text;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  text-overflow: ellipsis;
  appearance: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease;
  transition-property: background-color, outline, color, box-shadow, -webkit-box-shadow;
}

.c-input-3:focus {
  outline: none;
}

States

focus: outline none

Cards

Card

Verification: flagged, the card-group-4 height did not reproduce the measured 24px after 2 correction attempts.

Anatomy

Group: 6 instances in a 4-column grid; the recipe carries the values they all share
card: the component root, a <div> (.c-card)
card-group: inner block (.c-card__group)
card-group-2: inner flex row (.c-card__group-2)
card-media: image placeholder, 297x223px (.c-card__media)
card-link: link (.c-card__link)
card-group-3: inner flex row (.c-card__group-3)
card-group-4: inner flex row (.c-card__group-4)
card-group-5: inner flex row (.c-card__group-5)
card-group-6: inner flex row (.c-card__group-6)
card-group-7: inner flex row (.c-card__group-7)
card-button: button (.c-card__button), content not captured
card-text: label text, 2 characters (.c-card__text)
card-group-8: inner flex row (.c-card__group-8)
card-icon: icon placeholder, 16px (.c-card__icon)
card-text-2: label text, 3 characters (.c-card__text-2)

Recipe

HTML · CSS

<div class="c-card-scope">
  <div class="c-card">
    <div class="c-card__group">
      <div class="c-card__group-2">
        <span class="c-card__media" aria-hidden="true"></span>
      </div>
      <a class="c-card__link" href="#"></a>
      <div class="c-card__group-3"></div>
    </div>
    <div class="c-card__group-4">
      <div class="c-card__group-5"></div>
      <div class="c-card__group-6">
        <div class="c-card__group-7">
          <button class="c-card__button" type="button"></button>
          <span class="c-card__text">lo</span>
        </div>
        <div class="c-card__group-8">
          <span class="c-card__icon" aria-hidden="true"></span>
          <span class="c-card__text-2">lor</span>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-scope {
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
}

.c-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-spacing: 0px;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
}

.c-card__group {
  display: block;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 12px;
}

.c-card__group-2 {
  display: flex;
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transition: background-color 0.5s ease-in-out;
}

.c-card__media {
  display: block;
  flex-shrink: 0;
  width: 297px;
  height: 223px;
  aspect-ratio: auto 320 / 240;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

.c-card__link {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  color: #0D0C22;
  cursor: pointer;
  text-decoration-line: none;
  transition: color 0.1s ease;
}

.c-card__group-3 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 12px;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
}

.c-card__group-4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.c-card__group-5 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.c-card__group-6 {
  display: flex;
  align-items: center;
}

.c-card__group-7 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #0D0C22;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
}

.c-card__button {
  display: flex;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0D0C22;
  border: 0;
  cursor: pointer;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

.c-card__text {
  display: block;
}

.c-card__group-8 {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #0D0C22;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
}

.c-card__icon {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

States

No hover or focus change was observed.

Card (2)

Verification: flagged, the recipe could not be rendered on its own.

Anatomy

Group: 6 instances in a 16-column grid; the recipe carries the values they all share
card-2: the component root, a <figure> (.c-card-2)
card-2-group: inner block (.c-card-2__group)
card-2-media: image placeholder, 614x460px (.c-card-2__media)
card-2-cta: link (.c-card-2__cta)
card-2-group-2: inner flex row (.c-card-2__group-2)
card-2-media-2: image placeholder, 32px (.c-card-2__media-2)
card-2-text: label text, 9 characters (.c-card-2__text)

Recipe

HTML · CSS

<div class="c-card-2-scope">
  <figure class="c-card-2">
    <div class="c-card-2__group">
      <span class="c-card-2__media" aria-hidden="true"></span>
    </div>
    <a class="c-card-2__cta" href="#">
      <div class="c-card-2__group-2">
        <span class="c-card-2__media-2" aria-hidden="true"></span>
      </div>
      <span class="c-card-2__text">lorem ips</span>
    </a>
  </figure>
</div>

.c-card-2-scope {
  background-color: #F3F3F6;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.c-card-2 {
  display: inline-flex;
  border-spacing: 0px;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.c-card-2__group {
  display: block;
  width: 100%;
  height: 100%;
}

.c-card-2__media {
  display: inline-block;
  flex-shrink: 0;
  width: 614px;
  height: 460px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 0);
  margin-top: -15px;
}

.c-card-2__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px 4px 4px;
  position: absolute;
  right: 12px;
  bottom: 12px;
  background-color: #FFFFFF;
  color: #0D0C22;
  border-radius: 1e+07px;
  box-shadow: #00000024 0px 3px 6px 0px;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, 0, 0);
  font-size: 12px;
  font-weight: 500;
  text-decoration-line: none;
  transition: color 0.1s ease;
}

.c-card-2__group-2 {
  display: flex;
  width: 32px;
  height: 32px;
  position: relative;
}

.c-card-2__media-2 {
  display: block;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  border-radius: 50%;
}

.c-card-2:hover {
  z-index: 2;
}

.c-card-2:focus {
  z-index: 2;
}

States

hover: z-index 2
focus: z-index 2

Card (3)

Verification: flagged, the card-3 width did not reproduce the measured 412px after 2 correction attempts.

Anatomy

Group: 3 instances in a 3-column grid, 22px gap; the recipe carries the values they all share
card-3: the component root, a <div> (.c-card-3)
card-3-group: inner flex row (.c-card-3__group)
card-3-group-2: inner block (.c-card-3__group-2)
card-3-group-3: inner flex column (.c-card-3__group-3), content not captured
card-3-group-4: inner flex column (.c-card-3__group-4)
card-3-body: label text, 4 characters (.c-card-3__body)
card-3-group-5: inner flex column (.c-card-3__group-5)
card-3-group-6: inner flex row (.c-card-3__group-6)
card-3-group-7: inner flex column (.c-card-3__group-7), content not captured
card-3-group-8: inner block (.c-card-3__group-8), content not captured
card-3-group-9: inner flex column (.c-card-3__group-9)
card-3-body-2: label text, 33 characters (.c-card-3__body-2)
card-3-group-10: inner block (.c-card-3__group-10)
card-3-link: link, 11-character label (.c-card-3__link)
card-3-group-11: inner block (.c-card-3__group-11)
card-3-group-12: inner flex column (.c-card-3__group-12)
card-3-body-3: label text, 18 characters (.c-card-3__body-3)
card-3-group-13: inner flex column (.c-card-3__group-13), content not captured
card-3-group-14: inner flex row (.c-card-3__group-14, 5 instances)
card-3-group-15: inner block (.c-card-3__group-15, 5 instances), content not captured
card-3-group-16: inner flex row (.c-card-3__group-16, 3 instances), content not captured
card-3-group-17: inner flex row (.c-card-3__group-17, 2 instances), content not captured

Recipe

HTML · CSS

<div class="c-card-3-scope">
  <div class="c-card-3">
    <div class="c-card-3__group">
      <div class="c-card-3__group-2"></div>
    </div>
    <div class="c-card-3__group-3">
      <div class="c-card-3__group-4">
        <p class="c-card-3__body">lore</p>
      </div>
      <div class="c-card-3__group-5">
        <div class="c-card-3__group-6">
          <div class="c-card-3__group-7"></div>
          <div class="c-card-3__group-8"></div>
        </div>
      </div>
      <div class="c-card-3__group-9">
        <p class="c-card-3__body-2">lorem ipsum dolor sit amet consec</p>
      </div>
      <div class="c-card-3__group-10">
        <a class="c-card-3__link" href="#">lorem ipsum</a>
      </div>
      <div class="c-card-3__group-11"></div>
      <div class="c-card-3__group-12">
        <p class="c-card-3__body-3">lorem ipsum dolor</p>
      </div>
      <div class="c-card-3__group-13">
        <div class="c-card-3__group-14">
          <div class="c-card-3__group-15"></div>
          <div class="c-card-3__group-16"></div>
        </div>
        <div class="c-card-3__group-14">
          <div class="c-card-3__group-15"></div>
          <div class="c-card-3__group-16"></div>
        </div>
        <div class="c-card-3__group-14">
          <div class="c-card-3__group-15"></div>
          <div class="c-card-3__group-16"></div>
        </div>
        <div class="c-card-3__group-14">
          <div class="c-card-3__group-15"></div>
          <div class="c-card-3__group-17"></div>
        </div>
        <div class="c-card-3__group-14">
          <div class="c-card-3__group-15"></div>
          <div class="c-card-3__group-17"></div>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-3-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
}

.c-card-3 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0px;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 1px;
  position: relative;
  background-color: #FFFFFF;
  color: #000000;
  border-radius: 16px;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  padding-top: 24px;
  padding-right: 24px;
  padding-left: 24px;
}

.c-card-3__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  height: min-content;
  position: relative;
  overflow-x: clip;
  overflow-y: clip;
}

.c-card-3__group-2 {
  display: block;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0px;
  box-sizing: border-box;
  width: 1px;
  position: relative;
  overflow-x: clip;
  overflow-y: clip;
}

.c-card-3__group-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  height: min-content;
  position: relative;
  overflow-x: clip;
  overflow-y: clip;
  padding-right: 12px;
  padding-left: 12px;
}

.c-card-3__group-4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  white-space: pre-wrap;
}

.c-card-3__body {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: "Mona Sans", "Mona Sans Placeholder", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 29px;
  text-align: left;
}

.c-card-3__group-5 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  height: min-content;
  position: relative;
}

.c-card-3__group-6 {
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  box-sizing: border-box;
  height: min-content;
  position: relative;
}

.c-card-3__group-7 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 48px;
  position: relative;
  white-space: pre;
}

.c-card-3__group-8 {
  flex-shrink: 0;
  box-sizing: border-box;
}

.c-card-3__group-9 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  position: relative;
  white-space: pre-wrap;
}

.c-card-3__body-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #060318;
  font-family: "Mona Sans", "Mona Sans Placeholder", sans-serif;
  font-size: 16px;
  line-height: 20px;
}

.c-card-3__group-10 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-card-3__link {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 47px;
  border-radius: 3.35544e+07px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  text-decoration-line: none;
  white-space: nowrap;
  padding-right: 16px;
  padding-left: 16px;
  transition-duration: 0.4s, 0.4s, 0.4s;
  transition-timing-function: ease, ease, ease;
  transition-property: background-color, color, border-color;
}

.c-card-3__group-11 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 1px;
  position: relative;
}

.c-card-3__group-12 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  white-space: pre;
}

.c-card-3__body-3 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #7B7194;
  font-family: "Mona Sans", "Mona Sans Placeholder", sans-serif;
  font-size: 14px;
  line-height: 17px;
}

.c-card-3__group-13 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-card-3__group-14 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  height: min-content;
  position: relative;
}

.c-card-3__group-15 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
}

.c-card-3__group-16 {
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0px;
  gap: 4px;
  box-sizing: border-box;
  width: 1px;
  height: min-content;
  position: relative;
  overflow-x: clip;
  overflow-y: clip;
}

.c-card-3__group-17 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-card-3:hover {
  align-self: stretch;
  padding: 24px;
}

.c-card-3:hover::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 412px;
  height: 702px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  border: 2px solid #E7E7E9;
  border-radius: 16px;
}

.c-card-3:focus {
  align-self: stretch;
  padding: 24px;
}

.c-card-3:focus::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 412px;
  height: 702px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  border: 2px solid #E7E7E9;
  border-radius: 16px;
}

States

hover (card-3-hover): align-self stretch, padding 24px, ::after content "", ::after display block, ::after box-sizing border-box, ::after width 412px, ::after height 702px, ::after position absolute, ::after top 0px, ::after right 0px, ::after bottom 0px, ::after left 0px, ::after border 2px solid #E7E7E9, ::after border-radius 16px
focus (card-3-focus): align-self stretch, padding 24px, ::after content "", ::after display block, ::after box-sizing border-box, ::after width 412px, ::after height 702px, ::after position absolute, ::after top 0px, ::after right 0px, ::after bottom 0px, ::after left 0px, ::after border 2px solid #E7E7E9, ::after border-radius 16px

Card (4)

Verification: flagged, the render matched 100% of the original pixels, below the 96% required (instance 1) after 2 correction attempts.

Anatomy

Group: 5 instances in a 4-column grid, 36px gap; the recipe carries the values they all share
card-4: the component root, a <li> (.c-card-4)
card-4-group: inner block (.c-card-4__group)
card-4-group-2: inner group (.c-card-4__group-2)
card-4-media: image placeholder, 297x223px (.c-card-4__media)
card-4-group-3: inner flex row (.c-card-4__group-3)
card-4-link: link (.c-card-4__link)
card-4-group-4: inner flex row (.c-card-4__group-4)
card-4-group-5: inner flex row (.c-card-4__group-5)
card-4-link-2: link (.c-card-4__link-2)
card-4-media-2: image placeholder, 24px (.c-card-4__media-2)
card-4-text: label text, 9 characters (.c-card-4__text)
card-4-group-6: inner flex row (.c-card-4__group-6)
card-4-group-7: inner flex row (.c-card-4__group-7, 2 instances)
card-4-group-8: inner flex row (.c-card-4__group-8), content not captured
card-4-icon: icon placeholder, 16px (.c-card-4__icon)
card-4-text-2: label text, 5 characters (.c-card-4__text-2)

Recipe

HTML · CSS

<div class="c-card-4-scope">
  <li class="c-card-4">
    <div class="c-card-4__group">
      <figure class="c-card-4__group-2">
        <span class="c-card-4__media" aria-hidden="true"></span>
      </figure>
      <div class="c-card-4__group-3"></div>
      <a class="c-card-4__link" href="#"></a>
    </div>
    <div class="c-card-4__group-4">
      <div class="c-card-4__group-5">
        <a class="c-card-4__link-2" href="#">
          <span class="c-card-4__media-2" aria-hidden="true"></span>
          <span class="c-card-4__text">lorem ips</span>
        </a>
      </div>
      <div class="c-card-4__group-6">
        <div class="c-card-4__group-7">
          <div class="c-card-4__group-8"></div>
        </div>
        <div class="c-card-4__group-7">
          <span class="c-card-4__icon" aria-hidden="true"></span>
          <span class="c-card-4__text-2">lorem</span>
        </div>
      </div>
    </div>
  </li>
</div>

.c-card-4-scope {
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
}

.c-card-4 {
  display: list-item;
  border-spacing: 0px;
  color: #0D0C22;
  transform: matrix(1, 0, 0, 1, 0, 0);
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  list-style-type: none;
}

.c-card-4__group {
  display: block;
  height: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 8px;
  padding-bottom: 222.75px;
}

.c-card-4__group::after {
  content: "";
  display: block;
  width: 297px;
  height: 223px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-image: linear-gradient(transparent 0%, transparent 8.1%, transparent 15.5%, #00000001 22.5%, #00000001 29%, #00000002 35.3%, #00000003 41.2%, #00000004 47.1%, #00000004 52.9%, #00000005 58.8%, #00000006 64.7%, #00000006 71%, #00000007 77.5%, #00000007 84.5%, #00000008 91.9%, #00000008 100%);
}

.c-card-4__group-2 {
  display: block;
  margin: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-4__group-2::before {
  content: "";
  display: block;
  padding-top: 222.75px;
}

.c-card-4__media {
  display: block;
  flex-shrink: 0;
  width: 297px;
  height: 223px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-card-4__group-3 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  padding-right: 12px;
  padding-left: 12px;
}

.c-card-4__link {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  color: #0D0C22;
  cursor: pointer;
  text-decoration-line: none;
  transition: color 0.1s ease;
}

.c-card-4__group-4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-top: 8px;
}

.c-card-4__group-5 {
  display: flex;
  align-items: center;
}

.c-card-4__link-2 {
  display: flex;
  align-items: center;
  color: #0D0C22;
  cursor: pointer;
  text-decoration-line: none;
  transition: color 0.1s ease;
}

.c-card-4__media-2 {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  aspect-ratio: auto 24 / 24;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  border-radius: 50%;
}

.c-card-4__text {
  display: block;
  flex-grow: 1;
  flex-basis: 0%;
  overflow-x: hidden;
  overflow-y: hidden;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 8px;
}

.c-card-4__group-6 {
  display: flex;
  justify-content: flex-end;
  flex-grow: 1;
  flex-basis: 0%;
  color: #9E9EA7;
  font-size: 12px;
  line-height: 16px;
}

.c-card-4__group-7 {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.c-card-4__group-8 {
  display: flex;
  align-items: center;
}

.c-card-4__icon {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  transition: color 0.2s ease;
  margin-right: 4px;
}

.c-card-4__text-2 {
  display: block;
  color: #3D3D4E;
  font-weight: 500;
}

States

No hover or focus change was observed.

Card (5)

Verification: flagged, the render matched 91% of the original pixels, below the 96% required (instance 1) after 2 correction attempts.

Anatomy

Group: 6 instances in a 16-column grid, 32px gap; the recipe carries the values they all share
card-5: the component root, a <a> (.c-card-5)
card-5-group: inner block (.c-card-5__group)
card-5-group-2: inner flex row (.c-card-5__group-2)
card-5-media: image placeholder, 200x150px (.c-card-5__media)
card-5-text: label text, 9 characters (.c-card-5__text)

Recipe

HTML · CSS

<div class="c-card-5-scope">
  <a class="c-card-5" href="#">
    <div class="c-card-5__group"></div>
    <div class="c-card-5__group-2">
      <span class="c-card-5__media" aria-hidden="true"></span>
    </div>
    <div class="c-card-5__text">lorem ips</div>
  </a>
</div>

.c-card-5-scope {
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.c-card-5 {
  display: inline-block;
  border-spacing: 0px;
  position: relative;
  color: #0D0C22;
  cursor: pointer;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1);
  transform-origin: 102px 97px;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  text-decoration-line: none;
  transition: color 0.1s ease;
}

.c-card-5__group {
  display: block;
  width: 200px;
  height: 150px;
  position: absolute;
  top: 0px;
  right: 0px;
}

.c-card-5__group-2 {
  display: flex;
  width: 200px;
  height: 150px;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #9E9EA7;
  border: 2px solid #FFFFFF;
  border-radius: 8px;
}

.c-card-5__media {
  display: block;
  flex-shrink: 0;
  width: 200px;
  height: 150px;
  aspect-ratio: auto 200 / 150;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  transition: all 0.6s ease-out;
}

.c-card-5__text {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-top: 12px;
}

.c-card-5:focus {
  outline: 2px solid #F3AFE4;
  outline-offset: 1px;
}

States

focus: outline 2px solid #F3AFE4, outline-offset 1px

Card (6)

Verification: not verifiable, what the page placed in it (photos, media, ads) covers most of it and nothing else differs, so the comparison could not be judged.

Anatomy

Group: 6 instances in a 3-column grid, 48px gap; the recipe carries the values they all share
card-6: the component root, a <li> (.c-card-6)
card-6-group: inner block (.c-card-6__group)
card-6-group-2: inner group (.c-card-6__group-2)
card-6-media: image placeholder, 400x300px (.c-card-6__media)
card-6-group-3: inner flex row (.c-card-6__group-3)
card-6-link: link (.c-card-6__link)

Recipe

HTML · CSS

<div class="c-card-6-scope">
  <li class="c-card-6">
    <div class="c-card-6__group">
      <figure class="c-card-6__group-2">
        <span class="c-card-6__media" aria-hidden="true"></span>
      </figure>
      <div class="c-card-6__group-3"></div>
      <a class="c-card-6__link" href="#"></a>
    </div>
  </li>
</div>

.c-card-6-scope {
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
}

.c-card-6 {
  display: list-item;
  border-spacing: 0px;
  color: #0D0C22;
  transform: matrix(1, 0, 0, 1, 0, 0);
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  list-style-type: none;
}

.c-card-6__group {
  display: block;
  height: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 8px;
  padding-bottom: 300px;
}

.c-card-6__group::after {
  content: "";
  display: block;
  width: 400px;
  height: 300px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-image: linear-gradient(transparent 0%, transparent 8.1%, transparent 15.5%, #00000001 22.5%, #00000001 29%, #00000002 35.3%, #00000003 41.2%, #00000004 47.1%, #00000004 52.9%, #00000005 58.8%, #00000006 64.7%, #00000006 71%, #00000007 77.5%, #00000007 84.5%, #00000008 91.9%, #00000008 100%);
}

.c-card-6__group-2 {
  display: block;
  margin: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-card-6__group-2::before {
  content: "";
  display: block;
  padding-top: 300px;
}

.c-card-6__media {
  display: block;
  flex-shrink: 0;
  width: 400px;
  height: 300px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-card-6__group-3 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  padding-right: 12px;
  padding-left: 12px;
}

.c-card-6__link {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  color: #0D0C22;
  cursor: pointer;
  text-decoration-line: none;
  transition: color 0.1s ease;
}

States

No hover or focus change was observed.

Card (7)

Verification: flagged, the render matched 91% of the original pixels, below the 96% required (instance 1) after 2 correction attempts.

Anatomy

Group: 6 instances in a 16-column grid, 32px gap; the recipe carries the values they all share
card-7: the component root, a <a> (.c-card-7)
card-7-group: inner block (.c-card-7__group)
card-7-group-2: inner flex row (.c-card-7__group-2)
card-7-media: image placeholder, 200x150px (.c-card-7__media)
card-7-text: label text, 10 characters (.c-card-7__text)

Recipe

HTML · CSS

<div class="c-card-7-scope">
  <a class="c-card-7" href="#">
    <div class="c-card-7__group"></div>
    <div class="c-card-7__group-2">
      <span class="c-card-7__media" aria-hidden="true"></span>
    </div>
    <div class="c-card-7__text">lorem ipsu</div>
  </a>
</div>

.c-card-7-scope {
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.c-card-7 {
  display: inline-block;
  border-spacing: 0px;
  position: relative;
  color: #0D0C22;
  cursor: pointer;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1);
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  text-decoration-line: none;
  transition: color 0.1s ease;
}

.c-card-7__group {
  display: block;
  width: 200px;
  height: 150px;
  position: absolute;
  top: 0px;
  right: 0px;
}

.c-card-7__group-2 {
  display: flex;
  width: 200px;
  height: 150px;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #9E9EA7;
  border: 2px solid #FFFFFF;
  border-radius: 8px;
}

.c-card-7__media {
  display: block;
  flex-shrink: 0;
  width: 200px;
  height: 150px;
  aspect-ratio: auto 200 / 150;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  transition: all 0.6s ease-out;
}

.c-card-7__text {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-top: 12px;
}

.c-card-7:focus {
  outline: 2px solid #F3AFE4;
  outline-offset: 1px;
}

States

focus: outline 2px solid #F3AFE4, outline-offset 1px

Card (8)

Verification: flagged, the render matched 91% of the original pixels, below the 96% required (instance 1) after 2 correction attempts.

Anatomy

Group: 6 instances in a 16-column grid, 32px gap; the recipe carries the values they all share
card-8: the component root, a <a> (.c-card-8)
card-8-group: inner block (.c-card-8__group)
card-8-group-2: inner flex row (.c-card-8__group-2)
card-8-media: image placeholder, 200x150px (.c-card-8__media)
card-8-text: label text, 6 characters (.c-card-8__text)

Recipe

HTML · CSS

<div class="c-card-8-scope">
  <a class="c-card-8" href="#">
    <div class="c-card-8__group"></div>
    <div class="c-card-8__group-2">
      <span class="c-card-8__media" aria-hidden="true"></span>
    </div>
    <div class="c-card-8__text">lorem</div>
  </a>
</div>

.c-card-8-scope {
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
}

.c-card-8 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #0D0C22;
  cursor: pointer;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1);
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: none;
}

.c-card-8__group {
  display: block;
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  position: absolute;
  top: 0px;
  right: 0px;
}

.c-card-8__group-2 {
  display: flex;
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #9E9EA7;
  border: 2px solid #FFFFFF;
  border-radius: 8px;
}

.c-card-8__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  aspect-ratio: auto 200 / 150;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  opacity: 0.001;
  transition: all 0.6s ease-out;
}

.c-card-8__text {
  display: block;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  margin-top: 12px;
}

States

No hover or focus change was observed.

Category link

Verification: flagged, the render matched 91% of the original pixels, below the 96% required (instance 1) after 2 correction attempts.

Anatomy

Group: 6 instances in a 16-column grid, 32px gap; the recipe carries the values they all share
category-link: the component root, a <a> (.c-category-link)
category-link-group: inner block (.c-category-link__group)
category-link-group-2: inner flex row (.c-category-link__group-2)
category-link-media: image placeholder, 200x150px (.c-category-link__media)
category-link-text: label text, 6 characters (.c-category-link__text)

Recipe

HTML · CSS

<div class="c-category-link-scope">
  <a class="c-category-link" href="#">
    <div class="c-category-link__group"></div>
    <div class="c-category-link__group-2">
      <span class="c-category-link__media" aria-hidden="true"></span>
    </div>
    <div class="c-category-link__text">lorem</div>
  </a>
</div>

.c-category-link-scope {
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.c-category-link {
  display: inline-block;
  border-spacing: 0px;
  position: relative;
  color: #0D0C22;
  cursor: pointer;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1);
  transform-origin: 102px 97px;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  text-decoration-line: none;
  transition: color 0.1s ease;
}

.c-category-link__group {
  display: block;
  width: 200px;
  height: 150px;
  position: absolute;
  top: 0px;
  right: 0px;
}

.c-category-link__group-2 {
  display: flex;
  width: 200px;
  height: 150px;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #9E9EA7;
  border: 2px solid #FFFFFF;
  border-radius: 8px;
}

.c-category-link__media {
  display: block;
  flex-shrink: 0;
  width: 200px;
  height: 150px;
  aspect-ratio: auto 200 / 150;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  opacity: 0.001;
  transition: all 0.6s ease-out;
}

.c-category-link__text {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-top: 12px;
}

.c-category-link:focus {
  outline: 2px solid #F3AFE4;
  outline-offset: 1px;
}

States

focus: outline 2px solid #F3AFE4, outline-offset 1px

Like buttons

Like button

Verification: verified against the live page at desktop.

Anatomy

like-button: the component root, a <button> (.c-like-button)
like-button-icon: icon placeholder, 16px (.c-like-button__icon)

Recipe

HTML · CSS

<div class="c-like-button-scope">
  <button class="c-like-button" type="button">
    <span class="c-like-button__icon" aria-hidden="true"></span>
  </button>
</div>

.c-like-button-scope {
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
}

.c-like-button {
  display: inline-flex;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0D0C22;
  border: 0;
  cursor: pointer;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

.c-like-button__icon {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-like-button:focus {
  outline: 2px solid #F3AFE4;
  outline-offset: 0px;
}

States

focus: outline 2px solid #F3AFE4, outline-offset 0px

Like button (2)

Verification: verified against the live page at desktop.

Anatomy

like-button-2: the component root, a <button> (.c-like-button-2)
like-button-2-icon: icon placeholder, 16px (.c-like-button-2__icon)

Recipe

HTML · CSS

<div class="c-like-button-2-scope">
  <button class="c-like-button-2" type="button">
    <span class="c-like-button-2__icon" aria-hidden="true"></span>
  </button>
</div>

.c-like-button-2-scope {
  background-color: #FFFFFF;
  color: #9E9EA7;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.c-like-button-2 {
  display: inline-flex;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #9E9EA7;
  border: 0;
  cursor: pointer;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  list-style-type: none;
}

.c-like-button-2__icon {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  transition: color 0.2s ease;
  margin-right: 4px;
}

.c-like-button-2:focus {
  outline: 2px solid #F3AFE4;
  outline-offset: 0px;
}

States

focus: outline 2px solid #F3AFE4, outline-offset 0px

Headers

Header (landing)

Verification: verified against the live page at desktop.

Variant observed on https://dribbble.com/.

Anatomy

header-landing: the component root, a <nav> (.c-header-landing)
header-landing-nav: inner flex row (.c-header-landing__nav)
header-landing-nav-item: inner flex row (.c-header-landing__nav-item)
header-landing-nav-link: link, 7-character label (.c-header-landing__nav-link, 4 instances)
header-landing-nav-item-2: inner flex row (.c-header-landing__nav-item-2, 3 instances)

Recipe

HTML · CSS

<div class="c-header-landing-scope">
  <nav class="c-header-landing">
    <ul class="c-header-landing__nav">
      <li class="c-header-landing__nav-item">
        <a class="c-header-landing__nav-link" href="#">lorem i</a>
      </li>
      <li class="c-header-landing__nav-item-2">
        <a class="c-header-landing__nav-link" href="#">lorem ipsum</a>
      </li>
      <li class="c-header-landing__nav-item-2">
        <a class="c-header-landing__nav-link" href="#">lorem ips</a>
      </li>
      <li class="c-header-landing__nav-item-2">
        <a class="c-header-landing__nav-link" href="#">lorem ips</a>
      </li>
    </ul>
  </nav>
</div>

.c-header-landing-scope {
  background-color: #FFFFFF;
  color: #060318;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.c-header-landing {
  display: inline-block;
  border-spacing: 0px;
  color: #060318;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  white-space: nowrap;
}

.c-header-landing__nav {
  display: flex;
  align-items: center;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-landing__nav-item {
  display: flex;
  align-items: center;
  position: relative;
  line-height: 16px;
  margin-left: -16px;
}

.c-header-landing__nav-link {
  display: flex;
  align-items: center;
  color: #060318;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 30px;
  text-decoration-line: none;
  padding-right: 16px;
  padding-left: 16px;
}

.c-header-landing__nav-link::after {
  content: "";
  display: block;
  width: 9px;
  height: 8px;
  margin-left: 6px;
}

.c-header-landing__nav-item-2 {
  display: flex;
  align-items: center;
  position: relative;
  line-height: 16px;
}

.c-header-landing__nav-link:hover {
  color: #7B7194;
}

.c-header-landing__nav-link:hover::after {
  color: #7B7194;
}

.c-header-landing__nav-link:focus {
  outline: 2px solid #F3AFE4;
  outline-offset: 1px;
}

States

header-landing-nav-link hover (header-landing-nav-link-hover): color #7B7194, ::after color #7B7194
header-landing-nav-link focus: outline 2px solid #F3AFE4, outline-offset 1px

Header (inner)

Verification: verified against the live page at desktop.

Variant observed on https://dribbble.com/pro.

Anatomy

header-inner: the component root, a <nav> (.c-header-inner)
header-inner-nav: inner flex row (.c-header-inner__nav)
header-inner-nav-item: inner flex row (.c-header-inner__nav-item)
header-inner-nav-link: link, 7-character label (.c-header-inner__nav-link, 4 instances)
header-inner-nav-item-2: inner flex row (.c-header-inner__nav-item-2, 3 instances)

Recipe

HTML · CSS

<div class="c-header-inner-scope">
  <nav class="c-header-inner">
    <ul class="c-header-inner__nav">
      <li class="c-header-inner__nav-item">
        <a class="c-header-inner__nav-link" href="#">lorem i</a>
      </li>
      <li class="c-header-inner__nav-item-2">
        <a class="c-header-inner__nav-link" href="#">lorem ipsum</a>
      </li>
      <li class="c-header-inner__nav-item-2">
        <a class="c-header-inner__nav-link" href="#">lorem ips</a>
      </li>
      <li class="c-header-inner__nav-item-2">
        <a class="c-header-inner__nav-link" href="#">lorem ips</a>
      </li>
    </ul>
  </nav>
</div>

.c-header-inner-scope {
  background-color: #FFFFFF;
  color: #060318;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
}

.c-header-inner {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #060318;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

.c-header-inner__nav {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: disc;
}

.c-header-inner__nav-item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  line-height: 12px;
  margin-left: -16px;
}

.c-header-inner__nav-link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  color: #060318;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 30px;
  text-decoration-line: none;
  padding-right: 16px;
  padding-left: 16px;
}

.c-header-inner__nav-link::after {
  content: "";
  display: block;
  width: 9px;
  height: 8px;
  margin-left: 6px;
}

.c-header-inner__nav-item-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  line-height: 12px;
}

.c-header-inner__nav-link:hover {
  color: #7B7194;
}

.c-header-inner__nav-link:hover::after {
  color: #7B7194;
}

States

header-inner-nav-link hover (header-inner-nav-link-hover): color #7B7194, ::after color #7B7194

Footers

Verification: desktop verified against the live page at desktop; mobile flagged, the footer-landing-mobile-inner height did not reproduce the measured 340px after 2 correction attempts.

Variant observed on https://dribbble.com/.

Anatomy

footer-landing: the component root, a <div> (.c-footer-landing)
footer-landing-group: inner block (.c-footer-landing__group)
footer-landing-group-2: inner block (.c-footer-landing__group-2)
footer-landing-columns: inner grid (.c-footer-landing__columns)
footer-landing-link: link (.c-footer-landing__link, 16 instances)
footer-landing-group-3: inner block (.c-footer-landing__group-3, 16 instances)
footer-landing-group-4: inner flex row (.c-footer-landing__group-4, 16 instances)
footer-landing-logo: image placeholder, 200x150px (.c-footer-landing__logo)
footer-landing-text: label text, 6 characters (.c-footer-landing__text, 16 instances)
footer-landing-image: image placeholder, 200x150px (.c-footer-landing__image, 15 instances)
footer-landing-inner: inner block (.c-footer-landing__inner)
footer-landing-columns-2: inner flex row (.c-footer-landing__columns-2)
footer-landing-link-2: link (.c-footer-landing__link-2)
footer-landing-icon: icon placeholder, 104x30px (.c-footer-landing__icon)
footer-landing-list: inner flex row (.c-footer-landing__list)
footer-landing-item: inner group (.c-footer-landing__item, 11 instances), content not captured
footer-landing-link-3: link, 13-character label (.c-footer-landing__link-3, 7 instances)
footer-landing-columns-3: inner grid (.c-footer-landing__columns-3)
footer-landing-icon-2: icon placeholder, 18px (.c-footer-landing__icon-2, 4 instances)
footer-landing-group-5: inner flex row (.c-footer-landing__group-5), content not captured
footer-landing-list-2: inner flex row (.c-footer-landing__list-2)

Desktop recipe

HTML · CSS

<div class="c-footer-landing-scope">
  <div class="c-footer-landing">
    <div class="c-footer-landing__group">
      <div class="c-footer-landing__group-2">
        <div class="c-footer-landing__columns">
          <a class="c-footer-landing__link" href="#">
            <div class="c-footer-landing__group-3"></div>
            <div class="c-footer-landing__group-4">
              <span class="c-footer-landing__logo" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing__text">lorem</div>
          </a>
          <a class="c-footer-landing__link" href="#">
            <div class="c-footer-landing__group-3"></div>
            <div class="c-footer-landing__group-4">
              <span class="c-footer-landing__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing__text">lorem ips</div>
          </a>
          <a class="c-footer-landing__link" href="#">
            <div class="c-footer-landing__group-3"></div>
            <div class="c-footer-landing__group-4">
              <span class="c-footer-landing__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing__text">lorem ip</div>
          </a>
          <a class="c-footer-landing__link" href="#">
            <div class="c-footer-landing__group-3"></div>
            <div class="c-footer-landing__group-4">
              <span class="c-footer-landing__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing__text">lorem ipsu</div>
          </a>
          <a class="c-footer-landing__link" href="#">
            <div class="c-footer-landing__group-3"></div>
            <div class="c-footer-landing__group-4">
              <span class="c-footer-landing__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing__text">lorem</div>
          </a>
          <a class="c-footer-landing__link" href="#">
            <div class="c-footer-landing__group-3"></div>
            <div class="c-footer-landing__group-4">
              <span class="c-footer-landing__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing__text">lorem ipsum</div>
          </a>
          <a class="c-footer-landing__link" href="#">
            <div class="c-footer-landing__group-3"></div>
            <div class="c-footer-landing__group-4">
              <span class="c-footer-landing__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing__text">lorem ipsu</div>
          </a>
          <a class="c-footer-landing__link" href="#">
            <div class="c-footer-landing__group-3"></div>
            <div class="c-footer-landing__group-4">
              <span class="c-footer-landing__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing__text">lorem ipsum do</div>
          </a>
          <a class="c-footer-landing__link" href="#">
            <div class="c-footer-landing__group-3"></div>
            <div class="c-footer-landing__group-4">
              <span class="c-footer-landing__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing__text">lorem</div>
          </a>
          <a class="c-footer-landing__link" href="#">
            <div class="c-footer-landing__group-3"></div>
            <div class="c-footer-landing__group-4">
              <span class="c-footer-landing__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing__text">lorem ips</div>
          </a>
          <a class="c-footer-landing__link" href="#">
            <div class="c-footer-landing__group-3"></div>
            <div class="c-footer-landing__group-4">
              <span class="c-footer-landing__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing__text">lorem ip</div>
          </a>
          <a class="c-footer-landing__link" href="#">
            <div class="c-footer-landing__group-3"></div>
            <div class="c-footer-landing__group-4">
              <span class="c-footer-landing__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing__text">lorem ipsu</div>
          </a>
          <a class="c-footer-landing__link" href="#">
            <div class="c-footer-landing__group-3"></div>
            <div class="c-footer-landing__group-4">
              <span class="c-footer-landing__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing__text">lorem</div>
          </a>
          <a class="c-footer-landing__link" href="#">
            <div class="c-footer-landing__group-3"></div>
            <div class="c-footer-landing__group-4">
              <span class="c-footer-landing__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing__text">lorem ipsum</div>
          </a>
          <a class="c-footer-landing__link" href="#">
            <div class="c-footer-landing__group-3"></div>
            <div class="c-footer-landing__group-4">
              <span class="c-footer-landing__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing__text">lorem ipsu</div>
          </a>
          <a class="c-footer-landing__link" href="#">
            <div class="c-footer-landing__group-3"></div>
            <div class="c-footer-landing__group-4">
              <span class="c-footer-landing__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing__text">lorem ipsum do</div>
          </a>
        </div>
      </div>
    </div>
    <div class="c-footer-landing__inner">
      <div class="c-footer-landing__columns-2">
        <a class="c-footer-landing__link-2" href="#">
          <span class="c-footer-landing__icon" aria-hidden="true"></span>
        </a>
        <ul class="c-footer-landing__list">
          <li class="c-footer-landing__item">
            <a class="c-footer-landing__link-3" href="#">lorem ipsum d</a>
          </li>
          <li class="c-footer-landing__item">
            <a class="c-footer-landing__link-3" href="#">lorem ipsum</a>
          </li>
          <li class="c-footer-landing__item">
            <a class="c-footer-landing__link-3" href="#">lorem ipsum</a>
          </li>
          <li class="c-footer-landing__item">
            <a class="c-footer-landing__link-3" href="#">lorem ipsum</a>
          </li>
          <li class="c-footer-landing__item">
            <a class="c-footer-landing__link-3" href="#">lore</a>
          </li>
          <li class="c-footer-landing__item">
            <a class="c-footer-landing__link-3" href="#">lorem</a>
          </li>
          <li class="c-footer-landing__item">
            <a class="c-footer-landing__link-3" href="#">lorem i</a>
          </li>
        </ul>
        <div class="c-footer-landing__columns-3">
          <span class="c-footer-landing__icon-2" aria-hidden="true"></span>
          <span class="c-footer-landing__icon-2" aria-hidden="true"></span>
          <span class="c-footer-landing__icon-2" aria-hidden="true"></span>
          <span class="c-footer-landing__icon-2" aria-hidden="true"></span>
        </div>
      </div>
      <div class="c-footer-landing__group-5">
        <ul class="c-footer-landing__list-2">
          <li class="c-footer-landing__item">lorem ipsum dol</li>
          <li class="c-footer-landing__item">lorem</li>
          <li class="c-footer-landing__item">lorem i</li>
          <li class="c-footer-landing__item"></li>
        </ul>
      </div>
    </div>
  </div>
</div>

.c-footer-landing-scope {
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.c-footer-landing {
  display: block;
  flex-shrink: 0;
  border-spacing: 0px;
  position: relative;
  z-index: 1;
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  transition: opacity 0.4s ease-in-out;
}

.c-footer-landing__group {
  display: block;
  position: relative;
  z-index: 2;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-top: 60px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing__group-2 {
  display: block;
  width: fit-content;
  transform: matrix(1, 0, 0, 1, -443.713, 0);
}

.c-footer-landing__columns {
  display: grid;
  gap: 32px;
  grid-auto-flow: column;
  width: fit-content;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transition-duration: 0.6s, 0.6s;
  transition-timing-function: ease-out, ease-out;
  transition-property: transform, -webkit-transform;
}

.c-footer-landing__link {
  display: block;
  position: relative;
  color: #0D0C22;
  cursor: pointer;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1);
  text-decoration-line: none;
  transition: color 0.1s ease;
}

.c-footer-landing__group-3 {
  display: block;
  width: 200px;
  height: 150px;
  position: absolute;
  top: 0px;
  right: 0px;
}

.c-footer-landing__group-3::before {
  content: "";
  display: block;
  width: 192px;
  height: 144px;
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: 12px;
  left: 14px;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #EDF3D8;
  border: 2px solid #FFFFFF;
  border-radius: 12px;
  opacity: 0.4;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.c-footer-landing__group-3::after {
  content: "";
  display: block;
  width: 196px;
  height: 147px;
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: 4px;
  left: 5px;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #E3EBFD;
  border: 2px solid #FFFFFF;
  border-radius: 10px;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.c-footer-landing__group-4 {
  display: flex;
  width: 200px;
  height: 150px;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #9E9EA7;
  border: 2px solid #FFFFFF;
  border-radius: 8px;
}

.c-footer-landing__logo {
  display: block;
  flex-shrink: 0;
  width: 200px;
  height: 150px;
  aspect-ratio: auto 200 / 150;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  opacity: 0.001;
  transition: all 0.6s ease-out;
}

.c-footer-landing__text {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-top: 12px;
}

.c-footer-landing__image {
  display: block;
  flex-shrink: 0;
  width: 200px;
  height: 150px;
  aspect-ratio: auto 200 / 150;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  opacity: 0.001;
  transition: all 0.6s ease-out;
}

.c-footer-landing__inner {
  display: block;
  max-width: 1200px;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing__columns-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 44px;
}

.c-footer-landing__link-2 {
  display: flex;
  color: #0D0C22;
  cursor: pointer;
  text-decoration-line: none;
  transition: color 0.1s ease;
}

.c-footer-landing__icon {
  display: block;
  flex-shrink: 0;
  width: 104px;
  height: 30px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-footer-landing__list {
  display: flex;
  justify-content: center;
  gap: 12px 48px;
  padding: 0px;
  margin: 0px;
  line-height: 20px;
  list-style-type: none;
}

.c-footer-landing__item {
  display: list-item;
}

.c-footer-landing__link-3 {
  display: inline;
  color: #0D0C22;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-decoration-line: none;
  transition: color 0.1s ease;
}

.c-footer-landing__columns-3 {
  display: grid;
  gap: 16px;
  grid-auto-flow: column;
}

.c-footer-landing__icon-2 {
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  cursor: pointer;
}

.c-footer-landing__group-5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #6E6D7A;
  font-size: 14px;
  line-height: 20px;
  padding-top: 44px;
  padding-bottom: 44px;
}

.c-footer-landing__list-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing__link:focus {
  outline: 2px solid #F3AFE4;
  outline-offset: 1px;
}

.c-footer-landing__link-2:focus {
  outline: 2px solid #F3AFE4;
  outline-offset: 1px;
}

.c-footer-landing__link-3:focus {
  outline: 2px solid #F3AFE4;
  outline-offset: 1px;
}

Mobile anatomy

footer-landing-mobile: the component root, a <div> (.c-footer-landing-mobile)
footer-landing-mobile-group: inner block (.c-footer-landing-mobile__group)
footer-landing-mobile-group-2: inner block (.c-footer-landing-mobile__group-2)
footer-landing-mobile-columns: inner grid (.c-footer-landing-mobile__columns)
footer-landing-mobile-link: link (.c-footer-landing-mobile__link, 16 instances)
footer-landing-mobile-group-3: inner block (.c-footer-landing-mobile__group-3, 16 instances)
footer-landing-mobile-group-4: inner flex row (.c-footer-landing-mobile__group-4, 16 instances)
footer-landing-mobile-logo: image placeholder, 200x150px (.c-footer-landing-mobile__logo)
footer-landing-mobile-text: label text, 6 characters (.c-footer-landing-mobile__text, 16 instances)
footer-landing-mobile-image: image placeholder, 200x150px (.c-footer-landing-mobile__image, 15 instances)
footer-landing-mobile-inner: inner block (.c-footer-landing-mobile__inner)
footer-landing-mobile-group-5: inner flex column (.c-footer-landing-mobile__group-5)
footer-landing-mobile-link-2: link (.c-footer-landing-mobile__link-2)
footer-landing-mobile-icon: icon placeholder, 104x30px (.c-footer-landing-mobile__icon)
footer-landing-mobile-list: inner flex row (.c-footer-landing-mobile__list)
footer-landing-mobile-item: inner group (.c-footer-landing-mobile__item, 11 instances), content not captured
footer-landing-mobile-link-3: link, 13-character label (.c-footer-landing-mobile__link-3, 7 instances)
footer-landing-mobile-columns-2: inner grid (.c-footer-landing-mobile__columns-2)
footer-landing-mobile-icon-2: icon placeholder, 18px (.c-footer-landing-mobile__icon-2, 4 instances)
footer-landing-mobile-group-6: inner flex column (.c-footer-landing-mobile__group-6), content not captured
footer-landing-mobile-list-2: inner flex row (.c-footer-landing-mobile__list-2)

Mobile recipe

HTML · CSS

<div class="c-footer-landing-mobile-scope">
  <div class="c-footer-landing-mobile">
    <div class="c-footer-landing-mobile__group">
      <div class="c-footer-landing-mobile__group-2">
        <div class="c-footer-landing-mobile__columns">
          <a class="c-footer-landing-mobile__link" href="#">
            <div class="c-footer-landing-mobile__group-3"></div>
            <div class="c-footer-landing-mobile__group-4">
              <span class="c-footer-landing-mobile__logo" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing-mobile__text">lorem</div>
          </a>
          <a class="c-footer-landing-mobile__link" href="#">
            <div class="c-footer-landing-mobile__group-3"></div>
            <div class="c-footer-landing-mobile__group-4">
              <span class="c-footer-landing-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing-mobile__text">lorem ips</div>
          </a>
          <a class="c-footer-landing-mobile__link" href="#">
            <div class="c-footer-landing-mobile__group-3"></div>
            <div class="c-footer-landing-mobile__group-4">
              <span class="c-footer-landing-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing-mobile__text">lorem ip</div>
          </a>
          <a class="c-footer-landing-mobile__link" href="#">
            <div class="c-footer-landing-mobile__group-3"></div>
            <div class="c-footer-landing-mobile__group-4">
              <span class="c-footer-landing-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing-mobile__text">lorem ipsu</div>
          </a>
          <a class="c-footer-landing-mobile__link" href="#">
            <div class="c-footer-landing-mobile__group-3"></div>
            <div class="c-footer-landing-mobile__group-4">
              <span class="c-footer-landing-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing-mobile__text">lorem</div>
          </a>
          <a class="c-footer-landing-mobile__link" href="#">
            <div class="c-footer-landing-mobile__group-3"></div>
            <div class="c-footer-landing-mobile__group-4">
              <span class="c-footer-landing-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing-mobile__text">lorem ipsum</div>
          </a>
          <a class="c-footer-landing-mobile__link" href="#">
            <div class="c-footer-landing-mobile__group-3"></div>
            <div class="c-footer-landing-mobile__group-4">
              <span class="c-footer-landing-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing-mobile__text">lorem ipsu</div>
          </a>
          <a class="c-footer-landing-mobile__link" href="#">
            <div class="c-footer-landing-mobile__group-3"></div>
            <div class="c-footer-landing-mobile__group-4">
              <span class="c-footer-landing-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing-mobile__text">lorem ipsum do</div>
          </a>
          <a class="c-footer-landing-mobile__link" href="#">
            <div class="c-footer-landing-mobile__group-3"></div>
            <div class="c-footer-landing-mobile__group-4">
              <span class="c-footer-landing-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing-mobile__text">lorem</div>
          </a>
          <a class="c-footer-landing-mobile__link" href="#">
            <div class="c-footer-landing-mobile__group-3"></div>
            <div class="c-footer-landing-mobile__group-4">
              <span class="c-footer-landing-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing-mobile__text">lorem ips</div>
          </a>
          <a class="c-footer-landing-mobile__link" href="#">
            <div class="c-footer-landing-mobile__group-3"></div>
            <div class="c-footer-landing-mobile__group-4">
              <span class="c-footer-landing-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing-mobile__text">lorem ip</div>
          </a>
          <a class="c-footer-landing-mobile__link" href="#">
            <div class="c-footer-landing-mobile__group-3"></div>
            <div class="c-footer-landing-mobile__group-4">
              <span class="c-footer-landing-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing-mobile__text">lorem ipsu</div>
          </a>
          <a class="c-footer-landing-mobile__link" href="#">
            <div class="c-footer-landing-mobile__group-3"></div>
            <div class="c-footer-landing-mobile__group-4">
              <span class="c-footer-landing-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing-mobile__text">lorem</div>
          </a>
          <a class="c-footer-landing-mobile__link" href="#">
            <div class="c-footer-landing-mobile__group-3"></div>
            <div class="c-footer-landing-mobile__group-4">
              <span class="c-footer-landing-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing-mobile__text">lorem ipsum</div>
          </a>
          <a class="c-footer-landing-mobile__link" href="#">
            <div class="c-footer-landing-mobile__group-3"></div>
            <div class="c-footer-landing-mobile__group-4">
              <span class="c-footer-landing-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing-mobile__text">lorem ipsu</div>
          </a>
          <a class="c-footer-landing-mobile__link" href="#">
            <div class="c-footer-landing-mobile__group-3"></div>
            <div class="c-footer-landing-mobile__group-4">
              <span class="c-footer-landing-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-landing-mobile__text">lorem ipsum do</div>
          </a>
        </div>
      </div>
    </div>
    <div class="c-footer-landing-mobile__inner">
      <div class="c-footer-landing-mobile__group-5">
        <a class="c-footer-landing-mobile__link-2" href="#">
          <span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
        </a>
        <ul class="c-footer-landing-mobile__list">
          <li class="c-footer-landing-mobile__item">
            <a class="c-footer-landing-mobile__link-3" href="#">lorem ipsum d</a>
          </li>
          <li class="c-footer-landing-mobile__item">
            <a class="c-footer-landing-mobile__link-3" href="#">lorem ipsum</a>
          </li>
          <li class="c-footer-landing-mobile__item">
            <a class="c-footer-landing-mobile__link-3" href="#">lorem ipsum</a>
          </li>
          <li class="c-footer-landing-mobile__item">
            <a class="c-footer-landing-mobile__link-3" href="#">lorem ipsum</a>
          </li>
          <li class="c-footer-landing-mobile__item">
            <a class="c-footer-landing-mobile__link-3" href="#">lore</a>
          </li>
          <li class="c-footer-landing-mobile__item">
            <a class="c-footer-landing-mobile__link-3" href="#">lorem</a>
          </li>
          <li class="c-footer-landing-mobile__item">
            <a class="c-footer-landing-mobile__link-3" href="#">lorem i</a>
          </li>
        </ul>
        <div class="c-footer-landing-mobile__columns-2">
          <span class="c-footer-landing-mobile__icon-2" aria-hidden="true"></span>
          <span class="c-footer-landing-mobile__icon-2" aria-hidden="true"></span>
          <span class="c-footer-landing-mobile__icon-2" aria-hidden="true"></span>
          <span class="c-footer-landing-mobile__icon-2" aria-hidden="true"></span>
        </div>
      </div>
      <div class="c-footer-landing-mobile__group-6">
        <ul class="c-footer-landing-mobile__list-2">
          <li class="c-footer-landing-mobile__item">lorem ipsum dol</li>
          <li class="c-footer-landing-mobile__item">lorem</li>
          <li class="c-footer-landing-mobile__item">lorem i</li>
          <li class="c-footer-landing-mobile__item"></li>
        </ul>
      </div>
    </div>
  </div>
</div>

.c-footer-landing-mobile-scope {
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.c-footer-landing-mobile {
  display: block;
  flex-shrink: 0;
  border-spacing: 0px;
  position: relative;
  z-index: 1;
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  transition: opacity 0.4s ease-in-out;
}

.c-footer-landing-mobile__group {
  display: block;
  position: relative;
  z-index: 2;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-top: 60px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing-mobile__group-2 {
  display: block;
  width: fit-content;
  transform: matrix(1, 0, 0, 1, -156.7, 0);
  transform-origin: 1872px 97px;
}

.c-footer-landing-mobile__columns {
  display: grid;
  gap: 32px;
  grid-auto-flow: column;
  width: fit-content;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transform-origin: 1872px 97px;
  transition-duration: 0.6s, 0.6s;
  transition-timing-function: ease-out, ease-out;
  transition-property: transform, -webkit-transform;
}

.c-footer-landing-mobile__link {
  display: block;
  position: relative;
  color: #0D0C22;
  cursor: pointer;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1);
  transform-origin: 102px 97px;
  text-decoration-line: none;
  transition: color 0.1s ease;
}

.c-footer-landing-mobile__group-3 {
  display: block;
  width: 200px;
  height: 150px;
  position: absolute;
  top: 0px;
  right: 0px;
}

.c-footer-landing-mobile__group-3::before {
  content: "";
  display: block;
  width: 192px;
  height: 144px;
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: 12px;
  left: 14px;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #EDF3D8;
  border: 2px solid #FFFFFF;
  border-radius: 12px;
  opacity: 0.4;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.c-footer-landing-mobile__group-3::after {
  content: "";
  display: block;
  width: 196px;
  height: 147px;
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: 4px;
  left: 5px;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #E3EBFD;
  border: 2px solid #FFFFFF;
  border-radius: 10px;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.c-footer-landing-mobile__group-4 {
  display: flex;
  width: 200px;
  height: 150px;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #9E9EA7;
  border: 2px solid #FFFFFF;
  border-radius: 8px;
}

.c-footer-landing-mobile__logo {
  display: block;
  flex-shrink: 0;
  width: 200px;
  height: 150px;
  aspect-ratio: auto 200 / 150;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  opacity: 0.001;
  transition: all 0.6s ease-out;
}

.c-footer-landing-mobile__text {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-top: 12px;
}

.c-footer-landing-mobile__image {
  display: block;
  flex-shrink: 0;
  width: 200px;
  height: 150px;
  aspect-ratio: auto 200 / 150;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  opacity: 0.001;
  transition: all 0.6s ease-out;
}

.c-footer-landing-mobile__inner {
  display: block;
  max-width: 1200px;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing-mobile__group-5 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  row-gap: 20px;
  padding-top: 44px;
  padding-bottom: 44px;
}

.c-footer-landing-mobile__link-2 {
  display: flex;
  color: #0D0C22;
  cursor: pointer;
  text-decoration-line: none;
  transition: color 0.1s ease;
}

.c-footer-landing-mobile__icon {
  display: block;
  flex-shrink: 0;
  width: 104px;
  height: 30px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-footer-landing-mobile__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
  padding: 0px;
  margin: 0px;
  line-height: 20px;
  list-style-type: none;
}

.c-footer-landing-mobile__item {
  display: list-item;
}

.c-footer-landing-mobile__link-3 {
  display: inline;
  color: #0D0C22;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-decoration-line: none;
  transition: color 0.1s ease;
}

.c-footer-landing-mobile__columns-2 {
  display: grid;
  gap: 16px;
  grid-auto-flow: column;
}

.c-footer-landing-mobile__icon-2 {
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  cursor: pointer;
}

.c-footer-landing-mobile__group-6 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  row-gap: 8px;
  color: #6E6D7A;
  font-size: 14px;
  line-height: 20px;
  padding-top: 32px;
  padding-bottom: 32px;
}

.c-footer-landing-mobile__list-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing-mobile__link:focus {
  outline: 2px solid #F3AFE4;
  outline-offset: 1px;
}

.c-footer-landing-mobile__link-2:focus {
  outline: 2px solid #F3AFE4;
  outline-offset: 1px;
}

.c-footer-landing-mobile__link-3:focus {
  outline: 2px solid #F3AFE4;
  outline-offset: 1px;
}

States

footer-landing-link focus: outline 2px solid #F3AFE4, outline-offset 1px
footer-landing-link-2 focus: outline 2px solid #F3AFE4, outline-offset 1px
footer-landing-link-3 focus: outline 2px solid #F3AFE4, outline-offset 1px
mobile, footer-landing-mobile-link focus: outline 2px solid #F3AFE4, outline-offset 1px
mobile, footer-landing-mobile-link-2 focus: outline 2px solid #F3AFE4, outline-offset 1px
mobile, footer-landing-mobile-link-3 focus: outline 2px solid #F3AFE4, outline-offset 1px

Verification: desktop verified against the live page at desktop; mobile flagged, the footer-inner-mobile-inner height did not reproduce the measured 342px after 2 correction attempts.

Variant observed on https://dribbble.com/designer-advertising.

Anatomy

footer-inner: the component root, a <div> (.c-footer-inner)
footer-inner-group: inner block (.c-footer-inner__group)
footer-inner-group-2: inner block (.c-footer-inner__group-2)
footer-inner-columns: inner grid (.c-footer-inner__columns)
footer-inner-link: link (.c-footer-inner__link, 16 instances)
footer-inner-group-3: inner block (.c-footer-inner__group-3, 16 instances)
footer-inner-group-4: inner flex row (.c-footer-inner__group-4, 16 instances)
footer-inner-logo: image placeholder, 200x150px (.c-footer-inner__logo)
footer-inner-text: label text, 6 characters (.c-footer-inner__text, 16 instances)
footer-inner-image: image placeholder, 200x150px (.c-footer-inner__image, 8 instances)
footer-inner-image-2: image placeholder, 200x150px (.c-footer-inner__image-2, 7 instances)
footer-inner-inner: inner block (.c-footer-inner__inner)
footer-inner-columns-2: inner flex row (.c-footer-inner__columns-2)
footer-inner-link-2: link (.c-footer-inner__link-2)
footer-inner-icon: icon placeholder, 104x30px (.c-footer-inner__icon)
footer-inner-list: inner flex row (.c-footer-inner__list)
footer-inner-item: inner group (.c-footer-inner__item, 11 instances), content not captured
footer-inner-link-3: link, 13-character label (.c-footer-inner__link-3, 7 instances)
footer-inner-columns-3: inner grid (.c-footer-inner__columns-3)
footer-inner-icon-2: icon placeholder, 18px (.c-footer-inner__icon-2, 4 instances)
footer-inner-group-5: inner flex row (.c-footer-inner__group-5), content not captured
footer-inner-list-2: inner flex row (.c-footer-inner__list-2)

Desktop recipe

HTML · CSS

<div class="c-footer-inner-scope">
  <div class="c-footer-inner">
    <div class="c-footer-inner__group">
      <div class="c-footer-inner__group-2">
        <div class="c-footer-inner__columns">
          <a class="c-footer-inner__link" href="#">
            <div class="c-footer-inner__group-3"></div>
            <div class="c-footer-inner__group-4">
              <span class="c-footer-inner__logo" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner__text">lorem</div>
          </a>
          <a class="c-footer-inner__link" href="#">
            <div class="c-footer-inner__group-3"></div>
            <div class="c-footer-inner__group-4">
              <span class="c-footer-inner__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner__text">lorem ips</div>
          </a>
          <a class="c-footer-inner__link" href="#">
            <div class="c-footer-inner__group-3"></div>
            <div class="c-footer-inner__group-4">
              <span class="c-footer-inner__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner__text">lorem ip</div>
          </a>
          <a class="c-footer-inner__link" href="#">
            <div class="c-footer-inner__group-3"></div>
            <div class="c-footer-inner__group-4">
              <span class="c-footer-inner__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner__text">lorem ipsu</div>
          </a>
          <a class="c-footer-inner__link" href="#">
            <div class="c-footer-inner__group-3"></div>
            <div class="c-footer-inner__group-4">
              <span class="c-footer-inner__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner__text">lorem</div>
          </a>
          <a class="c-footer-inner__link" href="#">
            <div class="c-footer-inner__group-3"></div>
            <div class="c-footer-inner__group-4">
              <span class="c-footer-inner__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner__text">lorem ipsum</div>
          </a>
          <a class="c-footer-inner__link" href="#">
            <div class="c-footer-inner__group-3"></div>
            <div class="c-footer-inner__group-4">
              <span class="c-footer-inner__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner__text">lorem ipsu</div>
          </a>
          <a class="c-footer-inner__link" href="#">
            <div class="c-footer-inner__group-3"></div>
            <div class="c-footer-inner__group-4">
              <span class="c-footer-inner__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner__text">lorem ipsum do</div>
          </a>
          <a class="c-footer-inner__link" href="#">
            <div class="c-footer-inner__group-3"></div>
            <div class="c-footer-inner__group-4">
              <span class="c-footer-inner__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner__text">lorem</div>
          </a>
          <a class="c-footer-inner__link" href="#">
            <div class="c-footer-inner__group-3"></div>
            <div class="c-footer-inner__group-4">
              <span class="c-footer-inner__image-2" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner__text">lorem ips</div>
          </a>
          <a class="c-footer-inner__link" href="#">
            <div class="c-footer-inner__group-3"></div>
            <div class="c-footer-inner__group-4">
              <span class="c-footer-inner__image-2" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner__text">lorem ip</div>
          </a>
          <a class="c-footer-inner__link" href="#">
            <div class="c-footer-inner__group-3"></div>
            <div class="c-footer-inner__group-4">
              <span class="c-footer-inner__image-2" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner__text">lorem ipsu</div>
          </a>
          <a class="c-footer-inner__link" href="#">
            <div class="c-footer-inner__group-3"></div>
            <div class="c-footer-inner__group-4">
              <span class="c-footer-inner__image-2" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner__text">lorem</div>
          </a>
          <a class="c-footer-inner__link" href="#">
            <div class="c-footer-inner__group-3"></div>
            <div class="c-footer-inner__group-4">
              <span class="c-footer-inner__image-2" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner__text">lorem ipsum</div>
          </a>
          <a class="c-footer-inner__link" href="#">
            <div class="c-footer-inner__group-3"></div>
            <div class="c-footer-inner__group-4">
              <span class="c-footer-inner__image-2" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner__text">lorem ipsu</div>
          </a>
          <a class="c-footer-inner__link" href="#">
            <div class="c-footer-inner__group-3"></div>
            <div class="c-footer-inner__group-4">
              <span class="c-footer-inner__image-2" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner__text">lorem ipsum do</div>
          </a>
        </div>
      </div>
    </div>
    <div class="c-footer-inner__inner">
      <div class="c-footer-inner__columns-2">
        <a class="c-footer-inner__link-2" href="#">
          <span class="c-footer-inner__icon" aria-hidden="true"></span>
        </a>
        <ul class="c-footer-inner__list">
          <li class="c-footer-inner__item">
            <a class="c-footer-inner__link-3" href="#">lorem ipsum d</a>
          </li>
          <li class="c-footer-inner__item">
            <a class="c-footer-inner__link-3" href="#">lorem ipsum</a>
          </li>
          <li class="c-footer-inner__item">
            <a class="c-footer-inner__link-3" href="#">lorem ipsum</a>
          </li>
          <li class="c-footer-inner__item">
            <a class="c-footer-inner__link-3" href="#">lorem ipsum</a>
          </li>
          <li class="c-footer-inner__item">
            <a class="c-footer-inner__link-3" href="#">lore</a>
          </li>
          <li class="c-footer-inner__item">
            <a class="c-footer-inner__link-3" href="#">lorem</a>
          </li>
          <li class="c-footer-inner__item">
            <a class="c-footer-inner__link-3" href="#">lorem i</a>
          </li>
        </ul>
        <div class="c-footer-inner__columns-3">
          <span class="c-footer-inner__icon-2" aria-hidden="true"></span>
          <span class="c-footer-inner__icon-2" aria-hidden="true"></span>
          <span class="c-footer-inner__icon-2" aria-hidden="true"></span>
          <span class="c-footer-inner__icon-2" aria-hidden="true"></span>
        </div>
      </div>
      <div class="c-footer-inner__group-5">
        <ul class="c-footer-inner__list-2">
          <li class="c-footer-inner__item">lorem ipsum dol</li>
          <li class="c-footer-inner__item">lorem</li>
          <li class="c-footer-inner__item">lorem i</li>
          <li class="c-footer-inner__item"></li>
        </ul>
      </div>
    </div>
  </div>
</div>

.c-footer-inner-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
}

.c-footer-inner {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  transition: opacity 0.4s ease-in-out;
}

.c-footer-inner__group {
  display: block;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-top: 60px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner__group-2 {
  display: block;
  box-sizing: border-box;
  width: fit-content;
  transform: matrix(1, 0, 0, 1, -320.929, 0);
}

.c-footer-inner__columns {
  display: grid;
  gap: 32px;
  grid-auto-flow: column;
  box-sizing: border-box;
  width: fit-content;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transition-duration: 0.6s, 0.6s;
  transition-timing-function: ease-out, ease-out;
  transition-property: transform, -webkit-transform;
}

.c-footer-inner__link {
  display: block;
  box-sizing: border-box;
  position: relative;
  color: #0D0C22;
  cursor: pointer;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1);
  text-decoration-line: none;
}

.c-footer-inner__group-3 {
  display: block;
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  position: absolute;
  top: 0px;
  right: 0px;
}

.c-footer-inner__group-3::before {
  content: "";
  display: block;
  width: 192px;
  height: 144px;
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: 12px;
  left: 14px;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #EDF3D8;
  border: 2px solid #FFFFFF;
  border-radius: 12px;
  opacity: 0.4;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.c-footer-inner__group-3::after {
  content: "";
  display: block;
  width: 196px;
  height: 147px;
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: 4px;
  left: 5px;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #E3EBFD;
  border: 2px solid #FFFFFF;
  border-radius: 10px;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.c-footer-inner__group-4 {
  display: flex;
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #9E9EA7;
  border: 2px solid #FFFFFF;
  border-radius: 8px;
}

.c-footer-inner__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  aspect-ratio: auto 200 / 150;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  transition: all 0.6s ease-out;
}

.c-footer-inner__text {
  display: block;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  margin-top: 12px;
}

.c-footer-inner__image {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  aspect-ratio: auto 200 / 150;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  transition: all 0.6s ease-out;
}

.c-footer-inner__image-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  aspect-ratio: auto 200 / 150;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  opacity: 0.001;
  transition: all 0.6s ease-out;
}

.c-footer-inner__inner {
  display: block;
  max-width: 1200px;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner__columns-2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-top: 72px;
  padding-bottom: 44px;
}

.c-footer-inner__link-2 {
  display: flex;
  box-sizing: border-box;
  color: #0D0C22;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-inner__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 104px;
  height: 30px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-footer-inner__list {
  display: flex;
  justify-content: center;
  gap: 12px 48px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  line-height: 20px;
  list-style-type: none;
}

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

.c-footer-inner__link-3 {
  display: inline;
  box-sizing: border-box;
  color: #0D0C22;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-decoration-line: none;
}

.c-footer-inner__columns-3 {
  display: grid;
  gap: 16px;
  grid-auto-flow: column;
  box-sizing: border-box;
}

.c-footer-inner__icon-2 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  cursor: pointer;
}

.c-footer-inner__group-5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  color: #6E6D7A;
  font-size: 14px;
  line-height: 20px;
  padding-top: 44px;
  padding-bottom: 44px;
}

.c-footer-inner__list-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

Mobile anatomy

footer-inner-mobile: the component root, a <div> (.c-footer-inner-mobile)
footer-inner-mobile-group: inner block (.c-footer-inner-mobile__group)
footer-inner-mobile-group-2: inner block (.c-footer-inner-mobile__group-2)
footer-inner-mobile-columns: inner grid (.c-footer-inner-mobile__columns)
footer-inner-mobile-link: link (.c-footer-inner-mobile__link, 16 instances)
footer-inner-mobile-group-3: inner block (.c-footer-inner-mobile__group-3, 16 instances)
footer-inner-mobile-group-4: inner flex row (.c-footer-inner-mobile__group-4, 16 instances)
footer-inner-mobile-logo: image placeholder, 200x150px (.c-footer-inner-mobile__logo)
footer-inner-mobile-text: label text, 6 characters (.c-footer-inner-mobile__text, 16 instances)
footer-inner-mobile-image: image placeholder, 200x150px (.c-footer-inner-mobile__image, 15 instances)
footer-inner-mobile-inner: inner block (.c-footer-inner-mobile__inner)
footer-inner-mobile-group-5: inner flex column (.c-footer-inner-mobile__group-5)
footer-inner-mobile-link-2: link (.c-footer-inner-mobile__link-2)
footer-inner-mobile-icon: icon placeholder, 104x30px (.c-footer-inner-mobile__icon)
footer-inner-mobile-list: inner flex row (.c-footer-inner-mobile__list)
footer-inner-mobile-item: inner group (.c-footer-inner-mobile__item, 11 instances), content not captured
footer-inner-mobile-link-3: link, 13-character label (.c-footer-inner-mobile__link-3, 7 instances)
footer-inner-mobile-columns-2: inner grid (.c-footer-inner-mobile__columns-2)
footer-inner-mobile-icon-2: icon placeholder, 18px (.c-footer-inner-mobile__icon-2, 4 instances)
footer-inner-mobile-group-6: inner flex column (.c-footer-inner-mobile__group-6), content not captured
footer-inner-mobile-list-2: inner flex row (.c-footer-inner-mobile__list-2)
footer-inner-mobile-link-4: link, 7-character label (.c-footer-inner-mobile__link-4)

Mobile recipe

HTML · CSS

<div class="c-footer-inner-mobile-scope">
  <div class="c-footer-inner-mobile">
    <div class="c-footer-inner-mobile__group">
      <div class="c-footer-inner-mobile__group-2">
        <div class="c-footer-inner-mobile__columns">
          <a class="c-footer-inner-mobile__link" href="#">
            <div class="c-footer-inner-mobile__group-3"></div>
            <div class="c-footer-inner-mobile__group-4">
              <span class="c-footer-inner-mobile__logo" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner-mobile__text">lorem</div>
          </a>
          <a class="c-footer-inner-mobile__link" href="#">
            <div class="c-footer-inner-mobile__group-3"></div>
            <div class="c-footer-inner-mobile__group-4">
              <span class="c-footer-inner-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner-mobile__text">lorem ips</div>
          </a>
          <a class="c-footer-inner-mobile__link" href="#">
            <div class="c-footer-inner-mobile__group-3"></div>
            <div class="c-footer-inner-mobile__group-4">
              <span class="c-footer-inner-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner-mobile__text">lorem ip</div>
          </a>
          <a class="c-footer-inner-mobile__link" href="#">
            <div class="c-footer-inner-mobile__group-3"></div>
            <div class="c-footer-inner-mobile__group-4">
              <span class="c-footer-inner-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner-mobile__text">lorem ipsu</div>
          </a>
          <a class="c-footer-inner-mobile__link" href="#">
            <div class="c-footer-inner-mobile__group-3"></div>
            <div class="c-footer-inner-mobile__group-4">
              <span class="c-footer-inner-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner-mobile__text">lorem</div>
          </a>
          <a class="c-footer-inner-mobile__link" href="#">
            <div class="c-footer-inner-mobile__group-3"></div>
            <div class="c-footer-inner-mobile__group-4">
              <span class="c-footer-inner-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner-mobile__text">lorem ipsum</div>
          </a>
          <a class="c-footer-inner-mobile__link" href="#">
            <div class="c-footer-inner-mobile__group-3"></div>
            <div class="c-footer-inner-mobile__group-4">
              <span class="c-footer-inner-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner-mobile__text">lorem ipsu</div>
          </a>
          <a class="c-footer-inner-mobile__link" href="#">
            <div class="c-footer-inner-mobile__group-3"></div>
            <div class="c-footer-inner-mobile__group-4">
              <span class="c-footer-inner-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner-mobile__text">lorem ipsum do</div>
          </a>
          <a class="c-footer-inner-mobile__link" href="#">
            <div class="c-footer-inner-mobile__group-3"></div>
            <div class="c-footer-inner-mobile__group-4">
              <span class="c-footer-inner-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner-mobile__text">lorem</div>
          </a>
          <a class="c-footer-inner-mobile__link" href="#">
            <div class="c-footer-inner-mobile__group-3"></div>
            <div class="c-footer-inner-mobile__group-4">
              <span class="c-footer-inner-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner-mobile__text">lorem ips</div>
          </a>
          <a class="c-footer-inner-mobile__link" href="#">
            <div class="c-footer-inner-mobile__group-3"></div>
            <div class="c-footer-inner-mobile__group-4">
              <span class="c-footer-inner-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner-mobile__text">lorem ip</div>
          </a>
          <a class="c-footer-inner-mobile__link" href="#">
            <div class="c-footer-inner-mobile__group-3"></div>
            <div class="c-footer-inner-mobile__group-4">
              <span class="c-footer-inner-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner-mobile__text">lorem ipsu</div>
          </a>
          <a class="c-footer-inner-mobile__link" href="#">
            <div class="c-footer-inner-mobile__group-3"></div>
            <div class="c-footer-inner-mobile__group-4">
              <span class="c-footer-inner-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner-mobile__text">lorem</div>
          </a>
          <a class="c-footer-inner-mobile__link" href="#">
            <div class="c-footer-inner-mobile__group-3"></div>
            <div class="c-footer-inner-mobile__group-4">
              <span class="c-footer-inner-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner-mobile__text">lorem ipsum</div>
          </a>
          <a class="c-footer-inner-mobile__link" href="#">
            <div class="c-footer-inner-mobile__group-3"></div>
            <div class="c-footer-inner-mobile__group-4">
              <span class="c-footer-inner-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner-mobile__text">lorem ipsu</div>
          </a>
          <a class="c-footer-inner-mobile__link" href="#">
            <div class="c-footer-inner-mobile__group-3"></div>
            <div class="c-footer-inner-mobile__group-4">
              <span class="c-footer-inner-mobile__image" aria-hidden="true"></span>
            </div>
            <div class="c-footer-inner-mobile__text">lorem ipsum do</div>
          </a>
        </div>
      </div>
    </div>
    <div class="c-footer-inner-mobile__inner">
      <div class="c-footer-inner-mobile__group-5">
        <a class="c-footer-inner-mobile__link-2" href="#">
          <span class="c-footer-inner-mobile__icon" aria-hidden="true"></span>
        </a>
        <ul class="c-footer-inner-mobile__list">
          <li class="c-footer-inner-mobile__item">
            <a class="c-footer-inner-mobile__link-3" href="#">lorem ipsum d</a>
          </li>
          <li class="c-footer-inner-mobile__item">
            <a class="c-footer-inner-mobile__link-3" href="#">lorem ipsum</a>
          </li>
          <li class="c-footer-inner-mobile__item">
            <a class="c-footer-inner-mobile__link-3" href="#">lorem ipsum</a>
          </li>
          <li class="c-footer-inner-mobile__item">
            <a class="c-footer-inner-mobile__link-3" href="#">lorem ipsum</a>
          </li>
          <li class="c-footer-inner-mobile__item">
            <a class="c-footer-inner-mobile__link-3" href="#">lore</a>
          </li>
          <li class="c-footer-inner-mobile__item">
            <a class="c-footer-inner-mobile__link-3" href="#">lorem</a>
          </li>
          <li class="c-footer-inner-mobile__item">
            <a class="c-footer-inner-mobile__link-3" href="#">lorem i</a>
          </li>
        </ul>
        <div class="c-footer-inner-mobile__columns-2">
          <span class="c-footer-inner-mobile__icon-2" aria-hidden="true"></span>
          <span class="c-footer-inner-mobile__icon-2" aria-hidden="true"></span>
          <span class="c-footer-inner-mobile__icon-2" aria-hidden="true"></span>
          <span class="c-footer-inner-mobile__icon-2" aria-hidden="true"></span>
        </div>
      </div>
      <div class="c-footer-inner-mobile__group-6">
        <ul class="c-footer-inner-mobile__list-2">
          <li class="c-footer-inner-mobile__item">lorem ipsum dol</li>
          <li class="c-footer-inner-mobile__item">lorem</li>
          <li class="c-footer-inner-mobile__item">
            <a class="c-footer-inner-mobile__link-4" href="#">lorem i</a>
          </li>
          <li class="c-footer-inner-mobile__item"></li>
        </ul>
      </div>
    </div>
  </div>
</div>

.c-footer-inner-mobile-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
}

.c-footer-inner-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  transition: opacity 0.4s ease-in-out;
}

.c-footer-inner-mobile__group {
  display: block;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-top: 60px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  width: fit-content;
  transform: matrix(1, 0, 0, 1, -156.109, 0);
}

.c-footer-inner-mobile__columns {
  display: grid;
  gap: 32px;
  grid-auto-flow: column;
  box-sizing: border-box;
  width: fit-content;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transition-duration: 0.6s, 0.6s;
  transition-timing-function: ease-out, ease-out;
  transition-property: transform, -webkit-transform;
}

.c-footer-inner-mobile__link {
  display: block;
  box-sizing: border-box;
  position: relative;
  color: #0D0C22;
  cursor: pointer;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1);
  text-decoration-line: none;
}

.c-footer-inner-mobile__group-3 {
  display: block;
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  position: absolute;
  top: 0px;
  right: 0px;
}

.c-footer-inner-mobile__group-3::before {
  content: "";
  display: block;
  width: 192px;
  height: 144px;
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: 12px;
  left: 14px;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #EDF3D8;
  border: 2px solid #FFFFFF;
  border-radius: 12px;
  opacity: 0.4;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.c-footer-inner-mobile__group-3::after {
  content: "";
  display: block;
  width: 196px;
  height: 147px;
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: 4px;
  left: 5px;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #E3EBFD;
  border: 2px solid #FFFFFF;
  border-radius: 10px;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.c-footer-inner-mobile__group-4 {
  display: flex;
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #9E9EA7;
  border: 2px solid #FFFFFF;
  border-radius: 8px;
}

.c-footer-inner-mobile__logo {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  aspect-ratio: auto 200 / 150;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  opacity: 0.001;
  transition: all 0.6s ease-out;
}

.c-footer-inner-mobile__text {
  display: block;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  margin-top: 12px;
}

.c-footer-inner-mobile__image {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  aspect-ratio: auto 200 / 150;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  opacity: 0.001;
  transition: all 0.6s ease-out;
}

.c-footer-inner-mobile__inner {
  display: block;
  max-width: 1200px;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner-mobile__group-5 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  row-gap: 20px;
  box-sizing: border-box;
  padding-top: 44px;
  padding-bottom: 44px;
}

.c-footer-inner-mobile__link-2 {
  display: flex;
  box-sizing: border-box;
  color: #0D0C22;
  cursor: pointer;
  text-decoration-line: none;
}

.c-footer-inner-mobile__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 104px;
  height: 30px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-footer-inner-mobile__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  line-height: 20px;
  list-style-type: none;
}

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

.c-footer-inner-mobile__link-3 {
  display: inline;
  box-sizing: border-box;
  color: #0D0C22;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  text-decoration-line: none;
}

.c-footer-inner-mobile__columns-2 {
  display: grid;
  gap: 16px;
  grid-auto-flow: column;
  box-sizing: border-box;
}

.c-footer-inner-mobile__icon-2 {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  cursor: pointer;
}

.c-footer-inner-mobile__group-6 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  row-gap: 8px;
  box-sizing: border-box;
  color: #6E6D7A;
  font-size: 14px;
  line-height: 20px;
  padding-top: 32px;
  padding-bottom: 32px;
}

.c-footer-inner-mobile__list-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-inner-mobile__link-4 {
  display: inline;
  box-sizing: border-box;
  color: #6E6D7A;
  cursor: pointer;
  text-decoration-line: none;
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

dropdown-menu: the component root, a <div> (.c-dropdown-menu)
dropdown-menu-group: inner block (.c-dropdown-menu__group)
dropdown-menu-group-2: inner block (.c-dropdown-menu__group-2)
dropdown-menu-group-3: inner grid (.c-dropdown-menu__group-3)
dropdown-menu-link: link (.c-dropdown-menu__link, 16 instances), content not captured
dropdown-menu-group-4: inner block (.c-dropdown-menu__group-4)
dropdown-menu-group-5: inner flex row (.c-dropdown-menu__group-5)
dropdown-menu-link-2: link (.c-dropdown-menu__link-2)
dropdown-menu-icon: icon placeholder, 104x30px (.c-dropdown-menu__icon)
dropdown-menu-list: inner flex row (.c-dropdown-menu__list)
dropdown-menu-item: inner group (.c-dropdown-menu__item, 8 instances), content not captured
dropdown-menu-group-6: inner grid (.c-dropdown-menu__group-6)
dropdown-menu-link-3: link (.c-dropdown-menu__link-3, 4 instances), content not captured
dropdown-menu-group-7: inner flex row (.c-dropdown-menu__group-7), content not captured
dropdown-menu-list-2: inner flex row (.c-dropdown-menu__list-2), content not captured

Recipe

HTML · CSS

<div class="c-dropdown-menu-scope">
  <div class="c-dropdown-menu">
    <div class="c-dropdown-menu__group">
      <div class="c-dropdown-menu__group-2">
        <div class="c-dropdown-menu__group-3">
          <a class="c-dropdown-menu__link" href="#"></a>
          <a class="c-dropdown-menu__link" href="#"></a>
          <a class="c-dropdown-menu__link" href="#"></a>
          <a class="c-dropdown-menu__link" href="#"></a>
          <a class="c-dropdown-menu__link" href="#"></a>
          <a class="c-dropdown-menu__link" href="#"></a>
          <a class="c-dropdown-menu__link" href="#"></a>
          <a class="c-dropdown-menu__link" href="#"></a>
          <a class="c-dropdown-menu__link" href="#"></a>
          <a class="c-dropdown-menu__link" href="#"></a>
          <a class="c-dropdown-menu__link" href="#"></a>
          <a class="c-dropdown-menu__link" href="#"></a>
          <a class="c-dropdown-menu__link" href="#"></a>
          <a class="c-dropdown-menu__link" href="#"></a>
          <a class="c-dropdown-menu__link" href="#"></a>
          <a class="c-dropdown-menu__link" href="#"></a>
        </div>
      </div>
    </div>
    <div class="c-dropdown-menu__group-4">
      <div class="c-dropdown-menu__group-5">
        <a class="c-dropdown-menu__link-2" href="#">
          <span class="c-dropdown-menu__icon" aria-hidden="true"></span>
        </a>
        <ul class="c-dropdown-menu__list">
          <li class="c-dropdown-menu__item"></li>
          <li class="c-dropdown-menu__item"></li>
          <li class="c-dropdown-menu__item"></li>
          <li class="c-dropdown-menu__item"></li>
          <li class="c-dropdown-menu__item"></li>
          <li class="c-dropdown-menu__item"></li>
          <li class="c-dropdown-menu__item"></li>
        </ul>
        <div class="c-dropdown-menu__group-6">
          <a class="c-dropdown-menu__link-3" href="#"></a>
          <a class="c-dropdown-menu__link-3" href="#"></a>
          <a class="c-dropdown-menu__link-3" href="#"></a>
          <a class="c-dropdown-menu__link-3" href="#"></a>
        </div>
      </div>
      <div class="c-dropdown-menu__group-7">
        <ul class="c-dropdown-menu__list-2">
          <li class="c-dropdown-menu__item">lorem ipsum dol</li>
        </ul>
      </div>
    </div>
  </div>
</div>

.c-dropdown-menu-scope {
  background-color: #FFFFFF;
  color: #000000;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
}

.c-dropdown-menu {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  transition: opacity 0.4s ease-in-out;
}

.c-dropdown-menu__group {
  display: block;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-top: 60px;
  margin-right: auto;
  margin-left: auto;
}

.c-dropdown-menu__group-2 {
  display: block;
  box-sizing: border-box;
  width: fit-content;
  transform: matrix(1, 0, 0, 1, -225.229, 0);
}

.c-dropdown-menu__group-3 {
  display: grid;
  gap: 32px;
  grid-auto-flow: column;
  box-sizing: border-box;
  width: fit-content;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transition-duration: 0.6s, 0.6s;
  transition-timing-function: ease-out, ease-out;
  transition-property: transform, -webkit-transform;
}

.c-dropdown-menu__link {
  display: block;
  box-sizing: border-box;
  position: relative;
  color: #0D0C22;
  cursor: pointer;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1);
  text-decoration-line: none;
}

.c-dropdown-menu__group-4 {
  display: block;
  max-width: 1200px;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-dropdown-menu__group-5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-top: 72px;
  padding-bottom: 44px;
}

.c-dropdown-menu__link-2 {
  display: flex;
  box-sizing: border-box;
  color: #0D0C22;
  cursor: pointer;
  text-decoration-line: none;
}

.c-dropdown-menu__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 104px;
  height: 30px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-dropdown-menu__list {
  display: flex;
  justify-content: center;
  gap: 12px 48px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  line-height: 20px;
  list-style-type: none;
}

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

.c-dropdown-menu__group-6 {
  display: grid;
  gap: 16px;
  grid-auto-flow: column;
  box-sizing: border-box;
}

.c-dropdown-menu__link-3 {
  display: block;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  color: #0D0C22;
  cursor: pointer;
  text-decoration-line: none;
}

.c-dropdown-menu__group-7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  color: #6E6D7A;
  font-size: 14px;
  line-height: 20px;
  padding-top: 44px;
  padding-bottom: 44px;
}

.c-dropdown-menu__list-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

States

No hover or focus change was observed.

Category carousel

Verification: flagged, the render matched 94% of the original pixels, below the 96% required after 2 correction attempts.

Anatomy

category-carousel: the component root, a <div> (.c-category-carousel)
category-carousel-group: inner block (.c-category-carousel__group)
category-carousel-group-2: inner block (.c-category-carousel__group-2)
category-carousel-group-3: inner grid (.c-category-carousel__group-3)
category-carousel-link: link (.c-category-carousel__link, 16 instances), content not captured
category-carousel-group-4: inner block (.c-category-carousel__group-4)
category-carousel-group-5: inner flex row (.c-category-carousel__group-5)
category-carousel-link-2: link (.c-category-carousel__link-2)
category-carousel-icon: icon placeholder, 104x30px (.c-category-carousel__icon)
category-carousel-list: inner flex row (.c-category-carousel__list)
category-carousel-item: inner group (.c-category-carousel__item, 8 instances), content not captured
category-carousel-group-6: inner grid (.c-category-carousel__group-6)
category-carousel-link-3: link (.c-category-carousel__link-3, 4 instances), content not captured
category-carousel-group-7: inner flex row (.c-category-carousel__group-7), content not captured
category-carousel-list-2: inner flex row (.c-category-carousel__list-2), content not captured

Recipe

HTML · CSS

<div class="c-category-carousel-scope">
  <div class="c-category-carousel">
    <div class="c-category-carousel__group">
      <div class="c-category-carousel__group-2">
        <div class="c-category-carousel__group-3">
          <a class="c-category-carousel__link" href="#"></a>
          <a class="c-category-carousel__link" href="#"></a>
          <a class="c-category-carousel__link" href="#"></a>
          <a class="c-category-carousel__link" href="#"></a>
          <a class="c-category-carousel__link" href="#"></a>
          <a class="c-category-carousel__link" href="#"></a>
          <a class="c-category-carousel__link" href="#"></a>
          <a class="c-category-carousel__link" href="#"></a>
          <a class="c-category-carousel__link" href="#"></a>
          <a class="c-category-carousel__link" href="#"></a>
          <a class="c-category-carousel__link" href="#"></a>
          <a class="c-category-carousel__link" href="#"></a>
          <a class="c-category-carousel__link" href="#"></a>
          <a class="c-category-carousel__link" href="#"></a>
          <a class="c-category-carousel__link" href="#"></a>
          <a class="c-category-carousel__link" href="#"></a>
        </div>
      </div>
    </div>
    <div class="c-category-carousel__group-4">
      <div class="c-category-carousel__group-5">
        <a class="c-category-carousel__link-2" href="#">
          <span class="c-category-carousel__icon" aria-hidden="true"></span>
        </a>
        <ul class="c-category-carousel__list">
          <li class="c-category-carousel__item"></li>
          <li class="c-category-carousel__item"></li>
          <li class="c-category-carousel__item"></li>
          <li class="c-category-carousel__item"></li>
          <li class="c-category-carousel__item"></li>
          <li class="c-category-carousel__item"></li>
          <li class="c-category-carousel__item"></li>
        </ul>
        <div class="c-category-carousel__group-6">
          <a class="c-category-carousel__link-3" href="#"></a>
          <a class="c-category-carousel__link-3" href="#"></a>
          <a class="c-category-carousel__link-3" href="#"></a>
          <a class="c-category-carousel__link-3" href="#"></a>
        </div>
      </div>
      <div class="c-category-carousel__group-7">
        <ul class="c-category-carousel__list-2">
          <li class="c-category-carousel__item">lorem ipsum dol</li>
        </ul>
      </div>
    </div>
  </div>
</div>

.c-category-carousel-scope {
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.c-category-carousel {
  display: block;
  flex-shrink: 0;
  border-spacing: 0px;
  position: relative;
  z-index: 1;
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  transition: opacity 0.4s ease-in-out;
}

.c-category-carousel__group {
  display: block;
  position: relative;
  z-index: 2;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-top: 60px;
  margin-right: auto;
  margin-left: auto;
}

.c-category-carousel__group-2 {
  display: block;
  width: fit-content;
  transform: matrix(1, 0, 0, 1, -927.765, 0);
}

.c-category-carousel__group-3 {
  display: grid;
  gap: 32px;
  grid-auto-flow: column;
  width: fit-content;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transition-duration: 0.6s, 0.6s;
  transition-timing-function: ease-out, ease-out;
  transition-property: transform, -webkit-transform;
}

.c-category-carousel__link {
  display: block;
  position: relative;
  color: #0D0C22;
  cursor: pointer;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1);
  text-decoration-line: none;
  transition: color 0.1s ease;
}

.c-category-carousel__group-4 {
  display: block;
  max-width: 1200px;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-category-carousel__group-5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 44px;
}

.c-category-carousel__link-2 {
  display: flex;
  color: #0D0C22;
  cursor: pointer;
  text-decoration-line: none;
  transition: color 0.1s ease;
}

.c-category-carousel__icon {
  display: block;
  flex-shrink: 0;
  width: 104px;
  height: 30px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-category-carousel__list {
  display: flex;
  justify-content: center;
  gap: 12px 48px;
  padding: 0px;
  margin: 0px;
  line-height: 20px;
  list-style-type: none;
}

.c-category-carousel__item {
  display: list-item;
}

.c-category-carousel__group-6 {
  display: grid;
  gap: 16px;
  grid-auto-flow: column;
}

.c-category-carousel__link-3 {
  display: block;
  width: 18px;
  height: 18px;
  color: #0D0C22;
  cursor: pointer;
  text-decoration-line: none;
  transition: color 0.1s ease;
}

.c-category-carousel__group-7 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #6E6D7A;
  font-size: 14px;
  line-height: 20px;
  padding-top: 44px;
  padding-bottom: 44px;
}

.c-category-carousel__list-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

States

No hover or focus change was observed.

Tabs

Verification: verified against the live page at desktop.

Anatomy

tab: the component root, a <nav> (.c-tab)
tab-list: inner flex row (.c-tab__list)
tab-cta: link, 4-character label (.c-tab__cta)
tab-link: link, 8-character label (.c-tab__link, 5 instances)
tab-item: inner flex column (.c-tab__item)
tab-link-2: link, 7-character label (.c-tab__link-2)

Recipe

HTML · CSS

<div class="c-tab-scope">
  <nav class="c-tab">
    <ul class="c-tab__list">
      <a class="c-tab__cta" href="#">lore</a>
      <a class="c-tab__link" href="#">lorem ip</a>
      <li class="c-tab__item">
        <a class="c-tab__link-2" href="#">lorem i</a>
      </li>
      <a class="c-tab__link" href="#">lorem ipsum</a>
      <a class="c-tab__link" href="#">lorem ipsum</a>
      <a class="c-tab__link" href="#">lorem i</a>
      <a class="c-tab__link" href="#">lorem</a>
    </ul>
  </nav>
</div>

.c-tab-scope {
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.c-tab {
  display: block;
  border-spacing: 0px;
  position: relative;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.c-tab__list {
  display: flex;
  gap: 8px;
  width: 100%;
  padding: 30px 0px;
  margin: 0px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  list-style-type: none;
}

.c-tab__cta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  position: relative;
  background-color: #F8F7F4;
  color: #0D0C22;
  border-radius: 1e+07px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 15px;
  text-decoration-line: none;
  transition: all 0.2s ease;
  padding-right: 16px;
  padding-left: 16px;
}

.c-tab__link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  position: relative;
  color: #0D0C22;
  border-radius: 1e+07px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 15px;
  text-decoration-line: none;
  transition: all 0.2s ease;
  padding-right: 16px;
  padding-left: 16px;
}

.c-tab__item {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 650px;
}

.c-tab__link-2 {
  display: flex;
  align-items: center;
  height: 36px;
  position: relative;
  color: #0D0C22;
  border-radius: 1e+07px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 15px;
  text-decoration-line: none;
  transition: all 0.2s ease;
  padding-right: 16px;
  padding-left: 16px;
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

dropdown: the component root, a <a> (.c-dropdown)
dropdown-icon: icon placeholder, 10px (.c-dropdown__icon)
dropdown-text: label text, 14 characters (.c-dropdown__text)

Recipe

HTML · CSS

<div class="c-dropdown-scope">
  <a class="c-dropdown" href="#">
    <span class="c-dropdown__icon" aria-hidden="true"></span>
    <span class="c-dropdown__text">lorem ipsum do</span>
  </a>
</div>

.c-dropdown-scope {
  background-color: #FFFFFF;
  color: #0D0C22;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

.c-dropdown {
  display: flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 40px;
  padding: 18px 35px 18px 18px;
  position: relative;
  background-color: #FFFFFF;
  color: #0D0C22;
  border: 1px solid #E7E7E9E6;
  border-radius: 8px;
  box-shadow: #00000003 0px 2px 2px 0px;
  cursor: pointer;
  font-family: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  text-decoration-line: none;
  text-align: left;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.c-dropdown__icon {
  display: block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 19px;
  right: 15px;
  bottom: 9px;
  left: 128.5px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, -5);
  transition-duration: 0.2s, 0.2s;
  transition-timing-function: ease-in-out, ease-in-out;
  transition-property: transform, -webkit-transform;
}

.c-dropdown:hover {
  box-shadow: #00000008 0px 4px 4px 0px;
}

.c-dropdown:focus {
  outline: 1px solid #6E6D7A;
  outline-offset: 1px;
}

States

hover: box-shadow #00000008 0px 4px 4px 0px
focus: outline 1px solid #6E6D7A, outline-offset 1px

Do's and Don'ts

Do

Reserve Dribbble Pink (primary, #EA4C89) for high-intent actions. The site fills button-secondary and button-ghost-3 with it, at 40px tall with on-primary icons, and shifts them to primary-hover (#EC5E95) on hover and focus.
Keep buttons at the shared 40px height (button-secondary, button-secondary-2, button-secondary-3, button-secondary-4, button-ghost-4). Use 54px for search inputs (input, input-2, input-3) and 35px only for compact filter buttons (button-ghost-2).
Use rounded.md (8px) for text and white buttons, rounded.lg (12px) for inputs and card media, and rounded.full for pills, chips and avatars.
Use the observed shadow tiers for lift: #06031803 0px 4px 4px 0px at rest and #06031808 0px 4px 4px 0px on hover (button-ghost-2). Pair them with a 1px surface-muted / hairline border.
Signal hover on text links and text buttons by shifting color to muted-violet (#7B7194), as header-landing-nav-link and button-ghost-4 do.
Give every interactive element a 2px primary-focus (#F3AFE4) outline on focus. White bordered buttons use a 1px muted outline with 1px offset instead.
Set all clickable labels in Mona Sans 600 (button, label, nav-link), and meta counts in caption-medium with subtle color.
Cap content at 1200px (footer-landing-inner-max-width) and space footer columns 32px apart (footer-landing-column-gap).

Don't

Don't add a second accent hue or tint UI with colors from the artwork; the thumbnails are the color.
Don't put shadows or borders on shot thumbnails. They sit flat on surface.
Don't exceed about 3% opacity on control shadows. Heavier shadows such as rgba(0, 0, 0, 0.1) 0px 20px 48px 0px belong to overlays only.
Don't use backdrop blur or glass effects. None exist in the system.
Don't use letter-spacing on UI text; only hero-display is tracked (-0.94px).
Don't use weight 700+ for buttons or links. 700 is for title-lg, and 800 is only for micro-badge.
Don't use link (#0000FD) or focus-ring (#005FCC) in chrome. They are raw browser-style leftovers, not system colors.
Don't use radii above rounded.3xl in product UI, and don't ship square corners anywhere.

Responsive Behavior

Scope

This analysis is two-viewport (one desktop, one mobile capture). No breakpoint values were measured, so the transitions between the two states are unknown.

What Changes on Mobile

Navigation collapses. The inline header links are replaced by a hamburger menu, and a compact Log in pill stays visible.
The grid becomes a single column. Shot thumbnails stack full-width at a larger display size. The split hero stacks copy above imagery.
Chips scroll horizontally instead of wrapping. The same applies to the category carousel.
The footer grows taller as it stacks. footer-landing-mobile (flagged: the footer-landing-mobile-inner height did not reproduce the measured 340px) measures 594px against 508px for desktop footer-landing. footer-inner-mobile (flagged: the footer-inner-mobile-inner height did not reproduce the measured 342px) measures 581px against 493px for footer-inner. Link columns collapse into flex columns.

Touch Targets

Primary controls are 40px tall (button-secondary, button-secondary-4) and search fields are 54px (input). Both are comfortable on touch. Small icon targets are the weak point: like-button measures 16px, so pad its hit area when building for touch. Nav and list text uses tall line-heights (nav-link 2.15, body-relaxed 2) that help tappable rows.

Iteration Guide

Reference tokens, never hex. Write primary, ink and rounded.md, not raw values. Component-only colors (primary-hover, primary-focus) belong to states and must not become resting fills.
One accent, rationed. primary appears on at most one or two actions per view. New features get neutral ink/surface chrome, and primary-soft is the only allowed pink surface.
Keep the control heights. Buttons are 40px, search inputs 54px, compact filters 35px. A new button variant changes fill, border or text color, never height.
The radius trio is fixed. Use rounded.md for controls and thumbnails, rounded.lg for inputs and card media, and rounded.full for pills, chips, avatars and round icon buttons. Add new radii only for marketing pages, and only from the existing scale.
Elevation stays whisper-quiet. Resting controls use the ~1% shadows and hover uses the ~3% shadows. Only overlays (menus, popovers) get the diffuse 20–48px shadows. Never shadow artwork, and never add blur.
Typography stays in Mona Sans at 12–14px for UI. Express emphasis through weight (400 → 500 → 600) and ink tier, not size. Don't add letter-spacing, and don't create a new size without a matching role in the Hierarchy table.
Interaction rules are global. Text hover moves to muted-violet, pink buttons hover to primary-hover, and every focusable element gets the 2px primary-focus outline. Any new component must implement all three.

Known Gaps

Expanded display cut dropped. The site sets some H1s in an expanded-width Mona Sans (measured at 60px and 48px, semibold). That family failed grounding, so display-xl and display-md were removed and only display-lg (52px) remains.
Unreproduced recipes. Several component recipes did not reproduce the original exactly:
- button-primary (flagged: the render matched 27% of the original pixels on focus), the near-black pill CTA with #0D0C22 fill.
- button-ghost (flagged: height did not reproduce the measured 31px).
- card (flagged: card-group-4 height did not reproduce 24px).
- card-2 (flagged: the recipe could not be rendered on its own).
- card-3 pricing card (flagged: width did not reproduce the measured 412px).
- card-4 (flagged: the render matched 100% of the original pixels, below the 96% required).
- card-5, card-7, card-8 and category-link (flagged: 91% pixel match).
- category-carousel (flagged: 94% pixel match).
- The mobile footers, as noted in the responsive section.
Unverifiable recipe. card-6 (not verifiable: the media placed in it covers most of it and nothing else differs, so the comparison could not be judged).
Off-token component colors. Recipes use #0D0C22 as text and dark-button fill, #F8F7F4 on the tab-cta pill and #3D3D4E on card-4-text-2. None of these are in the token palette. The tokens normalize toward ink, so confirm before introducing them.
No spacing base or section rhythm. No base spacing step and no vertical section padding were measured. Layout numbers come only from component padding and the footer grid.
Overlay shadows are page-sampled only. The mega-menu shadows (rgba(0, 0, 0, 0.1) 0px 20px 48px 0px, rgba(0, 0, 0, 0.15) 2px 2px 20px 0px) and rgba(0, 0, 0, 0.17) 0px 4px 4px 0px were not tied to a recipe.
States not captured. Hover states on cards and thumbnails (overlays, reveal actions), active and pressed states, and disabled states were not captured.
Motion not captured. Animation, transitions and carousel motion were not measured.
Authenticated surfaces not reached. Five public pages were captured successfully. Dashboards, upload flows, messaging and checkout were not.
Responsive coverage is thin. Only two viewports were captured, so breakpoints and tablet layouts are unknown.

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

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

Serupa dengan ini

Lihat semua

Komunitas, Sosial & Personal · Social Network

Snapchat

Situs web Snapchat menggunakan tema terang berkontras tinggi yang berpusat pada warna kuning merek ikoniknya #FFFC00, permukaan utama hampir hitam (#121314), dan latar halaman putih yang bersih. Desainnya memadukan Avenir Next (utama) dengan Graphik (sekunder) untuk hierarki tipografi yang ramah namun tetap tertata. Elemen interaksi seperti tombol, pill, dan tag menggunakan radius penuh (100px), sedangkan input memakai radius 5px yang halus. Navigasi berupa pill mengambang dengan bayangan lembut. Konten ditampilkan dalam kartu media besar dengan teks putih di atasnya, menciptakan tata letak yang imersif dan menonjolkan pratinjau aplikasi. Kepadatan keseluruhannya sedang, dengan spasi yang lapang dan hierarki visual yang jelas, menjembatani konvensi UI pemasaran dan UI produk.

AI & Machine Learning · AI Products & Assistants

Paperclip

Paperclip är en plattform för hantering av AI-agenter med en djärv design på mörk bakgrund, förankrad i en nästan svart bakgrund (#0a0a0a) och vit förgrundstext (#ffffff). Hjältesektionen definieras av en livfull flerfärgad gradientillustration av staplade pill- och kapselformer i magenta, violett, turkos, orange och gul, vilket skapar en kromatisk, energisk visuell identitet mot den mörka ytan. Typografin kombinerar Inter Tight (kondenserade, tunga rubriker med negativ bokstavsavstånd), Inter (brödtext och gränssnitt) och JetBrains Mono (kod och statusvisning). Den primära knappen är en vit pillerformad knapp på mörk bakgrund. Ett semantiskt grönt statussystem (#22c55e) signalerar agenters och uppgiftens tillstånd genom hela produktgränssnittet. Navigeringen är minimalistisk och platt, med en subtil nedre kantlinje.

Perjalanan, Transportasi & Logistik

Airbnb

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

Perdagangan & Ritel · E-commerce Store

IKEA

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

Software & SaaS · Productivity & Notes

Notion

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

Developer & Infrastruktur · Developer Tools & IDEs

Railway

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

Design System Dribbble

Komponen

Buttons9

Inputs3

Cards8

Extras7

Headers4

Footers4

Overview

Colors

Brand & Accent

Ink & Text

Surface & Hairlines

Component & State Colors

Gradients

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

Inputs

Cards

Category link

Like buttons

Headers

Footers

Dropdown menu

Category carousel

Tabs

Dropdown

Do's and Don'ts

Do

Don't

Responsive Behavior

Scope

What Changes on Mobile

Touch Targets

Iteration Guide

Known Gaps

Serupa dengan ini

Snapchat

Paperclip

Airbnb

IKEA

Notion

Railway