@tempoxyz/ds 0.3.10 → 0.3.11

package/dist/docs/foundations/typography.md

@@ -0,0 +1,266 @@
+# Typography
+
+Type sets for titles, body text, values, and code.
+
+## Overview
+
+Type in Tempo is quiet and direct. Inter carries the interface, Pilat gives titles and large numbers their character, and JetBrains Mono keeps addresses and code legible.
+
+Each set bundles a family, size, weight, line height, and tracking into one token, so you choose a role instead of tuning properties. A set keeps one size at every screen width.
+
+```tsx
+import { style } from '@tempoxyz/ds'
+
+namespace styles {
+  export const title = style({ typography: 'heading.h2' })
+
+  export const body = style({ color: 'content.secondary', typography: 'body.b2' })
+}
+```
+
+## Typefaces
+
+Three bundled families cover every set.
+
+* **Inter (100 to 900):** Body text, labels, buttons, and table cells.
+* **Pilat (100 to 900):** Titles, display text, and large values.
+* **JetBrains Mono (400 to 700):** Addresses, hashes, keys, and code.
+
+## Type Sets
+
+Six sets cover the interface, from hero titles down to small labels.
+
+### Display
+
+Hero titles and large amounts, in light and regular weights that let size carry the emphasis. [Amount](/docs/components/amount) uses display type at its largest size.
+
+* `display.d1`: 44px, weight 300, line height 41.8px
+* `display.d2`: 36px, weight 400, line height 34.2px
+
+### Value
+
+Large readings, such as balances and dashboard numbers, with tight tracking so the digits read as one figure.
+
+* `value.v1`: 80px, weight 400, line height normal
+* `value.v2`: 52px, weight 400, line height normal
+* `value.v3`: 40px, weight 400, line height normal
+
+### Heading
+
+Page, dialog, section, and card titles, in a medium weight. Tracking tightens as the size grows, so large titles stay compact.
+
+* `heading.h1`: 32px, weight 500, line height 36.8px
+* `heading.h2`: 24px, weight 500, line height 27.6px
+* `heading.h3`: 20px, weight 500, line height 23px
+* `heading.h4`: 18px, weight 500, line height 20.7px
+
+### Body
+
+Paragraphs, descriptions, labels, buttons, and table cells, in a regular and a strong weight at each size.
+
+* `body.b1`: 16px, weight 400, line height 22px
+* `body.b1Strong`: 16px, weight 500, line height 22px
+* `body.b2`: 14px, weight 400, line height 20px
+* `body.b2Strong`: 14px, weight 500, line height 20px
+* `body.b3`: 12px, weight 400, line height 16px
+* `body.b3Strong`: 12px, weight 500, line height 16px
+
+* **Weight (400 and 500):** Strong sets add emphasis without a larger size.
+* **Default (body.b1):** The page default, a size down on dense screens.
+* **Inputs (body.b1):** Large fields keep 16px, so iOS Safari won't zoom.
+* **Buttons (body.b2Strong):** Buttons set their own labels, one size per button.
+
+### Mono
+
+Addresses, hashes, keys, and code, in one size.
+
+* **Addresses and Hashes (mono.m1):** Hex values and monospace table cells.
+* **Commands and Keys (mono.m1):** Snippets and secret values.
+
+### Utility
+
+Short metadata labels in the mono family, with wide tracking. The design sets them in uppercase, which a component applies itself, since the sets keep the text's case.
+
+* `utility.m1`: 12px, weight 400, line height 16px
+* `utility.m2`: 10px, weight 400, line height 12px
+
+* **Label (utility.m1):** Metadata labels above or beside a value.
+* **Small Label (utility.m2):** The smaller size, for labels in tight spaces.
+
+## Guidelines
+
+### Build Hierarchy With Few Sizes
+
+Build hierarchy with size and weight, not color. Most screens need a page title, section titles, and body text.
+
+* **Page Title (heading.h2):** One per page, including app shell and dialog titles.
+* **Section and Card Title (heading.h3):** Section, surface, and popover titles.
+* **Small Title (body.b1Strong):** Compact titles, such as empty states and legends.
+* **Body and Secondary Text (body.b1):** Reading text, in the primary or secondary color.
+
+Keep headings in order. Choose the element by its place in the outline and the set by its look.
+
+**Do:** Let the component set the label and description sizes.
+
+```tsx
+<Field.Root>
+  <Field.Label>Amount</Field.Label>
+  <TextInput.Group>
+    <TextInput.Control defaultValue="25.00" />
+  </TextInput.Group>
+  <Field.Description>Available balance: 120.00 USDC.</Field.Description>
+</Field.Root>
+```
+
+**Don't:** Use all caps or bold every line to create hierarchy. Write in [sentence case](/docs/foundations/content/writing-style#capitalization).
+
+```tsx
+<p>
+  <strong>AMOUNT</strong>
+</p>
+<p>
+  <strong>Available balance: 120.00 USDC.</strong>
+</p>
+```
+
+### Match Sets to Their Role
+
+* **Wrapping Text (body):** Anything that can wrap.
+* **Labels (body.b2Strong):** Field labels and short lines beside controls.
+* **Titles (heading):** Page, dialog, section, and card titles.
+* **Hero Numbers (display and value):** Balances and dashboard readings.
+
+### Use Tabular Figures for Numbers
+
+Tabular figures align digits in columns and keep live values from shifting. [Amount](/docs/components/amount), [NumberField](/docs/components/number-field), [Slider](/docs/components/slider), and numeric table cells already set them.
+
+**Do:** Align amounts with tabular figures, such as `Amount` with `align="right"`.
+
+```tsx
+/**
+ * Do example for "Use Tabular Figures for Numbers" on the Typography page.
+ * Align amounts with tabular figures, such as `Amount` with `align="right"`.
+ * @module
+ */
+import { Amount, style } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.column()}>
+      <Amount align="right" symbol="PathUSD" value="1111.11" />
+      <Amount align="right" symbol="PathUSD" value="8808.80" />
+      <Amount align="right" symbol="PathUSD" value="4170.25" />
+    </div>
+  )
+}
+
+namespace styles {
+  export const column = style({ display: 'grid', gap: '8', width: '12rem !custom' })
+}
+```
+
+**Don't:** Stack amounts in proportional figures, where digits drift out of line.
+
+```tsx
+/**
+ * Don't example for "Use Tabular Figures for Numbers" on the Typography page.
+ * Don't stack amounts in proportional figures, where digits drift out of line.
+ * @module
+ */
+import { style } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.column()}>
+      <span {...styles.amount()}>1,111.11 PathUSD</span>
+      <span {...styles.amount()}>8,808.80 PathUSD</span>
+      <span {...styles.amount()}>4,170.25 PathUSD</span>
+    </div>
+  )
+}
+
+namespace styles {
+  export const amount = style({
+    color: 'content.primary',
+    fontVariantNumeric: 'proportional-nums !custom',
+    textAlign: 'right',
+    typography: 'body.b2Strong',
+  })
+
+  export const column = style({ display: 'grid', gap: '8', width: '12rem !custom' })
+}
+```
+
+If you render a number yourself, such as a metric tile, set tabular figures in its style.
+
+```tsx
+style({ fontVariantNumeric: 'tabular-nums !custom' })
+```
+
+### Use Monospace for Hashes and Code
+
+Set addresses, hashes, keys, and code in monospace, so similar characters stay distinct and equal-length values align. [Hex](/docs/components/hex), [Snippet](/docs/components/snippet), and [SecretValue](/docs/components/secret-value) apply it. Labels and prose stay out of it.
+
+**Do:** Set hashes in `mono.m1`, so they align and `I`, `l`, `0`, and `O` stay distinct.
+
+```tsx
+/**
+ * Do example for "Use Monospace for Hashes and Code" on the Typography page.
+ * Set hashes in a `.mono` set, so they align and `I`, `l`, `0`, and `O` stay distinct.
+ * @module
+ */
+import { style } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.column()}>
+      <span {...styles.value()}>0x1f0a9c3e7b11d4e0</span>
+      <span {...styles.value()}>0x8d1Il0O4e2b7a96c</span>
+      <span {...styles.value()}>0x7777a1b2c3d4e5f6</span>
+    </div>
+  )
+}
+
+namespace styles {
+  export const column = style({ display: 'grid', gap: '8' })
+
+  export const value = style({ color: 'content.primary', typography: 'mono.m1' })
+}
+```
+
+**Don't:** Set hashes in a proportional set, where equal-length values drift apart.
+
+```tsx
+/**
+ * Don't example for "Use Monospace for Hashes and Code" on the Typography page.
+ * Don't set hashes in a proportional set, where equal-length values drift apart.
+ * @module
+ */
+import { style } from '@tempoxyz/ds'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.column()}>
+      <span {...styles.value()}>0x1f0a9c3e7b11d4e0</span>
+      <span {...styles.value()}>0x8d1Il0O4e2b7a96c</span>
+      <span {...styles.value()}>0x7777a1b2c3d4e5f6</span>
+    </div>
+  )
+}
+
+namespace styles {
+  export const column = style({ display: 'grid', gap: '8' })
+
+  export const value = style({ color: 'content.primary', typography: 'body.b3' })
+}
+```
+
+### Keep Lines Readable
+
+* **Line Length (45 to 75 characters):** Cap paragraphs with `maxWidth: '65ch !custom'`. Dialogs already cap their width.
+* **Alignment:** Left-align text. Center only short text, such as an empty state title.
+* **Minimum Size (12px):** Don't set interface text smaller. The smallest body set, `body.b3`, stops here.

