Design ↔ Code Inconsistency Report

🧩

Existence Parity

Components present in Figma but missing in code, or vice-versa

Component inventory 5 Figma · 4 Code

Component	In Figma	In Code	File
button	✓ COMPONENT_SET (primary, secondary)	✓	`components/button/Button.tsx`
card	✓	✓	`components/card/Card.tsx`
header	✓	✓	`components/header/Header.tsx`
footer	✓	✓	`components/footer/Footer.tsx`
contact-card	✓	✗ Missing	—

contact-card — exists in Figma, no code counterpart Critical

Figma component

Code

// No file exists for this component.
// Expected path:
src/components/contact-card/
  ContactCard.tsx
  ContactCard.module.css

⚠️

Figma spec: 280 × 96 px horizontal layout — square avatar image (96 × 96, color-image-bg) + text content column. White background, radius-lg (12 px), 1 px navy border, strokeAlign: INSIDE.

📐

Spacing & Sizing

Padding, gap, width, height values vs token definitions

Button height — Figma 33 px vs Code ~30 px Warning

Figma (33 px rendered height)

/* Figma component — Button primary */
paddingTop:    8px
paddingBottom: 8px
line-height:   intrinsic /* ~1.21 × font-size */
/* 8 + 17 + 8 = 33 px */

Code (~30 px rendered height)

/* Button.module.css */
.button {
  padding: var(--space-sm) var(--space-md); /* 8px 16px */
  line-height: 1;  ← collapses text to 14px
  /* 8 + 14 + 8 = 30 px */
}

💡

Fix: Remove line-height: 1 or change it to line-height: normal so the button height matches Figma's intrinsic text height.

--size-button-height: 40px — defined but never used Warning

tokens.css (defined)

/* tokens.css */
--size-button-height: 40px; /* ← defined */

Button.module.css (not referenced)

/* Button.module.css — no height set */
.button {
  padding: var(--space-sm) var(--space-md);
  /* --size-button-height is never used */
}

💡

Fix: Either add height: var(--size-button-height) to .button, or remove the dead token from tokens.css. Note: using it will change the button height to 40 px — make sure Figma is updated to match.

--size-page-width: 1440px — defined but never used Warning

Figma — fixed 1440 px width

Code — fluid 100%

/* Header.module.css */
.header {
  width: 100%; /* fluid, not fixed */
  /* --size-page-width: 1440px never used */
}

💡

Fix: If the layout should be max-width constrained, add max-width: var(--size-page-width) to the page shell in App.css. Otherwise remove the token.

🔤

Typography

Font size, weight, and line-height per component

✅

Font sizes confirmed matching: header logo 16 px bold, footer text 14 px regular, button text 14 px semibold (inferred from Figma rendered height).

Footer — font-weight not explicitly set Warning

Figma

/* Footer text node */
fontWeight: 400 /* Regular — explicit */
fontSize:   14px

Code

/* Footer.module.css */
.footer {
  font-size: var(--font-size-body); /* ✓ */
  /* font-weight not set */
  /* relies on browser default (400) */
}

💡

Fix: Add font-weight: var(--font-weight-regular); to .footer to make the intent explicit and token-backed.

Nav links — font-weight not explicitly set Warning

Figma header (nav area)

Code

/* Header.module.css */
.navLink {
  font-size:   var(--font-size-nav); /* ✓ */
  color:       var(--color-navy);   /* ✓ */
  /* font-weight not set */
}

💡

Fix: Add font-weight: var(--font-weight-regular); to .navLink.

🎨

Color

Fill and stroke values vs token definitions

Navy color mismatch — Figma component definitions use a different blue than the code token Critical

Figma variable 3:58

#113281

Used in component definitions

≠

--color-navy

#1b2a4e

Used in code

Element	Figma color	Code color	Match
Button primary background	#113281	`--color-navy` = #1b2a4e	✗
Button secondary border	#113281	`--color-navy` = #1b2a4e	✗
Header logo text	#113281	`--color-navy` = #1b2a4e	✗
Footer background (component def)	#113281	`--color-navy` = #1b2a4e	✗
Footer background (Home page instance)	#1b2a4e	`--color-navy` = #1b2a4e	✓ (instance overrides component)

Figma component definitions

/* Figma variable bound to components */
VariableID: 3:58
Resolved:   #113281 ← brighter blue

Code

/* tokens.css */
--color-navy: #1b2a4e; /* darker navy */

/* Button.module.css */
.primary {
  background: var(--color-navy); /* #1b2a4e */
}
.secondary {
  border-color: var(--color-navy);
}

/* Footer.module.css */
.footer {
  background: var(--color-navy); /* #1b2a4e */
}

/* Header.module.css */
.logo {
  color: var(--color-navy); /* #1b2a4e */
}

⚠️

Root cause: The Figma component library uses a pre-existing variable (3:58 = #113281) that was never updated to match the code's --color-navy: #1b2a4e. Additionally, the footer and header instances on the Home page canvas were manually rebound to the correct color — so the live page looks right, but the component definitions in the library are out of sync. Any new screen built from the components will render the wrong shade.

Fix: In Figma, update variable 3:58's value to #1b2a4e, or rebind all component fills to the css variables / color-navy variable.

⬡

Border & Radius

cornerRadius, strokeWeight, strokeAlign vs CSS

✅

All border and radius values match between Figma and code. No issues found.

Verified values All clear

Component	Figma cornerRadius	Code token	strokeWeight / align	Match
button	8 px	`var(--radius-md)` = 8 px	1 px / INSIDE	✓
card	12 px	`var(--radius-lg)` = 12 px	none	✓
header	none	none	none	✓
footer	none	none	none	✓
contact-card	12 px (`radius-lg`)	— no code	1 px / INSIDE	—

🏷️

Token Usage

Tokens defined but unused, and values hardcoded instead of using a token

✅

No hardcoded values found. All CSS files consistently use var() references for every color, spacing, radius, and typography value.

Dead tokens — defined in tokens.css but never referenced Warning

/* tokens.css */
--size-button-height: 40px;  /* not used in Button.module.css */
--size-page-width:    1440px; /* not used in any CSS file */

💡

Either wire these into the relevant CSS, or remove them to keep the token file as the single source of truth. Stale tokens cause confusion when designers reference them in Figma.

Redundant token — --font-size-nav duplicates --font-size-body Info

/* tokens.css */
--font-size-body: 14px;
--font-size-nav:  14px;  /* same value — semantic alias or accidental duplicate? */

ℹ️

If nav links are intentionally allowed to diverge from body text in the future, the alias is valid. If not, consolidate to --font-size-body to reduce token surface area.

Implicit font-weight — footer and nav links rely on browser default instead of a token Warning

/* tokens.css — token exists but is not wired up */
--font-weight-regular: 400;

/* Footer.module.css */
.footer {
  font-size: var(--font-size-body);
  /* font-weight: missing */
}

/* Header.module.css */
.navLink {
  font-size: var(--font-size-nav);
  /* font-weight: missing */
}

💡

Fix: Add font-weight: var(--font-weight-regular); to .footer and .navLink. Currently correct by accident — this will break silently if a parent ever sets a different weight.