DESIGN.md

name	DataDoe
description	Project starter which integrates with DataDoe API powered by Deltologic
colors	primary primary-foreground secondary secondary-foreground background foreground card card-foreground popover popover-foreground muted muted-foreground accent accent-foreground destructive destructive-foreground border input ring success success-foreground error error-foreground warning warning-foreground info info-foreground neutral neutral-foreground chart-1 chart-2 chart-3 chart-4 chart-5 sidebar sidebar-foreground sidebar-primary sidebar-accent sidebar-border #00897C #FAFAF5 #F5F5F4 #1C1917 #FFFFFF #0B0908 #FFFFFF #0B0908 #FFFFFF #0B0908 #F5F5F4 #78716C #F5F5F4 #1C1917 #E11D48 #FAFAFA #E7E5E4 #E7E5E4 #00897C #22A352 #14532D #E23B3B #7F1D1D #FACC15 #854D0E #2563EB #1E40AF #6B7280 #4B5563 #E8613C #2A9D8F #264653 #D4A843 #E8853A #FAFAFA #3F3F46 #18181B #F4F4F5 #E4E7EC
typography	font-family h1 h2 title body body-sm caption 2xs Plus Jakarta Sans Variable, ui-sans-serif, system-ui, sans-serif fontSize fontWeight lineHeight 4rem 700 1.1 fontSize fontWeight lineHeight 3rem 600 1.2 fontSize fontWeight lineHeight 1.75rem 600 1.3 fontSize fontWeight lineHeight 1rem 400 1.5 fontSize fontWeight lineHeight 0.875rem 400 1.5 fontSize fontWeight lineHeight 0.75rem 400 1.4 fontSize fontWeight lineHeight 0.68rem 400 1.3
rounded	sm md lg xl 4px 6px 8px 16px
spacing	xs sm md lg xl 2xl 3xl 4px 8px 16px 24px 32px 48px 64px
components	button-primary button-primary-hover button-secondary button-destructive card input badge-success badge-error badge-warning badge-info badge-neutral table sidebar backgroundColor textColor rounded padding {colors.primary} {colors.primary-foreground} {rounded.lg} 8px 16px backgroundColor #007A6E backgroundColor textColor rounded padding {colors.secondary} {colors.secondary-foreground} {rounded.lg} 8px 16px backgroundColor textColor rounded padding {colors.destructive} {colors.destructive-foreground} {rounded.lg} 8px 16px backgroundColor textColor rounded padding borderColor {colors.card} {colors.card-foreground} {rounded.lg} {spacing.lg} {colors.border} backgroundColor textColor borderColor rounded height padding {colors.background} {colors.foreground} {colors.input} {rounded.md} 36px 8px 12px backgroundColor textColor borderColor hsl(142 71% 45% / 0.12) {colors.success-foreground} hsl(142 71% 45% / 0.35) backgroundColor textColor borderColor hsl(0 72% 52% / 0.12) {colors.error-foreground} hsl(0 72% 52% / 0.35) backgroundColor textColor borderColor hsl(43 96% 50% / 0.12) {colors.warning-foreground} hsl(43 96% 50% / 0.35) backgroundColor textColor borderColor hsl(213 94% 54% / 0.12) {colors.info-foreground} hsl(213 94% 54% / 0.35) backgroundColor textColor borderColor hsl(220 9% 46% / 0.12) {colors.neutral-foreground} hsl(220 9% 46% / 0.35) borderRadius wrapperBorderRadius fontSize headerVerticalPadding rowVerticalPadding 8px 16px 14px 1.15 1.15 backgroundColor textColor borderColor {colors.sidebar} {colors.sidebar-foreground} {colors.sidebar-border}

Overview

