How Inline looks and reads.
Exact values and usage for every layer of Inline: the foundations, the components they build, the patterns that compose them, and the voice, brand, and platform contracts that hold it all together. Documented from the shipped product and kept current with it.
Start here
Color
Midnight carries text and actions, Butter Yellow marks and selects, and twelve question-type colors title the feedback taxonomy.
Typography
Geist for the interface and the draft, Geist Mono for data, in fifteen named roles that fix size, weight, and line height.
Spacing
A base-4 scale, component insets, and the layout that keeps the draft at a readable measure.
Sizing and density
Control heights, targets, icons, avatars, and a draft-led workspace sized to the viewport.
Border radius
A crisp 0/2/4/8/12px hierarchy rooted in the square marker and document plane.
Elevation and shadow
A border-first depth model with restrained raised, overlay, and dialog shadows.
Logo
A Butter Yellow highlighter mark beside the lowercase Sora wordmark, with clear space and minimum sizes.
UI frameworks
Motion for animation, Bklit for charts, Magic UI as selective source, all restyled with Inline tokens.