package/dist/docs/index.md

@@ -0,0 +1,137 @@
+# Tempo Design System
+
+> Foundations, guidelines, and components for Tempo products.
+
+Each page is the Markdown of the documentation at ds.tehq.dev for this version of the package. A link to /docs/<path> in a page resolves to <path>.md in this folder.
+
+## Introduction
+
+- [FAQ](introduction/faq.md): Common questions about building with, and contributing to, Tempo Design System.
+- [Getting Started](introduction/getting-started.md): Install Tempo Design System and render your first component.
+
+## Foundations
+
+- [Accessibility](foundations/accessibility.md): The accessibility baseline for every Tempo component, and what you still own.
+- [Agents](foundations/agents.md): How coding agents read these docs and the source, and the rules they follow.
+- [Color](foundations/color.md): Color tokens for text, surfaces, borders, and status, with contrast rules.
+- [Tone](foundations/content/tone.md): How Tempo's voice adjusts to the reader, from a first visit to an error.
+- [Voice](foundations/content/voice.md): Tempo's personality in words, consistent across every product.
+- [Writing Style](foundations/content/writing-style.md): How Tempo writes interface text: sentence case, a verb first, and plain words.
+- [Iconography](foundations/iconography.md): Icons from the Tempo catalog, and how to size, color, and label them.
+- [Building From Intent](foundations/intent.md): Choose each component by the job of its content, not by the markup it replaces.
+- [Layout](foundations/layout.md): Page structure, grid, spacing, radius, and elevation.
+- [Linter](foundations/linter.md): Oxlint rules that check how your app uses Tempo Design System.
+- [Motion](foundations/motion.md): Easing curves, durations, and reduced-motion rules for state changes.
+- [Radius and Padding](foundations/radius-and-padding.md): How corner radius and padding pair, from fields to modals.
+- [Typography](foundations/typography.md): Type sets for titles, body text, values, and code.
+
+## Products
+
+- [Tempo Console](products/tempo-console.md): Tempo Console is the web app for Tempo API projects, keys, usage, and billing.
+- [Tempo Performance](products/tempo-performance.md): Tempo Performance is the public benchmark dashboard for the Tempo network.
+- [Tempo Wallet](products/tempo-wallet.md): Tempo Wallet is the first-party wallet for balances, transfers, and deposits.
+
+## Patterns
+
+- [Blockchain Values](patterns/blockchain-values.md): Formats addresses, hashes, amounts, and timestamps so people can verify them.
+- [Dashboards](patterns/dashboards.md): Summarizes system metrics, such as throughput, in tiles, filters, and charts.
+- [Destructive Actions](patterns/destructive-actions.md): Match the safeguard on a destructive action to its impact and its reversibility.
+- [Empty States](patterns/empty-states.md): Explain why a region has nothing to show, and offer the next step that fills it.
+- [Errors and Validation](patterns/errors-and-validation.md): Check values at the right moment, and state how to fix each problem.
+- [Feedback and Status](patterns/feedback-and-status.md): Name each system state once, and choose Toast, Alert, or Banner by urgency.
+- [Forms](patterns/forms.md): Order fields, labels, and actions so a person completes a form in one pass.
+- [Loading](patterns/loading.md): Show that content or an action is on its way, with an indicator to fit the wait.
+- [Navigation](patterns/navigation.md): Move between product areas, page views, and nested pages in one shared frame.
+- [Payments](patterns/payments.md): Build send, receive, and deposit flows, from the amount to the receipt.
+- [Responsive Layout](patterns/responsive-layout.md): Adapt layouts from a 320px phone to a wide desktop with shared breakpoints.
+- [Tables and Lists](patterns/tables-and-lists.md): Present records, such as payments and API keys, to scan, compare, and act on.
+
+## Components
+
+- [Overview](components.md): Components for building Tempo products, grouped by the job each one does.
+- [Accordion](components/accordion.md): Stacks collapsible sections that each reveal a labelled panel.
+- [AddressCard](components/address-card.md): Shows a wallet address to receive funds, with its QR code and networks.
+- [AgentLogo](components/agent-logo.md): Shows the logo of an AI agent that works with a wallet.
+- [Alert](components/alert.md): Shows an inline message tied to nearby content.
+- [AlertDialog](components/alert-dialog.md): Asks you to confirm a critical action before it happens.
+- [Amount](components/amount.md): Formats a number as money or a token amount.
+- [AmountInput](components/amount-input.md): Accepts a decimal amount, such as a payment or transfer value.
+- [AppShell](components/app-shell.md): Places a sticky sidebar beside the main content column.
+- [AssetChip](components/asset-chip.md): Labels a supported asset or network in a small chip, which can also pick one.
+- [Autocomplete](components/autocomplete.md): A text input that suggests values while people type.
+- [Avatar](components/avatar.md): Represents a person, contact, or wallet with an image, initials, or an icon.
+- [Badge](components/badge.md): Labels a status or category in a compact chip.
+- [BadgedLogo](components/badged-logo.md): Marks a token or an app with a small badge on the corner of its logo.
+- [Banner](components/banner.md): Shows a full-width message about the system or page.
+- [BarChart](components/bar-chart.md): Shows values over time as stacked bars, such as the daily spend of each agent.
+- [Breadcrumbs](components/breadcrumbs.md): Shows where the current page sits in the site hierarchy.
+- [Button](components/button.md): Triggers an action, such as submitting a form or sending a payment.
+- [ButtonGroup](components/button-group.md): Lays out the actions at the foot of a dialog or focused flow.
+- [Calendar](components/calendar.md): A month grid for picking one date or a date range.
+- [Callout](components/callout.md): Sets a short passage of body text apart in a subtle box.
+- [Checkbox](components/checkbox.md): Turns a single independent option on or off.
+- [CheckboxGroup](components/checkbox-group.md): Shares one value array across a group of checkboxes.
+- [ChoiceGroup](components/choice-group.md): A segmented control for a few mutually exclusive options.
+- [Choicebox](components/choicebox.md): A selectable tile with an optional icon, title, and description.
+- [Code](components/code.md): Sets a command, identifier, or value apart inside a sentence.
+- [Combobox](components/combobox.md): A text input that filters a list of fixed options while people type.
+- [Container](components/container.md): Centers content at a maximum width.
+- [CopyButton](components/copy-button.md): Copies a value to the clipboard and confirms the copy.
+- [DatePicker](components/date-picker.md): Shows the selected date and opens a calendar in a popup.
+- [Dialog](components/dialog.md): Opens a modal popup over the page.
+- [Drawer](components/drawer.md): Slides a modal panel in from an edge of the viewport.
+- [Empty](components/empty.md): Fills a region that has nothing to show yet.
+- [Field](components/field.md): Links a label, description, and error message to a control.
+- [Fieldset](components/fieldset.md): Groups related fields under a shared legend.
+- [Frame](components/frame.md): Lays out a header, body, and footer in a column.
+- [Gauge](components/gauge.md): Shows a measurement within a range as a ring.
+- [GetStartedVisual](components/get-started-visual.md): Illustrates one step of a get started flow at the top of its card.
+- [Grid](components/grid.md): Lays out children on a responsive grid.
+- [HeroVisual](components/hero-visual.md): Shows animated streaks and a title beside the steps of a setup flow.
+- [Hex](components/hex.md): Shows a hex string, such as an address, truncated to fit.
+- [IconTile](components/icon-tile.md): Anchors a centered modal with one icon in a rounded square.
+- [Identicon](components/identicon.md): Shows a unique gradient avatar derived from an address.
+- [Inline](components/inline.md): Lays out children in a horizontal row.
+- [Inset](components/inset.md): Pads content with spacing tokens.
+- [Kbd](components/kbd.md): Shows a keyboard key or shortcut.
+- [ListGroup](components/list-group.md): Stacks rows for details, pickers, checklists, and settings.
+- [LoadingDots](components/loading-dots.md): Shows three pulsing dots for inline loading.
+- [Menu](components/menu.md): Opens a list of actions from a button.
+- [NativeSelect](components/native-select.md): A native select styled as a field, which opens the browser's own picker.
+- [NetworkLogo](components/network-logo.md): Shows the logo of the network a token lives on.
+- [NumberField](components/number-field.md): A numeric input with increment and decrement buttons.
+- [OtpField](components/otp-field.md): Accepts a one-time passcode, one character per slot.
+- [Pagination](components/pagination.md): Moves between pages of a long list.
+- [Popover](components/popover.md): Opens a non-modal popup anchored to a trigger.
+- [Progress](components/progress.md): Shows how far a task has advanced.
+- [Qr](components/qr.md): Renders a value as a QR code.
+- [RadioGroup](components/radio-group.md): Lets you pick a single option from a short list.
+- [SecretValue](components/secret-value.md): Masks a secret and adds reveal and copy buttons.
+- [Select](components/select.md): Opens a list of options for choosing one value.
+- [Separator](components/separator.md): Draws a rule between groups of content.
+- [SidebarMenu](components/sidebar-menu.md): Vertical navigation for sidebars and drawers.
+- [Skeleton](components/skeleton.md): Holds the place of content while it loads.
+- [Slider](components/slider.md): Picks a single value or a range by dragging.
+- [Snippet](components/snippet.md): Shows a command or value with a copy button.
+- [Spinner](components/spinner.md): Shows that something is loading.
+- [SplitBar](components/split-bar.md): Splits one total between two parts, with a legend under the bar.
+- [SplitButton](components/split-button.md): Pairs a primary action with a menu of alternatives.
+- [Stack](components/stack.md): Lays out children in a vertical column.
+- [StatusChip](components/status-chip.md): Names the status of a payment, an authorization, or a network.
+- [StatusIndicator](components/status-indicator.md): Names the status of a system or a service with a dot and a label.
+- [StatusRow](components/status-row.md): Follows the status of one payment or task while it runs.
+- [Stepper](components/stepper.md): Shows progress through a fixed sequence of steps.
+- [SuccessHero](components/success-hero.md): Confirms that a setup flow finished, on a dark card of animated streaks.
+- [Surface](components/surface.md): A card container for grouping related content.
+- [Switch](components/switch.md): Toggles a setting that applies immediately.
+- [Table](components/table.md): Displays tabular data in rows and columns.
+- [Tabs](components/tabs.md): Switches between related views.
+- [TempoLogo](components/tempo-logo.md): Shows the Tempo brand logo.
+- [TextInput](components/text-input.md): A text field with optional prefix, suffix, and clear button.
+- [Textarea](components/textarea.md): A multi-line text field.
+- [Toast](components/toast.md): Shows a brief notification that dismisses itself.
+- [Token](components/token.md): Shows which token an amount is in, and opens a picker to change it.
+- [TokenLogo](components/token-logo.md): Shows a token logo by contract address or symbol.
+- [Tooltip](components/tooltip.md): Shows a short label for a control on hover or focus.
+- [VerificationCode](components/verification-code.md): Shows a code that a person compares with the one another app shows.
+- [Visual](components/visual.md): Illustrates the top of an onboarding or feature modal.

