Qosie blue
Default use in the product, favicons, and social profiles.
#DBEAFE / #2563EB / #1E3A8A
Foundations
The foundational building blocks for a consistent Qosie experience: from logo and color to icons, interface patterns, and export-ready social assets.
Logo
Q mark, wordmark, clearspace, and use in product UI.
Color
Neutral base, Qosie blue, and recognizable icon accents.
Aa
Typography
Display, body, mono, and scale for marketing and app UI.
Exports
LinkedIn banners, profile logo, and wordmark downloads.
Iconography
Compact product icons with fixed geometry and color sets.
Interface
SaaS UI patterns for dashboards, controls, and states.
01 Identity
Logo, wordmark, and basic rules
Primary black
Monochrome variant for print and limited color reproduction.
#000000 / #FFFFFF / #FFFFFF
Reverse white
Use on dark or photographic backgrounds.
#FFFFFF / #000000 / #000000
Soft tile
For product tiles, launchers, and subtle UI contexts.
#EFF6FF / #3B82F6 / #2563EB
Primary mark
Use the blue Q mark for product UI, favicons, and social profiles.
Wordmark
Use the wordmark in navigation, footers, presentations, and external touchpoints.
Clearspace
Keep at least one icon-tile width clear around the logo. Do not distort or rotate it; use only the approved colorways above.
02 Color
Neutral foundation, recognizable product accents
#020617
Ink
Primary text, app chrome, strong CTA
#FFFFFF
Paper
Base surface and panels
#F8FAFC
Mist
Soft sections and input fields
#E2E8F0
Line
Dividers and borders
#0052FF
Action
Focus, links, important status
#64748B
Muted
Secondary text and metadata
Qosie
#DBEAFE / #2563EB
Brand, product entry, favicon
Agents
#DCFCE7 / #16A34A
Agent automation and CRM
Dashboard
#FFEDD5 / #EA580C
Metrics, overviews, planning
Brain
#F3E8FF / #9333EA
Knowledge, context, and retrieval
Connecties
#E0E7FF / #0052FF
Integraties en OAuth-connecties
Security
#F1F5F9 / #334155
Toegang, rechten en compliance
Automatisering
#FFEDD5 / #EA580C
Workflows en procesautomatisering
03 Export assets
LinkedIn assets that fit Qosie immediately.
Download the SVG source or export directly as PNG at the correct size. PNG export runs locally in the browser.
LinkedIn personal banner
Simple Qosie header in the same style as the homepage CTA.
1584x396
Personal background
LinkedIn company banner
Compact company-page variant with the same name and headline.
1128x191
Company cover
LinkedIn profile logo
Square Q mark with enough margin for personal profiles and company-page avatars.
400x400
LinkedIn avatar
Qosie wordmark
Wide wordmark for decks, documents, social visuals, and partner pages.
1200x400
Wordmark
04 Typography
Geometric, compact, and easy to scan
Display / Albert Sans
Agents that act with context.
Body copy uses Geist with a calm line height. Text stays businesslike and direct, with focus on control and reliability.
Mono is reserved for tokens, technical values, hex codes, event names, and API fragments.
Scale
- Hero
- 58-76 / 0.98
- Section title
- 36-48 / 1.04
- UI label
- 12-14 / 1.3
- Body
- 15-17 / 1.7
05 Iconography
Small product illustrations with fixed geometry
Qosie mark
Use for brand recognition, app launchers, and favicon.
Dashboard
Tiles, statistics, and operational overviews.
CRM agent
Automation, follow-up, and tool use.
Qosie Brain
Knowledge bases, context windows, and memory.
Developer
API, MCP, webhooks, and technical documentation.
Observability
Runs, evaluations, logs, and auditability.
Connecties
Integraties, OAuth en gekoppelde systemen.
Security
Toegangscontrole, rechten en compliance.
Automatisering
Workflows, triggers en procesautomatisering.
Guides
Gidsen, documentatie en onboarding.
Video
Tutorials, demo’s en visuele uitleg.
Blog
Artikelen, updates en release notes.
06 Interface
App UI stays calm, compact, and controllable
Radius, compact spacing, toolbar gaps
Sales follow-up
Agent Studio
Runs
1,284
Success rate
94.2%
Needs review
18
Workflow activity
Live09:42Context fetched from Qosie Brainok
09:43CRM follow-up preparedok
09:44Human review requestedreview
Spacing tokens
Configuration
4pxMicro alignment, icon offsets
8pxRadius, compact spacing, toolbar gaps
12pxForm padding, badge padding
24pxCard gutters, section internals
40pxDesktop panel padding
72pxNavigation height
07 Voice
Write as if reliability is the product
Write concretely and operationally: what can the user do now?
Avoid AI hype. Emphasize control, context, logging, and reliability.
Use short labels in UI. Explanation belongs in body copy, documentation, or tooltips.
Use English terms where they are natural; technical concepts can stay in English.