# litt.md > Nick's design language for web and product UI as a shadcn registry: React and Tailwind CSS v4 components on locked tokens. Technical precision, lit from above: an 8px grid, hairlines, Geist at 14px in three weights by role, warm stone neutrals, glass only on floating surfaces, and quick motion with one expressive moment per view. Every page below is Markdown with the install command, a usage example, the props, the keyboard and what it guarantees for accessibility. The gallery itself is https://littmd.vercel.app (each page at /#), the registry index is https://littmd.vercel.app/r/registry.json, and the changes, release by release with migration steps, are at https://littmd.vercel.app/changelog.md. ## Install Install one component with the shadcn CLI. It brings its dependencies and litt's tokens, every one prefixed with litt, so nothing in the project changes: ```bash npx shadcn@latest add https://littmd.vercel.app/r/button.json ``` Or add `"registries": { "@litt": "https://littmd.vercel.app/r/{name}.json" }` to components.json once, then `npx shadcn@latest add @litt/button`. - Needs a shadcn project (a components.json) with Tailwind CSS v4. - Optional: `npx shadcn@latest add https://littmd.vercel.app/r/base-styles.json` for litt's fonts, heading weights and focus ring across the whole app. - Every installed file names its release in its first lines (`// @litt/button 2026.10.24`). To update, read the changelog since then and install again with `--overwrite`. - In an AI tool: with the @litt registry in components.json, shadcn's MCP server (`npx shadcn@latest mcp init --client claude`, or cursor, vscode, codex) can search litt, read each item and its `-demo` example (`npx shadcn@latest view @litt/button-demo`), and install it. Setup for each tool: https://littmd.vercel.app/#ai. - For the whole design language (taste, tokens, build and critique workflows), install the Claude Code plugin: `claude plugin marketplace add litterthanlit/litt.md`, then `claude plugin install litt-md@litt`. Source: https://github.com/litterthanlit/litt.md. ## House rules - Weight by role: text at 400, titles, buttons and tabs at 500 (font-litt-title), 12px labels at 600 (font-litt-label, carried by text-litt-caption). Never font-medium, font-semibold or font-bold. Nothing is set above 18px. - Tokens only: no hex and no raw colors. Radii are rounded-litt-control (4px), rounded-litt-surface (8px) or rounded-litt-pill (avatars, icon-only buttons, switches). - One accent fill per view, on the primary action. Checkboxes, radios and switches fill with the foreground color. - Glass only on floating surfaces (menus, popovers, dialogs, toasts). Cards in the page flow are raised, with no shadow. - Five data hues carry data (series, categories, heat) and never chrome. - Only transform and opacity animate, through the tier tokens. Under `prefers-reduced-motion` every duration, travel and stagger is zero, in CSS and in the springs, and the components need no provider for it. CI opens every gallery page and the overlays on it with reduced motion on, and fails if anything is still moving one frame later. ## Controls - [Button](https://littmd.vercel.app/docs/button.md): Roomy and slightly rounded, with the label at the title weight. Hover changes the fill and press scales to 0.98, both on the instant tier, so the button answers without ever moving its box. - [Input](https://littmd.vercel.app/docs/input.md): A roomy, slightly rounded field on the same 32, 44 and 56 scale as Button. Focus turns the edge to the focus color and adds a ring, and an error turns it to danger, both on the instant tier, so the field answers without ever moving its box. - [Code input](https://littmd.vercel.app/docs/code-input.md): A short one-time code, such as the six digits from a sign-in email, drawn as one cell per character but built as one real field, so paste, the browser's one-time-code autofill and screen readers all work as in any field. The next cell takes the focus edge and a still caret, and the last character runs onComplete once. The edges fade on the instant tier. - [Number field](https://littmd.vercel.app/docs/number-field.md): A labelled number with − and + inside the field's end. It steps by the arrow keys, by a press, or by holding a stepper down; what is typed is read in the page's locale when the field is left, kept between its bounds, put on the step and shown formatted. Nothing moves: the edge fades on the instant tier, as an Input's does. - [Token input](https://littmd.vercel.app/docs/token-input.md): A field that turns typed or pasted values into removable tokens, such as the senders of a mail rule. It is the Input's field with the Tag's look inside: it grows as tokens wrap, a long list folds into a +N token until you focus it, and tokens fade in and out on the responsive tier while their neighbors slide. - [File drop](https://littmd.vercel.app/docs/file-drop.md): An area to drop files on or choose them from, as a row: an up arrow, what it takes and a Choose files button. While files are over it the dashed edge turns solid and the words say what a drop will do. It turns away files of the wrong type or size and says which and why, and the rows below show each file uploading on a Progress rail, with Retry for one that failed. - [Select](https://littmd.vercel.app/docs/select.md): One value from a short list. The trigger is the Input's field, and the list is the Menu's glass panel: 44px rows, one gliding highlight and a check on the current option. The list grows from the trigger and leaves again, and on a phone it stays anchored beside it. - [Combobox](https://littmd.vercel.app/docs/combobox.md): Type to find one value, or several, in a long list. The Input's field with the Menu's glass list under it: the list grows from the field as you type, filters at once with the first match lit, and keeps one gliding highlight. Several picks sit in the field as tokens that fade in and out. - [Date picker](https://littmd.vercel.app/docs/date-picker.md): A day, or a range of days, from a month calendar, kept as YYYY-MM-DD strings. The field opens the calendar in a popover, a bottom sheet on a phone. A new month slides in from the side it comes from, and nothing else moves. - [Checkbox and radio](https://littmd.vercel.app/docs/checkbox.md): Real checkboxes and radios, drawn in the litt look: a 20px chip at the control radius, or a circle for a radio, filled with the foreground color when on. The accent stays for the one primary action. The label sits on the right and the whole row is clickable. Fill, edge and mark fade on the instant tier, and nothing moves. - [Switch](https://littmd.vercel.app/docs/switch.md): An on or off setting. A pill track with a round thumb, filled with the foreground color when on and never the accent. The thumb slides and the fills fade on the instant tier, and the box never moves. The label sits beside it, or the switch sits at the end of a settings row. - [Slider](https://littmd.vercel.app/docs/slider.md): One value on a range, such as the default animation speed, or a span with two thumbs, such as the builds that took between 20s and 80s. A thin rail, a range filled with the foreground color (never the accent) and round thumbs. The thumbs and the range follow the pointer and the keys at once, with no easing. Only colors fade, on the instant tier. - [Pad](https://littmd.vercel.app/docs/pad.md): Two values set at once on one surface, like tone against length. A dark well with a static dot grid, a round thumb with dashed crosshairs, a dashed circle for the default, and a tooltip that says the value in words. The thumb follows the pointer and the keys at once, with no easing. Only the tooltip fades, on the responsive tier. - [Color picker](https://littmd.vercel.app/docs/color-picker.md): One color, kept as a hex string. A saturation and brightness area, a hue rail, the hex in mono, an eyedropper where the browser has one, and optional swatches. The field opens it in a popover, a bottom sheet on a phone. The thumbs follow the pointer and the keys at once; only the popover moves, on the responsive tier. - [Slide to confirm](https://littmd.vercel.app/docs/slide-confirm.md): A track and a thumb to slide to the end, for an action that cannot be undone, such as deleting a project on a phone. The thumb follows the finger one to one; let go early and it springs back on the responsive tier, reach the end and it confirms. The thumb is also a button, so Enter, Space or a screen reader confirms too. - [Time scrubber](https://littmd.vercel.app/docs/time-scrubber.md): A ruler of time that slides under a fixed needle, with what happened along the run marked on it in its status color. Drag it and it follows one to one; let go and it settles on the nearest step, or on an event let go near, on the responsive tier. In fun mode it can be thrown, and coasts to the event its speed reaches. Page Up and Page Down go from event to event. - [Segmented control](https://littmd.vercel.app/docs/segmented.md): A short choice in one track. The selected surface glides to your pick on the responsive tier, and color changes are instant, so the control answers without ever resizing. - [Tabs](https://littmd.vercel.app/docs/tabs.md): Underline or segmented. The indicator slides between tabs, the label only changes color, and the panel fades in from the side of the tab you picked. - [Tag](https://littmd.vercel.app/docs/tag.md): A small label at the control radius, with the look of a selected segment, that names a thing, files it under a category or reports its state. A status tag colors its text, never the fill, and always says the status in words. A category can take one of the five data hues. Nothing about it moves. - [Kbd](https://littmd.vercel.app/docs/kbd.md): The key cap for a real shortcut: a 20px chip in Geist Mono. It is a real , it is static, and every shortcut hint in the gallery is this one component. - [Icons](https://littmd.vercel.app/docs/icons.md): Ninety-eight icons and the status mark, drawn by hand on a 16-unit grid with a 1.5 stroke, round caps and joins, in the text color. Each one fits one of four keylines, so a circle, a square and a box read the same size in a row. They are still: an icon never spins, pulses or draws itself in. ## Overlays - [Tooltip](https://littmd.vercel.app/docs/tooltip.md): A small solid label for icons, shortcuts and status. It opens after 200ms of hover or at once on focus, then grows from its trigger and travels in from the side it renders on. On touch it opens on a press and hold, so a tap only does what the button does. - [Popover](https://littmd.vercel.app/docs/popover.md): A floating glass panel for a small form, a share link or a detail card. It grows from its trigger's corner and slides in from the side it really opens on. On a phone it becomes a bottom sheet. - [Hover card](https://littmd.vercel.app/docs/hover-card.md): A small card that previews what a link points at: a person behind their name, a project behind its link. It opens after the pointer rests on the link, or at once on keyboard focus, and stays while the pointer crosses into it. It grows from the link on the responsive tier, as a popover does. A touch never opens it, so the link must lead to the same thing. - [Menu](https://littmd.vercel.app/docs/menu.md): A glass dropdown with one highlight that glides from row to row. It grows from its trigger and travels from the side it really opens on. On a phone a submenu replaces the list in the same panel. - [Context menu](https://littmd.vercel.app/docs/context-menu.md): The Menu at the pointer: a right-click, Shift+F10 or a press and hold on touch. The same glass, rows and gliding highlight, grown from the pointer's corner. Every action in it is also somewhere else. - [Command menu](https://littmd.vercel.app/docs/command-menu.md): Search every page, project and action from the keyboard. The panel drops in over a dimmed canvas, and one highlight glides between rows as you arrow through them. On a phone it sits at the top edge and follows the keyboard. - [Dialog](https://littmd.vercel.app/docs/dialog.md): The one expressive moment. The panel is placed, not thrown: it rises by the travel token's distance, settles from 0.98 and may bounce slightly. Exits are quicker and never bounce. On a phone it is a bottom sheet you can drag away. - [Lightbox](https://littmd.vercel.app/docs/lightbox.md): One image of a set at the size of the screen, on the canvas, with the rest a key or a swipe away. Opening is the view's expressive moment, as a dialog's: the image rises by the travel token and settles from 0.98. Moving to the next image is a short fade on the responsive tier, and on a touch screen a finger swipes it away one to one. - [Toast](https://littmd.vercel.app/docs/toast.md): Toasts arrive from just below the corner and settle, and they leave sideways by the same small distance. Older ones stack behind the newest and open into a list when you hover or tab into them. On a phone they drop away on a timeout, and a swipe sends them off sideways. ## Layout - [Glass header](https://littmd.vercel.app/docs/header.md): A sticky glass bar with a wordmark, a nav and your actions. The page blurs under it as it scrolls. When the bar is narrow, the links fold behind a menu button instead of squeezing. - [Breadcrumb](https://littmd.vercel.app/docs/breadcrumb.md): Where a page sits, with a slash between the levels and the current page in the foreground. A long trail folds its middle into a menu, and a phone shows the last two levels. - [Steps](https://littmd.vercel.app/docs/steps.md): Where someone is in a flow of a few steps, in the step marks Plan uses: a check for done, a half-filled circle for now, an empty circle for what is left. A row above a form, a column beside one, and in a narrow box "Step 2 of 4" with a rail per step. Done steps can be gone back to; nothing animates. - [Card](https://littmd.vercel.app/docs/card.md): A raised surface for one independent object that links somewhere. A linked card is one real link stretched over the card; hover moves its fill one step, and nothing lifts, grows or scales. - [Media](https://littmd.vercel.app/docs/media.md): One picture in a frame with a fixed shape, so the page never jumps when it arrives. While it loads the frame is still surface-2, then the image fades in on the instant tier; if it fails, the frame keeps its size and says so. A hairline lies over every image, and with onOpen the frame becomes a button that opens a Lightbox. - [Carousel](https://littmd.vercel.app/docs/carousel.md): A row of slides that scrolls sideways with the browser's own scrolling and snaps each slide to the start edge. The next slide peeks at the end; the range is said in words and Previous and Next move a page. It never moves on its own: no autoplay, no loop. Buttons, keys and a mouse drag's release scroll smoothly, and under reduced motion they jump. - [Avatar](https://littmd.vercel.app/docs/avatar.md): A round mark for a person, a client or a company: a photo, initials on the tint of one of the five data hues, or a picture drawn from the name in that hue: fluid, film or thermal, under static grain. The hue and the picture follow from the name, so the same name looks the same everywhere. A group overlaps them and counts the rest. Nothing about it moves. - [Callout](https://littmd.vercel.app/docs/callout.md): An inline note in the page flow: a tip, a heads-up or a result to act on. A raised surface with an icon, a title, a line of detail and an optional action. Only the icon takes the status color, and a hidden word says the same thing. It measures its own width, and nothing about it moves. - [Accordion](https://littmd.vercel.app/docs/accordion.md): Sections that open in place, split by hairlines. The height snaps and is never animated: the content fades in and drops a little, the chevron turns half a turn, and the rows below move to their new place by transform, so the page never jumps. - [App shell](https://littmd.vercel.app/docs/app-shell.md): The frame around an app's pages: a 240px sidebar that runs the full height of the page, with its links kept in view as the page scrolls. On a phone the sidebar goes, a glass top bar holds a menu button, and the nav opens in the same bottom sheet as Dialog and Popover. - [Empty and loading states](https://littmd.vercel.app/docs/states.md): What a view says when it has nothing yet, is waiting or has failed. Empty offers one action, a skeleton keeps the content's exact size, and an error says how to retry. The states are static, so only the list's own entrance and the retry button move. - [Progress](https://littmd.vercel.app/docs/progress.md): A thin rail for work that is happening now, such as an upload or an import: the label and a reading above it, the done part in the foreground, filling on the instant tier. It ends done or failed, said in words and announced once. With no value yet the rail stays empty: nothing sweeps, pulses or shimmers. - [Scroll area](https://littmd.vercel.app/docs/scroll-area.md): A region that scrolls inside the page, never the page itself. The scrolling is the browser's own; only the thumb is litt's, shown while it scrolls or a mouse is over it, and a hairline marks each edge that has more beyond it. Both fade on the instant tier. - [Tree](https://littmd.vercel.app/docs/tree.md): Things inside things, opened a level at a time: a project's files, a docs site's pages. Rows of 32px indented 16px a level, with a hairline guide down each level, and the selected row in the selected segment's look. The chevron turns on the responsive tier and the children appear in place, with nothing growing. It has the keys of a file tree. - [Resizable](https://littmd.vercel.app/docs/resizable.md): Panels side by side or stacked, with a hairline between each two that a person drags to give one more room. The line follows the pointer one to one, each panel stays between its smallest and largest size, and a double click puts the two back. The arrow keys move it too, and the layout can be kept for next time. - [Forms](https://littmd.vercel.app/docs/form.md): How the fields make a page: one left-aligned column, sections on a settings page, and an error summary that takes focus when a submit fails. Fields and link colors answer on the instant tier, and the saved toast is the view's one expressive moment. ## Data - [Table](https://littmd.vercel.app/docs/table.md): Real table semantics with hairline rows, mono figures and a sticky header. Its rows can arrive in one staggered cascade, this page's single expressive moment; sorting, filtering and inserting stay responsive, and hover never moves anything. A virtual body draws only the rows in view, so ten thousand rows scroll as lightly as forty, loads the next page from a server as you near the end, and rows can be selected with a box, Shift for a range. Filters can live in the page address, so a filtered view can be bookmarked or shared. - [List and cards](https://littmd.vercel.app/docs/list.md): Airy project rows and raised cards. The rows arrive in one staggered cascade, this page's single expressive moment; filtering and inserting stay responsive, and hover never moves anything. - [Action bar](https://littmd.vercel.app/docs/action-bar.md): A glass bar that floats at the bottom of the view while something is selected: the count in words, the actions as small buttons, and Clear. It rises by the travel token on the responsive tier when the selection starts and drops away when it ends. It is a toolbar: one Tab stop, the arrow keys between its buttons, and Esc clears. - [Pagination](https://littmd.vercel.app/docs/pagination.md): Previous and next for a table that shows one page of many. The range comes first, in words and mono. Page numbers show only when the row is wide enough, and the buttons at either end disable. Nothing about it moves; the rows it pages are the table's job. - [Stat](https://littmd.vercel.app/docs/stat.md): A number tile for one figure: a small label, the value large in the sans with tabular numbers, an optional delta in words and an optional trend at the foot. Green and red are for news only. A group of tiles measures itself, and nothing about a tile moves. - [Details](https://littmd.vercel.app/docs/details.md): An information card of labelled facts about one thing, such as a deployment or a client: in rows with the labels in one column, or in a grid with each label above its value. A value can be copied, a missing one says so, and a loading card keeps its height. Nothing moves; the copy icon swaps at once. - [Rolling number](https://littmd.vercel.app/docs/rolling-number.md): A number that updates in place, such as a Stat's value. Only the digits that change move: each leaves half of the travel token and fades as the new one comes in from the other side, on the responsive tier. Up from below when the value rises, down from above when it falls. The first render and reduced motion just show the number. - [Chart](https://littmd.vercel.app/docs/chart.md): Bar and line charts in plain SVG, and a meter. Marks are never the accent: by default the foreground, one series at 55% with the current mark full, or up to three stepping down; or the data hues, when color says which series is which. Hairline gridlines, mono labels, a tooltip on hover and focus, and one entrance on the responsive tier. - [Legend](https://littmd.vercel.app/docs/legend.md): Toggles which series a chart shows: a row of buttons, each a hued rail swatch and a name, pressed while its series shows. The Legend filters and the chart draws. Only color changes, on the instant tier, and nothing moves. - [Sparkline](https://littmd.vercel.app/docs/sparkline.md): A trend in one thin line, with no axes, gridlines or labels: a 2px line in the foreground or a data hue, a dot on the latest value and an optional dashed baseline. It sits beside a figure or in a table row. It is static, and it shows shape, not values. - [Breakdown](https://littmd.vercel.app/docs/breakdown.md): One whole split into its parts: a thin split rail with a segment per part, then a row per part in the Meter's anatomy, or a small legend for a tile. Each part takes a data hue and the words stay neutral. It is static, like the meter. - [Bar list](https://littmd.vercel.app/docs/bar-list.md): A ranked list where each row carries a thin bar for its share: a label, a bar, a mono value and a change in words. The bars and values line up across rows, the list measures itself, and nothing about it moves. - [Funnel](https://littmd.vercel.app/docs/funnel.md): How many went on at each step, as rows rather than a trapezoid: a thin rail per step filled to its share of the first, in one data hue, with the step-to-step share in words between them. It is static, like the meter. - [Gauge](https://littmd.vercel.app/docs/gauge.md): One value against a range, drawn as a semicircle of fine ticks with the figure in the opening. The ticks up to the value take the foreground or one data hue, and the last one is longer to mark the value. It is static, like the meter. - [Dot plot](https://littmd.vercel.app/docs/dot-plot.md): A distribution drawn as stacks of dots, mirrored about a center line, so you see where most values fall. With a goal, dots inside it take a data hue and the rest stay gray. The median is a line, an outlier can be named, and the legend gives the shares in numbers. - [Spread](https://littmd.vercel.app/docs/spread.md): How values spread, one thin rail per row on a shared scale. The full range is faint, the middle half takes a data hue and the median is a tick, with the median in mono at the end. The rails line up, a goal is a dashed line through every row, and nothing moves. - [Heatmap](https://littmd.vercel.app/docs/heatmap.md): A dot matrix whose depth says how much: usage per day, deploys per week, mail per hour. One data hue in four steps over an empty dot, mono labels, a tooltip on hover, touch and focus, and a legend from less to more. - [Cohort grid](https://littmd.vercel.app/docs/cohort-grid.md): Retention by signup week as a real table: a row per cohort, a column per period since signup, and in every cell the number with a dot in one data hue's four steps. It scrolls sideways inside its own box and never moves. - [Timeline](https://littmd.vercel.app/docs/timeline.md): The steps of a run in order: when each started, a status icon on a hairline rail, a label and how long it took, grouped into phases. In a proportional timeline a long step draws its time as a bar on the rail in its phase's color, with the last run beside it. A strip shows the whole run at a glance. Nothing moves. - [Log view](https://littmd.vercel.app/docs/log-view.md): The lines a build or a deploy writes as it runs, on the code block's quiet surface: numbered, timed, with warnings and errors marked in their status color and in words. It follows the newest line while you are at the bottom; scroll up to read and it stays put, with a button that says how many lines came since. Nothing moves on its own. ## Agents - [Message](https://littmd.vercel.app/docs/message.md): A chat between a person and an agent, read top to bottom. The agent's words sit on the page with no bubble, and the person's turn is a raised bubble on the right. The conversation scrolls on its own, keeps the latest line in view while an answer streams, and offers Jump to latest when you scroll up. A new turn enters once on the responsive tier, and nothing moves while text streams. - [Composer](https://littmd.vercel.app/docs/composer.md): Where the person writes to an agent: a text field that grows a line at a time, file chips, a toolbar and a round Send that turns into Stop while the agent answers. Send is the view's one accent fill. Only colors and the edge fade, on the instant tier, and a file chip enters on the responsive tier. - [Thinking](https://littmd.vercel.app/docs/thinking.md): The agent's reasoning as a quiet disclosure above its answer. It reads "Thinking" with a clock that counts whole seconds, then "Thought for 12s", and it folds itself away when the answer starts unless you opened it. No shimmer, no pulse, no spinner: the clock is the only live signal. - [Tool call](https://littmd.vercel.app/docs/tool-call.md): What an agent did, one row per call: a status mark, the action in words, the target in mono and the time, with the input and output folded under it. A group folds a run of calls and closes itself when they finish. An approval asks first, in the flow. Nothing spins: running is a still half circle. - [Plan](https://littmd.vercel.app/docs/plan.md): An agent's steps for a task, ticked off as it works: the label and a count over a thin rail in the foreground, then each step with its status mark. The running step is a half-filled circle that stays still, and a done step steps its color back and is never struck through. A status swaps at once and only colors fade. A step added later fades in. - [Code block](https://littmd.vercel.app/docs/code-block.md): Code in an answer, in a tool's output, or a diff. Mono on a quiet surface with the file name and a Copy button in a header, highlighting in the foreground's tones only, and a diff whose sign carries the status color. Long lines scroll inside the block. Nothing moves. ## Blocks Whole screens composed from the components, each one registry item (`registry:block`) that installs the components it uses into `components/litt/` and the screen itself into `components/litt-blocks/.tsx`. Unlike the components, the screen is yours to change: replace the sample data at the top of the file, keep the layout, and never reinstall it over your edits. Start from a block when a task asks for a screen like one of these. - [Dashboard](https://littmd.vercel.app/#dashboard): The studio's deploy dashboard, built from the parts: an app shell with a full-height sidebar, four number tiles, a chart of deploys per day, and a table of recent deploys with its pagination. On a phone the sidebar becomes the bottom sheet. One accent fill in the view would be a primary button, and this view has none. Install: `npx shadcn@latest add https://littmd.vercel.app/r/dashboard.json` - [Usage](https://littmd.vercel.app/#usage): A studio plan's usage, drawn only in rails: trends in thin lines at the foot of the figures, storage and bandwidth split by kind, the plan's limits with their budgets, and build times by site. Each hue names one kind of file across the whole page, everything else stays in the foreground, and nothing moves. Install: `npx shadcn@latest add https://littmd.vercel.app/r/usage.json` - [Growth](https://littmd.vercel.app/#growth): A template store's last twelve weeks, drawn in rails: sign-ups by source as thin stacked columns you can filter by source and by week, the funnel from visit to paid, and retention by signup week. Each source keeps one hue, everything else stays in the foreground, and only the chart's entrance moves. Install: `npx shadcn@latest add https://littmd.vercel.app/r/growth.json` - [Insights](https://littmd.vercel.app/#insights): The studio's inbox and build insights, built from the data-color parts: a dot plot of reply times, a bar list of shortcuts, a mail rule, a voice pad, a deploy timeline, a credits gauge and a heatmap of the credits by day. Each hue means one thing in its panel, the deploy stays in the quiet foreground, and Create rule is the one accent fill in the view. Install: `npx shadcn@latest add https://littmd.vercel.app/r/insights.json` - [Agent](https://littmd.vercel.app/#agent): A chat with Litt, the studio's agent, fixing the failing Halo build, built from the agent parts: the conversation, the thinking, a plan, a run of tool calls, an approval, the answer with its code, and the composer. The run waits for you at the deploy. The one accent fill is Allow while the approval waits, and Send when there is something to send. Install: `npx shadcn@latest add https://littmd.vercel.app/r/agent.json` - [Projects](https://littmd.vercel.app/#projects): A studio's projects as one screen: a title with the count, one toolbar with the status filters, a search, a list or grid switch and New project, then the rows or the cards. Every empty case says why and offers the way back. The rows arrive in one staggered cascade, and New project is the one accent fill. Install: `npx shadcn@latest add https://littmd.vercel.app/r/projects.json` - [Deployment](https://littmd.vercel.app/#deployment): One deploy as a screen: where it sits, its commit as the title with who started it behind a hover card, the status in words, the facts in a row and a progress rail while it builds. The files it changed sit in a tree beside the build log, with a line between them to drag; pick a file and its diff takes the log's place. On a phone the two take turns. Visit site is the one accent fill and waits until the site is live. Install: `npx shadcn@latest add https://littmd.vercel.app/r/deployment.json` - [Settings](https://littmd.vercel.app/#settings): An account's settings as one screen: the profile, what we email you about and how the app looks, then Save and Cancel, and deleting the studio apart behind a slide to confirm. A failed save puts a summary on top that takes focus, and a good one ends in a toast, the view's one expressive moment. Save is the one accent fill. Install: `npx shadcn@latest add https://littmd.vercel.app/r/settings.json` - [Team](https://littmd.vercel.app/#team): A studio's people as one screen: the head count, the seats as one meter, and a table with each person's avatar, a role you change in place, an Invited tag on an open invite, when they were last active and a menu of actions. Invite opens a dialog that takes several addresses at once, and a removal is undone from its toast. Invite is the one accent fill. Install: `npx shadcn@latest add https://littmd.vercel.app/r/team.json` - [Activity](https://littmd.vercel.app/#activity): A studio's activity as one screen: a filter by kind, then the events grouped by day, each one sentence in two inks with its time in the mono. A deploy says how it ended in a tag, in words. Show earlier adds the next day below, and a kind with nothing in it says so. Nothing is accent filled, and nothing moves on its own. Install: `npx shadcn@latest add https://littmd.vercel.app/r/activity.json` - [Sign in](https://littmd.vercel.app/#sign-in): The page someone meets before the app: the wordmark, one left-aligned column with the title in two inks, email and password, Sign in and a second way in, and from 1024 up a quiet column of what is new. An empty or wrong field says so under itself and takes focus, and a refusal from the server shows in a callout above the fields. Sign in is the one accent fill. Install: `npx shadcn@latest add https://littmd.vercel.app/r/sign-in.json` - [Case study](https://littmd.vercel.app/#case-study): One project told as a page: where it sits, the title in two inks, a wide hero image, the facts in a row, the story with its labels in a narrow left column, the series in a carousel, the details in a grid and the next project as one linked card. Every image opens the lightbox on itself and the lightbox runs through them all in page order; the carousel follows it, so closing lands on the right slide. Opening the lightbox is the page's one expressive moment. Install: `npx shadcn@latest add https://littmd.vercel.app/r/case-study.json` ## Optional - [Changelog](https://littmd.vercel.app/changelog.md): every release, with an install line per item and migration steps. - [Everything in one file](https://littmd.vercel.app/llms-full.txt)