Surface · standard
H3 styling rendered as a semantic h2
Size and tone can be overridden locally without creating a new stylesheet or component variant.
Supportive Journal · shared design system
UI kit
The shared Journal theme, primitives, states and reusable blocks used by the React application and this website.
Foundation
Semantic tokens
Components refer to roles such as surface, content, action, and status instead of product-specific color values.
Surfaces
Background
background
Surface
surface
Surface muted
surface-muted
Surface selected
surface-selected
Surface hover
surface-hover
Surface soft
surface-soft
Surface elevated
surface-elevated
Lines and content
Border
border
Border strong
border-strong
Text
text
Text muted
text-muted
Text subtle
text-subtle
Text inverted
text-inverted
Actions and focus
Primary
primary
Primary foreground
primary-foreground
Secondary
secondary
Secondary foreground
secondary-foreground
Secondary hover
secondary-hover
Secondary active
secondary-active
Link
link
Link hover
link-hover
Primary hover
primary-hover
Primary active
primary-active
Focus
focus
Semantic states
Success
success
Success soft
success-soft
Success strong
success-strong
Warning
warning
Warning soft
warning-soft
Warning strong
warning-strong
Error
error
Error soft
error-soft
Error strong
error-strong
Typography
Visual hierarchy with semantic control
Heading levels define visual styles. The `as` prop keeps document structure independent from appearance.
H1 visual style · rendered as p in this gallery
Build from a strong foundation.
H2
Clear interfaces scale better
H3
Reusable by default
H4
Sections
H5
Groups
H6
Details
Lead text introduces longer sections with a calm rhythm.
Body text covers regular content and descriptions.
Body small supports secondary information.
Captions work for metadata and concise hints.
Actions
Buttons and states
Variants communicate intent while shared focus, disabled, loading, and press behavior remains consistent.
Feedback
Status, dialogs, and toasts
Semantic colors remain reserved for feedback and shared interaction behavior respects reduced-motion preferences.
NeutralCompleteNeeds attentionFailed
General information for this surface.
Changes have been saved.
Review the highlighted fields.
The request could not be completed.
Forms
Inputs and labels
FormField connects a label, control, hint, and validation message while keeping the input interchangeable.
Use a short, recognizable name.
Overview
Enter at least three characters.
Composition
Surfaces and local overrides
Components own their default appearance. Consumer classes remain available for deliberate, one-off exceptions.
Shared blocks
Forms, navigation and empty states
Product screens compose these shared blocks while retaining their own data and workflows.
Account settings
A reusable form section with native controls.
Example status, announced politely.
Example validation error.
A place for your next idea
Empty states supply a consistent heading, description and action slot.