DataDoe is a professional data platform for Amazon sellers. The visual identity is built on a teal brand color (#00897C) representing trust, clarity, and data precision — paired with warm neutral surfaces that keep dense data tables and analytics dashboards readable without visual fatigue.

The design system follows a light-by-default, dark-mode-ready approach with an emphasis on information density, clean borders, and subtle semantic color cues for status and feedback states.

Brand personality: Trustworthy, precise, data-forward, modern but understated. Target audience: Amazon sellers, operations managers, e-commerce analysts. Emotional response: Confidence, clarity, professional calm.

Colors

• Primary (#00897C): DataDoe teal — the brand anchor. Used for primary actions, active states, focus rings, and key interactive elements. Derived from the logo mark.
• Primary Foreground (#FAFAF5): Warm off-white text on primary surfaces.
• Background (#FFFFFF): Pure white canvas for content areas in light mode.
• Foreground (#0B0908): Near-black ink for body text and headlines.
• Secondary (#F5F5F4): Warm light gray for secondary buttons, subtle backgrounds, and inactive states.
• Muted (#F5F5F4) / Muted Foreground (#78716C): Subdued surfaces and captions — use for metadata, timestamps, and supporting text.
• Destructive (#E11D48): Vivid rose-red for delete actions, critical errors, and irreversible operations.
• Border (#E7E5E4): Warm gray hairlines for card edges, dividers, and input outlines.
• Success (#22A352): Green for positive outcomes — successful syncs, healthy connections.
• Error (#E23B3B): Red for failures, broken connections, validation errors.
• Warning (#FACC15): Amber for caution states — approaching limits, partial failures.
• Info (#2563EB): Blue for informational banners and neutral highlights.
• Chart palette: 5-color sequence (chart-1 through chart-5) for data visualizations — warm coral, teal, deep navy, gold, orange — designed for distinguishability at small sizes.

Dark mode

Dark mode inverts to a near-black warm canvas (HSL 20 14.3% 4.1%) with slightly boosted primary saturation (HSL 174.3 100% 32%) for legibility. Borders and muted surfaces shift to HSL 12 6.5% 15.1%.

Typography

• Font Family: Plus Jakarta Sans Variable — geometric, modern, highly legible at small sizes for data-dense interfaces.
• Headlines (h1/h2): Bold to Semi-Bold, 3–4rem. Used sparingly for landing and onboarding screens.
• Title (1.75rem): Section headers within the app — connection names, page titles.
• Body (1rem / 0.875rem): Primary reading size for descriptions, table content, and form labels.
• Caption / 2xs (0.75rem / 0.68rem): Metadata, timestamps, helper text, and secondary table columns.
• Font features: Variable weight axis allows smooth weight transitions without separate font files.

Layout

• Form layout: Two-column grid with minmax(150px, 1fr) minmax(300px, 2fr) — label column stays compact while input column stretches.
• Form max-width: 40rem (640px) — prevents forms from becoming uncomfortably wide on large screens.
• Spacing scale: 4px base unit. Steps: 4, 8, 16, 24, 32, 48, 64px (xs through 3xl).
• Content areas: Full-width within sidebar layout; data tables expand to fill available space.
• Sidebar: Fixed-width navigation panel with its own color scheme for visual separation.

Elevation & Depth

Depth through subtle tonal layers rather than heavy shadows. The design is predominantly flat with:

• Navbar shadow: 0px 20px 55px with low-opacity brand-tinted shadow — creates soft floating effect.
• Search dropdown: drop-shadow(0px 20px 70px) — generous spread for popover emphasis.
• Cards and popovers: Rely on 1px solid border for definition rather than box-shadow.
• AG Grid popups: Semi-transparent background (opacity 0.95) with border for glass-like depth.

Shapes

• Base radius: 0.5rem (8px) — the foundation for all rounded corners.
• Small (sm): 4px — subtle rounding for badges, checkboxes, small chips.
• Medium (md): 6px — inputs, inline elements.
• Large (lg): 8px — cards, buttons, dropdowns, table cells, AG Grid borders.
• Extra-large (xl): 16px — table wrapper containers, modal dialogs.
• Shape language: Consistently rounded but not pill-shaped. The 4px–16px range keeps the interface modern without feeling playful.

Components

Buttons

Primary buttons use the teal brand color with warm white text. Hover darkens slightly. Secondary buttons use the muted gray surface. Destructive buttons are rose-red. All buttons share rounded-lg (8px).

Cards

White background, 1px border, 8px radius, 24px internal padding. Cards are the primary container for grouped content.

Data Tables (AG Grid)

Custom Quartz theme with 8px cell radius, 16px wrapper radius, 14px font size, inherited font family. No column borders; header row border only. Hover states use rgba(0, 137, 124, 0.2) — semi-transparent primary teal.

Status Badges (Tone System)

Semantic badges use a consistent pattern: 12% opacity background, 35% opacity border, full-saturation foreground text. Available in: success, error, warning, info, neutral, and muted-strong variants.

Sidebar

Distinct color scheme from main content. Light mode uses near-white (#FAFAFA) with dark text; dark mode inverts to dark surface with light text. Primary interactive elements within sidebar use a different accent than the app's teal primary.

Scrollbars

Styled thin (8px) with muted track and semi-transparent thumb (30% opacity, 50% on hover). Firefox uses scrollbar-width: thin.

Animations

• Accordion: 0.2s ease-out expand/collapse.
• Widget wiggle: 0.7s infinite subtle rotation (±0.4deg) for drag-state feedback.
• Table row highlight: 2.2s ease-out fade from teal tint to transparent on data updates.

Do's and Don'ts

• Do use primary (#00897C) exclusively for the most important action or interactive element on each screen.
• Do use the tone/badge system (tone-success-soft, tone-error-soft, etc.) for status indicators — never raw color values.
• Do maintain the warm neutral palette for surfaces — avoid pure cool grays.
• Do use Plus Jakarta Sans for all text — never mix in additional typefaces.
• Do use rounded-lg (8px) for interactive containers and rounded-md (6px) for inputs.
• Do keep data tables dense — use 0.875rem body text and tight vertical padding for information density.
• Don't use the primary teal for backgrounds or large surface areas — it's an accent and interactive color only.
• Don't apply shadows liberally — prefer borders for definition. Reserve shadows for floating/elevated elements only.
• Don't use more than 2 font weights on a single screen (typically 400 + 600).
• Don't mix the chart color palette with the semantic status colors — they serve different purposes.
• Don't hardcode HSL component values — always reference CSS custom properties via hsl(var(--token-name)).
• Don't use z-index values beyond 9999 — the existing scale is: content (auto), overlays (50–100), modals/tooltips (9999).