Foundation

Poyraz Soft Glass

Minimal, soft and lightly rounded surfaces with an optional glass enhancement. Brand red remains the primary identity; status colors are independent semantic signals.

Primitive palettes

Primitive colors are stable ingredients. Components consume semantic roles below, never a primitive step directly.

Brand red

50
#fef2f2
100
#fee2e2
200
#fecaca
300
#fca5a5
400
#f87171
500
#ef4444
600
#dc2626
700
#b91c1c
800
#991b1b
900
#7f1d1d
950
#450a0a

Neutral light

0
#ffffff
50
#fbfbfc
100
#f7f7f9
200
#ededf1
300
#dddde4
400
#b7b8c2
500
#888a96
600
#656773
700
#484a54
800
#2e3038
900
#1c1e24
950
#111217

Neutral dark

0
#ffffff
50
#f7f8fa
100
#eceef2
200
#d8dbe2
300
#b8bdc8
400
#9299a6
500
#6f7785
600
#545b68
700
#3b414b
800
#262b33
900
#171b21
950
#0b0e12

Semantic surfaces

These roles automatically switch with .dark or data-poyraz-theme. Surface is the default card plane; raised and elevated are reserved for increasing hierarchy.

Canvas

--poyraz-background

Surface

--poyraz-surface

Subtle

--poyraz-surface-subtle

Raised

--poyraz-surface-raised

Elevated

--poyraz-surface-elevated

Primary

--poyraz-primary

Secondary

--poyraz-secondary

Muted

--poyraz-muted

Accent

--poyraz-accent

Disabled

--poyraz-disabled

Invalid

--poyraz-invalid

Status roles

Information, success, warning and destructive palettes stay separate from brand red so product meaning does not change when the brand is customized.

Information

Semantic feedback surface with theme-aware contrast.

Success

Semantic feedback surface with theme-aware contrast.

Warning

Semantic feedback surface with theme-aware contrast.

Destructive

Semantic feedback surface with theme-aware contrast.

Glass recipe

Glass is an opt-in enhancement, not the default surface. Unsupported, reduced-transparency and low-power modes receive an opaque fallback with the same readable foreground.

One blur layer

Optional depth, stable readability

The outer panel owns the backdrop pass. A nested glass surface keeps its tint and border but automatically disables another blur operation.

Nested glass — no additional backdrop blur.
Set data-poyraz-transparency="reduced" or data-poyraz-performance="low" on an ancestor to force the opaque fallback. Native prefers-reduced-transparency is progressively enhanced when the browser supports it.

Radius and elevation

The default 8px radius stays soft without becoming pill-shaped. Larger radii are reserved for grouped panels and glass canvases.

none

0px

xs

0.375rem

sm

0.5rem

md

0.75rem

lg

1rem

xl

1.25rem

2xl

1.5rem

full

9999px
xs
sm
md
lg
xl
glass

Typography

A compact interface scale with explicit line-height and tracking. The scale is opt-in and does not restyle consumer headings.

caption

0.75rem / 1rem

Modern interfaces should feel calm and precise.

bodySmall

0.875rem / 1.25rem

Modern interfaces should feel calm and precise.

body

1rem / 1.5rem

Modern interfaces should feel calm and precise.

title

1.25rem / 1.75rem

Modern interfaces should feel calm and precise.

heading

1.75rem / 2.125rem

Modern interfaces should feel calm and precise.

display

2.5rem / 2.75rem

Modern interfaces should feel calm and precise.

Density and interaction

Default density targets desktop product interfaces while the 44px touch target remains the minimum for icon-only mobile controls. Density tokens change component geometry, never document spacing globally.

Compact

Control
2rem
Gap
0.375rem

Default

Control
2.5rem
Gap
0.625rem

Spacious

Control
2.75rem
Gap
0.875rem

Motion and layer policy

Motion communicates state with short enter/exit timings. Reduced-motion collapses token durations to 1ms. Named z-index layers prevent arbitrary stacking escalation.

Durations

instant80ms
fast120ms
base180ms
slow260ms
deliberate420ms
spinner700ms
pulse1800ms

Z-index layers

base0
sticky20
dropdown40
overlay50
modal60
toast80

Customization contract

Override semantic variables for product themes. Keep component source independent from raw hex values and regenerate preset.css only when changing the library's canonical source.

:root {
  --poyraz-primary: oklch(58% 0.22 25);
  --poyraz-surface: oklch(99% 0.01 25);
  --poyraz-radius-sm: 0.625rem;
}

/* Low-power dashboards */
<main data-poyraz-performance="low">...</main>

Canonical source: src/theme-tokens.json. Generated CSS guard: node scripts/generate-theme-tokens.mjs --check. Contrast guard: node scripts/check-theme-contrast.mjs.