CURATED · OPEN · FREE

Qatalog

An enterprise-grade AI workspace that eliminates work sprawl and unifies productivity.

01

Identity DNA

An AI-powered command center for modern teams, merging tools and information.

02

Color

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

03

Typography

humanist-sans · monospace

• display60px · 700
• headline18px · 500
• body16px · 400
• caption14px · 400

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.

04

Spacing

Consistent vertical and horizontal rhythm established through a multiple of 4px.

05

Surfaces

Subtle 1px borders in light gray to define card edges and containers.

0px 4px 12px rgba(0, 0, 0, 0.08)

06

Layout

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

07

Motion & Interaction

Subtle opacity and transform transitions on interactive elements. · Smooth easing for UI state changes.

Subtle changes in background color or text weight to indicate interactivity. · Immediate visual feedback through color shifts or subtle scaling.

08

Components

• button Primary buttons are high-contrast with rounded pill shapes, while secondary buttons utilize lighter backgrounds.
• card Cards are defined by subtle borders and generous internal padding, occasionally featuring soft gradients or background imagery.
• chip Small, rounded tags or labels used for status updates or category markers.
• input Search bars feature prominent rounded corners and integrated iconography.
• hero Large, text-heavy sections paired with dynamic, AI-focused illustrations or product mockups.

09

Voice & Don'ts

• Tone Confident, professional, and forward-looking.
• Headlines Clear, benefit-driven statements that emphasize AI integration and unified work.
• CTAs Direct and action-oriented, focusing on starting a free journey or getting a demo.

• 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.
• Avoid: Overly technical jargon
• Avoid: Passive language
• Avoid: Generic corporate buzzwords

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko