Midnight SaaS

# Midnight SaaS

## Design Philosophy

Midnight SaaS is rooted in **clarity through contrast**. In a landscape of noisy dashboards and cluttered B2B tools, this design proves that restraint is a superpower. Every pixel serves a purpose; every color choice is deliberate.

The philosophy borrows from Bloomberg Terminal and Linear's design language: information density is not the enemy of beauty. When executed with precision, data-heavy interfaces can feel calm, authoritative, and effortlessly professional.

## Design Goals

- Present complex information hierarchically without overwhelming users
- Achieve WCAG AAA contrast on all text elements
- Support data-dense layouts without sacrificing breathing room
- Maintain performance above 95 Lighthouse score
- Convey trust and reliability for enterprise buyers

## Visual Language

Midnight SaaS communicates through **structured darkness**. The deep navy background (`#0a1628`) creates a void in which information floats as elevated surfaces. The electric blue accent (`#3b82f6`) acts as a guiding light — it appears only where user attention is needed.

Surfaces are solid, not translucent. Depth is communicated through subtle elevation changes and border treatments rather than blur effects. This creates a predictable, scannable interface.

## Color System

| Token           | Value     | Usage                       |
|-----------------|-----------|-----------------------------|
| background      | `#0a1628` | Page background             |
| surface         | `#111d33` | Card backgrounds            |
| surface-elevated| `#162240` | Hover states, active items  |
| primary         | `#3b82f6` | CTAs, links, active states  |
| primary-hover   | `#2563eb` | Button hover                |
| secondary       | `#64748b` | Muted text, secondary info  |
| accent          | `#38bdf8` | Notifications, badges       |
| text            | `#e2e8f0` | Primary text                |
| text-muted      | `#64748b` | Secondary text              |
| border          | `#1e2d4a` | Panel borders               |
| success         | `#22c55e` | Positive states             |
| warning         | `#f59e0b` | Caution states              |
| error           | `#ef4444` | Error states                |

## Typography

- **Primary Font:** Inter
- **Heading Scale:** `clamp(1.75rem, 4vw, 3rem)` for H1, 75% per level
- **Body Size:** 15px, line-height 1.6
- **Font Weights:** 400 (body), 500 (labels), 600 (subheadings), 700 (headings)
- **Tabular Numbers:** Enabled for data displays and metrics

## Spacing System

Base unit: 4px

| Token | Value  | Usage                    |
|-------|--------|--------------------------|
| xs    | 4px    | Inline icon gaps         |
| sm    | 8px    | Tight element spacing    |
| md    | 16px   | Component internals      |
| lg    | 24px   | Card padding             |
| xl    | 32px   | Section gaps             |
| 2xl   | 48px   | Major sections           |
| 3xl   | 64px   | Hero area                |

## Border Radius

| Token | Value | Usage                    |
|-------|-------|--------------------------|
| sm    | 6px   | Inputs, small buttons    |
| md    | 8px   | Cards, panels            |
| lg    | 12px  | Modals, dropdowns        |
| xl    | 16px  | Feature sections         |
| full  | 9999px| Avatars, pills           |

## Shadows

```css
.card-shadow {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.elevated-shadow {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.blue-glow {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
}
```

## Gradients

```css
.primary-gradient {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}
.bg-gradient {
  background: linear-gradient(180deg, #0a1628 0%, #111d33 100%);
}
```

## Layout

- **Container:** max-width 1280px, centered
- **Sidebar:** 260px fixed, collapsible on tablet
- **Content Area:** fluid, padding 32px
- **Grid:** CSS Grid, 12-column on desktop, auto-fill on mobile
- **Breakpoints:**
  - Mobile: < 640px (single column, bottom nav)
  - Tablet: 640px–1024px (sidebar collapsed)
  - Desktop: > 1024px (full sidebar + content)

## Components

### Navbar
- Solid dark background `#111d33`
- 56px height, fixed top
- Logo left, search center, profile right
- Bottom border `#1e2d4a`

### Hero
- Split layout: content left, illustration/preview right
- Headline bold 700 weight
- Subtitle in muted color
- Two CTAs: filled primary, ghost secondary

### Buttons
- Primary: `#3b82f6` fill, white text, 8px radius
- Secondary: transparent with `#1e2d4a` border
- Ghost: text-only, background on hover
- Size: 40px height standard, 48px large

### Cards
- `#111d33` background
- 1px `#1e2d4a` border
- 24px padding
- Hover: border color shifts to `#3b82f6`

### Data Tables
- Zebra striping with alternating `#111d33` and `#0f1a2e`
- Sticky headers
- Sortable columns with subtle indicators

### Footer
- Three-column layout
- Muted text, no background distinction from page

## Animation

- **Duration:** 150ms for interactions, 300ms for page transitions
- **Easing:** `ease-out` for enter, `ease-in` for exit
- **Hover Effects:** Border color transition, subtle background shift
- **Entrance:** None — content-first, no distracting load animations
- **Transitions:** `background-color 150ms ease, border-color 150ms ease`

## Responsive Rules

- **Mobile (< 640px):** Bottom tab navigation, stacked cards, full-width inputs, 16px padding
- **Tablet (640px–1024px):** Collapsible sidebar, two-column grid, 24px padding
- **Desktop (> 1024px):** Fixed sidebar, 12-column grid, 32px padding
- **Data tables:** Horizontal scroll on mobile, full on desktop

## Accessibility

- All text meets WCAG AAA (7:1 contrast minimum)
- Focus indicators: 2px blue outline with 2px offset
- Screen reader announcements for dynamic content via aria-live
- Keyboard navigation follows logical tab order
- Data charts include text alternatives

## Performance

- No backdrop-filter — all surfaces are solid for performance
- CSS-only animations, no JavaScript-driven motion
- System font stack fallback for fast initial paint
- Images optimized with next/image, WebP format
- Critical CSS inlined for above-the-fold content

## Implementation Rules

1. Never use opacity below 0.9 for text — maintain contrast at all costs
2. All interactive elements must have visible focus states
3. Use CSS custom properties for all colors to support future theming
4. Sidebar state (open/closed) must persist in localStorage
5. Table sorting must be accessible via keyboard
6. Test with Windows High Contrast Mode