Dribbble Design System

dribbble.com

PROEngine v4

Visual system

100% confidence

93% confidence

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% confidence

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% confidence

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

Components

Button9

99% match

ghost · desktop

Root height is 47px, the site has 31px; Icon width is 47px, the site has 31px and 1 more.

At rest100% match3 of 34 measurements differ

Original

Render

Hover100% match18 measurements match

Original

Render

Focus99% match18 measurements match

Original

Render

Recipe in DESIGN.md

99% match

ghost · desktop

At rest99% match27 measurements match

Original

Render

Hover99% match22 measurements match

Original

Render

Focus99% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

ghost · desktop

At rest100% match38 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

99% match

ghost · desktop

At rest99% match24 measurements match

Original

Render

Hover99% match18 measurements match

Original

Render

Focus99% match18 measurements match

Original

Render

Recipe in DESIGN.md

27% match

primary · desktop

On focus, it renders 27% like the site, below the 97% bar.

At rest99% match21 measurements match

Original

Render

Focus27% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match38 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

99% match

secondary · desktop

At rest99% match24 measurements match

Original

Render

Hover99% match18 measurements match

Original

Render

Focus99% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match39 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

secondary · desktop

At rest100% match38 measurements match

Original

Render

Hover100% match22 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

Input3

100% match

desktop

At rest100% match22 measurements match

Original Input on the site, at rest — Original

Isolated render of Input, at rest — Render

Focus100% match18 measurements match

Original Input on the site, focus — Original

Isolated render of Input, focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match22 measurements match

Original Input (2) on the site, at rest — Original

Isolated render of Input (2), at rest — Render

Focus100% match18 measurements match

Original Input (2) on the site, focus — Original

Isolated render of Input (2), focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match22 measurements match

Original Input (3) on the site, at rest — Original

Isolated render of Input (3), at rest — Render

Focus100% match18 measurements match

Original Input (3) on the site, focus — Original

Isolated render of Input (3), focus — Render

Recipe in DESIGN.md

Card8

96% match

desktop

Group 4 height is 16px, the site has 24px; Group 5 y is 239px, the site has 231px and 8 more.

At rest100% match10 of 252 measurements differ

Original Card on the site, at rest — Original

Isolated render of Card, at rest — Render

At rest, instance 296% match10 of 252 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 3100% match10 of 252 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 4100% match10 of 252 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 5100% match10 of 252 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 6100% match10 of 252 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Not checked

desktop

The recipe could not be rendered on its own.

Nothing was compared for this component.

Recipe in DESIGN.md

95% match

desktop

Root width is 48px, the site has 412px; Group width is 0px, the site has 364px and 30 more.

At rest100% match32 of 616 measurements differ

Original Card (3) on the site, at rest — Original

Isolated render of Card (3), at rest — Render

Hover100% match18 measurements match

Original Card (3) on the site, hover — Original

Isolated render of Card (3), hover — Render

Focus100% match1 of 18 measurements differ

Original Card (3) on the site, focus — Original

Isolated render of Card (3), focus — Render

At rest, instance 295% match32 of 616 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 395% match32 of 616 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

The check failed without a recorded difference.

At rest100% match287 measurements match

Original Card (4) on the site, at rest — Original

Isolated render of Card (4), at rest — Render

At rest, instance 2100% match287 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match287 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match287 measurements match

Original

No image stored

Render

No image stored

At rest, instance 5100% match287 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

87% match

desktop

It renders 91% like the site, below the 96% bar.

At rest91% match83 measurements match

Original Card (5) on the site, at rest — Original

Isolated render of Card (5), at rest — Render

Focus87% match18 measurements match

Original Card (5) on the site, focus — Original

Isolated render of Card (5), focus — Render

At rest, instance 291% match83 measurements match

Original

No image stored

Render

No image stored

At rest, instance 391% match83 measurements match

Original

No image stored

Render

No image stored

At rest, instance 491% match83 measurements match

Original

No image stored

Render

No image stored

At rest, instance 591% match83 measurements match

Original

No image stored

Render

No image stored

At rest, instance 694% match83 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

The check failed without a recorded difference.

At rest100% match122 measurements match

Original Card (6) on the site, at rest — Original

Isolated render of Card (6), at rest — Render

At rest, instance 2100% match122 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match122 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match122 measurements match

Original

No image stored

Render

No image stored

At rest, instance 5100% match122 measurements match

Original

No image stored

Render

No image stored

At rest, instance 6100% match122 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

86% match

desktop

It renders 91% like the site, below the 96% bar.

At rest91% match83 measurements match

Original Card (7) on the site, at rest — Original

Isolated render of Card (7), at rest — Render

Focus86% match18 measurements match

Original Card (7) on the site, focus — Original