package/dist/docs/introduction/faq.md

@@ -0,0 +1,132 @@
+# FAQ
+
+Common questions about building with, and contributing to, Tempo Design System.
+
+## Getting Started
+
+### Which Surface Should I Use?
+
+Choose the surface by the platform you ship to. The surfaces share a design language but not code, so don't import one from the other.
+
+| I am building...          | Surface | Import                |
+| ------------------------- | ------- | --------------------- |
+| A web application         | Web     | `@tempoxyz/ds`        |
+| A React Native mobile app | Mobile  | `@tempoxyz/ds/mobile` |
+
+Web components render DOM elements and compile with a Zyzz bundler plugin. Mobile components render React Native views and compile with Metro. [Getting Started](/docs/introduction/getting-started) shows each setup.
+
+### Do I Need to Import a Stylesheet?
+
+No. The library publishes no stylesheet.
+
+* **Vite:** The [Vite plugin](/docs/introduction/getting-started#setup) emits the variables, the Inter, Pilat, and JetBrains Mono fonts, and keyframes once. Each component emits its own rules, so a build carries only the styles it uses.
+* **Rollup, Webpack, and esbuild:** The adapters emit a generated `/zyzz.css` that you load once.
+* **Mobile:** Metro compiles library and app styles during the bundle.
+
+The Zyzz plugin is the only supported web setup.
+
+### How Do I Style My Own Markup?
+
+Use `style` and `variants` from `@tempoxyz/ds` with TDS tokens, such as `content.primary`, `background.elevated`, `'24'`, and `body.b2`. Group the definitions in a `namespace styles` block.
+
+If your app needs its own tokens, extend `variables` in your own Zyzz config, as the Custom Variables setup in [Getting Started](/docs/introduction/getting-started#setup) shows.
+
+## Components
+
+### Can I Change How a Component Looks?
+
+Use the component's props first, such as `variant` and `size`.
+
+* **Web:** Components accept `className` and `style`, and keep your classes beside their own.
+* **Mobile:** Components accept React Native `style`. Import variables from `@tempoxyz/ds/mobile`.
+
+If you need a token the library does not have, extend `variables` as [How Do I Style My Own Markup?](#how-do-i-style-my-own-markup) shows.
+
+### What If the Library Doesn't Have the Component I Need?
+
+Build it in your app from library components and `style`, with TDS tokens. Keep that code in your app. If other products need it too, propose it for the library.
+
+### How Do I Request a Component, Variant, or Token?
+
+Open an issue in the Design System project in Linear. Include:
+
+* The use case.
+* The proposed contract, such as props, variants, or token names.
+* Links to the relevant Figma designs.
+* Consumer code or a pull request that shows the need.
+
+If an issue already covers the proposal, reuse it. A proposal joins `@tempoxyz/ds` after designer approval and an approved Figma definition.
+
+### Why Isn't a Figma Component in the Library?
+
+The library includes only components with a verified production family in Figma. Archived and experimental Figma components stay out until a production version exists.
+
+The [Components](/docs/components) overview lists what ships today. Sidebar pages marked 🚧 are not written yet.
+
+### Which Components Exist on Mobile?
+
+`@tempoxyz/ds/mobile` has a smaller set, and some names differ from web.
+
+| Mobile       | Web counterpart                                                                   |
+| ------------ | --------------------------------------------------------------------------------- |
+| `Avatar`     | [Avatar](/docs/components/avatar)                                                 |
+| `Badge`      | [Badge](/docs/components/badge)                                                   |
+| `Button`     | [Button](/docs/components/button)                                                 |
+| `CodeInput`  | [OtpField](/docs/components/otp-field)                                            |
+| `IconButton` | [Button](/docs/components/button) with `shape="icon"`                             |
+| `Skeleton`   | [Skeleton](/docs/components/skeleton)                                             |
+| `Spinner`    | [Spinner](/docs/components/spinner)                                               |
+| `TextButton` | [Button](/docs/components/button) with `variant="tertiary"`                       |
+| `TextInput`  | [TextInput](/docs/components/text-input) inside a [Field](/docs/components/field) |
+| `Toast`      | [Toast](/docs/components/toast)                                                   |
+| `Toggle`     | [Switch](/docs/components/switch)                                                 |
+
+### Do Web Components Work in Mobile Browsers?
+
+Yes. [Responsive Layout](/docs/patterns/responsive-layout) shows how to adapt a layout from a phone to a desktop.
+
+## Design
+
+### How Do Light and Dark Schemes Work?
+
+Every color has a light and a dark value, so you write each color once.
+
+* **Web:** Values follow the inherited CSS `color-scheme`. Set `color-scheme: light dark` on the root to follow the system, or apply `vars({ colorScheme: 'dark' })` to fix one region.
+* **Mobile:** `Provider colorScheme="system"` follows the device setting. To override it, pass `light` or `dark`. To render a subtree with inverse variables, pass `vars="inverse"`.
+
+The library does not store a scheme preference. If your app offers a theme setting, persist the choice yourself.
+
+### Which Is Right When Figma and Code Disagree?
+
+Figma is the design reference. Variables, icons, and components are maintained by hand, so the two can drift.
+
+If a component does not match its production Figma design, use Report issue on its page and include the Figma link. If you need the change before the library has it, keep the implementation in your app.
+
+### Where Are the Figma Files?
+
+The Figma files define every variable, icon, and component:
+
+* [TPDS 1.0 Platform](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs/TPDS-1.0-Platform) for Web variables and components
+* [TDS Platform](https://www.figma.com/design/pcO4NIuw8wx9U2nGJOcjzE) for Web icons
+* [TDS App](https://www.figma.com/design/8iu5856rBEI3pnZ6YaIBgw) for Mobile, whose families the mobile components implement
+
+## Docs
+
+### How Do I Report a Docs Issue?
+
+On wide screens, On this page includes two actions:
+
+* **Report issue:** Opens a GitHub issue titled with the page name and its path.
+* **Edit page:** Opens the MDX source of the page on GitHub.
+
+On narrower screens, use the GitHub link at the bottom of the sidebar.
+
+### How Should Coding Agents Use These Docs?
+
+Every page has a Markdown twin, `/llms.txt` indexes them all, and the library documents each export in its source. [Agents](/docs/foundations/agents) lists the files and the rules an agent follows when it generates Tempo UI.
+
+## License
+
+### How Is the Library Licensed?
+
+The library is open source under the [MIT license](https://github.com/tempoxyz/ds/blob/main/LICENSE-MIT).