Four variants × five states. Hover/active darken the fill; focus adds a 3px tinted halo + 1.5px accent outline; disabled drops opacity to 0.5 with not-allowed cursor.
variant
Default
Hover
Focus
Active
Disabled
Primary
Secondary
Ghost
Destructive
Form fields
Text input, textarea, select, checkbox. Five state columns covering rest → user interaction → server-side validation.
variant
Default
Focus
Filled
Error
Disabled
Input
↳ must include country code
Textarea
Select
Checkbox
↳ no error state for boolean
Verified credential
The brand-distinctive component. Three lifecycle states. Yellow lives only here (verified surface). Pending uses neutral dashed framing; revoked uses error red.
form
Verified
Pending
Revoked
Pill
Verified · kpn.nl
Pending · kpn.nl
Revoked · kpn.nl
Framed card
Verified credential
KPN asserts this call originates from a registered operator.
Inline content notes — left-rule + tinted background. Four semantic flavours; yellow is conspicuously absent (verified-only).
flavour
Note
Open question
Caution
Success
Sample
noteThe five layers compose left-to-right. Each is independently auditable.
open questionShould reputation track per-credential or per-issuer? Comments wanted.
cautionPre-specification. APIs and structures will change before v1.0.
resolvedIssuer chain verified end-to-end. Continue the call.
Cards
Paper-raised content block. Hover lifts to elev-2. Selected/focused gets a 1.5px accent ring plus a 4px tinted halo. No colour-coded left borders.
state
Default
Hover
Focused / selected
Card
§1 registration
Who can register?
Any operator with an eIDAS-aligned chain may register an issuer.
§2 verification
Hovered card
Hover only lifts elevation — no transform, no scale.
§3 reputation
Selected card
Selected/focused gets the same ring used by inputs.
Links
Underlined by default — 1px thickness, 3px offset. Hover thickens to 2px and darkens. Visited gets a muted purple. Internal references use ink color with an accent-tinted underline.
All states are forced via .is-hover / .is-focus / .is-active classes that mirror the real :hover / :focus-visible / :active rules. The real selectors fire when you actually interact.