Caustica Design Examples

Design system

Glass surfaces, OKLCH color, and semantic tokens for consistent interfaces. Read the docs for API and accessibility notes. Browse landing layout shells for full-page composition patterns.

Colors

Semantic aliases — theme by remapping these, not primitives.

--color-bg-deep
--color-bg-elevated
--color-fg
--color-fg-muted
--color-system-blue
--color-accent-hot
--ok
--warn
--danger
--glass-surface

Typography

System UI for Latin; self-hosted IBM Plex Sans Arabic for Arabic text.

Display — Caustica Design

Body — Semantic tokens keep purpose separate from raw values.

Muted — Supporting copy and field labels.

Mono — status · queued · 0x1a

قدّم بثقة إلى وظيفتك القادمة

نموذج طباعي بخط IBM Plex Sans Arabic

Brand

Eyebrow + mark + gradient title — host supplies the product name and asset.

Design system

Product name

Host supplies mark, name, and any mark animation (pass className on BrandMark + host CSS). Pattern: .ca-section-eyebrow above .brand-title-row.

Buttons

Primary for commit actions; glass for secondary.

Icons + busy spinner for async commits.

Compact + ghost pairs well in dense toolbars.

Button group

Segmented glass control for related actions.

Mix primary with glass siblings for the active segment.

Icons

Mask icons — host apps serve SVGs at /icons/.

  • plus
  • minus
  • check
  • close
  • edit
  • trash
  • send
  • download
  • upload
  • clipboard
  • calendar
  • external-link
  • autofill
  • click
  • translate
  • chevron-down
  • chevron-left
  • chevron-right
  • theme-sun
  • theme-moon
  • feedback
  • filter
  • warning
  • log-in
  • log-out
  • play
  • stop
  • reload

Panels & focus surfaces

Nested glass with hover/focus elevation.

Tab here — border and glow respond to focus-within.

Nested panel for secondary context — quieter border, same radius language.

Cards

Compact glass tiles for grids — not page chrome (use Panel for that).

Review queue

Static card with actions in the foot.

Interactive + media

Hover or tab to elevate.

Spacing

Token utilities — stack, cluster, padding from --ca-space-*.

Cluster gap-2

Box with .p-4 padding.

Utilities

Focused helpers — display, flex, text, overflow, width, screen reader. Spacing lives above.

Toolbar A B

Muted supporting copy via .text-muted.

Truncated: a long line that should ellipsis when space runs out.

Visible label plus screen-reader-only detail for assistive tech

Flex row

One Two Three

Flex column

Top Bottom

Text align

Start

Center

End

Weights

Semibold label

Bold emphasis

Hide / show (sm)

Mobile only ≥640px only

.min-w-0 + truncate

Tag Long flex child that truncates

Grid

Responsive columns and auto-fit — not a 12-col framework.

Col 1

Col 2

Col 3

Span 2

Col 6

Progress stepper

Icon pipeline for onboarding or multi-step flows — done, current, and pending states.

  1. Import CV
  2. Add a job
  3. Review
  4. History

Filter popover

Trigger, elevated panel, and removable active chips.

Tabs

Tablist / tab / tabpanel with keyboard arrows.

Overview panel — status, channel, and next action.

Tooltip

Hover and focus hint via aria-describedby — not title.

Interactive — hover or focus (spring pop via --motion-spring)

Placement — static demos use nested content + space tokens

Appears above
Appears below

Tooltips supplement labels — do not hide required instructions in hover-only content.

Callout

Inline guidance notes — warn by default, with info and danger tones.

Warn callout — review imported fields before saving.

Info callout — optional guidance without blocking.

Danger callout — destructive side effects apply.

Accordion

Collapsible glass sections — single expand by default.

Packet is ready to submit. Review tailored fields before sending.

Triggers use aria-expanded / aria-controls. Set data-type="multiple" to allow several open sections.

Collapse

Single expandable region — Accordion is multi-item.

Close

