# Dataprovider Design System

> The single source of truth for Dataprovider component styling: a shadcn-compatible registry of vanilla HTML and CSS components plus design tokens. The same source files power the marketing site (www.dataprovider.com) and the console web app.

This file is the entry point for AI tools. Every link below points to a JSON file whose complete HTML and CSS source is inlined in its files[].content fields, so one fetch per item gives you everything. There are no relative paths to follow.

## How to use

- Fetch the JSON URLs directly. Each item is self-contained.
- Start with the tokens. Every component reads its colour, type, spacing, radius and shadow from the --dp-* variables the tokens define.
- tokens.css is the default marketing theme. tokens-console.css redefines the same --dp-* names under [data-theme="console"] for the console app, so the same markup is themed by whichever file wraps it.
- Want the whole system in one request? Fetch the full bundle: https://ds.dataprovider.dev/r/all.json
- Use the data-* variants documented in each component HTML comment. Do not invent variant names or hardcode colour, type or spacing.

## Tokens

- [tokens](https://ds.dataprovider.dev/r/tokens.json): CSS custom properties for colour, type, spacing, radius and shadow. The single source of truth for theming. Every component reads these variables.
- [tokens-console](https://ds.dataprovider.dev/r/tokens-console.json): A [data-theme="console"] override of the tokens for the web app look: Helvetica Neue, purple, blue, gold and trust-grade colours. Wrap a subtree to apply it.

## Forms

- [button](https://ds.dataprovider.dev/r/button.json): Clickable action with brand variants and three sizes. Set the look with data-variant (primary, cta, secondary, outline, ghost, danger) and the size with data-size.
- [input](https://ds.dataprovider.dev/r/input.json): Labelled text field with optional hint, error text, sizes and a leading-icon group. Mark an invalid field with aria-invalid.
- [textarea](https://ds.dataprovider.dev/r/textarea.json): Multiline text field that mirrors the input styling. Supports a hint, an error and an invalid state set with aria-invalid.
- [select](https://ds.dataprovider.dev/r/select.json): Native select styled to match the input, with a custom chevron and three sizes set with data-size.
- [checkbox](https://ds.dataprovider.dev/r/checkbox.json): Native checkbox with a custom box and tick. Supports checked, indeterminate and disabled states, with optional helper text.
- [radio](https://ds.dataprovider.dev/r/radio.json): Native radio with a custom ring and dot. Group options with a shared name and add optional helper text.
- [switch](https://ds.dataprovider.dev/r/switch.json): A toggle built from a native checkbox with a sliding track. Use for on and off settings.
- [field](https://ds.dataprovider.dev/r/field.json): An underline-style form field (label plus borderless input) used by the marketing forms.

## Data display

- [card](https://ds.dataprovider.dev/r/card.json): Surface that groups related content. Variants are set with data-variant (default, subtle, elevated, flat). Compose with header, body and footer sections.
- [table](https://ds.dataprovider.dev/r/table.json): Data table with a sticky-style header, row hover and right-aligned numeric columns. Wrap it to scroll on narrow screens.
- [stat](https://ds.dataprovider.dev/r/stat.json): A single metric with a large value, a label and an optional trend. Set the trend direction with data-tone.
- [badge](https://ds.dataprovider.dev/r/badge.json): Small status or category label. Tone is set with data-tone and style with data-variant (soft is the default, solid for high emphasis).
- [avatar](https://ds.dataprovider.dev/r/avatar.json): Circular image or initials in three sizes. Stack several in a group for an overlapping row.

## Feedback

- [alert](https://ds.dataprovider.dev/r/alert.json): Inline message with an icon, title and text. Tone is set with data-tone (info, success, warning, danger).
- [progress](https://ds.dataprovider.dev/r/progress.json): Horizontal progress bar with tone variants and an indeterminate mode for unknown durations. Set the fill width inline.
- [spinner](https://ds.dataprovider.dev/r/spinner.json): Spinning loading indicator in three sizes. Inherits the current colour or takes a neutral tone, and slows under reduced-motion.
- [skeleton](https://ds.dataprovider.dev/r/skeleton.json): Animated placeholder shown while content loads. Shapes are set with data-shape (default, text, circle).
- [tooltip](https://ds.dataprovider.dev/r/tooltip.json): Label shown on hover or keyboard focus. Position is set with data-side. Add data-open to force it visible.

## Navigation

- [tabs](https://ds.dataprovider.dev/r/tabs.json): Tabbed panels that switch without JavaScript, driven by hidden radios. Supports up to five tabs.
- [breadcrumb](https://ds.dataprovider.dev/r/breadcrumb.json): Trail of links showing the current location. Mark the last item with aria-current. Separators are inline SVG.
- [pagination](https://ds.dataprovider.dev/r/pagination.json): Page navigation with previous and next controls, a current page and an ellipsis for skipped ranges.
- [menu](https://ds.dataprovider.dev/r/menu.json): Dropdown menu with items, a label, a separator and a danger action. Opens on focus within, or toggle data-open from JS.

## Layout & overlay

- [separator](https://ds.dataprovider.dev/r/separator.json): Divider between content. Horizontal by default, vertical inside a flex row, or labelled with centred text.
- [accordion](https://ds.dataprovider.dev/r/accordion.json): Expandable sections built from native details and summary, so they work without JavaScript. The chevron rotates when open.
- [dialog](https://ds.dataprovider.dev/r/dialog.json): Modal dialog panel with a header, body and footer. Wrap it in the modal backdrop, or place it inside a native dialog element.

## Console

- [sidebar](https://ds.dataprovider.dev/r/sidebar.json): Console navigation with a brand header, grouped items with icons and an active state, and a user block. Pair with the app shell for a full screen.
- [grade](https://ds.dataprovider.dev/r/grade.json): A letter grade from A to F on a fixed colour scale. Circle by default, large, or a labelled pill.

## Marketing

- [site-header](https://ds.dataprovider.dev/r/site-header.json): Marketing navigation: a white rounded bar with the logo, menu items with dropdown carets, log-in and a gold Contact CTA.
- [cta-band](https://ds.dataprovider.dev/r/cta-band.json): A call-to-action band with an eyebrow, two-tone heading, a checklist, an avatar group and a gold CTA button.
- [site-footer](https://ds.dataprovider.dev/r/site-footer.json): Marketing footer with link columns, a social column and MCP cards with a New badge.
- [hero](https://ds.dataprovider.dev/r/hero.json): Marketing hero: a two-tone heading, a subtitle and a tabbed product preview with a floating stat card.
- [feature-cards](https://ds.dataprovider.dev/r/feature-cards.json): A marketing section: a centred heading and a grid of cards with an icon, title, description and read-more link.
- [stats-band](https://ds.dataprovider.dev/r/stats-band.json): A row of large headline numbers with labels.
- [logo-cloud](https://ds.dataprovider.dev/r/logo-cloud.json): A trusted-by strip: a label above a row of logos.
- [split-section](https://ds.dataprovider.dev/r/split-section.json): A two-column section with text beside a media panel. Add data-reverse to swap sides.
- [faq](https://ds.dataprovider.dev/r/faq.json): A frequently-asked-questions section built on the accordion component.
- [team](https://ds.dataprovider.dev/r/team.json): A leadership-team grid with member photos, roles, names and LinkedIn links.
- [timeline](https://ds.dataprovider.dev/r/timeline.json): A vertical milestone track with alternating entries and a centre line.
- [statement](https://ds.dataprovider.dev/r/statement.json): A two-column editorial section with a large statement and supporting copy.
- [contact-form](https://ds.dataprovider.dev/r/contact-form.json): A demo-request section with an underline-style form and an expectations rail.
- [newsletter](https://ds.dataprovider.dev/r/newsletter.json): A two-column subscribe section with benefit copy and a name and email capture form.
- [blog-grid](https://ds.dataprovider.dev/r/blog-grid.json): A responsive grid of horizontal article cards with a cover image, reading time, title, author and date.

## Blocks

- [login](https://ds.dataprovider.dev/r/login.json): A centred sign-in card with an email field, a primary action, a separator and social sign-in buttons.
- [dashboard](https://ds.dataprovider.dev/r/dashboard.json): The app home: sidebar, a welcome heading, feature cards and an AI prompt with suggestions.
- [files](https://ds.dataprovider.dev/r/files.json): A data screen: sidebar, a hero panel, a search and sort toolbar, a data table and pagination.
- [workspace](https://ds.dataprovider.dev/r/workspace.json): The shared product workspace used by Search Engine, Reverse DNS, SSL Catalog, Universe and Traffic: a toolbar, a filter builder, view tabs, a data sheet and a record toolbar.
- [recipes](https://ds.dataprovider.dev/r/recipes.json): A card-grid screen with a page header, a large search and category sections of recipe cards. Logos are placeholder tiles to swap for the real brand logo.
- [navigator](https://ds.dataprovider.dev/r/navigator.json): A centred AI composer: eyebrow, title, gradient divider, a prompt box with an embedded footer and keyboard hint, and suggestion cards.
- [account](https://ds.dataprovider.dev/r/account.json): A settings screen: two columns of cards with user-info form fields, security and social sign-in setting rows, MCP settings and access tokens.
- [statistics](https://ds.dataprovider.dev/r/statistics.json): The Statistics tab of the dataset workspace: a chart panel with a chart-type select, a bar chart, a legend and a data table. Shares the workspace chrome.
- [trends](https://ds.dataprovider.dev/r/trends.json): The Trends tab of the dataset workspace: a line/area chart over time, shown here in the empty state that appears before a filter is set. Shares the workspace chrome.
- [churn](https://ds.dataprovider.dev/r/churn.json): The Migration insights tab of the dataset workspace: churn and growth over time with Overview and Custom comparison sub-tabs, shown in the empty state. Shares the workspace chrome.
- [maps](https://ds.dataprovider.dev/r/maps.json): The Maps tab of the dataset workspace: a world map with a domain-density heatmap and zoom controls. Shares the workspace chrome.
- [home](https://ds.dataprovider.dev/r/home.json): A marketing homepage composed from site-header, hero, feature-cards, cta-band and site-footer. A template for building new pages in the Dataprovider style.
- [use-case](https://ds.dataprovider.dev/r/use-case.json): A marketing use-case page composed from site-header, split sections, a stats band, an FAQ, a CTA band and site-footer. A second page template in the Dataprovider style.
- [about](https://ds.dataprovider.dev/r/about.json): A marketing company page composed from a hero, a statement, a logo cloud, a split section, a timeline, a team grid, a CTA band and site-footer.
- [contact](https://ds.dataprovider.dev/r/contact.json): A marketing contact page composed from site-header, the contact-form section, a logo cloud, a CTA band and site-footer.
- [data-product](https://ds.dataprovider.dev/r/data-product.json): A marketing product page (Domain data) composed from a split hero, a statement, a feature-cards grid, a reversed split, a stats band, a CTA band and site-footer. The dominant page template on the site.
- [blog](https://ds.dataprovider.dev/r/blog.json): A marketing blog index composed from site-header, a hero with a tab bar, category filter chips, the blog-grid article cards, a newsletter section and site-footer.

## Full bundle

- [all](https://ds.dataprovider.dev/r/all.json): Every item above with its source inlined, in one document.

## Raw token CSS

- https://ds.dataprovider.dev/tokens.css
- https://ds.dataprovider.dev/tokens-console.css