IKEA 디자인 시스템

PRO엔진 v4

IKEA의 글로벌 홈페이지는 굵고 평평한 디자인 시스템을 바탕으로 하며, 상징적인 IKEA Yellow(#ffdb00)를 주요 액션 영역으로, IKEA Blue(#0058a3)를 브랜드 로고 강조색으로 사용합니다. 전체 타이포그래피 체계는 Noto IKEA라는 단일 커스텀 서체로 구성되며, 400과 700 두께를 사용해 본문 14px에서 디스플레이 제목 51px까지 촘촘하게 정의된 크기 체계를 따릅니다. 입체감은 그림자가 아니라 색의 대비와 레이아웃 구조를 통해 전달됩니다. 레이아웃은 최대 너비 90rem의 컨테이너와 데스크톱 기준 1.5rem의 그리드 간격을 사용하며, 상호작용 요소에는 8px 모서리 반경 토큰을 일관되게 적용합니다. 오프화이트 배경(#fffefb)은 짙은 #111111 텍스트와 어우러져 따뜻함을 더하고, 대비가 높아 읽기 쉽고 접근성이 좋은 화면을 만들어 냅니다.

비주얼 시스템

100% 신뢰도

hero-displayDesign is intelligence made visibleOmani Rial82.2857px / 700 / 1.1

display-lgDesign is intelligence made visibleOmani Rial45.7143px / 700 / 1.1

display-mdDesign is intelligence made visibleOmani Rial36.5714px / 700 / 1.15

display-md-relaxedDesign is intelligence made visibleOmani Rial36.5714px / 700 / 1.25

body-lgDesign is intelligence made visibleOmani Rial20px / 400 / 1.6

bodyDesign is intelligence made visibleOmani Rial16px / 400 / 1.5

body-strongDesign is intelligence made visibleOmani Rial16px / 700 / 1.15

label-strongDesign is intelligence made visibleOmani Rial16px / 700 / 1

buttonDesign is intelligence made visibleOmani Rial16px / 400 / 1

body-smDesign is intelligence made visibleOmani Rial14px / 400 / 1.55

button-smDesign is intelligence made visibleOmani Rial14px / 400 / 1.5

captionDesign is intelligence made visibleOmani Rial13.7143px / 400 / 1.8

microDesign is intelligence made visibleOmani Rial13.3333px / 400 / 1.5

100% 신뢰도

md · 8px

컴포넌트

Buttons3

52% 일치

ghost · desktop

사이트와의 렌더링 일치도가 52%로, 기준치 97%에 못 미쳐요.

기본 상태52% 일치측정값 55개 일치

원본

렌더

호버52% 일치측정값 18개 일치

원본

렌더

포커스54% 일치측정값 18개 일치

원본

렌더

DESIGN.md의 레시피

54% 일치

ghost · desktop

사이트와의 렌더링 일치도가 55%로, 기준치 97%에 못 미쳐요.

기본 상태55% 일치측정값 55개 일치

원본

렌더

호버55% 일치측정값 18개 일치

원본

렌더

포커스54% 일치측정값 18개 일치

원본

렌더

DESIGN.md의 레시피

94% 일치

secondary · desktop

사이트와의 렌더링 일치도가 94%로, 기준치 97%에 못 미쳐요.

기본 상태94% 일치측정값 102개 일치

호버94% 일치측정값 19개 일치

포커스94% 일치측정값 19개 일치

DESIGN.md의 레시피

Card1

4% 일치

desktop

사이트와의 렌더링 일치도가 9%로, 기준치 96%에 못 미쳐요.

기본 상태9% 일치측정값 262개 일치

기본 상태, 인스턴스 24% 일치측정값 262개 일치

원본

저장된 이미지 없음

렌더

저장된 이미지 없음

기본 상태, 인스턴스 310% 일치측정값 262개 일치

원본

저장된 이미지 없음

렌더

저장된 이미지 없음

기본 상태, 인스턴스 45% 일치측정값 262개 일치

원본

저장된 이미지 없음

렌더

저장된 이미지 없음

DESIGN.md의 레시피

Extras3

100% 일치

desktop

List height: 0px (사이트: 54px); Item width: 0px (사이트: 87px) 외 10개.

기본 상태100% 일치측정값 132개 중 12개 다름

DESIGN.md의 레시피

100% 일치

desktop

기본 상태100% 일치측정값 292개 일치

DESIGN.md의 레시피

100% 일치

desktop

Item width: 0px (사이트: 113px).

기본 상태100% 일치측정값 231개 중 1개 다름

DESIGN.md의 레시피

Headers2

95% 일치

desktop

Inner y: 30px (사이트: 21px); Inner height: 36px (사이트: 54px) 외 6개.

기본 상태100% 일치측정값 164개 중 8개 다름

포커스확인 안 됨

cta의 포커스95% 일치측정값 20개 일치

원본

저장된 이미지 없음

렌더

저장된 이미지 없음

logo의 포커스100% 일치측정값 18개 일치

원본

저장된 이미지 없음

렌더

저장된 이미지 없음

DESIGN.md의 레시피

88% 일치

mobile

Inner y: 16px (사이트: 12px); Inner height: 36px (사이트: 44px).

기본 상태95% 일치측정값 142개 중 2개 다름

포커스확인 안 됨

cta의 포커스88% 일치측정값 20개 일치

원본

저장된 이미지 없음

렌더

저장된 이미지 없음

logo의 포커스95% 일치측정값 18개 일치

원본

저장된 이미지 없음

렌더

저장된 이미지 없음

DESIGN.md의 레시피

Footers2

100% 일치

desktop

Group height: 134px (사이트: 732px); Inner height: 0px (사이트: 492px) 외 8개.

기본 상태100% 일치측정값 147개 중 10개 다름

DESIGN.md의 레시피

100% 일치

mobile

Group height: 102px (사이트: 657px); Inner height: 0px (사이트: 145px) 외 8개.

기본 상태100% 일치측정값 147개 중 10개 다름

DESIGN.md의 레시피

Input1

확인 안 됨

desktop

레시피를 만들지 않았어요: 페이지에서 요소를 찾을 수 없었어요.

이 컴포넌트는 비교한 항목이 없어요.

DESIGN.md

IKEA

Overview

IKEA Global reads like a warm, plain-spoken magazine rather than a storefront. The page is an off-white canvas, Warm Canvas (surface, #FFFEFB), carrying full-bleed lifestyle photography of real rooms and people. A single saturated block of IKEA Yellow (primary, #FFDB00) holds the shopping call-to-action. Everything else stays near-black on cream, so the yellow is unmistakable. Headlines are short and conversational ('Welcome to the wild side!'), set heavy and tightly tracked, and they sit over photography rather than in separate text bands.

Density is low and editorial. Large image tiles in a modular two-column feed do most of the talking. Text is confined to an eyebrow line plus a bold headline anchored to the bottom-left of each tile. Chrome is minimal: a cream header with a short text nav, and a long solid-black footer with white links.

Hierarchy comes from three levers: scale (an 82px hero headline down to 13px micro text), weight (only 400 and 700 exist), and color blocking (cream page, yellow CTA panel, black footer). Shadows play no part. Depth comes from photography and from flat color fields.

Key Characteristics:

Off-white surface (#FFFEFB) canvas instead of pure white; text is ink (#111111), not pure black.
One signature accent, primary IKEA Yellow (#FFDB00), reserved for the shopping CTA block and yellow buttons.
A single humanist sans stack, Omani Rial falling through to Noto IKEA and Noto Sans, at two weights only: 400 and 700.
Display type uses negative tracking that grows with size (-3.55px at 82px, -1.10px at 36px).
Body and small text get generous line-heights of 1.5–1.8.
One corner radius, rounded.md (8px), on image tiles and panels.
Flat elevation: no box-shadows or backdrop blur anywhere. Separation comes from photography, color blocks and 1px hairlines.
A heavy solid-black (surface-dark, #000000) footer with on-dark (#FFFFFF) links closes every page.

Colors

The palette is deliberately small: warm neutrals, one loud brand yellow, and a few functional accents. Most of the page is ink on surface.

Brand & Accent

IKEA Yellow (primary, #FFDB00): the signature. Use it for the shopping CTA panel and yellow buttons (button-secondary fill). Never use it for body text or large decorative washes beyond the CTA block.
Pale Yellow (primary-tint, #FFF094): the hover fill of yellow buttons (button-secondary hover) and a soft secondary surface.
Warm Orange (accent-orange, #FFAE66): an occasional promotional or illustrative fill. Keep it rare.
Availability Green (success, #1A7E3B): positive or availability actions only. It appears on an interactive element, never as a decorative fill.

Surface

Warm Canvas (surface, #FFFEFB): the page background and header fill (header, header-mobile). It is softer than pure white; do not replace it with #FFFFFF for the page.
Footer Black (surface-dark, #000000): the full-width footer background (footer, footer-mobile).

Text

Ink (ink, #111111): default text, headlines and dark button fills (button-ghost).
Pure Black (ink-black, #000000): small utility text such as the header skip/CTA link (header-cta).
Soft Ink (ink-soft, #333333): measured only as the hover fill of the dark button (button-ghost hover). It is a state color, not page text.
Muted Grey (muted, #818181): secondary metadata and de-emphasized labels, used sparingly.
On Primary (on-primary, #111111): text on yellow.
On Dark (on-dark, #FFFFFF): text and links on the black footer and on photo captions.
Link Blue (link, #0000EE): the browser-default link color, measured on the logo link (header-logo). It is not a designed text color; do not style visible links with it.

Hairlines & Borders

Hairline Grey (hairline, #DADADA): thin dividers and quiet control outlines, such as the divider above the store selector in the yellow panel.

Component & State Colors

These were measured on recipes rather than in page sampling:

ink-soft (#333333) is the hover fill of button-ghost.
#F5F5F5 is the hover fill of the white button button-ghost-2.
#FFFFFF is the resting fill of button-ghost-2.

Gradients

There are no brand gradients. The only gradient-like treatment is a dark scrim at the bottom of photo tiles, observed in the screenshots, that keeps white captions legible. It is an image overlay, not a palette color.

Typography

Font Family

One family does everything. The computed stack is "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif. The tokens name it Omani Rial. The leading currency-named faces appear to be glyph-subset fonts, so Latin text effectively renders in Noto IKEA, IKEA's proprietary humanist sans. Headlines, body, navigation, buttons and footer all share it.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`hero-display`	82.2857px	700	1.1	-3.55102px	Single hero headline
`display-lg`	45.7143px	700	1.1	-1.59184px	Major section headings (h2)
`display-md`	36.5714px	700	1.15	-1.10204px	Story tile headlines; the most common display size
`display-md-relaxed`	36.5714px	700	1.25	-1.10204px	Multi-line or linked tile headlines needing more air
`body-lg`	20px	400	1.6	normal	Lead text and footer navigation links (`navigation-2`)
`body`	16px	400	1.5	normal	Default paragraphs, links, list items
`body-strong`	16px	700	1.15	normal	Inline emphasis, short bold labels
`label-strong`	16px	700	1	normal	Single-line bold labels inside buttons (`button-secondary-label-2`)
`button`	16px	400	1	normal	Primary button labels (`button-secondary`)
`body-sm`	14px	400	1.55	normal	Small links, footer legal and meta lists (`navigation-3`, `footer-text`)
`button-sm`	14px	400	1.5	normal	Compact button labels
`caption`	13.7143px	400	1.8	0.0612245px	Eyebrows and captions above tile headlines
`micro`	13.3333px	400	1.5	normal	Small pill/overlay buttons (`button-ghost`, `button-ghost-2`)

Principles

Two weights only. 400 for reading and 700 for display and emphasis. Weight 500/600 is deliberately absent; never add it.
Tracking tightens with size. Display sizes carry negative letter-spacing that scales with size (-3.55px at 82px, -1.59px at 45px, -1.10px at 36px). Text at 20px and below stays at normal. caption is the one exception, with a hair of positive tracking.
Leading opens as size shrinks. Display lines sit at 1.1–1.25, body at 1.5–1.6, and captions at 1.8. Single-line UI labels (button, label-strong) use 1.
Fractional sizes are real. The 82.2857 / 45.7143 / 36.5714 / 13.7143 values come from a rem-based scale; keep them rather than rounding, so proportions stay intact.

Note on Font Substitutes

Noto IKEA is proprietary. Use Noto Sans as the open-source stand-in; it is already the fallback in IKEA's own stack, so metrics and character are close. Load weights 400 and 700 only. Keep the negative display tracking from the tokens, and check that bold headlines at hero-display do not feel wider than the original; if they do, tighten tracking slightly rather than dropping the size.

Layout

Spacing System

No layout measurement was verified. No spacing tokens survived grounding, so there is no base step, no named spacing scale and no section-padding-y. Build spacing on a consistent small increment and keep paddings inside tiles generous and uniform. Treat every value you choose as an assumption to check against the live site.

Grid & Container

No container max width or grid gap was verified as a token.

Desktop: the screenshots show a modular, masonry-like story feed with wide outer margins and small, even gutters. The hero splits into a large lifestyle image beside the yellow shopping CTA card. Below it, tall tiles alternate in staggered heights, interrupted by one full-width banner.
Tile captions: captions sit bottom-left inside each tile, with a caption eyebrow above a display-md headline.
Header: the top nav is a short row of plain text links beside the logo.

Whitespace Philosophy

Whitespace is used in big, deliberate gaps: a large empty band separates the hero from the story feed. Inside the feed, gutters stay tight so the photos read as one continuous wall. Keep text off the canvas wherever possible; let images fill tiles edge to edge and place copy on the image over the dark scrim. The cream canvas should feel calm around the photography, never crowded with extra UI.

Elevation & Depth

Level	Treatment	Use
Flat	No box-shadow and no backdrop-filter; content sits directly on `surface` (#FFFEFB)	Page canvas, image tiles (`card`), header (`header`), footer (`footer`)
Color block	A solid fill change: `primary` (#FFDB00) or `surface-dark` (#000000)	The yellow CTA panel and the black footer, which separate by color rather than lift
Hairline	1px solid borders	`button-secondary` carries a `border-top` of 1px solid #FFFEFB; `header-cta` carries 1px solid #000000 on its right and bottom edges; `hairline` (#DADADA) dividers inside the yellow panel
Image scrim	Dark bottom gradient over photography (observed in screenshots, no measured value)	Legibility for white captions on photo tiles

Shadow philosophy. The design uses no shadows. No box-shadow or backdrop blur was measured on any recipe or on the page, and the header is fixed without blur. Depth is photographic: the image does the work, and color fields (yellow panel, black footer) create zones without lifting anything. The small solid-black circular arrow and play buttons only look like they float because of contrast, not shadow. When you need separation, reach for a hairline rule or a surface color change, never a drop shadow.

Shapes

Border Radius Scale

Token	Value	Use
`rounded.md`	8px	Image tiles and their inner image blocks (`card-group`, `card-group-2`), the yellow CTA panel, and general containers

The geometry is soft-rectangular and almost monotone: one radius, applied everywhere a surface has corners. That consistency is the shape language; don't introduce a second rounding step for tiles or panels.

Circles are the one deliberate contrast. Small solid-black circular icon buttons (arrow, play) sit on photography, and a dot-grid motif on one story tile repeats the circle. No circle or pill radius token was measured, so build these as true circles (radius at half the size) and only for icon buttons. Pill shapes are not part of the measured system. The logo's rounded oval is artwork; do not derive a radius from it.

Components

Each component below was distilled from the live page: the recipe is a standalone, placeholder-filled reproduction with literal values, and every frontmatter key named in the anatomy carries the same measurements. A verified component reproduced the original in every check; a flagged one is shipped with the reason it did not; one marked not verifiable could not be compared with the original, which says nothing about the recipe.

Buttons

Button, secondary

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

Anatomy

button-secondary: the component root, a <button> (.c-button-secondary)
button-secondary-group: inner flex row (.c-button-secondary__group)
button-secondary-group-2: inner group (.c-button-secondary__group-2)
button-secondary-label: label text, 6 characters (.c-button-secondary__label)
button-secondary-label-2: label text, 7 characters (.c-button-secondary__label-2)
button-secondary-label-3: label text, 4 characters (.c-button-secondary__label-3)
button-secondary-group-3: inner group (.c-button-secondary__group-3)
button-secondary-icon: icon placeholder, 16x9px (.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__group">
      <span class="c-button-secondary__group-2">
        <span class="c-button-secondary__label">lorem</span>
        <span class="c-button-secondary__label-2">lorem i</span>
        <span class="c-button-secondary__label-3">lore</span>
      </span>
      <span class="c-button-secondary__group-3">
        <span class="c-button-secondary__icon" aria-hidden="true"></span>
      </span>
    </span>
  </button>
</div>

.c-button-secondary-scope {
  background-color: #FFDB00;
  color: #111111;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-button-secondary {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  min-height: 100px;
  padding: 16px 50px;
  position: relative;
  z-index: 2;
  background-color: #FFDB00;
  color: #111111;
  cursor: pointer;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: background 0.3s ease;
  border-top: 1px solid #FFFEFB;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.c-button-secondary__group {
  display: flex;
  align-items: center;
}

.c-button-secondary__group-2 {
  display: block;
  max-width: 70%;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.c-button-secondary__label-2 {
  display: inline;
  font-weight: 700;
}

.c-button-secondary__group-3 {
  display: block;
  max-width: 70%;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 8px;
  margin-left: auto;
}

.c-button-secondary__icon {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 9px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  transform: matrix(-1, 0, 0, -1, 0, 0);
  transition: transform 0.3s ease;
}

.c-button-secondary:hover {
  background-color: #FFF094;
}

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

.c-button-secondary:focus::before {
  content: "";
  display: block;
  width: 451px;
  height: 99px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 100;
  box-shadow: #111111 0px 0px 0px 1px inset, #FFFFFF 0px 0px 0px 3px inset, #111111 0px 0px 0px 4px inset;
}

States

hover (button-secondary-hover): background-color #FFF094
focus: outline none, ::before content "", ::before display block, ::before width 451px, ::before height 99px, ::before position absolute, ::before top 0px, ::before right 0px, ::before bottom 0px, ::before left 0px, ::before z-index 100, ::before box-shadow #111111 0px 0px 0px 1px inset, #FFFFFF 0px 0px 0px 3px inset, #111111 0px 0px 0px 4px inset

Button, ghost

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

Anatomy

button-ghost: the component root, a <button> (.c-button-ghost)
button-ghost-group: inner flex row (.c-button-ghost__group)
button-ghost-icon: icon placeholder, 12x14px (.c-button-ghost__icon)
button-ghost-label: label text, 81 characters (.c-button-ghost__label)

Recipe

HTML · CSS

<div class="c-button-ghost-scope">
  <button class="c-button-ghost" type="button">
    <div class="c-button-ghost__group">
      <span class="c-button-ghost__icon" aria-hidden="true"></span>
      <span class="c-button-ghost__label">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lore</span>
    </div>
  </button>
</div>

.c-button-ghost-scope {
  background-color: #FFFEFB;
  color: #111111;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 0px;
}

.c-button-ghost {
  display: block;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  padding: 0px;
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 10;
  background-color: #111111;
  color: #FFFFFF;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

.c-button-ghost__group {
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-button-ghost__icon {
  display: block;
  flex-shrink: 0;
  width: 12px;
  height: 14px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  margin-left: 2px;
}

.c-button-ghost__label {
  display: block;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.c-button-ghost:hover {
  background-color: #333333;
}

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

.c-button-ghost:focus::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 100;
  border-radius: 50%;
  box-shadow: #111111 0px 0px 0px 1px inset, #FFFFFF 0px 0px 0px 3px inset, #111111 0px 0px 0px 4px inset;
}

States

hover (button-ghost-hover): background-color #333333
focus: outline none, ::before content "", ::before display block, ::before width 56px, ::before height 56px, ::before position absolute, ::before top 0px, ::before right 0px, ::before bottom 0px, ::before left 0px, ::before z-index 100, ::before border-radius 50%, ::before box-shadow #111111 0px 0px 0px 1px inset, #FFFFFF 0px 0px 0px 3px inset, #111111 0px 0px 0px 4px inset

Button, ghost (2)

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

Anatomy

button-ghost-2: the component root, a <button> (.c-button-ghost-2)
button-ghost-2-group: inner flex row (.c-button-ghost-2__group)
button-ghost-2-icon: icon placeholder, 12x14px (.c-button-ghost-2__icon)
button-ghost-2-label: label text, 67 characters (.c-button-ghost-2__label)

Recipe

HTML · CSS

<div class="c-button-ghost-2-scope">
  <button class="c-button-ghost-2" type="button">
    <div class="c-button-ghost-2__group">
      <span class="c-button-ghost-2__icon" aria-hidden="true"></span>
      <span class="c-button-ghost-2__label">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusm</span>
    </div>
  </button>
</div>

.c-button-ghost-2-scope {
  background-color: #FFFEFB;
  color: #111111;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 0px;
}

.c-button-ghost-2 {
  display: block;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  padding: 0px;
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 10;
  background-color: #FFFFFF;
  color: #111111;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 13.3333px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

.c-button-ghost-2__group {
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-button-ghost-2__icon {
  display: block;
  flex-shrink: 0;
  width: 12px;
  height: 14px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  margin-left: 2px;
}

.c-button-ghost-2__label {
  display: block;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.c-button-ghost-2:hover {
  background-color: #F5F5F5;
}

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

.c-button-ghost-2:focus::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 100;
  border-radius: 50%;
  box-shadow: #111111 0px 0px 0px 1px inset, #FFFFFF 0px 0px 0px 3px inset, #111111 0px 0px 0px 4px inset;
}

States

hover (button-ghost-2-hover): background-color #F5F5F5
focus: outline none, ::before content "", ::before display block, ::before width 56px, ::before height 56px, ::before position absolute, ::before top 0px, ::before right 0px, ::before bottom 0px, ::before left 0px, ::before z-index 100, ::before border-radius 50%, ::before box-shadow #111111 0px 0px 0px 1px inset, #FFFFFF 0px 0px 0px 3px inset, #111111 0px 0px 0px 4px inset

Card

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

Anatomy

Group: 4 instances in a 1-column grid, 20px gap; the recipe carries the values they all share
card: the component root, a <div> (.c-card)
card-group: inner block (.c-card__group, 2 instances)
card-group-2: inner block (.c-card__group-2, 2 instances)
card-link: link (.c-card__link)
card-group-3: inner block (.c-card__group-3, 2 instances), content not captured
card-group-4: inner block (.c-card__group-4, 2 instances), content not captured
card-link-2: link (.c-card__link-2)
card-group-5: inner block (.c-card__group-5)

Recipe

HTML · CSS

<div class="c-card-scope">
  <div class="c-card">
    <div class="c-card__group">
      <div class="c-card__group-2">
        <a class="c-card__link" href="#">
          <div class="c-card__group-3"></div>
        </a>
        <div class="c-card__group-4"></div>
      </div>
    </div>
    <div class="c-card__group">
      <div class="c-card__group-2">
        <a class="c-card__link-2" href="#">
          <div class="c-card__group-3"></div>
        </a>
        <div class="c-card__group-4"></div>
        <div class="c-card__group-5"></div>
      </div>
    </div>
  </div>
</div>

.c-card-scope {
  background-color: #FFFEFB;
  color: #111111;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-card {
  display: inline-grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  border-spacing: 0px;
  color: #111111;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

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

.c-card__group-2 {
  display: block;
  width: 100%;
  height: 684px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 8px;
  cursor: pointer;
}

.c-card__link {
  display: flex;
  flex-direction: column;
  justify-content: end;
  box-sizing: border-box;
  width: 100%;
  padding: 24px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 1;
  cursor: pointer;
  text-decoration-line: none;
}

.c-card__group-3 {
  display: block;
  position: relative;
}

.c-card__group-4 {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.c-card__link-2 {
  display: flex;
  flex-direction: column;
  justify-content: end;
  box-sizing: border-box;
  width: 100%;
  padding: 24px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 1;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration-line: none;
}

.c-card__group-5 {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 0;
  background-image: linear-gradient(to top, #0000008C 80px, transparent 200px);
}

States

No hover or focus change was observed.

Navigation

Verification: flagged, the navigation-list height did not reproduce the measured 54px after 2 correction attempts.

Anatomy

navigation: the component root, a <nav> (.c-navigation)
navigation-list: inner flex row (.c-navigation__list)
navigation-item: inner group (.c-navigation__item, 4 instances)

Recipe

HTML · CSS

<div class="c-navigation-scope">
  <nav class="c-navigation">
    <ul class="c-navigation__list">
      <li class="c-navigation__item"></li>
      <li class="c-navigation__item"></li>
      <li class="c-navigation__item"></li>
      <li class="c-navigation__item"></li>
    </ul>
  </nav>
</div>

.c-navigation-scope {
  background-color: #FFFEFB;
  color: #111111;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-navigation {
  display: block;
  border-spacing: 0px;
  color: #111111;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-navigation__list {
  display: flex;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-navigation__item {
  display: list-item;
}

States

No hover or focus change was observed.

Verification: verified against the live page at desktop.

Anatomy

navigation-2: the component root, a <nav> (.c-navigation-2)
navigation-2-list: inner flex row (.c-navigation-2__list)
navigation-2-item: inner group (.c-navigation-2__item, 6 instances)
navigation-2-link: link, 19-character label (.c-navigation-2__link, 6 instances)
navigation-2-item-2: label text, 1 characters (.c-navigation-2__item-2, 5 instances)

Recipe

HTML · CSS

<div class="c-navigation-2-scope">
  <nav class="c-navigation-2">
    <ul class="c-navigation-2__list">
      <li class="c-navigation-2__item">
        <a class="c-navigation-2__link" href="#">lorem ipsum dolor s</a>
      </li>
      <li class="c-navigation-2__item-2">l</li>
      <li class="c-navigation-2__item">
        <a class="c-navigation-2__link" href="#">lorem ipsum dolo</a>
      </li>
      <li class="c-navigation-2__item-2">l</li>
      <li class="c-navigation-2__item">
        <a class="c-navigation-2__link" href="#">lorem ipsum dol</a>
      </li>
      <li class="c-navigation-2__item-2">l</li>
      <li class="c-navigation-2__item">
        <a class="c-navigation-2__link" href="#">lorem ipsum</a>
      </li>
      <li class="c-navigation-2__item-2">l</li>
      <li class="c-navigation-2__item">
        <a class="c-navigation-2__link" href="#">lorem ipsum dolor sit amet c</a>
      </li>
      <li class="c-navigation-2__item-2">l</li>
      <li class="c-navigation-2__item">
        <a class="c-navigation-2__link" href="#">lore</a>
      </li>
    </ul>
  </nav>
</div>

.c-navigation-2-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 32.4px;
}

.c-navigation-2 {
  display: block;
  border-spacing: 0px;
  color: #FFFFFF;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 32.4px;
}

.c-navigation-2__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0px;
  margin: 16px 0px 36px;
  list-style-type: none;
}

.c-navigation-2__item {
  display: list-item;
}

.c-navigation-2__link {
  display: inline;
  position: relative;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration-line: none;
}

.c-navigation-2__item-2 {
  display: block;
  margin-right: 24px;
  margin-left: 24px;
}

States

No hover or focus change was observed.

Verification: flagged, the navigation-3-item width did not reproduce the measured 113px after 2 correction attempts.

Anatomy

navigation-3: the component root, a <nav> (.c-navigation-3)
navigation-3-list: inner flex row (.c-navigation-3__list)
navigation-3-item: inner group (.c-navigation-3__item, 5 instances)
navigation-3-item-2: label text, 1 characters (.c-navigation-3__item-2, 4 instances)
navigation-3-link: link, 26-character label (.c-navigation-3__link, 4 instances)

Recipe

HTML · CSS

<div class="c-navigation-3-scope">
  <nav class="c-navigation-3">
    <ul class="c-navigation-3__list">
      <li class="c-navigation-3__item"></li>
      <li class="c-navigation-3__item-2">l</li>
      <li class="c-navigation-3__item">
        <a class="c-navigation-3__link" href="#">lorem ipsum dolor sit amet</a>
      </li>
      <li class="c-navigation-3__item-2">l</li>
      <li class="c-navigation-3__item">
        <a class="c-navigation-3__link" href="#">lorem ipsum dolor sit amet cons</a>
      </li>
      <li class="c-navigation-3__item-2">l</li>
      <li class="c-navigation-3__item">
        <a class="c-navigation-3__link" href="#">lorem i</a>
      </li>
      <li class="c-navigation-3__item-2">l</li>
      <li class="c-navigation-3__item">
        <a class="c-navigation-3__link" href="#">lorem</a>
      </li>
    </ul>
  </nav>
</div>

.c-navigation-3-scope {
  background-color: #000000;
  color: #FFFFFF;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21.98px;
}

.c-navigation-3 {
  display: block;
  border-spacing: 0px;
  color: #FFFFFF;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21.98px;
}

.c-navigation-3__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0px;
  margin: 16px 0px 0px;
  list-style-type: none;
}

.c-navigation-3__item {
  display: list-item;
}

.c-navigation-3__item-2 {
  display: block;
  margin-right: 20px;
  margin-left: 20px;
}

.c-navigation-3__link {
  display: inline;
  position: relative;
  color: #FFFFFF;
  cursor: pointer;
  text-decoration-line: none;
}

States

No hover or focus change was observed.

Header

Verification: desktop flagged, the header-inner y did not reproduce the measured 21px after 2 correction attempts; mobile flagged, the header-mobile-inner y did not reproduce the measured 12px after 2 correction attempts.

Anatomy

header: the component root, a <header> (.c-header)
header-group: inner flex row (.c-header__group)
header-cta: link, 20-character label (.c-header__cta)
header-inner: inner flex row (.c-header__inner)
header-group-2: inner flex row (.c-header__group-2)
header-logo: link (.c-header__logo)
header-logo-image: image placeholder, 89x36px (.c-header__logo-image)
header-group-3: inner block (.c-header__group-3)

Desktop recipe

HTML · CSS

<div class="c-header-scope">
  <header class="c-header">
    <div class="c-header__group">
      <a class="c-header__cta" href="#">lorem ipsum dolor si</a>
    </div>
    <div class="c-header__inner">
      <div class="c-header__group-2">
        <a class="c-header__logo" href="#">
          <span class="c-header__logo-image" aria-hidden="true"></span>
        </a>
        <div class="c-header__group-3"></div>
      </div>
    </div>
  </header>
</div>

.c-header-scope {
  background-color: #FFFEFB;
  color: #111111;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 96px;
  position: fixed;
  top: 0px;
  z-index: 11;
  background-color: #FFFEFB;
  color: #111111;
  transform: matrix(1, 0, 0, 1, 0, -96);
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  transition: transform 0.15s cubic-bezier(1, 0.26, 0.51, 0.72);
}

.c-header__group {
  display: flex;
  justify-content: left;
  width: 100%;
  position: fixed;
  top: -200px;
  transition: transform 0.2s ease;
}

.c-header__cta {
  display: block;
  padding: 20px;
  position: relative;
  background-color: #FFFEFB;
  color: #000000;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #000000;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-right-style: solid;
  border-bottom-style: solid;
  border-right-color: #000000;
  border-bottom-color: #000000;
}

.c-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  margin: auto;
  position: relative;
  padding-right: 24px;
  padding-left: 24px;
}

.c-header__group-2 {
  display: flex;
  align-items: center;
}

.c-header__logo {
  display: block;
  position: relative;
  color: #0000EE;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #0000EE;
}

.c-header__logo-image {
  display: block;
  flex-shrink: 0;
  width: 89px;
  height: 36px;
  aspect-ratio: auto 88.641 / 36;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-header__group-3 {
  display: block;
  flex-grow: 1;
  flex-basis: 0%;
  margin-left: 16px;
}

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

.c-header__cta:focus::before {
  content: "";
  display: block;
  width: 195px;
  height: 62px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 100;
  box-shadow: #111111 0px 0px 0px 1px inset, #FFFFFF 0px 0px 0px 3px inset, #111111 0px 0px 0px 4px inset;
}

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

.c-header__logo:focus::before {
  content: "";
  display: block;
  width: 89px;
  height: 36px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 100;
  box-shadow: #111111 0px 0px 0px 1px inset, #FFFFFF 0px 0px 0px 3px inset, #111111 0px 0px 0px 4px inset;
}

Mobile anatomy

header-mobile: the component root, a <header> (.c-header-mobile)
header-mobile-group: inner flex row (.c-header-mobile__group)
header-mobile-cta: link, 20-character label (.c-header-mobile__cta)
header-mobile-inner: inner flex row (.c-header-mobile__inner)
header-mobile-group-2: inner flex row (.c-header-mobile__group-2)
header-mobile-logo: link (.c-header-mobile__logo)
header-mobile-logo-image: image placeholder, 89x36px (.c-header-mobile__logo-image)

Mobile recipe

HTML · CSS

<div class="c-header-mobile-scope">
  <header class="c-header-mobile">
    <div class="c-header-mobile__group">
      <a class="c-header-mobile__cta" href="#">lorem ipsum dolor si</a>
    </div>
    <div class="c-header-mobile__inner">
      <div class="c-header-mobile__group-2">
        <a class="c-header-mobile__logo" href="#">
          <span class="c-header-mobile__logo-image" aria-hidden="true"></span>
        </a>
      </div>
    </div>
  </header>
</div>

.c-header-mobile-scope {
  background-color: #FFFEFB;
  color: #111111;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-header-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 68px;
  position: fixed;
  top: 0px;
  z-index: 11;
  background-color: #FFFEFB;
  color: #111111;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  transition: transform 0.15s cubic-bezier(1, 0.26, 0.51, 0.72);
}

.c-header-mobile__group {
  display: flex;
  justify-content: left;
  width: 100%;
  position: fixed;
  top: -200px;
  transition: transform 0.2s ease;
}

.c-header-mobile__cta {
  display: block;
  padding: 20px;
  position: relative;
  background-color: #FFFEFB;
  color: #000000;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #000000;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-right-style: solid;
  border-bottom-style: solid;
  border-right-color: #000000;
  border-bottom-color: #000000;
}

.c-header-mobile__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  margin: auto;
  position: relative;
  padding-right: 16px;
  padding-left: 16px;
}

.c-header-mobile__group-2 {
  display: flex;
  align-items: center;
}

.c-header-mobile__logo {
  display: block;
  position: relative;
  color: #0000EE;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #0000EE;
}

.c-header-mobile__logo-image {
  display: block;
  flex-shrink: 0;
  width: 89px;
  height: 36px;
  aspect-ratio: auto 88.641 / 36;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-header-mobile__cta:focus {
  outline: none;
}

.c-header-mobile__cta:focus::before {
  content: "";
  display: block;
  width: 195px;
  height: 62px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 100;
  box-shadow: #111111 0px 0px 0px 1px inset, #FFFFFF 0px 0px 0px 3px inset, #111111 0px 0px 0px 4px inset;
}

.c-header-mobile__logo:focus {
  outline: none;
}

.c-header-mobile__logo:focus::before {
  content: "";
  display: block;
  width: 89px;
  height: 36px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 100;
  box-shadow: #111111 0px 0px 0px 1px inset, #FFFFFF 0px 0px 0px 3px inset, #111111 0px 0px 0px 4px inset;
}

States

header-cta focus: outline none, ::before content "", ::before display block, ::before width 195px, ::before height 62px, ::before position absolute, ::before top 0px, ::before right 0px, ::before bottom 0px, ::before left 0px, ::before z-index 100, ::before box-shadow #111111 0px 0px 0px 1px inset, #FFFFFF 0px 0px 0px 3px inset, #111111 0px 0px 0px 4px inset
header-logo focus: outline none, ::before content "", ::before display block, ::before width 89px, ::before height 36px, ::before position absolute, ::before top 0px, ::before right 0px, ::before bottom 0px, ::before left 0px, ::before z-index 100, ::before box-shadow #111111 0px 0px 0px 1px inset, #FFFFFF 0px 0px 0px 3px inset, #111111 0px 0px 0px 4px inset
mobile, header-mobile-cta focus: outline none, ::before content "", ::before display block, ::before width 195px, ::before height 62px, ::before position absolute, ::before top 0px, ::before right 0px, ::before bottom 0px, ::before left 0px, ::before z-index 100, ::before box-shadow #111111 0px 0px 0px 1px inset, #FFFFFF 0px 0px 0px 3px inset, #111111 0px 0px 0px 4px inset
mobile, header-mobile-logo focus: outline none, ::before content "", ::before display block, ::before width 89px, ::before height 36px, ::before position absolute, ::before top 0px, ::before right 0px, ::before bottom 0px, ::before left 0px, ::before z-index 100, ::before box-shadow #111111 0px 0px 0px 1px inset, #FFFFFF 0px 0px 0px 3px inset, #111111 0px 0px 0px 4px inset

Verification: desktop flagged, the footer-group height did not reproduce the measured 732px after 2 correction attempts; mobile flagged, the footer-mobile-group height did not reproduce the measured 657px after 2 correction attempts.

Anatomy

footer: the component root, a <footer> (.c-footer)
footer-group: inner block (.c-footer__group)
footer-inner: inner block (.c-footer__inner)
footer-group-2: inner block (.c-footer__group-2)
footer-group-3: inner block (.c-footer__group-3)
footer-group-4: inner block (.c-footer__group-4)
footer-group-5: inner flex row (.c-footer__group-5)
footer-text: label text, 37 characters (.c-footer__text)

Desktop recipe

HTML · CSS

<div class="c-footer-scope">
  <footer class="c-footer">
    <div class="c-footer__group">
      <div class="c-footer__inner"></div>
      <div class="c-footer__group-2">
        <div class="c-footer__group-3"></div>
        <div class="c-footer__group-4"></div>
        <div class="c-footer__group-5">
          <span class="c-footer__text">lorem ipsum dolor sit amet consectetu</span>
        </div>
      </div>
    </div>
  </footer>
</div>

.c-footer-scope {
  background-color: #FFFEFB;
  color: #111111;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-footer {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #000000;
  color: #111111;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  padding-top: 140px;
  padding-right: 24px;
  padding-left: 24px;
}

.c-footer__group {
  display: block;
  transform: matrix(1, 0, 0, 1, 0, 0);
  transform-origin: 696px 366.164px;
}

.c-footer__inner {
  display: block;
  max-width: 1211px;
  margin: auto;
}

.c-footer__group-2 {
  display: block;
  color: #FFFFFF;
  padding-top: 80px;
  padding-bottom: 16px;
}

.c-footer__group-3 {
  display: block;
  font-size: 20px;
  line-height: 32.4px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.c-footer__group-4 {
  display: block;
  opacity: 0.6;
  font-size: 14px;
  line-height: 21.98px;
}

.c-footer__group-5 {
  display: flex;
  justify-content: center;
  opacity: 0.6;
  font-size: 14px;
  line-height: 21.98px;
  margin-top: 16px;
}

.c-footer__text {
  display: block;
}

Mobile anatomy

footer-mobile: the component root, a <footer> (.c-footer-mobile)
footer-mobile-group: inner block (.c-footer-mobile__group)
footer-mobile-inner: inner block (.c-footer-mobile__inner)
footer-mobile-group-2: inner block (.c-footer-mobile__group-2)
footer-mobile-group-3: inner block (.c-footer-mobile__group-3)
footer-mobile-group-4: inner block (.c-footer-mobile__group-4)
footer-mobile-group-5: inner flex row (.c-footer-mobile__group-5)
footer-mobile-text: label text, 37 characters (.c-footer-mobile__text)

Mobile recipe

HTML · CSS

<div class="c-footer-mobile-scope">
  <footer class="c-footer-mobile">
    <div class="c-footer-mobile__group">
      <div class="c-footer-mobile__inner"></div>
      <div class="c-footer-mobile__group-2">
        <div class="c-footer-mobile__group-3"></div>
        <div class="c-footer-mobile__group-4"></div>
        <div class="c-footer-mobile__group-5">
          <span class="c-footer-mobile__text">lorem ipsum dolor sit amet consectetu</span>
        </div>
      </div>
    </div>
  </footer>
</div>

.c-footer-mobile-scope {
  background-color: #FFFEFB;
  color: #111111;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.c-footer-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #000000;
  color: #111111;
  font-family: "Omani Rial", "Emirati Dirham", "Saudi Riyal", "Noto IKEA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  padding-top: 80px;
  padding-right: 16px;
  padding-left: 16px;
}

.c-footer-mobile__group {
  display: block;
}

.c-footer-mobile__inner {
  display: block;
  max-width: 794px;
  margin: auto;
}

.c-footer-mobile__group-2 {
  display: block;
  color: #FFFFFF;
  padding-top: 48px;
  padding-bottom: 16px;
}

.c-footer-mobile__group-3 {
  display: block;
  line-height: 25.92px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.c-footer-mobile__group-4 {
  display: block;
  opacity: 0.6;
  font-size: 14px;
  line-height: 21.98px;
}

.c-footer-mobile__group-5 {
  display: flex;
  justify-content: center;
  opacity: 0.6;
  font-size: 14px;
  line-height: 21.98px;
  margin-top: 16px;
}

.c-footer-mobile__text {
  display: block;
}

States

No hover or focus change was observed.

Do's and Don'ts

Do

Do keep the page on surface (#FFFEFB) with ink (#111111) text; the warm off-white is part of the brand voice.
Do reserve primary (#FFDB00) for the shopping CTA block and yellow buttons. The site fills button-secondary with it, puts on-primary (#111111) text on top, and hovers to primary-tint (#FFF094).
Do use the dark button pattern for overlay controls: button-ghost is ink (#111111) with on-dark text and hovers to ink-soft (#333333). Its white twin button-ghost-2 hovers to #F5F5F5. Both are 56px tall.
Do stick to the observed corner radius, rounded.md (8px), on every tile and panel, as card-group does.
Do set all text in the Omani Rial / Noto IKEA stack at weights 400 and 700 only.
Do apply the negative tracking from hero-display, display-lg and display-md to every headline at 36px and above.
Do close pages with the surface-dark (#000000) footer and on-dark links, set at body-lg for primary links and body-sm for legal links (navigation-2, navigation-3).
Do place tile captions over photography with a dark scrim, using a caption eyebrow above a display-md headline.

Don't

Don't add drop shadows or backdrop blur; the site conveys hierarchy without them (card, header and footer carry none).
Don't introduce new radius values beyond rounded.md, apart from true circles on small icon buttons.
Don't add a second typeface or a medium/semibold weight.
Don't use link (#0000EE) for visible links; it is a browser default measured on the logo link only.
Don't spread primary across backgrounds, borders or text. Its rarity is what makes the CTA land.
Don't use success (#1A7E3B) or accent-orange (#FFAE66) as general decoration; green signals availability or positive actions, orange is an occasional promo fill.
Don't swap surface for pure #FFFFFF on the page canvas, or ink for pure black in body text.

Responsive Behavior

This analysis is two-viewport (one desktop, one mobile capture). No breakpoint values could be observed.

What changes between the two captures

Header shrinks. The desktop header is 96px tall; the mobile header-mobile is 68px. Both keep the 89×36px logo (header-logo-image, header-mobile-logo-image) and the surface fill. On mobile, the text nav collapses behind a hamburger.
Grid collapses to one column. The desktop modular two-column story feed becomes a single full-width stack of tiles with consistent vertical gaps. The card recipe was captured as 4 instances in a 1-column grid with a 20px gap.
Hero CTA moves below. The yellow shopping card, which sits beside the hero image on desktop, drops beneath it as a full-width card on mobile.
Footer compresses. The footer is 872px tall on desktop and footer-mobile is 737px. Both keep the black fill and white body-sm text (footer-text, footer-mobile-text).

Touch targets

The overlay buttons button-ghost and button-ghost-2 measure 56px tall, which is comfortably touch-sized. The header-cta link carries 20px padding on all sides. Keep any new tappable control at or above the 56px button height on mobile.

Unknowns

Intermediate tablet layouts, the exact collapse point and type scaling between viewports were not captured. Display sizes are recorded from desktop only.

Iteration Guide

Reference tokens, never hex. Use primary, surface, ink, surface-dark, on-dark and the rest by name. If a color you need is not a token (such as the #F5F5F5 hover on button-ghost-2), keep it scoped to that component's state.
Protect the yellow. primary belongs to the shopping CTA panel and yellow buttons (button-secondary). Adding it elsewhere breaks the system's single focal point. Its hover is always primary-tint.
One family, two weights, one radius. The stack is Omani Rial / Noto IKEA, weights are 400 and 700 only, and the radius is rounded.md (8px). Treat all three as fixed boundaries; propose new values only with live-site evidence.
Choose type from the ladder. Pick sizes from the typography tokens (hero-display through micro) and keep each token's own line-height and tracking. Do not round the fractional display sizes, and do not apply negative tracking below display-md.
Stay flat. Express new layers through a surface change (surface → primary → surface-dark) or a 1px hairline (hairline), never box-shadow or blur.
Variants live in recipes. Variants come from the existing recipes: button-secondary (yellow), button-ghost (dark) and button-ghost-2 (white). Note that most recipes are flagged, so re-check their geometry before you derive new components from them.
Treat spacing as unverified. No spacing tokens exist. Do not invent a named scale; if you add one, document it as new and verify it against the live page.

Known Gaps

Single page. Only https://ikea.com/ (the IKEA Global corporate homepage) was captured. Product listings, product pages, cart, search and account surfaces were not reached, so their components are unknown.
No spacing tokens. Nothing survived grounding: no base unit, container width, grid gap or section rhythm was verified. The layout section is qualitative only.
Most recipes did not reproduce:
- button-secondary (flagged: the render matched 94% of the original pixels, below the 97% required after 2 correction attempts)
- button-ghost (flagged: the render matched 52% of the original pixels, below the 97% required after 2 correction attempts)
- button-ghost-2 (flagged: the render matched 55% of the original pixels, below the 97% required after 2 correction attempts)
- card (flagged: the render matched 9% of the original pixels, below the 96% required (instance 1) after 2 correction attempts)
- navigation (flagged: the navigation-list height did not reproduce the measured 54px after 2 correction attempts)
- navigation-3 (flagged: the navigation-3-item width did not reproduce the measured 113px after 2 correction attempts)
- header (flagged: the header-inner y did not reproduce the measured 21px after 2 correction attempts)
- footer (flagged: the footer-group height did not reproduce the measured 732px after 2 correction attempts)
- header-mobile (flagged: the header-mobile-inner y did not reproduce the measured 12px after 2 correction attempts)
- footer-mobile (flagged: the footer-mobile-group height did not reproduce the measured 657px after 2 correction attempts)
- Only navigation-2 verified.
Card content. Two inner blocks of card (card-group-3, card-group-4) were not captured, so tile caption internals are inferred from screenshots.
Interaction states. Hover fills were measured for the three buttons only. Focus states are listed but carry no values, and no focus-ring color was captured. Active and disabled states, and the green success control's full styling, are unknown.
Circular icon buttons and image scrim. These are visible in the screenshots but have no measured size, radius or gradient values.
Typeface identity. The tokens record Omani Rial as the family, but that is likely a currency-glyph subset font; the Noto IKEA attribution is inferred from the stack.
Motion and responsive. Carousel and video behavior, transitions and intermediate breakpoints were not captured; only two viewports were sampled.

이 DESIGN.md 파일은 AI 코딩 에이전트가 읽는 언어인 영어로 되어 있어요.

IKEA 공개 웹사이트에서 추출한 것으로, 공식 브랜드 가이드라인이 아니에요. 다른 사이트의 폰트 확인하기

비슷한 디자인 시스템

전체 보기

여행, 교통 & 물류

Airbnb

Airbnb의 디자인 시스템은 단일 독점 가변 폰트(Airbnb Cereal VF)를 중심으로 구축되어 있으며, 짙은 차콜(#222222)과 밝은 그레이를 기반으로 한 거의 무채색에 가까운 중립 팔레트를 사용합니다. 브랜드의 상징적인 "Rausch" 코랄 핑크(#ff385c)는 기본 CTA와 로고에만 제한적으로 사용됩니다. 레이아웃은 반응형 사진 카드 그리드로 이루어지며, 이미지와 텍스트의 비율을 여유 있게 가져갑니다. 카드에는 20px의 부드러운 둥근 모서리가 적용되고, 여러 겹으로 된 은은한 그림자 시스템이 강한 대비 없이 섬세한 깊이감을 만들어 냅니다. 핵심 사용자 행동을 하나로 묶는 검색창은 눈에 잘 띄는 알약 모양의 컨테이너로 구성되어 있습니다.

소프트웨어 & SaaS · Productivity & Notes

Notion

Notion의 마케팅 홈페이지는 짙은 네이비(#02093a) 히어로 섹션과 밝은(#f6f5f4) 본문 영역을 결합한 구성입니다. 모든 텍스트 역할에 커스텀 서체인 NotionInter를 사용합니다. 레이아웃은 거터 28px의 12열 그리드를 기반으로 하며, 카드에는 8px, 알약형 요소에는 9999px의 이중 모서리 반경을 적용합니다. 플로팅 UI 요소에는 여러 겹으로 이루어진 점진적 그림자 시스템을 사용합니다. 브랜드 블루(#2537b1)는 CTA와 강조 요소에 쓰이며, gray-200부터 gray-900까지의 의미 기반 회색 단계가 모든 텍스트와 표면의 위계를 구성합니다.

개발 도구 & 인프라 · Developer Tools & IDEs

Railway

Railway의 디자인 시스템은 짙은 네이비 계열의 거의 검은 표면(#13111c, #0b0b0f)을 기반으로 한 다크 중심의 개발자 플랫폼 UI입니다. 고대비의 오프화이트 텍스트(#f7f7f8)와 보라색 브랜드 강조색(#853bce / #553f83)이 특징적입니다. 히어로 영역에는 에디토리얼한 무게감을 주기 위해 IBM Plex Serif를 사용하고, 모든 UI 문구는 Inter가 담당하며, 코드가 표시되는 곳에는 JetBrains Mono와 SF Mono를 씁니다. 입체감은 드롭 섀도 대신 rgba(255,255,255,0.2) 1.5px inset 흰색 발광 테두리로 표현되어, UI 전체에 유리 패널 같은 분위기를 줍니다. 간격 체계는 4px 단위를 기준으로 하며, 8/12/16/24/32의 리듬이 뚜렷합니다. 모서리 반경은 대체로 4px로 작게 유지되고, 카드와 히어로 컨테이너에는 선택적으로 8px과 16px을 적용합니다.

비즈니스 & 전문 서비스

Shopify

Shopify의 마케팅 홈페이지는 화면 전체를 채우는 역동적인 동영상 히어로 섹션을 사용하며, 배경은 #02090a의 거의 검은색으로 위쪽 흰색 내비게이션 바와 강하게 대비됩니다. 주요 브랜드 강조색은 선명한 민트 그린 #36f4a4이며, 하이라이트와 인터랙티브 상태에만 절제해서 사용합니다. 타이포그래피는 디스플레이 및 에디토리얼 제목에 NeueHaasGrotesk를, UI 본문에 Inter-Variable을 나누어 적용합니다. CTA 버튼은 완전히 둥근 필(pill) 형태(border-radius: 9999px)를 사용합니다. 전체적인 시스템은 자신감 있고 고대비이며 열망을 자극하는 느낌으로, 방문자를 판매자로 전환하도록 설계되어 있습니다.

금융 & 핀테크

Stripe

Stripe의 마케팅 홈페이지는 엄격하게 관리되는 디자인 시스템(HDS, Stripe Design System)을 바탕으로 합니다. 가벼운 굵기(300~400)의 가변 폰트 "sohne-var"를 사용하고, 짙은 네이비에서 인디고로 이어지는 브랜드 팔레트는 #533afd(Stripe Indigo)를 중심으로 구성되어 있습니다. 대표적인 특징은 화면 전체를 채우는 스펙트럼 그라데이션 히어로입니다. 컴포넌트는 4~6px의 낮은 모서리 반경과 평면에 가깝고 최소한의 그림자를 사용하며, 8px 기본 간격 그리드에 맞춰 구조화되어 있습니다. 전체적인 톤은 권위 있으면서도 친근합니다. 자신감 있는 타이포그래피와 절제된 색 사용을 통해 금융 인프라를 전달합니다.

AI & 머신러닝 · AI Products & Assistants

Anthropic

Anthropic의 디자인 시스템은 절제된 미감과 타이포그래피 중심의 정체성을 지닌 것이 특징입니다. 두 가지 맞춤 서체인 Anthropic Serif와 Anthropic Sans를 기반으로 하며, 따뜻한 아이보리 배경(#faf9f5) 위에 구성됩니다. 팔레트는 매우 간결하게 정리되어 있습니다. 따뜻한 오프화이트 바탕에 거의 검은색에 가까운 #141413을 사용하고, 보조 텍스트와 테두리에는 차분한 스톤 계열 톤을 적용합니다. 대형 세리프 디스플레이 타이포그래피가 에디토리얼 느낌의 중심을 잡고, 거의 검은색 배경에 아이보리 텍스트를 올린 다크 패널 섹션은 극적인 대비를 만들어 냅니다. 전체적으로 넉넉한 여백, 강한 타이포그래피 대비, 장식 요소를 배제한 구성을 통해 지적인 진지함과 안전을 우선하는 미션을 전달합니다.

비슷한 팔레트

Snapchat