Isolated render of Card (7), focus — Render

At rest, instance 291% match83 measurements match

Original

No image stored

Render

No image stored

At rest, instance 391% match83 measurements match

Original

No image stored

Render

No image stored

At rest, instance 494% match83 measurements match

Original

No image stored

Render

No image stored

At rest, instance 590% match83 measurements match

Original

No image stored

Render

No image stored

At rest, instance 691% match83 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

91% match

desktop

It renders 91% like the site, below the 96% bar.

At rest91% match83 measurements match

Original Card (8) on the site, at rest — Original

Isolated render of Card (8), at rest — Render

At rest, instance 292% match83 measurements match

Original

No image stored

Render

No image stored

At rest, instance 392% match83 measurements match

Original

No image stored

Render

No image stored

At rest, instance 491% match83 measurements match

Original

No image stored

Render

No image stored

At rest, instance 592% match83 measurements match

Original

No image stored

Render

No image stored

At rest, instance 692% match83 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Extra7

94% match

desktop

It renders 94% like the site, below the 96% bar.

At rest94% match842 measurements match

Original Category carousel on the site, at rest — Original

Isolated render of Category carousel, at rest — Render

Recipe in DESIGN.md

86% match

desktop

It renders 91% like the site, below the 96% bar.

At rest91% match83 measurements match

Original Category link on the site, at rest — Original

Isolated render of Category link, at rest — Render

Focus86% match18 measurements match

Original Category link on the site, focus — Original

Isolated render of Category link, focus — Render

At rest, instance 291% match83 measurements match

Original

No image stored

Render

No image stored

At rest, instance 391% match83 measurements match

Original

No image stored

Render

No image stored

At rest, instance 491% match83 measurements match

Original

No image stored

Render

No image stored

At rest, instance 591% match83 measurements match

Original

No image stored

Render

No image stored

At rest, instance 691% match83 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

98% match

desktop

At rest100% match39 measurements match

Original Dropdown on the site, at rest — Original

Isolated render of Dropdown, at rest — Render

Hover100% match22 measurements match

Original Dropdown on the site, hover — Original

Isolated render of Dropdown, hover — Render

Focus98% match22 measurements match

Original Dropdown on the site, focus — Original

Isolated render of Dropdown, focus — Render

Recipe in DESIGN.md

99% match

desktop

At rest99% match842 measurements match

Original Dropdown menu on the site, at rest — Original

Isolated render of Dropdown menu, at rest — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match34 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

99% match

desktop

At rest100% match34 measurements match

Original

Render

Focus99% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match202 measurements match

Original Tabs on the site, at rest — Original

Isolated render of Tabs, at rest — Render

Recipe in DESIGN.md

Header4

99% match

desktop

At rest99% match201 measurements match

Original Header (inner) on the site, at rest — Original

Isolated render of Header (inner), at rest — Render

Hovernot checked

Original Header (inner) on the site, hover — Original

Isolated render of Header (inner), hover — Render

Hover on nav link99% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

99% match

desktop

At rest99% match201 measurements match

Original Header (landing) on the site, at rest — Original

Isolated render of Header (landing), at rest — Render

Hovernot checked

Original Header (landing) on the site, hover — Original

Isolated render of Header (landing), hover — Render

Focusnot checked

Original Header (landing) on the site, focus — Original

Isolated render of Header (landing), focus — Render

Focus on nav link99% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link99% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Not checked

mobile

No recipe was made: the element was not visible.

Nothing was compared for this component.

Not checked

mobile

No recipe was made: the element was not visible.

Nothing was compared for this component.

Footer4

99% match

desktop

At rest99% match1887 measurements match

Original Footer (inner) on the site, at rest — Original

Isolated render of Footer (inner), at rest — Render

Recipe in DESIGN.md

99% match

desktop

At rest99% match1887 measurements match

Original Footer (landing) on the site, at rest — Original

Isolated render of Footer (landing), at rest — Render

Focusnot checked

Original Footer (landing) on the site, focus — Original

Isolated render of Footer (landing), focus — Render

Focus on link 299% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link 399% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link99% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

Inner height is 314px, the site has 342px; Group 6 height is 84px, the site has 112px.

At rest100% match2 of 1925 measurements differ

Recipe in DESIGN.md

100% match

mobile

Inner height is 312px, the site has 340px; Group 6 height is 84px, the site has 112px.

At rest100% match2 of 1887 measurements differ

Focusnot checked

Focus on link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link 3100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in 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.

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

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

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

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

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

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

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)

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

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

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.

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

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

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

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

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

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

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

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.

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.

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.

Extracted from Dribbble’s public website, not official brand guidelines.

More like this

Browse all

Community, Social & Personal · Social Network

Snapchat