Reusable dismiss control — host supplies aria-label.

Ready

Popover

Generic floating panel — Escape and click-outside close.

Content uses role="dialog". Filter remains the specialized filter popover.

Forms

Custom select, month, year, and day pickers; 16px on mobile.

MonthPicker shell for profile-style forms.

YearPicker shell for certifications and year-only fields.

DatePicker shell for archive filters and day-level fields.

Hints use --faint for secondary guidance.

Enter a valid email address.

Looks good.

InputGroup

Prefix and suffix addons clipped into one glass control.

https://
$ USD
@
@

Available.

Selection

Checkbox, radio, and switch — glass controls with focus-visible rings.

Checkboxes

Required before continuing.

Radio
Switch

Switch uses a checkbox with role="switch" and synced aria-checked.

Status

Badges, chips, pills, and status dots.

submitted running queued needs_review failed email ats
Jobs12 Ready3 Failed1

Use badges in tables; pills for summary counts; dots for compact lists.

Feedback

Skeletons and empty states.

Message only

Nothing here yet.

With detail

No results.

Try clearing filters.

With action

No applications yet.

Add a job listing to get started.

Progress

Linear bar — determinate value or indeterminate.

Determinate — 42%

Determinate — 78%

Indeterminate

Spinner

Standalone loading indicator — sm and md sizes.

Inline with copy

Divider

Horizontal rule or vertical separator.

Above the rule

Below the rule

Left Right

Scrollbar

Glass-styled overflow chrome — default, thin, and hidden.

Default — scroll to see the thumb.

Modal and sheet bodies use the same chrome.

Menus and pickers inherit it too.

Opt in anywhere with .scrollbar.

Thin — denser rails.

Narrower WebKit gutter.

Same token colors.

Class: .scrollbar--thin.

Dropzone

Glass file drop target — click or drag to pick files.

No file selected.

Avatar

Image or initials — sizes sm, md, lg.

Demo user

Pagination

Previous, next, and numbered page controls.

List

Glass list group — static or actionable with selection.

  • Overview
  • Resume
  • Cover letter

Actionable items — Arrow keys move focus within the group.

Table

Semantic table with glass chrome.

Company Role Status
Acme Product designer Submitted
Northwind Frontend engineer Interview
Contoso Staff IC Draft

Toasts

Transient stack feedback — success, error, warn, info. Live stack defaults to bottom-end; try placement below.

Motion

Entrance utilities and the circular theme reveal — honor prefers-reduced-motion.

.ca-animate-rise — soft lift-in

.ca-animate-enter / .motion-enter

.ca-animate-pop / .motion-pop

.motion-expand — short reveal

98.4% $2.4M 120+

.ca-scramble / data-ca-scramble — digit decipher on view (scrambleElement · ScrambleText). Glyphs are aria-hidden; the final value is the accessible name.

Theme toggle uses a circular View Transition from the control (html[data-theme-to] + --theme-x/y/r). Fallback: .is-theme-leaving / .is-theme-entering on the shell. Also: .msg, .hint, .meta-line for quiet supporting copy. Card grids: stagger ≤6 items @ 60ms (staggerDelayMs).

Overlays

Modal dialog and bottom sheet patterns.

Modals for confirmations that need focus; sheets for short mobile filters and forms.

Scrollspy

Highlights nav links from scroll position in a pane (or the window).

Overview

Scrollspy watches section ids with IntersectionObserver and marks the matching nav link with .is-active and aria-current="location". Scroll this pane to see the side nav update.

Setup

Wrap a nav of hash links in .ui-scrollspy. Point data-scrollspy-root (or the React root prop) at a scroll container when you are not using the viewport.

Usage

Optional rootMargin and threshold tune which band of the root counts as “in view.” Defaults favor the upper portion of the pane so the active link tracks as you read downward.

Accessibility

The active link exposes aria-current="location". Keep section headings clear and give the nav an accessible name. Prefer in-page anchors that match real landmark ids.