Iris
#7b68eePrimary accent — link text, interactive borders, feature labels, eyebrow text; vivid violet used sparingly as a signal color
Qatalog
qatalog.comWebsite preview
The design language
Qatalog operates as a near-monochrome productivity canvas: white background, dark slate ink, and a restrained two-violet accent system that appears as small functional punctuation rather than broad washes. Typography is compact and confident — Plus Jakarta Sans at weights 650-700 carries headlines with tight negative tracking, while Inter handles body and UI chrome at smaller sizes. Surfaces stay flat; depth comes from dark filled cards and 9px radii, never from drop shadows. The single vivid moment is a rainbow gradient that crowns the final dark CTA section, acting as the only chromatic release across an otherwise quiet, architectural layout.
Color palette
brand
Aubergine
#514b81Deep accent — section dividers, secondary violet border, paired with Iris for two-tone violet treatments
accent
Prism
#a43cb4Anchor color of the signature rainbow gradient sweep (with cyan #0091ff and magenta #f100e3)
neutral
Ink
#292d34Primary text, dark surface fills, structural borders — cool near-black that reads as the dominant ink across the system
Pure White
#ffffffPage canvas, card surfaces, text on dark fills
Slate
#646464Secondary text, link borders, muted UI chrome — the mid-gray that carries nav, list borders, and body annotations
Charcoal
#202020Dark filled button backgrounds, dark card surfaces, deep accent panels
Black
#000000Icon fills, pure dark accents, maximum-contrast text on light surfaces
Ash
#838383Muted helper text, badge borders, disabled-state borders
Fog
#e8e8e8Hairline dividers, subtle surface separation
Mist
#f0f0f0Subtle surface tint behind nav and ghost buttons
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
60px · 700 · 1.1 · -2.82px trackingThe quick brown fox jumps
heading-lg
48px · 700 · 1.15 · -1.92px trackingThe quick brown fox jumps
heading
40px · 650 · 1.15 · -1.4px trackingThe quick brown fox jumps
heading-sm
34px · 650 · 1.2 · -1.19px trackingThe quick brown fox jumps
subheading
18px · 650 · 1.38 · -0.36px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · -0.288px trackingThe quick brown fox jumps
body-sm
14px · 500 · 1.43 · -0.196px trackingThe quick brown fox jumps
badge
12px · 400 · 1.14 · -0.132px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Plus Jakarta Sans
- Weights
- 400, 650, 700
- Sizes
- 16, 34, 40, 48, 60
- Line height
- 1.10–1.50
- Letter spacing
- -0.047em at 60px, -0.040em at 48px, -0.035em at 40px
- Fallback
- Inter, Manrope
- Features
- "calt" 0
Display and heading face — carries hero (60px), section headings (40-48px), and bold subheads (34px) at weights 650-700; the tight -0.035em to -0.047em tracking at 40-60px gives headlines a dense, engineered quality rather than airy SaaS default. Weight 400 is reserved for occasional body-large passages. Substitute: Inter, Manrope
Additional typeface
Inter
- Weights
- 400, 500, 600, 650
- Sizes
- 8, 12, 14, 16, 18
- Line height
- 1.00–1.50
- Letter spacing
- -0.020em at 18px, -0.018em at 16px, -0.014em at 14px, -0.011em at 12px, -0.010em at 8px
- Fallback
- system-ui, -apple-system
- Features
- "calt" 0, "clig" 0, "liga" 0
UI and body face — navigation, button labels, body copy, captions, and small numeric labels. Weight 650 is the button/badge weight; 500-600 for nav and labels; 400 for body. Tracking is subtly negative even at 14-16px, giving text a tight, considered feel. Substitute: system-ui, -apple-system
Additional typeface
Sometype Mono
- Weights
- 500
- Sizes
- 14, 16
- Line height
- 1.25–1.29
- Fallback
- JetBrains Mono, IBM Plex Mono
Eyebrow and badge accent — uppercase mono labels for section tags and feature eyebrows, adding a technical/editorial counterpoint to the sans-serif system. Substitute: JetBrains Mono, IBM Plex Mono
Spacing & shape
Spacing
- Density
- compact
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80-120px
- Card padding
- 32-48px
- Element gap
- 8-16px
Border radius
nav
9pxcards
18pxlinks
9pximages
18-30pxbuttons
9pxSpacing scale
4px5px8px9px10px12px14px16px18px20px30px35px40px48px50px52px90px133px153px160pxGuidelines
Do
- Use #292d34 Ink for all primary text and dark surface fills; never introduce a third near-black shade
- Reserve Iris #7b68ee exclusively for interactive text links, feature labels, and accent borders — never as a background fill or large headline color
- Set border-radius to 9px for all buttons, nav pills, and inline links; use 18px only for cards and large image containers
- Apply -0.035em to -0.047em letter-spacing on all Plus Jakarta Sans headlines at 40px and above; this tight tracking is signature
- Use Sometype Mono (or a mono substitute) for uppercase eyebrow labels at 12-14px, never for body copy
- Keep the page background pure white #ffffff; introduce surface tint only as #f0f0f0 Mist behind ghost controls or nav wells
- Let the dark Hero Card and Gradient CTA Panel be the only dark surfaces on a page; everything else stays light
Don’t
- Do not use Iris #7b68ee or Aubergine #514b81 as a filled button background — buttons are always Charcoal #202020 or ghost
- Do not add drop shadows to cards or buttons; the system is flat — depth comes from dark surface contrast only
- Do not use rounded corners above 30px anywhere; the 9px/18px pair is the system
- Do not introduce a third accent hue; the two-violet system (Iris + Aubergine) is the full chromatic vocabulary, plus the gradient panel
- Do not use serif, display, or decorative fonts; Plus Jakarta Sans and Inter carry the entire type system
- Do not use color for body copy other than Ink #292d34 (primary) and Slate #646464 (secondary); Ash #838383 is the floor for muted text
- Do not break the compact spacing rhythm with generous 60-80px element gaps; internal UI stays at 4-20px, with 80-120px reserved for inter-section breaks
Components
Primary Dark Button
Filled CTA for conversion actionsDark filled button with #202020 background, white text, 9px border-radius, 9px vertical and 20px horizontal padding. Inter weight 650, 16px, tracking -0.288px. Used for 'Get started' and signup actions. No drop shadow; depth comes from the dark fill against white canvas.
Ghost / Text Link
Secondary navigation and inline linksBorderless text link in Iris #7b68ee at Inter 16px weight 500-650, with a 9px-radius underline or pill affordance on hover. Frequently paired with an arrow glyph. Acts as the primary chromatic punctuation across the page.
Outlined Action Border
Accent border treatment for cards and feature highlights1px border in Iris #7b68ee (or Aubergine #514b81 for secondary), 9px radius. Applied to feature cards and interactive surfaces that need accent emphasis without a filled background.
Navigation Bar
Top-level site navigationWhite background, horizontal flex layout with logo left, nav items center, CTAs right. Nav text in Inter 14-16px weight 500, Slate #646464 for inactive, Ink #292d34 for active/hover. 9px-radius pill affordance for dropdown triggers. 12px vertical padding, 20px horizontal.
Hero Card (Dark Product Preview)
Dark surface that showcases the product UILarge rounded panel with Ink #292d34 or Charcoal #202020 background, 18px border-radius, 32-48px internal padding. Contains product UI mockups (search bar, app grid) rendered in white/light tones against the dark surface. This is the page's signature component — a dark island floating on white.
Feature Grid Card
Two-column feature highlight blocksMinimal card with no background or border by default. Iris #7b68ee title at Inter 16-18px weight 650, body copy in Slate #646464 at 14-16px. Cards sit in a 2-column grid with 30-48px row gap and no visible card chrome — the typography itself defines the unit.
Eyebrow Label
Section preamble textUppercase or sentence-case label in Sometype Mono or Inter weight 650, Iris #7b68ee or Slate #646464, 12-14px. Sits 16-24px above the heading it qualifies.
Gradient CTA Panel
Final conversion section with chromatic releaseDark Charcoal #202020 background panel with 18px radius, containing white headline text and a white 'Get started' button. The signature rainbow gradient (cyan #0091ff → magenta #a43cb4 → hot pink #f100e3) appears as a thin luminous band or edge highlight, providing the page's only multi-chromatic moment.
Trust Logo Strip
Social proof row of customer logosSingle horizontal row of grayscale partner logos (Dish, Deloitte, Pfizer, Adobe, American, NBCUniversal) on white background, separated by even 30-40px gaps. Logos rendered in Slate #646464, never in brand color.
Search / Product Input
In-product input affordance shown in mockupsDark surface input with white placeholder text 'Search or Ask' in Inter 16-18px, full-width within the dark card, no visible border — defined by the dark surface beneath. Includes a + icon affordance and a dropdown of integration icons.
Footer Link Column
Multi-column site footerWhite background, 5-column grid of link lists. Column headers in Ink #292d34 Inter 16px weight 650; links in Slate #646464 Inter 14px weight 400, 5-8px row gap. Logo sits above the first column.
App Icon Tile
Decorative product icon cluster in heroSmall rounded square tiles (9-12px radius) in white or light surface with colorful brand icons inside, arranged in a loose grid behind the dark search card. Rounded but not pill-shaped; flat color fills, no shadows.
Star Rating Badge
Social proof rating displayRow of small gold star icons followed by review count text in Inter 12-14px Slate #646464. Inline horizontal layout, no border or background.
Surfaces & elevation
Level 1
Canvas
#ffffffDefault page background, occupies the majority of screen real estate
Level 2
Mist Well
#f0f0f0Subtle tint behind ghost controls and nav wells
Level 3
Dark Card
#202020Hero product preview card and gradient CTA panel — the system's only dark surface tier
Level 4
Ink Panel
#292d34Secondary dark surface for product mockups and structural dark sections
The system is intentionally shadowless. Depth is communicated through surface color contrast (white canvas → dark filled cards) and 9px/18px corner radii, never through drop shadows. This keeps the interface flat, fast, and print-like.
Layout & imagery
Layout
Max-width ~1200px centered container with generous outer margins. The page follows a vertical rhythm of alternating white bands and dark surface islands: a light hero with a dark product card on the right, a white two-column feature section with text-left/image-right, a full-width dark gradient CTA panel, then a dense multi-column footer. Section gaps are 80-120px, internal element gaps stay compact at 8-20px. Navigation is a single top bar, non-sticky, with logo left, links center, and two text CTAs right. Grids are conservative — 2-column feature rows, 5-column footer, single-row trust strip. The layout prioritizes whitespace and typographic hierarchy over visual density.
Imagery
Imagery is restrained and product-focused. The hero features a dark product preview card containing a search bar and a loose grid of colorful third-party app icons (Google Drive, Slack, Notion, etc.) as soft, slightly blurred decorative tiles behind the search affordance. A secondary image shows a dense field of glowing app icons on a near-black background, used as a decorative panel beside feature text. Photography is absent — all visual content is product UI mockups, icon clusters, and the one signature rainbow gradient. Icons are filled, brand-colored, and tightly cropped. Imagery occupies roughly 30% of the page, serving as demonstration rather than atmosphere.
Design notes
Agent Guide
**Quick Color Reference** - text (primary): #292d34 Ink - text (secondary): #646464 Slate - background: #ffffff - border: #646464 Slate (links) / #7b68ee Iris (accent) - accent: #7b68ee Iris (links, eyebrows, feature labels) - primary action: #202020 (filled action) **Example Component Prompts** 1. Build a hero: white #ffffff background, eyebrow 'STRENGTHENING THE CONVERGED AI WORKSPACE' in Sometype Mono 12px uppercase #646464, headline 'ClickUp has acquired Qatalog' in Plus Jakarta Sans 60px weight 700 #292d34 letter-spacing -2.82px, body at Inter 16px #646464, and a dark filled button '→ Get started' with #202020 background, white text, 9px radius, 9px 20px padding, Inter 16px weight 650. 2. Build a dark product preview card: #202020 background, 18px radius, 32px padding, containing a search input 'Search or Ask' in white Inter 18px, a + icon button in a 9px-radius dark #292d34 pill, and a row of 9px-radius white icon tiles below. 3. Build a two-column feature block: left column has four mini-cards, each with an Iris #7b68ee title in Inter 16px weight 650 and Slate #646464 body in Inter 14px; right column is a full-bleed image with 18px radius. 4. Build a gradient CTA panel: #202020 background, 18px radius, 48px padding, with a thin horizontal rainbow gradient band (linear-gradient(90deg, #0091ff, #a43cb4, #f100e3)) along the top edge as a 4px-tall accent, white headline in Plus Jakarta Sans 48px weight 700, and a white 'Get started' button with 1px white border, 9px radius. 5. Build a footer: 5-column grid on white #ffffff, column headers in Ink #292d34 Inter 16px weight 650, links in Slate #646464 Inter 14px weight 400 with 5px row gap; ClickUp logo in 9px-radius tile above the first column.
Similar brands
Linear
Same compact monochrome foundation with a single accent hue used only for interactive signals; identical 8-10px radii and shadowless flat surfaces
Vercel
Shared near-white canvas, tight typographic tracking, and dark-only product preview cards as the page's primary visual device
Notion
Restrained two-color accent system (violet equivalents), generous whitespace, and typography-driven feature sections over heavy illustration
Stripe
Architectural layout rhythm with alternating light/dark bands, plus Jakarta/Inter-adjacent sans-serif pairing, and minimal shadow reliance
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
