The glow film gives to what you love - a warm spectrum resting on paper.
Halation reads Instagram's marketing house as a photo album with one radioactive bookmark. The page itself stays quiet - paper-white canvas, near-black ink, a single cool gray for whispers - so that every drop of color lands like a sticker: the sunset spectrum (gold through tangerine, punch pink, orchid, violet) is spent ONLY on moments of feeling. Type carries hierarchy through sheer size, not weight: one regular cut from caption to a 120px hero, tracked tighter as it grows. Corners are soft and friendly, shadows almost do not exist - depth comes from contrast blocks that flip the page to black. And the motion vocabulary is affection made literal: hearts that bloom, tilt and sail off the top of the frame, a hand-drawn underline that sketches itself beneath the word you love, and a spectrum that never stops drifting through the links.
re-imagined from https://about.instagram.com
Pull this design system into any project - it follows the system's tokens, recipes and rules. Run the commands yourself, or let your coding agent set it up and build.
npx synthesisui@latest loginnpx synthesisui add halation --version 10@import "_synthesisui/ds/halation/tokens.css";
@import "_synthesisui/ds/halation/theme.css";Use the "Halation" design system (slug: halation) to: build the UI I describe next First make sure it's installed: run `npx synthesisui add halation` if `_synthesisui/ds/halation/` isn't in the project yet. Read these files first (highest authority first): - _synthesisui/ds/halation/rules.md - project rules for this system (if present); obey them above everything else - _synthesisui/ds/halation/philosophy.md - the mission, voice and principles (if present); let it shape every screen - _synthesisui/ds/halation/v10/GUIDE.md - how to apply the system, the recipes and the token vocabulary Follow this contract (target framework: next): - First check whether this refers to UI that already exists in the project. If it does, modify only what's needed and keep the rest intact and on-system. If it doesn't, build it new. - Scope the markup with `data-ds="halation"` (or rely on it at the app root). - Style with the design system only: reuse the `.ds-*` recipe classes and the DS-backed Tailwind utilities (`bg-primary`, `text-foreground`, `p-md`, `rounded-lg`, `font-display`…). Never use raw hex/px outside the system's scale. - Make sure `tokens.css` + `theme.css` are imported in the global CSS (see the GUIDE's "How to apply"). - Wire the behavior yourself (open/close, focus, routing) - the system ships the looks, not the JS. Composition (make it look composed, not just correct): - Cap page content with a max-width container and center it - this DS ships `max-w-app` for dashboards/wide UI and `max-w-prose` for text columns. Don't stretch content edge-to-edge. - Give the page a complete, intentional layout: clear vertical rhythm, sensible density and grouped sections. Never leave a single thin row floating on an empty screen. Deliver senior-level, production-quality code: clean structure, accessible (ARIA + keyboard), and responsive.
Paste into Claude Code, Cursor or any coding agent. From your project you can also run npx synthesisui use halation "…".
What to install or load so the system renders at full fidelity - it ships token names and recipes, not the assets.
The system ships token names, not the fonts. Load them (Google Fonts, next/font or Fontsource) or type falls back to a generic family and loses the system's identity.
npm i lucide-reactComponents reference Lucide icon names. Install it (or swap in your own icon set) to render them.
npm i rechartsCharts are themed through your series tokens, but you bring the rendering library (the gallery uses Recharts).
Color
Named scales forged by the synthesis; semantic roles only ever point at them.
color.sky
50#ecf3fe
100#d7e6fd
200#b0cdf9
300#74a4f2
400#4a86e8
500#3a72cf
600#2f5dab
700#254a87
800#1a335c
900#101f38
950#08101d
color.gold
50#fff9e0
100#fff3bf
200#ffe98f
300#ffdf57
400#ffd500
500#f2c500
600#d1a800
700#a68400
800#705900
900#453700
950#241c00
color.leaf
50#e9f9ef
100#cff2dd
200#a1e5bd
300#66d194
400#23b26d
500#1f9e61
600#1a8451
700#14663f
800#0e4429
900#082818
950#04140c
color.veil
300#0b0b1059
500#0b0b10b3
700#0b0b10d9
color.paper
50#ffffff
100#f7f7f8
200#ececee
300#d8d9dc
400#aeb2b8
500#6a717a
600#4e545c
700#33383f
800#1f2328
900#121417
950#060708
color.punch
50#ffe9f2
100#ffd0e3
200#ffa3c8
300#ff62a1
400#ff0169
500#e6005f
600#c40051
700#99003f
800#66002a
900#400019
950#21000d
color.orchid
50#fde7fb
100#fbcdf6
200#f79ded
300#ef5ede
400#d300c5
500#bd00b1
600#a10097
700#7d0075
800#54004f
900#350032
950#1c001a
color.violet
50#f1eaff
100#e2d5fe
200#c5abfd
300#a47bfb
400#7638fa
500#6a2ee0
600#5a27be
700#471f95
800#311566
900#1e0d40
950#100722
color.tangerine
50#fff3e6
100#ffe4c7
200#ffc794
300#ffa257
400#ff7b00
500#f26f00
600#cc5c00
700#a34900
800#703200
900#451f00
950#241000
color.semantic - resolved live via CSS variables
info
{color.sky.500}
faint
{color.paper.400}
muted
{color.paper.500}
scrim
{color.veil.500}
accent
{color.violet.400}
border
{color.paper.200}
canvas
{color.paper.50}
danger
{color.punch.600}
raised
{color.paper.50}
overlay
{color.paper.200}
primary
{color.punch.400}
success
{color.leaf.500}
surface
{color.paper.100}
warning
{color.tangerine.600}
foreground
{color.paper.950}
color.series - categorical data-viz palette (bg-series-*)
series-1
series-2
series-3
series-4
series-5
series-6
series-7
series-8
Foundations
Corner radius, spacing rhythm and elevation - the physical feel of the system.
radius
spacing
shadow
Typography
Display: Hanken Grotesk · Body: Hanken Grotesk · Mono: DM Mono
Motion
Every keyframe runs live below, dressed in the system's own colors - durations, easing curves and the interactions they power.
keyframes - 10 live
easings
durations
interaction patterns
Feeds and strips drift sideways at reading pace, looping seamlessly.
Content rises a breath into place with the soft-pop curve - warm, never bouncy.
Anything lovable answers a press with a double heartbeat.
Badges and reactions pop in with a 6% overshoot, like a sticker pressed onto the page.
A hand-drawn stroke sketches itself beneath the one word that matters.
Hearts bloom from nothing, tilt like stickers and sail off the top of the frame - the double-tap made ambient.
The sunset gradient drifts endlessly through link text - the spectrum never sleeps.
Components · 46
Every value below is a token reference resolved by the renderer - hover, toggle and switch tabs to feel the states. Bespoke components are rendered from their anatomy hint.
The category sticker of the news grid - condensed caps on a straight-cornered chip, each topic claiming one hue of the spectrum at full saturation.
intent
A friendly pill. The primary intent wears the spectrum as a ring - white inside, sunset outside - the system's signature CTA; contrast is the solid ink pill of the app-store row; love fills with punch for moments of feeling.
intent
The floating heart - the system's soul in one glyph. A spectrum-painted heart that blooms, tilts like a sticker and sails off the top of the frame on the ambient loop. Compose several with staggered delays for the full double-tap rain.
size
The gradient link - body text that suddenly burns in the sunset spectrum, with the pan loop drifting the light through it. The arrow is part of the phrase, never an icon bolted on.
tone
The little red bubble that says someone loved this - punch fill, pill corners, a heart and a number. Pops in like a sticker and answers presses with a heartbeat.
tone
A flat album print. White, hairline border, generous 16px corners; depth arrives only on hover as a soft lift. The framed variant is the phone-frame media card; inverse flips to the black contrast block.
tone
Plain
A card wearing this system.
Framed
A card wearing this system.
Inverse
A card wearing this system.
A quiet pill field - the page barely uses forms, so the input stays humble: hairline ring, generous padding, spectrum only on focus.
tone
Identity with a story ring - the sunset spectrum wrapped around a circle, the way a moment announces itself. Image via the ds-avatar-img part.
size
A close circle of friends - story-ringed avatars overlapping softly, each ringed against the paper so every face keeps its light.
Inline text link, for words inside sentences - the underline is the affordance, so it reads as a link without relying on colour alone. For standalone actions use button; for navigation chrome use navbar/sidebar items.
Mono uppercase eyebrow with wide tracking - the HUD microtype that labels a section ("01 · ECOSYSTEM"). Use above headings; data-tone="accent" for the highlighted variant.
tone
HUD data readout - a mono tabular value over a micro uppercase label ("42s · AVG RENDER"). The corner instrument of cinematic scenes; pair with the count-up hook for live-feeling numbers.
Display heading on the system's type scale - the display family at a semibold weight. Pick a `size` step (defaults to 2xl) so headings stay on-scale without hand-set styles.
size
Body copy on the system's type scale. Pick a `size` step and a `tone`; defaults to base body text on the foreground color - so text stays on-system without hand-set styles.
size
tone
Vertical layout primitive - a flex column with a token `gap` (defaults to md). Stack sections/cards without hand-set flex styles.
gap
align
Horizontal layout primitive - a centered flex row with a token `gap` (defaults to sm). Compose toolbars/inline groups without hand-set flex styles.
gap
justify
align
Inline message. Tone maps onto the system's own semantic accents.
tone
Neutral
A message wearing this system.
Accent
A message wearing this system.
Primary
A message wearing this system.
Success
A message wearing this system.
Warning
A message wearing this system.
Danger
A message wearing this system.
Info
A message wearing this system.
Select trigger. Two ways to use it: drop ds-select straight on a native <select> (its default chrome is stripped via appearance:none - wrap it and overlay your own chevron), or use it on a custom trigger (button/div) and nest a ds-select-chevron indicator. Reveals a focus ring on interaction.
Binary toggle - the track wears the system, on flips primary. Set data-state="on" on the track and the thumb.
state
Native checkbox/radio tinted to the system via accent-color. Put ds-checkbox on an <input type="checkbox"> (or radio).
Native range slider tinted to the system via accent-color. Put ds-slider on an <input type="range">.
Native radio tinted to the system via accent-color. Put ds-radio on an <input type="radio"> and give grouped radios a shared name.
Numeric stepper - a value flanked by minus/plus controls. Compose ds-stepper with two ds-stepper-button (each a <button>; add the disabled attribute at a bound) and a ds-stepper-value between them.
Step indicator for a multi-step flow (wizard/checkout/onboarding). Compose ds-steps with ds-steps-step and ds-steps-connector between them; nest a ds-steps-marker (the numbered circle) and ds-steps-label inside each step. Mirror data-state="done|active|upcoming" on BOTH the step and its marker (like switch on/off).
Hairline separator. Horizontal by default; data-orientation="vertical" makes a vertical rule (stretches to the flex row height).
orientation
Segmented control. The trigger marked data-active="true" lifts onto a surface; panels carry the body.
Compact entity/filter token - a pill holding an avatar/icon, a label and an optional ds-chip-remove. Set data-active="true" for a selected filter (tints the primary); use a <button> or add ds-chip-remove for a dismissible chip.
active
Determinate track - the fill carries the primary.
Notification indicator to overlay on an icon/button. ds-count shows a number on a high-contrast inverted bubble (portable in any DS); data-dot="true" drops the label for a small alert dot tinted danger. Position it absolutely over the trigger.
dot
KPI / metric - a label over a prominent value, with an optional delta. Compose ds-stat with ds-stat-label, ds-stat-value and ds-stat-delta (tone=up/down colors the change against neutral). Line several ds-stat in a flex row with a divider/border for a KPI strip.
Data table. Compose <table class="ds-table"> with ds-table-head, ds-table-row, ds-table-cell-head and ds-table-cell.
| Project | Status | Updated |
|---|---|---|
| Halogen | Active | 2h ago |
| Cinnabar | Paused | 1d ago |
| Ember | Active | 3d ago |
Centered dialog over a scrim. Compose ds-modal (the centering layer) with ds-modal-overlay, ds-modal-panel, and ds-modal-header/body/footer.
Off-canvas panel (drawer) for mobile nav and side detail. Compose ds-sheet (the fixed layer) with ds-sheet-overlay (the scrim) and ds-sheet-panel; the panel docks to the right by default - data-side="left" docks it left.
Dropdown/popover surface. Compose ds-menu with ds-menu-item (tone=danger for destructive) and ds-menu-separator.
Form field group. Compose ds-field with ds-field-label, the control, ds-field-hint and (when invalid) ds-field-error.
App navigation rail. Compose ds-sidebar with ds-sidebar-item (active=true marks the current route).
App top bar - brand/search on the left, actions on the right.
Horizontal navigation bar. Compose ds-navbar with ds-navbar-item (active=true marks the current route; data-locked="true" dims a disabled/"soon" item).
Multi-line text field - the input's taller sibling.
Trail of ancestors. Compose ds-breadcrumb with ds-breadcrumb-item (current=true for the leaf) and ds-breadcrumb-separator.
Page navigation. Compose ds-pagination with ds-pagination-item (active=true for the current page).
Zero-data placeholder. Compose ds-empty-state with ds-empty-state-icon, ds-empty-state-title and ds-empty-state-description.
No projects yet
Create your first project to get started.
Transient notification. Tone tints the border; compose ds-toast with ds-toast-title and ds-toast-description.
tone
Small label bubble - inverted surface for contrast against the canvas.
Square, label-less action for toolbars and row controls - a quieter sibling of button.
Loading placeholder block. Ships the muted shape; animate it with Tailwind's `animate-pulse` (or a DS shimmer keyframe).
Engagement blocks · 5
Optional gamification blocks the AI advisor can propose - token-only, so they re-skin to any base. A library to compose from, not a parallel product.
Consecutive-day streak counter - in Halation the spark is a heart, not a flame: you do not burn a streak here, you love one.
Experience / level progress bar - visualizes advancement toward a goal.
Circular progress ring - goal completion at a glance. Set --ds-ring (e.g. 72%).
Level / rank badge - recognizes earned status.
tier
Leaderboard - ranks peers to motivate progress (use sparingly in B2B).
Icons · lucide
Icons inherit the system: color via currentColor, a standardized stroke, sizing on the scale. Lucide by default; more libraries can be enabled per system.
Pages · 3
Full-page layouts assembled only from recipes and tokens - every region re-themes to the system automatically. Icons and media render as placeholders until their adapters land.
We'll tailor the workspace to your answers.
A complete design system, themed end to end - every token in its place, every screen already wearing your brand.
Free to start · no credit card requiredTokens compose into any surface you need.
Charts and dashboards inherit the theme for free.
App shells and landings assume your shape instantly.
Design once at the foundation and every component, chart and template re-dresses itself - no per-screen rework.
Every piece ships measured: contrast, hierarchy and consistency are scored before anything reaches production.
“We rebuilt our whole app on this system in a week - every screen came out consistent by default.”
Spin up your system and ship the first page before lunch.
Charts · 9
Chart recipes themed entirely from token refs - series, grid, axes and fills re-paint to the system automatically. Sample data; the theming is the point.