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 init --styles tailwind --ds halationnpx synthesisui@latest connectnpx synthesisui@latest connectUse 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/v11/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"). - Implement 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 · 13
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 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
A card wearing this system.
A card wearing this system.
A card wearing this system.
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
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.
Inline message. Tone maps onto the system's own semantic accents.
tone
A message wearing this system.
A message wearing this system.
A message wearing this system.
A message wearing this system.
A message wearing this system.
A message wearing this system.
A message wearing this system.
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 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 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
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.
A close circle of friends - story-ringed avatars overlapping softly, each ringed against the paper so every face keeps its light.
Engagement blocks · 1
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.
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.
Charts · 4
Chart blueprints themed entirely from token refs - series, grid, axes and fills re-paint to the system automatically. Sample data; the theming is the point.