Snapchat's web presence uses a high-contrast light theme anchored by its iconic #FFFC00 brand yellow, near-black (#121314) primary surfaces, and a clean white page background. The design pairs Avenir Next (primary) with Graphik (secondary) for a friendly yet structured typographic hierarchy. Interaction elements — buttons, pills, and tags — use fully rounded (100px) radii, while inputs use a subtle 5px radius. Navigation is a floating pill with a soft drop shadow. Content is presented in large media cards with overlaid white text, creating an immersive, app-preview-forward layout. The overall density is moderate, with generous spacing and a clear visual hierarchy that bridges marketing and product UI conventions.

AI & Machine Learning · AI Products & Assistants

Paperclip

Paperclip is an AI agent management platform with a bold dark-canvas design anchored by a near-black (#0a0a0a) background and white (#ffffff) foreground text. The hero is defined by a vivid multi-color gradient illustration of stacked pill/capsule shapes in magenta, violet, teal, orange, and yellow — creating a chromatic, energetic visual identity against the dark field. Typography pairs Inter Tight (condensed, heavy headlines with negative letter-spacing) with Inter (body/UI) and JetBrains Mono (code/status). The primary CTA uses a white pill-shaped button on dark background. A semantic green (#22c55e) status system signals agent and task states throughout the product UI. Navigation is minimal and flat with a subtle bottom border.

Travel, Transport & Logistics

Airbnb

Airbnb's design system is built around a single proprietary variable font (Airbnb Cereal VF), a near-monochrome neutral palette anchored by deep charcoal (#222222) and light grays, with the brand's signature "Rausch" coral-pink (#ff385c) reserved exclusively for primary CTAs and the logo. The layout is a responsive photo-card grid with generous image-to-text ratios, soft 20px rounded corners on cards, and a multi-layer ambient shadow system that creates subtle depth without harsh contrast. The search bar is a prominent pill-shaped container that unifies the core user action.

Commerce & Retail · E-commerce Store

IKEA

IKEA's global homepage uses a bold, flat design system anchored by the iconic IKEA Yellow (#ffdb00) as the primary action surface and IKEA Blue (#0058a3) as the brand logo accent. The entire typographic system is built on a single custom typeface — Noto IKEA — spanning weights 400 and 700 across a tightly defined scale from 14px body text to 51px display headings. Elevation is conveyed entirely through color contrast and layout structure rather than shadows. The layout uses a max-width container of 90rem with a 1.5rem desktop grid gap, and a consistent 8px border-radius token applied to interactive elements. The off-white background (#fffefb) provides warmth against the stark #111111 text, creating a high-contrast, accessible reading experience.

Software & SaaS · Productivity & Notes

Notion

Notion's marketing homepage pairs a deep navy (#02093a) hero section with a light (#f6f5f4) body, using a custom typeface (NotionInter) across all text roles. The design employs a 12-column grid with 28px gutters, a dual-radius language (8px for cards, 9999px for pills), and a multi-layer progressive shadow system for floating UI elements. Brand blue (#2537b1) drives CTAs and accent highlights, while a semantic gray-scale ladder (gray-200 through gray-900) structures all text and surface hierarchy.

Developer & Infrastructure · Developer Tools & IDEs

Railway

Railway's design system is a dark-first developer platform UI anchored in deep near-black navy surfaces (#13111c, #0b0b0f), high-contrast off-white text (#f7f7f8), and a distinctive purple brand accent (#853bce / #553f83). The hero uses IBM Plex Serif for editorial weight, while Inter handles all UI copy and JetBrains Mono / SF Mono serve code contexts. Elevation is achieved through inset white-glow borders (rgba(255,255,255,0.2) 1.5px inset) rather than drop shadows, giving the UI a glass-panel aesthetic. The spacing system is 4px-based with a strong 8/12/16/24/32 rhythm. Border radii are tight (4px dominant) with selective 8px and 16px for cards and hero containers.

Dribbble Design System

Button9

Input3

Card8

Extra7

Header4

Footer4

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

Button, secondary

Button, ghost

Button, ghost (2)

Input

Card

Card (2)

Category link

Like button

Header (landing)

Footer (landing)

Button, secondary (2)

Button, ghost (3)

Input (2)

Card (3)

Dropdown menu

Header (inner)

Button, primary

Button, secondary (3)

Button, secondary (4)

Button, ghost (4)

Input (3)

Card (4)

Card (5)

Like button (2)

Card (6)

Card (7)

Category carousel

Tabs

Dropdown

Card (8)

Footer (inner)

Do's and Don'ts

Do

Don't

Responsive Behavior

Scope

What Changes on Mobile

Touch Targets

Iteration Guide

Known Gaps

More like this

Snapchat

Paperclip

Airbnb

IKEA

Notion

Railway