# I’m working on palmier.io. Inspect the live page and show me…

[Open the live Fudge conversation](https://design.withfudge.com/share/40fimt9lz7/i_m_working_on_palmier_io_inspect_the_live_page_and_show_me/)

Last updated: 2026-07-30

I'll inspect palmier.io and analyze its design system across all those layers.

I'll read the structured details from the inspection to analyze each layer.

Let me calculate the actual contrast ratios for the key text pairs to ground the analysis.

Here's how palmier.io is working as a system, and the three changes that would lift it most.

## How it's working together

**Typography** — A single family (Geist variable, 100–900) carries the whole page. The scale is well-structured: 60px h1 with tight -1.8px tracking, 40px and 36px h2s, then 24/19/17/16/15/14/13/12px for body. Display sizes use negative tracking and tight line-heights (~1.1); body sits at 1.5. Weight is used sparingly — 400 for everything, 500 only for labels, buttons, and the "New" badge. The result is calm and editorial, but the bottom of the scale (12–13px) is doing too much work for readable text.

**Colors** — A tight four-color system on a warm near-black canvas:
- Canvas `#0d0c0a`, ink `#ececec`, muted `#b3b3b3`
- Orange accent `#e85d04` (the "New" badge)
- Red accent `#e63535` (the "Try Palmier Pro" link)
- Inverse surface `#ffffff` for the nav buttons and primary CTA

Borders are `rgba(255,255,255,0.07)` — barely-there dividers that read as structure without competing with content.

## Colors

- `#0d0c0a`
- `#ececec`
- `#b3b3b3`
- `#e85d04`
- `#e63535`
- `#ffffff`

**Contrast** — The core pairs are strong:
- `#ececec` on `#0d0c0a`: **16.55:1** (WCAG AAA)
- `#b3b3b3` on `#0d0c0a`: **9.33:1** (AAA)
- `#e85d04` on `#0d0c0a`: **5.58:1** (AA normal, AAA large)
- `#0d0c0a` on `#ffffff`: **16.55:1** (AAA)

The red `#e63535` on `#0d0c0a` is the weak link — it sits at roughly 4.5:1, borderline for 15px body text, and it's used for the primary CTA without a background fill.

**Spacing** — A consistent 80px outer margin (1280px content max in a 1440px viewport), 48px column-gap in the nav, 24px nav padding, and generous vertical rhythm in the hero (h1 at y=205px, subhead at y=362px, CTAs at y=458px, video at y=576px).

**Radii** — Three tiers: full pill (`~33554px`) for primary buttons and the "New" badge, `16px` for the video container and feature cards, `6px` for the small nav buttons. The 6px nav buttons are the odd one out — everything else is either fully rounded or generously soft.

**Shadows** — One recipe used twice: `rgba(0,0,0,0.1) 0 10px 15px -3px` + `rgba(0,0,0,0.1) 0 4px 6px -4px`. Applied to the white CTA buttons and the feature cards. Consistent and restrained.

**Layout** — Floating 56px header with translucent dark background, full-bleed hero section, centered video (1232×423), four-column feature grid, and an 8-item FAQ with subtle bottom borders.

**Media** — One hero video (1232×423) and one small icon (20×20, the "New" badge). The page is text-driven; the video is the only rich media.

```fudge-values
{"title":"Palmier.io design tokens","values":[{"category":"Type scale","label":"Display (h1)","value":"60px / 1.1 / -1.8px"},{"category":"Type scale","label":"Section (h2)","value":"40px / 1.15 / -0.8px"},{"category":"Type scale","label":"Body","value":"16px / 1.5"},{"category":"Type scale","label":"Caption","value":"12–13px / 1.5"},{"category":"Spacing","label":"Outer margin","value":"80px"},{"category":"Spacing","label":"Nav column-gap","value":"48px"},{"category":"Spacing","label":"Nav padding","value":"0 24px"},{"category":"Radius","label":"Pill buttons","value":"full"},{"category":"Radius","label":"Cards / video","value":"16px"},{"category":"Radius","label":"Nav buttons","value":"6px"},{"category":"Shadow","label":"Elevation","value":"0 10px 15px -3px, 0 4px 6px -4px / 10%"},{"category":"Border","label":"Divider","value":"1px solid rgba(255,255,255,0.07)"}]}
```

## The three changes that would improve it most

**1. Fix the red CTA — it's the system's weakest link.** The "Try Palmier Pro" link uses `#e63535` at 15px/500 on the dark canvas with no background. It reads as a colored text link, not a button, and it competes with the white pill button next to it (which is actually secondary). Two options: give it a filled red background with white text (matching the white pill's treatment), or swap it to the orange `#e85d04` which already has 5.58:1 contrast and brand consistency with the "New" badge. Either way, the primary action should look like the primary action.

**2. Raise the floor of the type scale.** The 12px footer copyright, 13px nav labels, and 14px feature sub-labels are all below comfortable reading size. Bump the floor to 14px (and 15px for nav) — this costs almost nothing visually but makes the secondary text scannable instead of squinty. The display sizes (60/40/36) are fine; the problem is only at the bottom.

**3. Rebalance the hero — the video is undersized relative to the headline.** The h1 is 60px and spans 896px wide, but the product video below is only 423px tall in a 1000px viewport. The promise gets more visual weight than the proof. Either drop the h1 to 48–52px or increase the video container's height/aspect ratio so the demo earns equal real estate. Right now the page tells you what Palmier is before it shows you what Palmier does.