This page captures the entire DomiDo design system: the colour tokens, the type scale, the spacing grid, the radii, the shadows, the breakpoints, the motion, and every component variant that appears in the product. The system is rendered by React Native and React Native Web from a single token export so every screen — customer or admin, light or dark — uses the same atomic primitives. The visual direction is a Garden Modern foundation with Organic Flow warmth and a single Regency Gold premium accent. The tokens artefact (JSON plus TypeScript) is the single source of truth: colour, typography, spacing, radius, shadow, motion, and breakpoint scales sit as siblings underneath, and the twelve component sheets compose those primitives into the production component library. Light and dark modes share the same token names so the theme provider swaps values without screens having to choose.
The diagram shows the token system as a single rooted tree. Every surface in the DomiDo app draws from one tokens artefact — the same JSON and TypeScript export consumed by React Native and React Native Web. Colour, typography, spacing, radius, shadow, motion, and breakpoint scales are siblings under the token root. The colour branch surfaces the brand notes (sage green, sage deep, terracotta, regency gold, warm paper, ink) that are referenced by every other scale. The component-variants branch composes those primitives into the twelve production component sheets — buttons, cards, inputs, status badges, navigation, modals, progress, toasts, tables, charts, icons, and the 3D-viewer chrome — so no component invents its own colour, spacing, or radius.
Every colour is named semantically and has a light-mode value and a dark-mode override. Brand colours carry hover and pressed variants for interactive states. The brand palette has three notes: Sage Green is the primary surface for buttons, links, navigation indicators, and active states, with hover and pressed variants that darken progressively; Terracotta is the accent that warms up calls-to-action such as "Start designing" and key calls; Regency Gold marks premium tiers, upgrade badges, and Pro features. The neutrals use a warm white as the page background, a clean white for cards and elevated surfaces, and a slightly tinted surface for layered elements; borders use a standard sage-cast neutral with a subtle variant for inner separators. The text scale moves from dark forest for primary headings and body, through a sage grey for descriptions and metadata, to a tertiary tone for placeholders, disabled states, and captions; an inverse white is reserved for text on dark or coloured backgrounds.
The semantic feedback colours are berry red for errors and destructive actions, garden green for confirmations, warm amber for warnings, and sky blue for informational banners. Each has a matched light tint for use as a background fill on toasts, banners, or form-field highlights. The order-status palette is a small, deliberate set used by status badges to encode meaning consistently — blue means active or processing, sage green means pre-ordered (waiting), a deeper green means delivered, orange means returned, and red means failed. The same semantic mapping applies in My Designs and My Orders so a colour never means two different things in two places. In dark mode the background becomes a forest-tinted dark neutral and the surface a slightly lighter forest tone, keeping the garden aesthetic without going to pure black. Every brand colour stays the same to preserve brand consistency; only neutrals and semantic backgrounds shift. Detection uses the operating-system colour-scheme preference, with a manual override in Settings.
The heading typeface is Inter, loaded at weights 500, 600, and 700 through the platform font loader. Body text uses the system default — SF Pro Text on iOS, Roboto on Android, and the equivalent platform default on the web — so the application stays light and legible without a font-loading cost. The scale is display at thirty-two pixels for hero titles, H1 at twenty-eight, H2 at twenty-two, H3 at eighteen, H4 at sixteen; body large is sixteen pixels, body is the default at fourteen, body-small is twelve, caption is eleven. Labels and button text have their own values. Price is bold at twenty-four pixels for the primary display and eighteen for the cart variant. Letter-spacing tightens slightly on display and H1 and opens slightly on small body text and captions, with extra tracking on button text.
The base unit is four pixels. The scale runs extra-small at four pixels for tight padding and icon-to-label gaps; small at eight pixels for inner padding and compact spacing; medium at sixteen pixels for standard padding, card padding, and gutters; large at twenty-four for section spacing and groups; extra-large at thirty-two for page horizontal padding and major sections; double-extra-large at forty-eight for page top and bottom padding; triple-extra-large at sixty-four for hero and splash spacing. Card inner padding is medium. Space between cards is small on mobile and medium on tablet and above. Screen horizontal padding is medium on mobile and extra-large on desktop. Section vertical gaps are large. Form field gaps are medium. Icon-to-text gaps are small. Button group gaps are small.
The radius scale runs from six pixels (small inputs and tags), through twelve pixels (cards and image thumbnails), sixteen pixels (modals and large cards), and twenty-four pixels (primary buttons, pills, the search bar), to fully circular for avatars and status badges. Three elevation levels are available: low elevation for cards, inputs, and resting state (small offset, short blur, low opacity); medium for modals, dropdowns, and floating action buttons; high for popovers, tooltips, and drag targets. In dark mode the shadows shift to black at higher opacity to register against the deeper background. iOS uses the shadow API, Android uses the elevation property, and the React Native helpers expose both. The application has five named breakpoints: extra-small at three hundred and twenty pixels for the smallest phones; small at three hundred and seventy-five pixels for standard phones; medium at seven hundred and sixty-eight for tablets in portrait; large at one thousand and twenty-four for tablets in landscape and small laptops; extra-large at one thousand four hundred and forty for desktops and large monitors. A custom hook reads the window dimensions and resolves the current breakpoint.
The component library has twelve sheets, each rendered as a visual reference and composed exclusively from the tokens above.
Buttons come in six variants: primary (sage on white text), secondary (transparent with a sage border), ghost (transparent with sage-grey text), destructive (berry red), premium (Regency Gold), and accent (terracotta). Three sizes — small (thirty-six pixels), medium (forty-four), and large (fifty-two) — all use the twenty-four-pixel pill radius. Hover and pressed states use the matching colour variants with a slight scale on press. Disabled state drops opacity. A Submitted state replaces the label with a sixteen-pixel inline spinner, sets pointer events to none, and stays until the server responds; every mutation request carries an idempotency key so a repeated tap is safe. On screens below the medium breakpoint, primary actions become full-width with medium horizontal margin.
Cards come in four variants: product cards (sixteen-pixel radius, shadow-defined), admin or data cards (twelve-pixel radius, bordered), premium cards (Regency Gold border and badge), and gallery cards (sixteen-pixel radius, masonry-friendly). Hero image occupies seventy per cent of the card area; below it sit the title, a metadata row (price, status, date), and an optional action row.
Inputs come in four variants: text, multi-line text area, select, and search. All use a ten-pixel radius, a forty-four-pixel height, a sage-green focus ring, and labels above the field. The search variant has a leading magnifying-glass icon and an optional voice button.
Status badges use a six-colour semantic palette: green for final positive (Ready, Delivered), blue for active (Processing, Shipped), amber for waiting (Pre-ordered), red for negative (Failed, Cancelled), purple for social (Published), and grey for neutral. Every badge carries colour, an icon, and text — triple coding for accessibility.
Navigation components include the bottom tab bar (filled-icon active state with an organic blob indicator), the admin sidebar, breadcrumbs, and the back button. Modals come in three variants — full-screen, dialog, and bottom sheet — and each modal traps focus, supports Escape to dismiss, and uses sixteen-pixel rounded corners. Progress has three forms: a stepper for pipeline and timeline screens, a determinate progress bar for upload and conversion, and skeleton or shimmer placeholders for content not yet loaded; a unified shimmer animation runs across every skeleton. Toasts come in success, error, warning, and information variants with a five-second auto-dismiss; destructive toasts include an Undo action. Tables include a data table (sortable headers, responsive horizontal scroll on mobile) and a comparison table (subscription tiers, returns grading). Charts include line, bar, and doughnut variants, each with a data-table alternative for accessibility. Icons use two Phosphor sets — light for the customer surface, regular for admin — with outline as the default and filled for active states, and key navigation icons carry subtle leaf motifs. Spacing and grid sheets show the four-pixel grid, responsive column counts, and card layout patterns. The 3D-viewer chrome has its own sheet: a translucent close button, a view-mode toggle, zoom buttons, the gesture-guide overlay, and a unified playback bar for the Assembly Viewer.
Motion is restrained. Standard transitions use a two-hundred-millisecond ease-out curve; emphasis transitions use three hundred milliseconds. The home carousel respects the user's reduced-motion preference: if the operating system reports a preference for less motion, the carousel does not auto-advance and a play and pause control sits next to the dots. Skeleton shimmer is the same speed everywhere. Page transitions follow native motion: iOS push and pop, Android shared-axis horizontal.
The token set exports as a JSON and TypeScript artefact consumed by the React Native client. Colour, typography, spacing, radius, shadow, breakpoint, and component-variant tokens all live in the same file. Light and dark modes share the same names so a component never has to choose between them — the theme provider handles the switch.