No designer, no framework, no problem

The constraint that focused everything

I am not a designer. I have no formal training in typography, visual hierarchy, color theory, or interaction design. What I have is twenty years of working with designers, absorbing their feedback, watching what works in production, and developing an opinion about what good looks like. That is a different thing, but it turns out to be sufficient for building a design system when combined with the right constraints and a clear north star.

The constraint was simple: no Tailwind UI, no component libraries, no pre-built templates. The decision was driven by brand integrity, not stubbornness. Component libraries produce recognizable interfaces. The rounded corners and blue buttons of Material UI are instantly identifiable. The card layouts of Tailwind UI appear on thousands of products. For a decision intelligence product positioning itself as something genuinely different, looking like every other SaaS product is not a neutral choice. It is a positioning failure.

So: a design system from scratch. CSS variables for every token. Dark theme as the primary experience, not an option. Inter for all text. JetBrains Mono for data, scores, and labels. Eight components that power every surface. And Linear as the single benchmark for craft.

• 8 Core Components: Every surface built from the same eight primitives
• 42 CSS Variables: Full token system: colors, radii, motion, typography
• 3 Border Radii: sm/md/lg only. Constraint produces consistency.
• 0 Hardcoded Colors: Every color value references a CSS variable. No exceptions.

Why Linear

Choosing a design benchmark is one of the most important decisions in a product sprint, and it is rarely discussed. The benchmark determines taste. It sets the quality ceiling you are aiming for. It answers every micro-decision about whitespace, density, color, and hierarchy by giving you a reference point: "Is this as good as the benchmark? Why not?"

Linear is the right benchmark for a product aimed at sophisticated product teams for three reasons. First, density. Linear manages enormous information complexity without feeling cluttered. Every pixel is intentional. Empty space is deliberate. The product proves that complex data tools do not have to look like complex data tools. Second, the dark theme. Linear's dark interface is not a preference setting. It is the product's identity. The dark background makes signal visualization, color-coded status, and data hierarchy work in a way that light themes cannot match. Third, motion. Linear uses animation as information, not decoration. Transitions communicate state changes. Loading states feel purposeful. Nothing moves without a reason.

These three qualities map directly to what Dacard needed: a dense scoring interface, a dark-first brand identity, and signal visualization as a core brand element.

The dark theme decision

The dark theme started as an aesthetic preference and became a brand decision. There is a meaningful difference between those two things.

An aesthetic preference can be overridden by committee consensus, user research, or an advisor who prefers light interfaces. A brand decision is structural. It shapes everything downstream: the color system, the signal visualization approach, the photography and illustration style, the way scores are presented, the contrast ratios that determine which colors are available for use.

Dacard scores product maturity across 27 dimensions using a traffic-light color system: green for healthy, amber for developing, red for early-stage. On a white background, these colors compete with page chrome, text, borders, and other UI elements. On a near-black background (#0A0A0B), they read as pure signal. The score becomes the visual anchor. Everything else recedes. This is not achievable on a light background without significant visual noise.

Once the dark theme became a brand decision rather than a preference, the cascade of downstream constraints became clarifying rather than limiting. Every color token was chosen to work in the dark context. Every component was tested for contrast against the dark background. The result is a system where new components written by anyone will naturally look like they belong, because the constraints are codified and unavoidable.

Signal bars as brand element

The signal bars are five vertical bars of increasing height in the brand green color, displaying how many integration signals a given dimension has captured. They appear in score cards, in integration status displays, in the diagnostic summary. They are the most repeated visual element in the product.

The decision to make them a brand element rather than just a data visualization came from studying how Linear uses its status indicators. A Linear status dot is not just a color. It is a recognizable piece of the product's visual language. You develop an instant reading of it. The goal was to give Dacard the same kind of immediately legible brand shorthand.

Filled bars signal health. Empty bars signal opportunity. The three-color system (green, amber, red) extends the metaphor to maturity stages. A full stack of five green bars reads, without any text, as "this dimension is well-covered and healthy." A single red bar reads as "early stage, limited signal." The visual grammar is learnable in seconds and works at very small sizes.

Here is what they look like at different signal coverage levels: strong coverage (all five bars filled), developing (three bars filled), and early stage (one bar filled).

The eight-component system

The entire product runs on eight primitive components. This was a constraint I imposed deliberately, because design systems fail in two ways: too few components (everything becomes a one-off hack) and too many components (the system becomes unmaintainable). Eight felt like the right number for a product of this scope.

Layout Components: Structure and containment

• Card: the universal container with surface/surface-2 variants
• Stat card: monospaced number, label, optional description
• Section header: diamond accent, tertiary text, consistent spacing
• Pipeline step: numbered sequence with title and description

Interactive Components: Action and data display

• Stage badge: green/amber/red pill with border-radius 4px
• Score display: JetBrains Mono, plain white, no gradients
• Signal bars: five-bar traffic light, the brand element
• Button: primary (accent background, dark text), ghost, destructive

What AI could not do in design

Claude Code was useful for implementing design decisions once they were made. It was not useful for making them. This is the clearest distinction between the human and AI contributions to the design work.

The specific decisions that AI could not make: which shade of green to use as the accent color (the difference between #3ECF8E and #34D399 is a feeling, not a formula), how much whitespace to put between a section header and the content below it (16px felt too tight, 24px felt right, no algorithmic path gets you there), whether the score number should use a gradient or plain white text (gradient looked like a dashboard from 2018, plain white read as modern and confident), and how dense to make the score breakdown view before it tips from "information-rich" to "overwhelming."

These are taste decisions. Taste is the compression of thousands of visual observations into intuitions that fire without explicit reasoning. You either have it or you develop it by looking at a lot of good work over a long time. AI tools trained on the entire internet of design have a statistical approximation of common taste, which is fine for producing competent interfaces. For producing a distinctive brand voice, you need the uncommon decisions. The ones that go against the modal output.

Hierarchy and whitespace as the hard calls

The two design dimensions where experience matters most are information hierarchy and whitespace. Both are decisions by subtraction rather than addition, which means they are the opposite of how AI tools naturally operate.

Information hierarchy is about what you choose not to show, not what you include. The score card for a single dimension contains a score number, a stage badge, a signal bar, a dimension name, and a one-line description. That is it. There is no historical trend, no comparison benchmark, no context tooltip on first render. All of that information exists. The discipline is deferring it to the second layer of interaction (click to expand) and the third (full dimension detail view). AI tools, without direction, will surface everything available because completeness is easy to argue for. The judgment call of "the user does not need this on first glance" requires knowing how users actually process information under real conditions.

Whitespace is even harder because it has no natural stopping point. More whitespace always feels more luxurious. Less always feels more dense and efficient. The right amount is contextual: it depends on the user's task, the surrounding elements, and the emotional tone you want the product to carry. These calibrations were made by feel, not formula, and they were made dozens of times across 73 files.

> Design training teaches you the rules. Taste teaches you when to break them. What matters for a product sprint is neither: it is the accumulated judgment from watching what works on real screens in front of real users.