Skip to content
Dovetail White-label design system

Guide

  • Overview
  • Download
  • Builder
Foundations
  • All foundations
  • Foundations
  • Color
  • Type
  • Layout
  • Shape
  • Size
  • Elevation
  • Motion
  • Themes
  • Tokens
Components
  • All components
  • Primitives
  • Divider
  • Grid
  • Inline
  • Spacer
  • Stack
  • VisuallyHidden
  • Section
  • Typography
  • Heading
  • Text
  • Actions
  • Button
  • ButtonGroup
  • IconButton
  • Link
  • Forms
  • Checkbox
  • CheckboxGroup
  • Field
  • Input
  • Radio
  • RadioGroup
  • Select
  • Slider
  • Switch
  • Textarea
  • Combobox
  • Display
  • Avatar
  • AvatarGroup
  • Badge
  • Card
  • Carousel
  • Code
  • EmptyState
  • List
  • Skeleton
  • Stat
  • Table
  • Tag
  • Navigation
  • Breadcrumbs
  • MenuSheet
  • Navbar
  • Pagination
  • Sidebar
  • Stepper
  • Tabs
  • TabPanel
  • AppShell
  • BottomNav
  • Feedback
  • Alert
  • Banner
  • Dialog
  • Drawer
  • Sheet
  • Popover
  • Progress
  • Spinner
  • Toast
  • ToastRegion
  • Tooltip
  • Thinking
  • Content
  • Accordion
  • AspectRatio
  • Cover
  • Callout
  • Figure
  • Image
  • Video
  • Icon
  • Media
  • Prose
  • Quote
  • BlockRenderer
  • SocialPost
  • Commerce
  • Price
  • Rating
  • QuantityStepper
  • ProductCard
  • ProductGallery
  • VariantPicker
  • StoreHeader
  • FulfilmentToggle
  • MenuSection
  • MenuItem
  • ModifierGroup
  • CartLine
  • OrderSummary
  • PromoCode
  • AddressFields
  • PaymentFields
  • OrderStatus
  • BasketBar
  • Chat
  • ChatHeader
  • MessageList
  • MessageDivider
  • MessageBubble
  • Composer
  • TypingIndicator
  • QuickReplies
  • AmbientBorder
  • VoiceInput
  • VoiceOverlay
Blocks
  • All blocks
  • HeroBlock
  • FeatureGridBlock
  • SplitBlock
  • StatsBlock
  • TestimonialBlock
  • FaqBlock
  • CtaBlock
  • BlockHeader
  • ChatBlock
  • MenuBlock
  • OrderTrackingBlock
  • ProductGridBlock
  • ProductDetailBlock
  • CartBlock
  • CheckoutBlock
Templates
  • All templates
  • Product
  • Chat
  • Dashboard screen
  • Food ordering
  • Settings page
  • Store
  • Marketing
  • Landing page from blocks
  • Marketing page
  • Social
  • Social templates
Guide
  • README
  • Token reference
  • Theming
  • Accessibility
  • Headless integration
  • Contributing
  • Changelog
  1. Dovetail
  2. Guide

Guide

The prose that travels with the system: how to theme it, what it guarantees, and how to add to it.

README

The system's own manifest and design guide.

Token reference

Every token, tier by tier.

Theming

From a brand palette to a working theme.

Accessibility

What the system guarantees, and what you owe.

Headless integration

React, Sanity, and other content sources.

Contributing

How to add a component or a token.

Changelog

What changed in each release, newest first.

/*form follows function*/

Guide

  • Open in Claude