Every component, live.

Guidelines

primary

The one main action per view (Play, Follow creator, Done). Never two primaries side by side.

secondary

The supporting action beside the primary (Follow, More info).

outline

A standalone action that should not compete with the primary (Remind me).

ghost

Quiet actions in rows and headers (See all).

destructive

The one action that confirms a deletion or takes access away (Delete my account, Disconnect Claude), filled in vermilion (danger). It lives in the dialog that asks first, and it is that dialog's main action, in place of a primary. The way into it is a TextLink variant="destructive", never a red button on the page. Removals you can simply undo (Remove a tag, Unfollow) stay ghost.

• size="lg" for hero actions, md by default, sm for desktop-only secondary actions. Every size except sm meets the 44px target.
• shape="pill" on phones; the default rounded corner (radius-md) on desktop.
• Labels say what happens, in sentence case. Add aria-label when the visible label needs its object ("Follow" → "Follow EBA").
• Pass href to render a link that looks like a button.
• An action that spends fragments passes cost ("~100"): the price sits after the label behind a hairline, with the fragment mark. Keep the label a plain verb ("Generate", "Start", "Retake"); never write the price into the label.
• media and media-secondary: the same two roles drawn over video or key art (hero Play and More info, Skip intro, shorts CTA). They never change with the theme.
• Pressing sinks it to 97% on motion-instant; it settles back on motion-fast.
• A disabled primary turns into a quiet fill (button-disabled-bg), not a faded white. Say why it's disabled in a visible line near it, never only in a tooltip.

Guidelines

