Overview

Site: Quickbar —

Platform: macOS native app + Next.js marketing site  |  Date: 2026-03-08

Quickbar is a macOS launcher and productivity tool that replaces Spotlight. The design language is defined by its dark-first aesthetic, vibrant multi-color accent brushwork anchored by purple/violet, and a clean command brushwork pattern. The marketing site uses a fully dark theme with glass-morphism effects, gradient accents, and restrained whitespace.

Key brand elements: Purple (#B469FF) as primary accent, rainbow color brushwork for extension categories, dark backgrounds (#000 website / #1C1C1E app), Inter typeface on web, SF Pro on native, command-brushwork interaction pattern, keyboard-first design.

Colors

Brand Accent Brushwork

Quickbar uses a vibrant rainbow brushwork. Purple is the primary brand color; others are used for extension categories and visual variety.

#B469FF
Purple
#FF6B9D
Pink
#FF6363
Red
#FF9F43
Orange
#FFCB57
Yellow
#56D364
Green
#56D9D1
Cyan
#58A6FF
Blue

Backgrounds

#000000
Page
#0A0A0A
Page Alt
#0D0D0D
Section
#111111
Section Alt
5% white
Card
10% white
Elevated

Text

#FFFFFF
Primary
70% white
Secondary
50% white
Tertiary
35% white
Muted

Semantic

#56D364
Success
#FFCB57
Warning
#FF6363
Error
#58A6FF
Info

Gradient Samples

Brand CTA
Rainbow
Purple Glow

Typography

Website uses Inter. The native app uses SF Pro (system font).

Heading One
Tagh1
Size64px
Line-height1.1
Letter-spacing-0.03em
Weight700
Heading Two
Tagh2
Size48px
Line-height1.15
Letter-spacing-0.025em
Weight700
Heading Three
Tagh3
Size32px
Line-height1.2
Letter-spacing-0.02em
Weight600
Heading Four
Tagh4
Size24px
Line-height1.3
Letter-spacing-0.015em
Weight600
Body large — Quickbar lets you control your tools with a few keystrokes. Blazingly fast, totally extendable.
StyleBody Large
Size20px
Line-height1.6
Weight400
Body default — Quickbar lets you control your tools with a few keystrokes. It's designed to keep you in your flow.
StyleBody Default
Size16px
Line-height1.6
Weight400
Body small — Extensions, commands, and quicklinks all in one place.
StyleBody Small
Size14px
Line-height1.5
Weight400
Caption — Category
StyleCaption
Size12px
Transformuppercase
Spacing0.04em
Weight500
const result = await Quickbar.run("clipboard-history");
StyleCode / Mono
FontJetBrains Mono
Size14px
Weight400

Gradient Text Effect

Used on hero headlines for visual impact.

Supercharged productivity

Spacing

Scale

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px
120px
160px

Section Gaps

Small
64px
Medium
96px
Large
120px
X-Large
160px

Borders & Shadows

Border Radius

4px
8px
12px
16px
20px
24px
Pill

Borders

All borders use white at low opacity. Default: 1px solid rgba(255,255,255,0.1). Subtle: rgba(255,255,255,0.06). Focus: rgba(180,105,255,0.5).

Shadows

Cardsubtle ring + soft drop
Elevatedheavier drop
Purple Glowbrand highlight
Windowapp window shadow

Buttons

VariantBackgroundColorBorderRadius
Primarygradient(#B469FF, #FF6B9D)#FFFFFFnone12px
Secondaryrgba(255,255,255,0.1)#FFFFFF1px rgba(255,255,255,0.15)12px
Download#FFFFFF#000000none12px
Ghosttransparent70% whitenone12px
Dangerrgba(255,99,99,0.15)#FF63631px rgba(255,99,99,0.2)8px

All buttons: padding: 12px 24px; font: 500 15px Inter; transition: all 0.2s ease

Cards

Feature Card

Glass-morphism card with subtle border and hover effect. Background shifts from 5% to 8% white.

New Feature

Card with Header

Variant with a gradient header for highlighted content.

Extension Store Card

⚡
Clipboard History
Quickbar
🔍
Spotify Controls
Community
📄
GitHub
Quickbar

Navigation

Sticky navbar with backdrop blur, 64px height, dark translucent background.

Extensions Pro Teams Blog Changelog

background: rgba(0,0,0,0.8); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255,255,255,0.06); position: fixed; z-index: 100

Inputs

Dark inputs with subtle borders, purple focus ring.

Default
Focused

Toggle Switch

Off
On

Input: bg rgba(255,255,255,0.05), border 1px rgba(255,255,255,0.12), radius 8px, focus: #B469FF + 3px purple glow

Layout

Container Widths

1200px — Container
1080px — Wide
800px — Content
640px — Narrow

Breakpoints

Mobile375px
Tablet768px
Desktop1024px
Wide1440px

Motion & Interaction

Hover Transitions

Cards lift, buttons brighten, links fade in. All use ease timing.

Hover to lift

Transition Presets

Fastall 0.15s ease
Defaultall 0.2s ease
Slowall 0.3s ease-out
Springall 0.4s cubic-bezier(0.16, 1, 0.3, 1)

App Overview

Quickbar is a macOS launcher that replaces Spotlight. It uses a floating command brushwork window activated by ⌥ Space. The UI is keyboard-driven with a search bar, scrollable command list, detail panel, and action panel.

Native details: Uses SF Pro for text, SF Mono for shortcuts, vibrancy/blur effects for the window background, system-level dark appearance. Window has no title bar, rounded 12px corners, heavy drop shadow.

App Colors

Backgrounds

#1C1C1E
Window
#2C2C2E
Content
#3A3A3C
Elevated
15% purple
Selected
5% white
Hover

Text

#FFFFFF
Primary
#EBEBF5CC
Secondary
#EBEBF599
Tertiary
#EBEBF54D
Quaternary

Accent Colors

Used for extension icons, categories, and status indicators.

#B469FF
Purple
#FF6363
Red
#FF9F43
Orange
#FFCB57
Yellow
#56D364
Green
#56D9D1
Cyan
#58A6FF
Blue
#FF6B9D
Pink
#F778BA
Magenta

Command Window

The main Quickbar window: 750px wide, max 500px tall, 12px border radius. Search bar at top, list below, footer with actions.

Suggestions
📋
Clipboard History Quickbar ⌘⇧V
🔎
Search Files Quickbar
📝
Floating Notes Quickbar
Commands
💻
System Preferences System
🔒
Lock Screen System ⌃⌘Q
Quickbar ⌘K Actions   ↵ Open

window: 750px, radius 12px, shadow: 0 24px 80px rgba(0,0,0,0.6), bg: #1C1C1E

List Items

36px height, 8px radius, 0 8px margin, with icon + title + subtitle + optional shortcut badge.

★
Selected State ⌘1
⚙
Hover State
✓
Default State Subtitle text
—
Disabled State

selected: rgba(180,105,255,0.15), hover: rgba(255,255,255,0.05), transition: background 0.1s ease

Action Panel

Triggered by ⌘K. Dropdown with command actions and keyboard shortcuts.

Open Application ↵
Show in Finder ⌘↵
Copy Name ⌘C
Copy Path ⌘⇧C
Remove from Recents ⌘⌦

bg: #2C2C2E, radius: 10px, shadow: 0 12px 40px rgba(0,0,0,0.5), item-height: 32px, selected: rgba(180,105,255,0.15)

Form Controls

Used in extension forms, settings, and preferences.

Title
API Key
Enable feature

input: bg #2C2C2E, radius 6px, border 0.5px rgba(255,255,255,0.12), focus-border: #B469FF

Extensions

Extension icons use gradient backgrounds with 10px border radius at 48px size in the store, 24px in the command list.

Extension Icon Grid

📋
48px store
🔌
48px store
🚀
48px store
⚡
48px store
🔥
48px store
📋
🔌
🚀
24px list size

Badges & Status

Tinted background with matching text color, 4px radius.

Pro Active Error Warning Beta New Updated

Keyboard Shortcut Badges

⌘K ↵ ⌥Space ⌘⇧V ⌫

App Motion

The Quickbar app uses fast, snappy animations with spring-based easing for a native macOS feel.

Window open0.2s cubic-bezier(0.16, 1, 0.3, 1) — scale from 0.95 + fade
List selectionbackground 0.1s ease — instant feel
Panel slide0.25s cubic-bezier(0.16, 1, 0.3, 1) — detail panel push
Toast enter0.3s cubic-bezier(0.16, 1, 0.3, 1) — slide up + fade
Fade in0.15s ease-in — content transitions

macOS Integration

Hotkey: ⌥ Space (default). No dock icon. Floating panel window level. Uses NSVisualEffectView for window vibrancy. Respects system dark mode (always dark).

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.website.theme.extend,
  },
};

// Swap to designSystem.tailwind.app.theme.extend for app/portal surfaces.
ScopePrimaryBody FontRadiusShadowBreakpoint
Website——999px—{'max': '375px'}
App / Portal—-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif———
ScopeRecipeClass PatternNotes
WebsitebuttonPrimaryinline-flex items-center justify-center gap-2 rounded-pill bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colorsPrimary action button using exported brand, radius, and shadow tokens.
WebsitesurfaceCardrounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6Default surface/card treatment for high-visibility content areas.
WebsiteinputFieldrounded-sm border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ringBase text input treatment aligned to the exported radius, border, and focus tokens.
App / PortalbuttonPrimaryinline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colorsPrimary action button using exported brand, radius, and shadow tokens.
App / PortalsurfaceCardrounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6Default surface/card treatment for high-visibility content areas.
App / PortalinputFieldrounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ringBase text input treatment aligned to the exported radius, border, and focus tokens.