# Qatalog · Design system migration spec

> Source: https://qatalog.com  ·  Curated by OpenDesign  ·  en

> This site is a strong example of a modern, AI-driven SaaS landing page that balances professional restraint with forward-looking technology positioning.

## 1. Identity DNA

Qatalog's design system is an AI-powered command center for modern teams, a unified workspace where tools and information converge. The visual language prioritizes clarity and focus, with a clean light theme and restrained accent palette that reduces cognitive load while maintaining a premium, enterprise-grade presence.

**One-liner:** An enterprise-grade AI workspace that eliminates work sprawl and unifies productivity.
**Keywords:** AI · Productivity · Workspace · Enterprise · Unified
**Analogy:** An AI-powered command center for modern teams, merging tools and information.

## 2. Color

The color system is built on a high-contrast foundation of white and neutral grays, creating a clean canvas for content. A singular, subtle purple accent provides focal points without visual clutter, establishing a professional yet forward-looking tone.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#F0F0F0` | quiet area |
| `--ink` | `#292D34` | body text |
| `--ink-soft` | `#646464` | secondary text |
| `--muted` | `#838383` | placeholder |
| `--accent` | `#5D5D85` | single accent |
| `--line` | `rgba(41, 45, 52, 0.1)` | divider |

**Color principle:** A clean, high-contrast white base with neutral grays and a singular purple accent for a premium, focused aesthetic.

The palette follows a principle of restraint, using color purposefully to guide attention rather than decorate.

## 3. Typography

Typography employs humanist sans-serif fonts, chosen for their approachable clarity and professional warmth. Display headings use tight tracking and bold weights to convey authority, while body text maintains comfortable line height for sustained reading.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.1 | 700 | -1.6px | Primary page headings |
| headline | 18px | 1.3 | 500 | -0.15px | Secondary headings and subheadings |
| body | 16px | 1.5 | 400 | -0.12px | Primary body text |
| caption | 14px | 1.4 | 400 | -0.1px | Supporting text and metadata |

**Type rules:**
- Display headings use tight tracking and bold weights to convey authority.
- Body text maintains a comfortable line height for readability.
- Monospace is reserved for specific technical labels or code elements.

## 4. Spacing

Spacing follows a consistent 4px rhythm, establishing predictable vertical and horizontal patterns throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent vertical and horizontal rhythm established through a multiple of 4px.

## 5. Surfaces

Surfaces use subtle depth through minimal shadows and light gray borders, defining components without visual weight. Cards are delineated by 1px borders and generous internal padding, creating clear hierarchy without heaviness.

- **Radius:** sm 4px · md 8px · lg 12px · pill 30px
- **Shadows:**
  - 0px 4px 12px rgba(0, 0, 0, 0.08)
- **Borders:** Subtle 1px borders in light gray to define card edges and containers.

## 6. Layout

The layout skeleton uses a responsive 12-column grid on desktop, providing flexible composition for complex content. On mobile, this simplifies to a single-column stack, ensuring readability and focus on smaller screens.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A responsive layout shifting from a multi-column grid on desktop to a single-column stack on mobile.

## 7. Motion & Interaction

Motion philosophy favors minimal, functional transitions that provide feedback without distraction. Subtle opacity and transform changes on interactive elements create smooth state changes with consistent easing curves.

- **Durations:** micro 200ms · small 250ms · medium 800ms
- **Easing:** `cubic-bezier(0.5, 0, 0.5, 1)`
- **Patterns:**
  - Subtle opacity and transform transitions on interactive elements.
  - Smooth easing for UI state changes.

- **Hover:** Subtle changes in background color or text weight to indicate interactivity.
- **Click:** Immediate visual feedback through color shifts or subtle scaling.
- **Transition:** Consistent transition durations applied to backgrounds and transforms.
- **Keyboard:** Standard focus states for accessibility and navigation.

## 8. Voice & Don'ts

The editorial voice is confident, professional, and forward-looking, emphasizing AI integration and unified work. Headlines are clear, benefit-driven statements, while CTAs focus on direct actions like starting a free journey or getting a demo.

- **Tone:** Confident, professional, and forward-looking.
- **Headline style:** Clear, benefit-driven statements that emphasize AI integration and unified work.
- **CTA style:** Direct and action-oriented, focusing on starting a free journey or getting a demo.
- **Avoid:** Overly technical jargon / Passive language / Generic corporate buzzwords

### Don'ts
- ❌ Don't use a dark theme as the primary mode — screenshot shows a light theme with dark text.
- ❌ Don't use decorative serif fonts — screenshot shows humanist sans-serif fonts throughout.
- ❌ Don't use highly saturated or neon colors as primary accents — screenshot shows a restrained palette with purple accents.
- ❌ Don't use sharp, square corners on primary buttons — screenshot shows rounded pill shapes.
- ❌ Don't use excessive drop shadows or heavy 3D effects — screenshot shows clean, flat or subtly bordered surfaces.
- ❌ Don't use complex multi-column grids for mobile — screenshot shows a single-column stack on smaller screens.

The system deliberately avoids dark themes, serif fonts, neon accents, and square button shapes—choices that would undermine its core identity of clean, focused productivity.

## System Prompt (paste into AI tool)

```
A premium AI workspace tool designed for enterprise productivity, using a clean light theme with a white base (#FFFFFF) and neutral grays (#292D34, #646464). The typography uses humanist-sans fonts with tight tracking for display headings. A subtle purple (#5D5D85) serves as the primary accent. Layout is a responsive 12-column grid. Critical don'ts: avoid dark themes, avoid serif fonts, avoid neon colors, avoid square buttons, avoid heavy shadows, avoid complex mobile grids.
```