Try a combination

Card style, theme and mode together in a mock app — top bar, sidebar and content — on the plain page background, the only one the app uses.

Card style

Theme

Mode

Reference: soft-relief · sapphire · light

Form Inputs
Home
Form Inputs
UI Primitives
Page Shells
Notifications
M3CORE

1. Soft ReliefDefault

Reference: soft-relief

Soft Elevation + Hairline Flat + Soft Inset in one: a near-canvas surface with a crisp 1px hairline, a soft two-layer shadow below and a faint light edge above (the neumorphic touch, kept subtle so it stays readable). Hover tints the hairline in the theme colour and lifts the shadow slightly. 16px corners.

Light

Mobile row

Dark

Mobile row

2. Frosted GlassOptional

Reference: frosted-glass

A modern glassmorphism: strong blur over a soft colour field, bright inner edge, gentle shadow. Keeps the brand’s glass identity but reads as a clear layer.

Light

Mobile row

Dark

Mobile row

3. Tinted SurfaceCandidate

Reference: tinted-surface

Cards take a whisper of the theme colour instead of white, with a matching tinted border and no shadow. Changes character with each of the six themes.

Light

Mobile row

Dark

Mobile row

4. Accent EdgeCandidate

Reference: accent-edge

White card with a 3px theme-colour stripe on the leading edge (flips in Arabic) and a light shadow. Scannable in long lists; signals “clickable item”.

Light

Mobile row

Dark

Mobile row

5. Gradient RimCandidate

Reference: gradient-rim

A 1px border that fades from the theme colour to neutral, around a plain surface. Subtle but distinctly “2025”; no heavy shadow needed.

Light

Mobile row

Dark

Mobile row

6. Floating DeepCandidate

Reference: floating-deep

Pronounced layered shadow, 20px corners and a clear 4px lift on hover. Most dramatic; best for a few hero cards (home, dashboards), not dense lists.

Light

Mobile row

Dark

Mobile row

7. Current — Glass TintReference

Reference: current-glass-tint

For comparison only — today’s look: translucent white, hairline border, small drop shadow, 12px corners, lift on hover.

Light

Mobile row

Dark

Mobile row