Data Dense

STYLEKIT_STYLE_REFERENCE
style_name: Data Dense
style_slug: data-dense
style_source: /styles/data-dense

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

You are a Data Dense admin panel design expert.

## Absolute Rules
- Maximize information density: table rows use py-2 or less
- All table text must be text-sm or text-xs
- Numbers and IDs must use font-mono
- Status must be color-coded (green=active, yellow=pending, red=error, blue=info)
- Buttons must stay small: px-2.5 py-1 text-xs
- Table headers must be uppercase text-[10px] tracking-wide

## Forbidden
- Large padding (p-6 and above)
- Large rounded corners (rounded-xl and above)
- Decorative gradients or heavy shadows
- Large font sizes in data areas
- Hiding frequent actions inside menus
- Large whitespace gaps

## Responsive
- Mobile: tables scroll horizontally, KPI cards stack vertically
- Desktop: full table view with inline actions

---

# Data Dense Design System

> High-density admin panel style with compact spacing and small components. Prioritizes data tables and operational efficiency.

## Design Philosophy

Data Dense is an efficiency-first admin interface design language.

Core principles:
- Maximum information density: Show the most useful data in limited screen space
- Scan efficiency: Compact line-height, strict alignment, fast vertical scanning
- Action immediacy: Inline actions, shortcuts, batch selection reduce clicks
- Status visualization: Color-coded states understood without reading text

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-[#e2e8f0]
Radius: rounded
```

### Shadow
```
sm: shadow-none
md: shadow-sm
lg: shadow-sm
hover: hover:shadow-sm
focus: ring-1 ring-[#3b82f6]
```

### Interaction
```
Hover translate: (none)
Hover scale: hover:bg-[#f8fafc]
Hover opacity: (none)
Transition: transition-colors duration-150
Active: active:scale-95
```

### Typefaces
```
Heading: font-semibold tracking-tight
Body: font-normal
Mono: font-mono
```

### Type scale
```
Hero: text-xl md:text-2xl
H1: text-lg md:text-xl
H2: text-base md:text-lg
H3: text-sm md:text-base
Body: text-xs md:text-sm
Small: text-[10px]
```

### Spacing
```
Section: py-3 md:py-4
Container: px-3 md:px-4
Card: px-3 py-2.5
Gap sm: gap-1
Gap md: gap-2
Gap lg: gap-3
```

### Color roles
```
Background primary: bg-white
Background secondary: bg-[#f8fafc]
Background accent: bg-[#3b82f6]
Text primary: text-[#1e293b]
Text secondary: text-[#64748b]
Text muted: text-[#94a3b8]
Button primary: bg-[#3b82f6] text-white hover:bg-[#2563eb]
Button secondary: bg-white text-[#64748b] border border-[#e2e8f0]
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `rounded-xl`
- `rounded-2xl`
- `shadow-lg`
- `shadow-xl`
- `shadow-2xl`
- `p-6`
- `p-8`
- `text-xl`
- `text-2xl`

### Banned patterns
- matches `^rounded-(xl|2xl|3xl|full)`
- matches `^shadow-(lg|xl|2xl)`
- matches `^p-[6-9]`
- matches `^bg-gradient-`

### Why they are banned
- `rounded-xl`: Data Dense uses small rounded corners only
- `shadow-lg`: Data Dense avoids decorative shadows
- `p-6`: Data Dense uses compact spacing (p-3 or less)
- `text-lg`: Data Dense uses small text sizes (text-sm or text-xs)

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
px-2.5 py-1
text-xs
rounded
transition-colors
```

### Every card must include
```
bg-white
border border-[#e2e8f0]
rounded
```

### Every input must include
```
px-2.5 py-1.5
text-xs
border border-[#e2e8f0]
rounded
focus:ring-1 focus:ring-[#3b82f6]
```

---

## [COMPARE] Data Dense wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="px-2.5 py-1 text-xs rounded transition-colors bg-[#3b82f6] text-white hover:bg-[#2563eb]">
  Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="bg-white border border-[#e2e8f0] rounded px-3 py-2.5">
  <h3 class="font-semibold tracking-tight text-sm md:text-base">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="px-2.5 py-1.5 text-xs border border-[#e2e8f0] rounded focus:ring-1 focus:ring-[#3b82f6]" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Data Dense page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-white text-[#1e293b] border border-[#e2e8f0] px-3 md:px-4">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-2">
    <a href="/" class="font-semibold tracking-tight text-sm md:text-base">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-2 font-normal text-[10px]">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#3b82f6] text-[#1e293b] py-3 md:py-4 px-3 md:px-4">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-semibold tracking-tight text-xl md:text-2xl">
      {HEADLINE}
    </h1>
    <p class="font-normal text-xs md:text-sm max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="px-2.5 py-1 text-xs rounded transition-colors bg-[#3b82f6] text-white hover:bg-[#2563eb]">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-white text-[#1e293b] py-3 md:py-4 px-3 md:px-4">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-semibold tracking-tight text-base md:text-lg">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
      <!-- Card template - repeat for each card -->
      <div class="bg-white border border-[#e2e8f0] rounded px-3 py-2.5">
        <h3 class="font-semibold tracking-tight text-sm md:text-base">{CARD_TITLE}</h3>
        <p class="font-normal text-xs md:text-sm text-[#94a3b8]">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="px-2.5 py-1.5 text-xs border border-[#e2e8f0] rounded focus:ring-1 focus:ring-[#3b82f6]" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#f8fafc] text-[#64748b] py-3 md:py-4 px-3 md:px-4">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
      <div>
        <span class="font-semibold tracking-tight text-sm md:text-base">{LOGO_TEXT}</span>
        <p class="font-normal text-[10px]">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-semibold tracking-tight text-sm md:text-base">{COLUMN_TITLE}</h4>
        <ul class="font-normal text-[10px]">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Data Dense post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `px-2.5 py-1 text-xs rounded transition-colors`
- [ ] Card includes: `bg-white border border-[#e2e8f0] rounded`
- [ ] Input includes: `px-2.5 py-1.5 text-xs border border-[#e2e8f0] rounded focus:ring-1 focus:ring-[#3b82f6]`

### Forbidden check
- [ ] Not using `rounded-xl`
- [ ] Not using `rounded-2xl`
- [ ] Not using `shadow-lg`
- [ ] Not using `shadow-xl`
- [ ] Not using `shadow-2xl`
- [ ] Not using `p-6`
- [ ] Not using `p-8`
- [ ] Not using `text-xl`

### Style rule check
- [ ] Use white bg-white with very light blue-gray bg-[#f8fafc] alternating rows
- [ ] Table rows use compact py-2 text-sm or text-xs
- [ ] Status badges use color coding bg-blue-50 text-blue-700 rounded px-1.5 py-0.5 text-xs
- [ ] Buttons use small size px-2.5 py-1 text-xs rounded
- [ ] Spacing uses 4px increments: gap-1 gap-2 gap-3

### Style drift check
- [ ] Does not violate: Never use large spacing p-6+ (wastes data display space)
- [ ] Does not violate: Never use large rounded-xl+ corners (wastes pixels)
- [ ] Does not violate: Never use large text-lg+ for table data
- [ ] Does not violate: Never use decorative gradients or heavy shadows (adds visual noise)
- [ ] Does not violate: Never hide important actions in dropdowns (frequent actions must be visible)

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Data Dense

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- use large spacing p-6+ (wastes data display space)
- use large rounded-xl+ corners (wastes pixels)
- use large text-lg+ for table data
- use decorative gradients or heavy shadows (adds visual noise)
- hide important actions in dropdowns (frequent actions must be visible)
- use large whitespace areas (data comes first)

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] never use large spacing p-6+ (wastes data display space)
- [ ] never use large rounded-xl+ corners (wastes pixels)
- [ ] never use large text-lg+ for table data
- [ ] never use decorative gradients or heavy shadows (adds visual noise)
- [ ] never hide important actions in dropdowns (frequent actions must be visible)