Fieldset

A settings card container that groups related fields. Composed of a header (title + description), a body (field group), and a footer (helper text + action button). Primarily used on settings screens and profile edit areas.

Text Field Group

The default layout — label + input pairs stacked vertically. A helper text and save button sit in the footer.

Basic Info

Your name, email, and other details shown on your account.

Changes take effect immediately.

Toggle Switch Group

Label + supporting description laid out inline with a toggle switch. Items are separated by a thin hairline. Active toggle color is --c-primary(dark mode: --c-sky).

Notification Settings

Choose how you receive in-app notifications.

Email notificationsReceive new announcements and task requests by email.
Marketing emailsReceive product news and event announcements.

Save your changes to apply the new settings.

Rules

  • Card radius --r-lg, border --c-line-soft, background --card-bg.
  • Header title: 700·16px. Description: 400·13px --c-grey.
  • Footer background: --c-light-grey 50% tint (dark mode: --c-line-soft 40% tint — never fill with a solid grey).
  • Save button: outline default (--c-primary border + text, transparent background) → hover fills primary + literal #fff. Dark mode: --c-sky border + text → hover fills sky + literal #0A1E33 (sky background is light).
  • Toggle: hide the native input[type=checkbox] with opacity:0 and render .toggle-track in its place — keyboard accessibility is preserved.