Default
Bordered surface. No attribute needed.
Components / Cards & Surfaces
Every card must earn its border or background.
Cards & Surfaces v1 —
packages/design-system/src/components/card.css. Irozon is not a
card-heavy SaaS UI. Whitespace, typography and a hairline stay the preferred way to
group content; enclosure is the exception, reached for only when it genuinely adds
meaning.
Nothing
Most content grouping needs no container at all — whitespace, alignment, a hairline separator.
.iz-surfaceA subtle background that groups content without making it feel like a floating object.
.iz-cardA discrete content unit that genuinely benefits from enclosure — border by default, variants for the exceptions.
data-interactiveOpt-in, on a real
<a> or <button> only — never a clickable <div>.Plain grouping
The default answer is no card.
A heading, some body copy, a hairline before the next section — no enclosure needed. This should stay the first instinct, not the fallback.
Account details
No card, no border, no shadow — just type and space doing the work.
A hairline is often the entire "container" a UI needs.
Surfaces
A quiet background, not a floating object.
.iz-surface separates content from its surroundings with a tint alone —
no border, no shadow. Useful for a settings panel, a code sample, a quoted block.
Webhook payload
Grouped, but never mistaken for a clickable object.
Cards
Four variants. Default needs no attribute.
Subtle
Tinted, borderless — quieter than default.
data-variant="subtle"
Outlined
A stronger border, still no fill difference.
data-variant="outlined"
Elevated
A real shadow — reserved for content that should read as genuinely above the page.
data-variant="elevated"
Interactive cards
A real link or button, refined on hover because it means something.
Static cards never move on hover. Interactive cards follow the homepage service cards on irozon.se: 24px corners, a translucent surface and a soft shadow on hover, with no card lift or scale and no border/fill change. Hover a card or Tab to it to compare pointer and keyboard feedback.
Billing settings
Open your billing details. Hover for the website shadow; Tab for the Green focus outline.
Link card: translucent surface, shadow feedback
Button card: elevated at rest, same hover shadow
Reference
irozon-website/src/components/Services.tsx: a 1px border, 70% surface fill, 16px backdrop blur, 32px padding and 24px corners. The hover shadow uses --shadow-card-hover over 150ms with --motion-ease-standard. Subtle, outlined and elevated variants keep their fill, border and resting elevation roles.Heading
Opt into
.iz-card__title for the website's heading color response over 150ms. Shadow and heading feedback use the existing fast motion token. The design system uses --color-link for readable text in both themes. No arrow movement belongs to this service-card pattern; project image zoom and scroll-entry effects are separate patterns.Dark & motion
The website is light-only. This reusable component adapts through the existing dark surface and text tokens, with a dark hover-shadow override. Reduced motion makes shadow and heading feedback immediate. Keyboard focus retains the 2px Irozon Green outline without moving the card.
Composition
Cards hold other components — not the other way around.
Production database
A Badge, some type, nothing more — the card's only job is to hold this together as one unit in a grid of similar units.
Usage
Do / Don't.
Do
Default to whitespace and hairlines first · reach for
.iz-card when
content is a genuine discrete unit (a plan option, a record in a grid) · use a real
<a>/<button> for anything clickable.
Don't
Wrap every section in a bordered box by default · stack Elevated cards inside
Elevated cards · make a static card lift or scale on hover · put an interactive
target inside a
<div> pretending to be a card.
Accessibility
The interactive element is the card.
Semantics
An interactive card is a real
<a href> or <button> — native keyboard activation, native focus, no role/tabindex retrofitting.Focus
A 2px Green
:focus-visible outline on the card element itself, matching every other Irozon control.Nested controls
A card with its own internal link/button (e.g. a "Delete" icon button inside a card that's also a link) should not also be a full-card
<a> — nested interactive elements are invalid HTML and break keyboard/screen-reader navigation. Pick one: a card-wide link, or independently focusable controls inside a static card.