Design systems that help raise pre-seed funding

2025 · Watrfall · Founding Designer

ROLEFounding Designer

DURATION3 Years

TEAMCTO1 Engineer1 Designer

OUTCOME~$5M Pre-Seed Raised

THE CHALLENGE

Early-stage startups face a paradox when building design systems — mature company playbooks assume you have live products, real users, and stable feature sets. At Watrfall, we had none of these. We were pre-launch, pre-user, navigating constant pivots in an ambiguous 0-to-1 environment.

How do you build a design system for a product that doesn't exist yet?

THE SOLUTION

We adopted DaisyUI's semantic design token system layered on top of Tailwind CSS, connected to a DaisyUI MCP server. Across 3 rebrandings and 3 distinct product ecosystems — spanning web, mobile, and TV — this let us spin up demo prototypes rapidly without rebuilding UI foundations from scratch on every pivot.

Code

Tailwind CSS

6/22 Tailwind colors used as primitive source

Design + Code

DaisyUI Semantic Tokens

Converted select primitives to semantic tokens

Code

React Icons

Material icons and select few for ease of use

Design + Code

Inter (Google Fonts)

Primary typeface — high legibility across web, mobile, and TV

Code

DaisyUI Themes

Custom theme config — swap an entire brand in one JSON object

Design

DaisyUI Figma Library

Component library in Figma mapped to DaisyUI code components

Every time a new branding direction was taken, we could swap out the tokens and turn around at a faster speed — no redesigning components, just remapping values. We explored a lot of tools to automate and speed up our processes as the primary objective was to design for fundraising.

We leveraged existing UI libraries to build prototypes for investor demos quickly and at short notice — delivering 3 investor deck designs and supporting 5 side projects along the way.

THE PROCESS

The stack was chosen for interoperability — DaisyUI's semantic tokens sit directly on top of Tailwind's primitive scale, so every Figma decision had a code equivalent. One token name, one source of truth, across design and engineering.

Primary & Secondary↳ d-colors/semantic/primary

primary/bg

blue-600

primary/content

blue-50

secondary/bg

blue-200

secondary/content

blue-900

Base↳ d-ui/colors/base

base/100

slate-100

base/200

slate-200

base/300

slate-800

base/content

slate-900

Status↳ d-colors/status

success/bg

green-400

success/content

green-900

warning/bg

amber-400

warning/content

amber-900

error/bg

red-400

error/content

red-900

info/bg

blue-400

info/content

blue-900

Accent↳ d-colors/semantic/accent

accent/bg

indigo-400

accent/content

indigo-900

Tailwind's color palette as a visual reference when deciding which hues to use — then translated those decisions into oklch values for the DaisyUI theme config. The Tailwind color scale was the design decision layer, oklch was the implementation layer

global.css
@plugin "daisyui/theme" {
  name: "watrfall";
  default: true;
  prefersdark: true;
  color-scheme: "dark";
  --color-base-100: oklch(12% 0.042 264.695);
  --color-base-200: oklch(20% 0.042 265.755);
  --color-base-300: oklch(27% 0.041 260.031);
  --color-base-content: oklch(98% 0.003 247.858);
  --color-primary: oklch(54% 0.245 262.881);
  --color-primary-content: oklch(97% 0.014 254.604);
  --color-secondary: oklch(88% 0.059 254.128);
  --color-secondary-content: oklch(28% 0.091 267.935);
  --color-accent: oklch(78% 0.115 274.713);
  --color-accent-content: oklch(39% 0.195 277.366);
  --color-neutral: oklch(37% 0.044 257.287);
  --color-neutral-content: oklch(98% 0.003 247.858);
  --color-info: oklch(70% 0.165 254.624);
  --color-info-content: oklch(37% 0.146 265.522);
  --color-success: oklch(76% 0.177 163.223);
  --color-success-content: oklch(37% 0.077 168.94);
  --color-warning: oklch(82% 0.189 84.429);
  --color-warning-content: oklch(41% 0.112 45.904);
  --color-error: oklch(70% 0.191 22.216);
  --color-error-content: oklch(39% 0.141 25.723);
  --radius-selector: 0.25rem;
  --radius-field: 0.5rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1.5px;
  --depth: 1;
  --noise: 1;
}

RETROSPECTIVE — IN THE AI ERA

In the age of AI, vibe coding has become an essential tool for quickly generating prototypes. When dealing with a larger ecosystem that branches into various product directions, it's wise to choose an established UI library and leverage its MCP servers for efficient prototype development. Our experience with DaisyUI's semantic design token system, layered over Tailwind CSS, exemplifies this approach.