Assets
The foundational sensory primitives of the design system. Interactive typography tokens, 11-step mathematical color systems, elementa vector icons, and Storyset emotional illustrations.
Typography Tokens
11-Step Color Ramps
Elementa Vector Icons
Storyset Illustrations
Base Props Contract
Type Scales, Fluid Geometry & Foundations
A balanced editorial scale pairing classical serif elegance (Rowan) for expressive headlines with pristine modern sans (Inter) for data-dense engineering clarity.
Type Styles
11 Variants
Interactive Type Sandbox
Type below to preview live typographic rendering
elementa
Specification Table · Heading 1 (H1)
| Property | Design Token Value | Computed Metric |
|---|---|---|
| Size | 3rem to 3.75rem | 48px / 60px |
| Base Color | text-text-primary (var(--text-primary)) | Semantic theme token |
| Leading (Line-Height) | 1.1 | 52px / 66px |
| Font Family | Rowan (Serif) / var(--font-heading) | Variable font face |
| Font Weight | Bold (700) | Weight 700 |
| Tracking | -0.025em (tight) | Optical letter spacing |
| Recommended Usage | Primary page hero headlines, flagship marketing titles, and major architectural announcements. | |
Base Props Contract for <Text> Primitive
Every typographic element in 'get-elementa-ui' inherits these shared, strictly-typed base props.
| Prop Name | Type Signature | Default | Behavior & Description |
|---|---|---|---|
| variant | TextVariant (Enum) | TextVariant.Body | Governs semantic HTML element and token sizing (H1 to H6, Body, Subtitle1, Subtitle2, Button, Caption). |
| color | string | 'text-text-primary' | Tailwind color token or custom CSS variable applied to glyph fill. |
| children | React.ReactNode | Required | The string or nested elements rendered inside the typographic wrapper. |
| className | string | undefined | Optional overrides merged seamlessly using tailwind-merge and clsx. |
| ref | React.Ref<HTMLElement> | undefined | Forwarded DOM ref for imperative measurements and scroll anchoring. |