Design System

Every ARK product shares the same design system: the same component library, the same typography, the same dark-first theme. Each product gets a unique accent color and an animal mascot to keep them visually distinguishable while feeling like part of one family.

This page documents the system so you can extend it without breaking the look and feel.

Design principles

1. Dark by default. Every product uses a dark theme. Long sessions in business tools mean dark surfaces and high contrast for legibility.
2. One ARK voice, many ARK colors. Same shapes, same typography, same interaction patterns; the accent color is the only signal that you've moved between products.
3. Density over decoration. Information-dense layouts beat marketing-style hero sections inside the product. Whitespace is used to group, not to impress.
4. Consistency beats novelty. Buttons, modals, dropdowns, tables, forms — they look and behave the same in every ARK product, so muscle memory transfers.

Color system

Base palette

The base palette is shared across all products and lives as CSS custom properties.

Per-product accent

Each product overrides one variable, --color-brand (also exposed as --accent), with its own hex.

The accent is used for:

• Primary buttons
• Active navigation items
• Selection highlights
• Focus rings on form inputs
• Brand callouts in marketing pages

The accent is not used for body text, large surface fills, or status indicators (success/warning/danger have their own colors). This keeps each product visually distinct without becoming overwhelming.

Animal mascots

Each product is paired with an animal mascot, used as:

• The product icon in the dashboard sidebar and product launcher
• The favicon (animal silhouette in the accent color)
• A subtle illustration in onboarding empty states
• The brand mark on marketing pages

The mascots live in public/animals/ in each product repo as SVGs. Buyers can swap them out — they're just files — but we don't recommend it because the animal-color pairings are how returning buyers recognize products at a glance.

Typography

Type stack

font-family:
  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, sans-serif;

We use the system font stack — no web fonts, no FOUT, no performance penalty. The system font matches the user's OS, which is deliberate: ARK products feel native rather than branded.

For monospace (code, IDs, license keys):

font-family:
  ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono",
  Menlo, Consolas, monospace;

Type scale

Most of an ARK product's UI is text-sm or text-base. Use the larger sizes sparingly.

Spacing

We follow a 4px grid: every margin, padding, and gap is a multiple of 4. Tailwind's default spacing scale (p-1, p-2, p-3, etc.) matches this exactly.

Component patterns

The component library is shipped as React components in components/ of each ARK product repo. The most-used components:

• Button — primary, secondary, ghost, danger variants. Always uses the accent color for primary.
• Input — text, email, password, with consistent focus rings.
• Select — dropdown built on Radix UI primitives for accessibility.
• Card — the workhorse surface; use for any grouped content.
• Dialog — modal pattern. Always include a close button and trap focus.
• Toast — non-blocking feedback ("Contact saved", "Couldn't delete"). Auto-dismisses after 4 seconds.
• Badge — small status indicators. Color-mapped to status semantics, not to the accent.
• Tabs — horizontal navigation within a panel.
• Sidebar — vertical nav; collapses on small screens.

When customizing with AI, ask for "an ARK Card with a header and two action buttons" rather than describing the styling — the AI tool will reuse the existing Card component and stay in style.

Iconography

ARK uses Lucide for all icons:

• Consistent stroke weight (1.5px).
• Clear at 16px and 24px.
• Open source, MIT licensed.

Icon sizing in the UI:

• 16px in dense lists, table cells, badges
• 20px in buttons
• 24px in nav rails, empty states

Motion

Animations are subtle and short:

• 150–200ms for hover state transitions.
• 200–300ms for modal open/close.
• ease-out for entrances, ease-in for exits.
• No bouncing — calm, professional, fast.

Buyers who prefer no motion can flip on macOS / Windows "Reduce motion" settings; ARK products honor prefers-reduced-motion and disable transitions accordingly.

Customizing the design system

Because you own the source code, you can change anything — accent color, fonts, spacing, animations.

Common safe customizations

• Swap the accent color to your company's brand color. Edit --color-brand in the product's CSS variables file (src/theme.css or similar).
• Add a logo in the sidebar header. Replace the <Logo /> component.
• Swap the favicon and OG image in public/.

Customizations to think twice about

• Swapping the animal mascot. The mascot is a recognition signal in the ARK family. Changing it breaks visual continuity with your other products.
• Going light theme. Possible but invasive — you'll need to re-tune every component for light backgrounds.
• Changing the type scale. ARK products are tuned at the current scale. Changing one size cascades into many alignment decisions.

If in doubt, see the Customizing with AI section for guidance on safe changes vs. risky ones.