Skip to content

Salam Noor

salam-portfolio v0.1.0

Style guide

Every design token this theme owns, rendered at its real value. Contrast ratios are measured, not estimated. If a figure below stops being true, the token changed and the change was not reviewed.

Colour

Three layers. The raw ramp is declared once and never redefined; semantic tokens alias it; scopes re-point a handful of semantic tokens. Switching the brand hue is an edit to eight raw values and nothing else.

Backgrounds

  • Canvas --sn-canvas page ground
  • Surface --sn-surface raised panels
  • Surface deep --sn-surface-2 deepest tint
  • Band brand --sn-band-brand section band
  • Band accent --sn-band-accent section band

Ink

  • Ink --sn-ink 18.04:1 on canvas
  • Ink secondary --sn-ink-2 7.80:1 on canvas
  • Ink muted --sn-ink-3 5.81:1 on canvas

Brand

  • Brand --sn-brand 12.27:1 on canvas
  • Brand hover --sn-brand-hover 15.47:1 on canvas
  • Brand fill --sn-brand-fill white on it 6.71:1
  • Brand tint --sn-brand-tint ink on it 14.87:1

Accent and signal

  • Accent --sn-accent 6.26:1 — text safe
  • Accent graphic --sn-accent-graphic 2.31:1 — GRAPHIC ONLY
  • Danger --sn-danger 6.87:1 on canvas
  • Success --sn-success 6.40:1 on canvas

Lines

  • Line --sn-line 1.41:1 — decorative only
  • Line strong --sn-line-strong 2.04:1 — decorative only
  • Line input --sn-line-input 4.65:1 — every UI boundary

Typography

IBM Plex Sans with IBM Plex Sans Arabic, both self-hosted. Every step is a verified clamp() between 390px and 1440px, rem-led so text-only zoom still scales the page.

6xl · 38 → 68px Web & Digital Product Developer
5xl · 34 → 56px Web & Digital Product Developer
4xl · 30 → 48px Web & Digital Product Developer
3xl · 26 → 38px Web & Digital Product Developer
2xl · 23 → 30px Web & Digital Product Developer
xl · 20 → 24px Web & Digital Product Developer
lg · 18 → 21px Web & Digital Product Developer
md · 16 → 18px Web & Digital Product Developer
sm · 14 → 16px Web & Digital Product Developer
xs · 13 → 14px Web & Digital Product Developer
2xs · 12 → 13px Web & Digital Product Developer

Arabic, at the same steps

Arabic is set 6% larger with 0.12 extra leading, and negative tracking is zeroed structurally so no component can reintroduce it and break the joins.

6xl مطور مواقع ومنتجات رقمية
5xl مطور مواقع ومنتجات رقمية
4xl مطور مواقع ومنتجات رقمية
3xl مطور مواقع ومنتجات رقمية
2xl مطور مواقع ومنتجات رقمية
xl مطور مواقع ومنتجات رقمية

Space and radius

3xs
2xs
xs
sm
md
lg
xl
2xl
3xl
4xl
xs
sm
md
lg
xl
full

Components

Primary action
Secondary
Quiet

Tab to any control above to see the two-ring focus indicator. A single ring disappears against a brand-coloured fill; ink-against-halo stays visible on every surface this theme can produce.

Fact rows

One row, one fact, one source. This reflows to stacked at narrow widths with a container query — never by rendering a second copy and hiding the first. That pattern caused roughly a third of the contradictions found in Phase 1.

Lead discipline
Web & Digital Product Developer
Location
Liverpool, United Kingdom
Working since
2011

Card

Surface, hairline border, large radius. Used for project entries and grouped facts.

Inverted panel

A scope, not a component. It re-points fourteen semantic tokens, so everything nested inside inherits a contrast-checked palette without knowing it is on a dark panel. Nothing here sets a colour literal.

Primary on dark
Secondary on dark

A link inside the inverted panel — brand ink lifts to 9.79:1 automatically.

Brand band

Replaces ten arbitrary legacy alpha hexes with one token. Ink measures 14.87:1 here.