• solid on desktop surfaces; plain inside a bar that already has a fill (player controls).
• glass for phone chrome floating over the page (back, share); media over video or manga pages, which stays dark in both themes.
• pressed turns it into a toggle (aria-pressed); the pressed glyph takes icon-button-pressed-fg and settles in once when turned on. Use it for Like and Captions.
• Pressing sinks it to 90% on motion-instant; it settles back on motion-fast.
• 44px by default, size="lg" 52px for the desktop action rail.
• The label names the object: "Share EBA", "Next page", "Remind me about episode 2".
• With href it renders a link, for an icon that goes somewhere (Back, Open in Cut); without it, a button.
• primary: the one action as an icon alone, filled (a phone's floating New). One per screen.
• attention: something waits behind it, such as unread notifications on the bell. The state dot, the same one a current row and a waiting line use, sits on the glyph's upper corner. The label says how many: "Notifications, 3 new".

Guidelines

• Use a row of chips inside Chip.Group (named by label); exactly one is selected.
• Chips filter what is shown. They never navigate and never run an action; that is Button.
• 44px tall on every platform so they are easy to hit.
• A chip sinks on press and its fill changes on motion-fast.
• On phones pass scroll to Chip.Group: one row that scrolls sideways instead of wrapping.

Icon and soft

icon adds a leading glyph in the accent. variant="soft" is for multi-select sets such as traits: selected chips take chip-soft-selected-bg with an accent edge instead of the solid fill.

Guidelines

• 2–4 short options. More than four is a list, not a segment.
• fill on the page; glass when it floats over artwork or video (the shorts feed).
• The selected segment uses segmented-item-active-bg, drawn as one indicator that slides to the new segment on motion-base; each segment is a button with aria-pressed, inside a group named by label.

Guidelines

• Every option keeps its own drawn icon (shot-closeup, lighting-neon, movement-dolly-in…). Auto uses auto.
• One choice by default; multiple for effects. Tapping the chosen tile again clears it back to Auto.
• With one choice, the selection ring slides to the new tile on motion-base; a tile sinks on press.
• Put a help on every field: a bold first line saying what it controls, then examples. It shows through FieldHelp.
• Pass note with the chosen option's one-line description, so the creator learns what it does.
• 4 columns for long lists, 3 for short ones.

Large: choice cards

size="lg" turns each option into a card with icon, label, description, footnote and an optional badge. An option that sets a price passes cost ("~10 a second"), shown under the description with the fragment mark. Use it for the first choice of a flow (how to make something), three to four cards, with the chosen option's form directly below on the same screen.

An option with disabled (a plan that is not open yet, with a "Coming soon" badge) dims and cannot be chosen.

Fragments packs and plans pass image (the pack's or plan's own art: Spark, Bloom and Cascade grow from one flame to an orbit; Creator and Studio have their own) and amount (the fragments it gives, "24,990"), which is the card's headline with the mark. cost stays what an option charges, never what it gives. The art stands on its own stage above the name, and the chosen card's art comes forward a little. With columns={1} (a phone's sheet) the art sits beside the words. Put the price in description ("$24.99 · never expires") and on the action ("Buy Bloom · $24.99").

Guidelines

• Use it for a setting that takes effect at once (Lower the music under voices, Name who speaks, Loop this track).
• A choice between named options is a SegmentedControl, not a switch.
• The thumb crosses the track on motion-fast and stretches while held.
• showLabel sets the label beside it, the whole row toggling: the settings row of a panel (Loops without a seam).
• hint is a quiet line under the label saying what the setting does; a child sits at the row's end, before the switch (the audio's language).

Guidelines

• The value says what is set (Close-up · push in · low), not a description.

Guidelines

• href makes it a link, otherwise a button. variant="strong" for the one that matters most in its row.
• variant="destructive" is the quiet way into a deletion ("Delete my account", "Delete The Winter"), in text-danger. It opens the dialog whose Button variant="destructive" does the deleting.
• It underlines under the pointer and takes the focus ring; it never becomes a filled button.
• Use a Button when the action is the point of the view; a TextLink when it sits beside what it acts on.

Guidelines

Motion: state changes fade with motion-fast; entrances use motion-base and ease-enter.

Guidelines

States

• Closed: the field shows the chosen value and a chevron.
• Open: the field edge turns select-open-border, the chevron flips, and a menu drops in under it on select-menu-bg. The chosen option sits on select-option-selected-bg with a check; hover is select-option-hover-bg. The menu is a listbox and each row an option, so arrow keys and screen readers work as a native select.
• Empty: the placeholder in field-placeholder.

On phones, prefer the platform picker (an iOS menu or an Android dropdown menu) and keep this field as its trigger.

Motion: the menu drops from the field on motion-fast with ease-enter and leaves on motion-instant with ease-exit. Escape or a press outside closes it.

Guidelines

Motion: state changes fade with motion-fast; entrances use motion-base and ease-enter.

Guidelines

• Use it on every Studio control a newcomer might not know (shot type, depth of field, Story Map).
• Write the first line as what the field controls, then "Examples:".
• It is a real button, so keyboard users reach it.

Guidelines

• Options are {label, color}; each swatch is named by its label for screen readers.
• labels writes the names under the swatches (coats, where the names matter: Tabby, Calico).
• A patterned option passes pattern (stripes, patches, spots) and the marks colours drawn over its base.
• Put it in a Field with its label; a free description can follow it in the same field.

Guidelines

• It uses the same label and hint as TextField and Select, so a form reads as one column whatever the control.
• optional adds "· optional" to the label.

Guidelines

• Used in the editor for colour, volume, opacity and loudness.
• The readout is in the unit people use, never the raw 0–100.
• onChange makes the track draggable and arrow-key operable (Shift moves 10). The thumb grows under the pointer and follows it with no easing.

Guidelines

• Use it, not a slider, when one unit matters: a 1px border, 2° of rotation, a font size. A slider is for a feel (strength, mix), where the readout is the point.
• unit follows the value ("px", "°", "pt"). Steps call onStep with −1 or +1.
• In a narrow inspector stack one per row; two may share a row only when both fit at their longest value.

Guidelines

• Five links at most: Home, Series, Shorts, Manga, Creators. Mark the current one with current; it gets aria-current="page" and the topnav-indicator underline, which slides to a newly current link on motion-base.
• It sits on the page or over the hero's top scrim, never in a filled bar.
• Phones never show TopNav; they use TabBar.
• actions (a prop, or children with slot="actions") sit before search and the account: the notifications bell, an IconButton with attention while something is unread.

Guidelines

Motion: state changes fade with motion-fast; entrances use motion-base and ease-enter.

Guidelines

• Exactly four items: Home, Shorts, Manga, You. The current item fills with tabbar-item-active-bg; the fill slides to a new item on motion-base.
• Create is separate from the destinations because it starts a task rather than going somewhere. Pass onCreate={null} to hide it.
• Float it 12px from the sides and above the home indicator; content scrolls under it.
• On iOS use the system tab bar with Liquid Glass and these four items, not a re-drawn copy.

Guidelines

• Always write the subtitle. It tells a new viewer what the shelf holds: "Shorts · videos under a minute", "Places in the story".
• size="lg" (title-2) on desktop, md (title-3) on phone.
• Give the See all link an ariaLabel with its object ("See all EBA shorts").
• size="xs" is a label over a strip or a group inside a panel ("The issue, spread by spread"): 12px, no subtitle, no link; children sit at the row's end, such as a key.
• icon and count head a group in a list (a faction and how many are in it). With no action link, children sit at the row's end (a button).
• size="sm" (17 px) heads a section inside a page.

Guidelines

• Pass page, pages and, when the total is known, total, pageSize and noun: the count reads "1–24 of 31 shorts".
• Lists of productions page at 24, as the product's clips list does; search and filters sit above the list and send you back to page 1.
• Far pages fold into an ellipsis around the current one: 1 … 4 5 6 … 12.
• hrefs gives each page an address; without it the pages are buttons that call onChange with the page.
• The current page's fill slides to the new page on motion-base; numbers sink on press.
• Put it under the list it pages, across the list's full width. One per list.

Guidelines

• title and context: "New issue · Bad Memories". closeLabel says what closing does ("Close. Nothing is created").
• steps and current draw a Stepper in the middle, only when the flow has more than one step.
• slot="end": the balance (AniCanonKit.FragmentBalance) in AniCanon.
• One way out per screen: this close button. Back lives in FlowFooter, and only when a step precedes.

Guidelines

• note says what happens next or what it costs ("Free. Nothing is generated until you start it").
• The action is its child: one primary Button, with its cost when it spends.
• back takes label, href or onClick.
• slot="start" holds what leaves the step when it is not Back (Cancel creation, Skip for now, Show details).

Guidelines

Motion: moving on fills the line toward the next step on motion-base; the new current step settles in and a done step's check appears with ease-enter. variant="bar" is the phone's form: a segment per step under the title, then "Step 2 of 3 · Photos". tone="media" draws it over a camera.

Guidelines

• kind sets the frame: episode 16:9, short 9:16, manga 1:1.414 with a paper corner and a spine shadow. Never put one kind's art in another's frame.
• Continue watching passes logo (the series logo laid over the art) and progress (0–1).
• Shorts pass duration and count; episodes pass duration; manga pass badge for New.
• meta joins facts with a middle dot: "EBA · Season 1 · Episode 1". In a creator's list it says where the production is ("Cut · 3 takes", "14 Oct · 3.4K views"); attention marks the ones waiting for the creator with the accent dot, below the art, never over it.
• A linked card's frame sinks on press; the art leans in on hover and focus, and watched progress draws in when the card appears.
• Give the card a width from the layout (a grid column or a fixed shelf width); the frame keeps its ratio.
• The corner follows the size: thumbnails 160px wide or less use radius-sm, 64px or less radius-xs, so a small frame never turns into a pill.

Guidelines

• Only on artwork. It always sits on badge-bg, so it reads on any picture in either theme.
• Durations in m:ss, counts short ("1.2M views").
• variant="new" for a just-released issue or episode. One New badge per card at most.
• variant="alert" for a state that changed for the worse: a place burning or destroyed, a character dead. It fills with badge-alert-bg; use it for that one state, never for decoration.
• icon puts a 14 px glyph before the label. Use it when the state has a glyph (a trait, a warning); leave it off for durations and counts.
• On a surface, not over a picture: variant="neutral" for a state (rendering, setup not finished), attention for one that waits for you, outline for where something comes from (Ep 1, Short). dot puts a dot before a state that is live.

Guidelines

• size="lg" (104px) on the desktop series page, md (72px) on phone and in the player.
• The role is a few words a viewer understands ("Leads the E.R.A.", "Power of wind"), never internal production data.
• The portrait is decorative; the name is the label.
• Without an image it shows the initial in the same circle, until a portrait is approved.
• selected (true or false) makes it a choice: a ring and a check say it is chosen (who wears a look).
• muted dims the face: the character is no longer in the story at that moment (dead, gone).
• Under a small face (sm, xs) in a column, the name reads at 12 px and the name and role are cut to the cell, so a panel grid of four stays tidy; larger faces wrap their names.
• layout="row" puts a small portrait beside the name and role (the people in a character's life). size is lg, md, sm (44), xs (36) or a number of pixels.

Guidelines

• imageStyle moves the crop (object-position:30% 40%).
• figure lays a cut-out over the picture (a character on a place). Prefer a real render.
• onClick makes it a toggle button (aria-pressed follows selected) that sinks on press; the accent ring grows in on motion-fast.
• title and meta caption it under the picture (a library item, a panel to pick).
• placeholder is a frame that is not made yet: an empty frame naming what will fill it ("Board drawn when you approve the cut"). Never fake a picture.
• radius="none" sits it flush inside other art (a split view, a loupe of frames); radius="lg" for a cover.
• Mount it; never draw .sk-thumb by hand.
• fit="contain" shows the whole picture (a sheet); paper sets it on the white a sheet is drawn on, in either theme. radius is none, md, lg, xl or full (a round crop of a face). develop lets a new picture develop in once.

Guidelines

• A linked row sinks on press and its picture leans in on hover; rows never take a hover fill. onClick is for client-side navigation.
• One row, one thing. A row never holds two actions of the same weight.
• List wraps rows and names the list (label).
• attention reads the quiet line in the text colour after the same state-dot: a take that waits for you, as MediaCard marks a production.
• slot="lead" replaces the icon or image (a play button); slot="main" replaces the title and quiet line (a sound's waveform and its length).
• chevron adds a trailing chevron when the row opens a page. List with surface sets the rows in a surface, as a phone groups them.

Guidelines

• Each tag carries its own button: removeLabel names what it does ("Leave out Silver chain"). A tag that is off reads struck through and its button puts it back (restoreLabel).
• With a placeholder the tags sit in a field you type more into.
• Short words, lower case unless a name.

Guidelines

• Use it when there are more options than fit a panel: the panel says what is set, the dialog (or picker) holds every option. Studio's direction for a panel is the example: shot type, angle, lighting, lens.
• label names the group; slot="action" sits beside it ("All options").
• Each item takes label, value and an optional icon; give href or onClick to open its choice.

Guidelines

Motion: state changes fade with motion-fast; entrances use motion-base and ease-enter.

Guidelines

Motion: it rises in on motion-base with ease-enter and leaves on motion-fast with ease-exit.