---
name: dammyjay-interface-design
description: Build interface design (dashboards, admin panels, SaaS apps, tools, settings, data interfaces) with craft and consistency. NOT for marketing pages — redirect those to /frontend-design. Mandates intent-first design, where-defaults-hide audit, and a 4-test craft check (swap, squint, signature, token).
category: ui-design
version: 0.1.0
tags: [design, interface, dashboard, craft, design-system]
recommended_npm: []
license: MIT
author: Dammyjay93
source: https://github.com/Dammyjay93/interface-design
---

For interface design — dashboards, admin panels, SaaS, tools, settings, data interfaces. NOT marketing.

## The problem

You will generate generic output. Training has seen thousands of dashboards. Patterns are strong. You can follow the entire process and still produce a template — warm colors on cold structures, friendly fonts on generic layouts, "kitchen feel" that looks like every other app.

Intent lives in prose; code generation pulls from patterns. The gap between them is where defaults win.

## Where defaults hide

- **Typography feels like a container** — but it IS your design.
- **Navigation feels like scaffolding** — but it IS your product.
- **Data feels like presentation** — but a number on screen is not design until you ask what it means to the viewer.
- **Token names feel like detail** — but `--ink`/`--parchment` evokes a world; `--gray-700`/`--surface-2` evokes a template.

## Intent first (answer out loud, before code)

1. **Who is this human?** Not "users" — the specific person, time of day, what they did 5 minutes ago.
2. **What must they accomplish?** The verb. "Grade these submissions" not "use the dashboard."
3. **What should this feel like?** Specific words: warm like a notebook, cold like a terminal, dense like a trading floor. "Clean and modern" means nothing.

If you can't answer with specifics → stop, ask the user, do not default.

## Required exploration outputs (before proposing direction)

- **Domain**: 5+ concepts, metaphors, vocabulary from the product's world (territory, not features)
- **Color world**: 5+ colors that exist in the physical version of this space
- **Signature**: ONE element that could only exist for THIS product
- **Defaults**: 3 obvious choices for this interface type — visual AND structural

## The mandate (run before showing user)

- **Swap test**: would anyone notice if you swapped your typeface for the usual one?
- **Squint test**: blur your eyes — can you still perceive hierarchy without harshness?
- **Signature test**: name 5 specific elements where the signature appears.
- **Token test**: read CSS variables out loud — do they belong to this product's world?

## Subtle layering (universal)

Surfaces stack: base → low elevation → high elevation. Each jump is a few % of lightness. In dark mode, higher = lighter. Sidebars match canvas color, not contrast. Dropdowns one level above parent. Inputs slightly DARKER than surroundings. Borders use low-opacity rgba, never solid hex.

The squint test separates professional from amateur interfaces. Get it wrong and nothing else matters.

See [github.com/Dammyjay93/interface-design](https://github.com/Dammyjay93/interface-design) for token architecture, depth strategies, dark-mode rules, and `system.md` persistence.