sql-server-query-ai/kb/raw/design-master.md

Design System Master File

LOGIC: When building a specific page, first check design-system/pages/[page-name].md. If that file exists, its rules override this Master file. If not, strictly follow the rules below.

---

Project: SQL Server qAI Generated: 2026-09-21 12:56:55 Category: Developer Tool / IDE Design Dials: Variance 4/10 (Balanced / Modern) | Motion 3/10 (Subtle) | Density 8/10 (Dense / Dashboard)

---

Global Rules

Color Palette

Role	Hex	CSS Variable
Primary	#1E293B	--color-primary
On Primary	#FFFFFF	--color-on-primary
Secondary	#334155	--color-secondary
On Secondary	#FFFFFF	--color-on-secondary
Accent/CTA	#22C55E	--color-accent
On Accent/CTA	#0F172A	--color-on-accent
Background	#0F172A	--color-background
Foreground	#F8FAFC	--color-foreground
Card	#1B2336	--color-card
Card Foreground	#F8FAFC	--color-card-foreground
Muted	#272F42	--color-muted
Muted Foreground	#94A3B8	--color-muted-foreground
Border	#475569	--color-border
Destructive	#EF4444	--color-destructive
On Destructive	#000000	--color-on-destructive
Ring	#FFFFFF	--color-ring

Color Notes: Code dark + run green

Typography

• Heading Font: JetBrains Mono
• Body Font: IBM Plex Sans
• Mood: code, developer, technical, precise, functional, hacker
• Google Fonts: JetBrains Mono + IBM Plex Sans

CSS Import:

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

Spacing Variables

Density: 8/10 — Dense / Dashboard

Token	Value	Usage
--space-xs	2px / 0.125rem	Tight gaps
--space-sm	4px / 0.25rem	Icon gaps, inline spacing
--space-md	8px / 0.5rem	Standard padding
--space-lg	12px / 0.75rem	Section padding
--space-xl	16px / 1rem	Large gaps
--space-2xl	24px / 1.5rem	Section margins
--space-3xl	32px / 2rem	Hero padding

Shadow Depths

Level	Value	Usage
--shadow-sm	0 1px 2px rgba(0,0,0,0.05)	Subtle lift
--shadow-md	0 4px 6px rgba(0,0,0,0.1)	Cards, buttons
--shadow-lg	0 10px 15px rgba(0,0,0,0.1)	Modals, dropdowns
--shadow-xl	0 20px 25px rgba(0,0,0,0.15)	Hero images, featured cards

---

Component Specs

Buttons

/* Primary Button */
.btn-primary {
  background: #22C55E;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 200ms ease;
  cursor: pointer;
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Secondary Button */
.btn-secondary {
  background: transparent;
  color: #1E293B;
  border: 2px solid #1E293B;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 200ms ease;
  cursor: pointer;
}

Cards

.card {
  background: #0F172A;
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-md);
  transition: all 200ms ease;
  cursor: pointer;
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

Inputs

.input {
  padding: 12px 16px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 200ms ease;
}

.input:focus {
  border-color: #1E293B;
  outline: none;
  box-shadow: 0 0 0 3px #1E293B20;
}

Modals

.modal-overlay {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow-xl);
  max-width: 500px;
  width: 90%;
}

---

Style Guidelines

Style: Dark Mode (OLED)

Keywords: Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED, night mode, power efficient

Best For: Night-mode apps, coding platforms, entertainment, eye-strain prevention, OLED devices, low-light

Key Effects: Minimal glow (text-shadow: 0 0 10px), dark-to-light transitions, low white emission, high readability, visible focus

Page Pattern

Pattern Name: FAQ/Documentation Landing

• Conversion Strategy: Reduce support tickets. Track search analytics. Show related articles. Contact escalation path.
• CTA Placement: Search bar prominent + Contact CTA for unresolved questions
• Section Order: Hero with search bar > Popular categories > FAQ accordion > Contact/support CTA

---

Motion

Scroll Reveal (Subtle) — Trigger: scroll (viewport enter) | Duration: 300-400ms | Easing: power1.out

gsap.from(el, { opacity: 0, y: 12, duration: 0.35, ease: 'power1.out', scrollTrigger: { trigger: el, start: 'top 90%', toggleActions: 'play none none reverse' } });

Framework notes: Requires the ScrollTrigger plugin registered once via gsap.registerPlugin(ScrollTrigger); Use matchMedia('(prefers-reduced-motion: reduce)') to skip non-essential motion and render the final state immediately

• ✅ Keep the y offset small (8-16px) so it reads as a fade, not a slide
• ❌ Don't reveal below-the-fold content needed for SEO/crawlers as invisible-by-default without a no-JS fallback
• ⚡ toggleActions 'play none none reverse' avoids re-triggering on every scroll direction change

---

Anti-Patterns (Do NOT Use)

• ❌ Light mode default
• ❌ Slow performance

Additional Forbidden Patterns

• ❌ Emojis as icons — Use SVG icons (Heroicons, Lucide, Simple Icons)
• ❌ Missing cursor:pointer — All clickable elements must have cursor:pointer
• ❌ Layout-shifting hovers — Avoid scale transforms that shift layout
• ❌ Low contrast text — Maintain 4.5:1 minimum contrast ratio
• ❌ Instant state changes — Always use transitions (150-300ms)
• ❌ Invisible focus states — Focus states must be visible for a11y

---

Pre-Delivery Checklist

Before delivering any UI code, verify:

• No emojis used as icons (use SVG instead)
• All icons from consistent icon set (Heroicons/Lucide)
• cursor-pointer on all clickable elements
• Hover states with smooth transitions (150-300ms)
• Light mode: text contrast 4.5:1 minimum
• Focus states visible for keyboard navigation
• prefers-reduced-motion respected
• Responsive: 375px, 768px, 1024px, 1440px
• No content hidden behind fixed navbars
• No horizontal scroll on mobile