Platform

UI frameworks

Three libraries are approved for building Inline. Each is an implementation layer, not a look: every adopted component takes Inline tokens, type roles, and accessibility requirements before it ships.

Motion for React

The standard animation layer, imported from motion/react. Use it for entrances, exits, layout changes, disclosure, and coordinated sequences in the product. This documentation site itself stays static apart from a CSS-only page entrance, so it never depends on a CDN.

import { motion } from "motion/react";

<motion.div
  initial={{ opacity: 0, y: 12 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.24, ease: [0.16, 1, 0.3, 1] }}
/>

Motion tokens used with the library
Token	Value	Use
`duration-xs`	80ms	Hover and pressed feedback
`duration-sm`	160ms	Exits, overlays, small state changes
`duration-md`	240ms	Entrances, disclosure, page and step changes
`duration-lg`	480ms	Marketing reveals only; the product stops at md
`ease-out`	cubic-bezier(0.16, 1, 0.3, 1)	Default curve for everything entering

Fade plus ≤12px translate. Movement clarifies where content came from; it never performs.
Reduced motion is a contract. Every animation has a static equivalent through Motion's reduced-motion support.
Never block reading. Animation may explain state but may not delay access to the draft or controls.
One transform owner. Small color and border transitions may stay CSS, but CSS and Motion never animate transforms on the same element.

Reference: motion.dev/docs/react

Bklit UI

The default chart and data-visualization layer. Use its React primitives for axes, grid, legend, and tooltip instead of introducing a second chart library.

Yellow marks the point. Butter Yellow identifies the one series or datum that matters; remaining series use ink steps or the chart series tokens.
Flat geometry only. Bars, lines, areas, dots, and maps. No 3D depth, glass surfaces, chart gradients, or decorative animation.
Neutral scaffolding. Axes and gridlines stay neutral; labels use Geist, numeric labels use Geist Mono with tabular figures.
Color is never alone. Tooltips, legends, patterns, and direct labels must work without color.
No private data leaves. Never upload student writing or research data to an external chart studio; use public, synthetic, or approved aggregate data.

Reference: bklit.com/docs

Magic UI

Source material, not a parallel design system. A component may be adopted when it solves a real content or interaction need: Text Highlighter, Number Ticker, Scroll Progress, Animated List, File Tree.

Adoption steps for a Magic UI component
Step	Before shipping an adopted component
1	Copy it into Inline's component library and rename it for its product job.
2	Replace every local color, type, radius, and motion value with Inline tokens.
3	Remove ornamental effects that do not explain content or state.
4	Verify keyboard behavior, reduced motion, responsive layout, and zoom.

Excluded outright.

Shiny or rainbow buttons, particles, meteors, cursor followers, confetti, aurora effects, animated gradients, and perpetual marquees. If removing the effect leaves no product value, don't add the component.

Reference: magicui.design/docs/components

The approval check

A library component is ready when it looks native to Inline without its original demo CSS: Inline tokens throughout, type roles respected, and nothing left that exists only to impress.