A unified component library for identity & account experiences.
A token-driven design system powering authentication, account management, and verification flows across Soberlink's identity platform — built with accessibility, theming, and developer ergonomics as first-class concerns.
Color Tokens
Six semantic ramps (gray, blue, red, yellow, green, plus
white/black) with 11 stops each. Tokens are exposed as CSS custom
properties on :root, then aliased into role tokens
(--link, --surface-color,
--text-1) so themes can be swapped without touching
components.
Typography
Adelle Sans (loaded via Typekit) as the brand sans, with a system fallback stack. Six heading tiers, two body sizes, plus caption and large-paragraph utilities.
Buttons
One .component-button base, four modifier classes
(primary, secondary,
borderless, is-loader) and icon helpers.
Every state — hover, focus-visible, active, disabled, loading — is
defined explicitly.
<button class="component-button primary">Primary</button> <button class="component-button secondary">Secondary</button> <button class="component-button borderless">Borderless</button> <button class="component-button" disabled>Disabled</button> <button class="component-button is-loader loading">Loading</button> <button class="component-button icon-left google">Continue with Google</button>
Text Inputs
Text inputs use a data-status attribute
(error, valid, readonly) to
drive border color, helper text color, and focus ring — keeping
markup declarative and state changes a one-attribute swap.
<div class="component-text-input" data-status="error"> <label for="email">Email address</label> <input id="email" type="email" value="not-an-email" /> <span class="helper-text">Please enter a valid email address.</span> </div>
Password Field
Includes a show/hide visibility toggle and a popover that lists requirements with live success states as the user types.
Your password must include:
- At least 8 characters
- One uppercase letter
- One number
- One special character
Select
Native <select> styled with the same status
system as inputs — appearance is stripped and a custom chevron is
layered in via background-image.
Checkbox
Custom checkbox with a brand-colored fill and SVG checkmark on
:checked. Supports the same
data-status="error" validation state.
Toggle Switch
Used for binary settings where the change applies immediately (no save button needed). Pure CSS animation on the thumb.
Alerts
Five severities — info, success,
warning, error, lockout —
each pulling from the matching color ramp's 0/10/50 stops for
background, border, and text. Icons are background-image based to
keep markup clean.
Verification Code
Six-digit input for SMS / email one-time codes. Auto-advances on input and supports paste-fill.
Modal
Centered card with backdrop and slide-up entrance. On mobile (under 428px), the modal docks to the bottom of the viewport and animates from below — a bottom-sheet pattern.
Tooltip
Help-text trigger paired with a positioned tooltip. The trigger
uses the tooltip-hover-trigger styling; the tooltip
itself is absolutely positioned with a rotated-square tail.