Design System | Kommit AI

Logo[01]

The Kommit logo is a pixelated “K” made from rounded rectangles on a blue square. Available as SVG and PNG.

Kommit

On dark backgrounds

Kommit

On light backgrounds

Mark: Pixelated “K” — 8 rounded rectangles (4 vertical bar + 2 upper arm + 2 lower arm) on a #2864E9 square background.

Wordmark: “Kommit” in Geist Mono, font-weight 600, tracking -0.02em.

Clear space: Minimum 50% of mark width on all sides.

Minimum size: 16px (mark only), 80px (mark + wordmark).

Files: /logo-mark.svg (vector), /logo-mark.png (2048×2048 raster).

Do not: Rotate, stretch, recolor, add drop shadows, or place on busy backgrounds without sufficient contrast.

Download SVG Download PNG (2048×2048)

Colors[02]

Surfaces

--ds-surface-chrome#FFFFFF

Persistent sidebar and top-header chrome

--ds-surface-app#FAFAFA

Page canvas and gutters visible between cards

--ds-surface-card#FFFFFF

Default cards, panels, and empty states

--ds-surface-elevated#FFFFFF

Raised controls, prompt rows, checklist rows, chips

--ds-surface-subtlergba(0,0,0,0.02)

Faint alternate backgrounds and skeleton loaders

--ds-surface-mutedrgba(0,0,0,0.04)

Hover and selected states for raised controls

--ds-surface-overlay#FFFFFF

Menus, popovers, command palette, and floating overlays

--ds-surface-code#09111F

Code blocks and near-black glyph wells inside workflow rows

--ds-surface-scrimrgba(0,0,0,0.5)

Modal / dialog backdrop scrim

Surfaces nest in a strict hierarchy. Chrome stays darkest, the canvas sits behind panels, and raised controls only appear inside a panel. Don't make every dashboard object elevated — the canvas should stay visible between cards.

1 · --ds-surface-appPage canvas, gutters

2 · --ds-surface-cardDefault panel, card, empty state

3 · --ds-surface-elevatedRaised controls, rows, chips

1Chrome--ds-surface-chromeSidebar, top header

2Canvas--ds-surface-appDashboard body, gutters between panels

3Panel--ds-surface-cardHero, cards, metric panels

4Raised--ds-surface-elevatedPrompt rows, checklist rows, chips

5Hover--ds-surface-mutedHovered or selected raised controls

6Overlay--ds-surface-overlayMenu, popover, command palette

Borders

--ds-border-subtlergba(0,0,0,0.06)

--ds-border-defaultrgba(0,0,0,0.10)

--ds-border-strongrgba(0,0,0,0.16)

Text

--ds-text-primary#09090B

--ds-text-secondary#52525B

--ds-text-muted#71717A

--ds-text-disabled#71717A

Brand & Status

--ds-primary#2563EB (CTA blue)

--ds-primary-hover#1D4EDB (CTA hover)

--ds-primary-soft#3B82F6 (link / icon / focus blue)

--ds-success#22C55E (green)

--ds-warning#F59E0B (amber)

--ds-destructive#EF4444 (red)

--ds-info#60A5FA (blue)

Node Type Colors

Project#60A5FA

Target Audience#6EE7B7

Competitors#FDBA74

Tech Stack#C4B5FD

Features#F9A8D4

Assets#FDE047

Repository#94A3B8

Palette Exceptions

These are the only legitimate reasons to use colors outside the --ds-* token system. If a color doesn't fit one of the three buckets below, it's drift — replace with a token.

1. AI-mode indigo accent

AI-generated / AI-interactive surfaces use indigo to distinguish themselves from the primary (--ds-primary) blue. Use this only on chrome directly connected to AI features: AI sidebar, chat bubbles, AI-mode toggles, generation buttons.

Indigo 500#6366F1AI surfaces — primary accent (AI sidebar, chat avatars, AI-mode icons)

Indigo 400#818CF8Lit / focused AI state (active icon, highlighted bubble)

Indigo 600#5558E6Hover for AI buttons

2. macOS window-control dots

Used only in marketing mockups that imitate a macOS window. Never in real product chrome.

Close#FF5F57macOS-style window close dot (mockups only)

Minimise#FEBC2EmacOS-style window minimise dot

Maximise#28C840macOS-style window maximise dot

3. Third-party brand colors

When rendering a third-party brand mark (Figma logo, GitHub logo, etc.), match the brand's official color exactly. Never use brand colors for anything other than the brand mark itself.

Figma — Red#F24E1E

Figma — Orange#FF7262

Figma — Purple#A259FF

Figma — Green#0ACF83

Typography[03]

40pxMarketing hero headingWhat do you want to build next?

32pxPage headingDesign System

24pxSection headingRecent projects

17pxSubsectionFont Families

15pxLarge bodyStart something new, continue an existing project

14pxBody textPer-node AI conversations

13pxDefault UIManage all registered users.

12pxCaptionLast updated 3m ago

11pxLabelBEFORE

10pxTag/BadgePromoted

Font Families

Space GroteskMajor headings — --font-heading

Geist SansPrimary UI and body font — --font-geist-sans

Geist MonoLabels, counters, code, technical UI chrome. Not body copy or action links — --font-geist-mono

Auth Heading Emphasis

Auth heading emphasis uses brand blue, not muted gray or text-ink-3. Account-specific values use bold sans text, not mono. Secondary auth actions use bold sans links:

Request another emailUse password instead

Spacing[04]

4px

8px

12px

16px

20px

24px

32px

Border Radius[05]

// We don't use border radius.

All elements are sharp rectangles. border-radius: 0 is the default everywhere — inputs, buttons, cards, dialogs, dropdowns, and modals. The only exception is rounded-full for actual circles (avatar indicators, status dots).

If you find yourself reaching for rounded-md or rounded-lg, stop. The answer is no.

Shadows[06]

// We rarely use shadows.

The primary visual tools are borders and background tints. Shadows add softness and depth we deliberately don't want. Use border border-neutral-200 dark:border-neutral-800 to define containers. Use bg-neutral-50/50 dark:bg-white/[0.02] for subtle surface differentiation.

If a component absolutely needs a shadow (e.g. a floating dropdown or popover), keep it minimal: 0 2px 8px rgba(0,0,0,0.08).

Icons[07]

Librarylucide-react

Default size16px (size-4)

BackgroundsNo colored backgrounds on icons — ever.

FormatAlways SVG from Lucide. No emoji icons.

Design Principles[08]

01Brutalist precision

Sharp corners, no decoration, every element earns its space. If it doesn't serve the user it gets removed.

02Typography with roles

Space Grotesk for major headings. Geist Sans for body, UI text, and action links. Geist Mono only for labels, counters, code, and technical chrome.

03Dark-first design

Design for dark mode first, then verify in light. Dark is the primary experience. Light must hold up too.

04Dense but breathable

Pack information tightly, but use whitespace strategically so nothing feels cramped. Density with intent.

05ASCII heritage

Terminal aesthetics, box-drawing characters, `//` comments as labels. We embrace the command-line lineage.

Anti-patterns[09]

×No rounded corners on any interactive element (inputs, buttons, cards, dialogs)

×No colored icon containers

×No gradient accent lines

×No hover:scale transforms

×No shadcn/ui Button/Input/Label on public pages — use native HTML with Tailwind

×No generic AI aesthetics — no blurry gradients, no floating orbs

Component Reference[10]

shadcn/ui components (Base UI adapter, not Radix). Import from @/components/ui/*. On public-facing pages use native HTML + Tailwind — do not import shadcn components into landing pages.

Component	Variants
Button	default, outline, secondary, ghost, destructive, link
Badge	default, secondary, outline, destructive
Card	default
Input	default
Dialog	default
Sheet	default
Tooltip	default
Dropdown Menu	default
Avatar	default
Separator	default
Skeleton	default
Table	default
Sonner (toast)	default
EmptyBlock	no-data, filtered, all-clear, error

Dashboard Patterns[11]

How the primitives above compose into the recurring surfaces of the product. Each entry names the canonical file — copy from there rather than rebuilding. If a component drifts from these rules, fix it, don't branch from it.

11.1 Navigation chrome

Sidebars and top headers sit at --ds-surface-chrome on top of the page canvas and use the border-b + h-12 header pattern everywhere.

App sidebarcontrol-plane/sidebar.tsx — collapsible, org switcher, role-gated nav groups (Build / Operate / Govern).

Icon raildatabase/workspace-icon-sidebar.tsx — 48px wide, icon-only. Active: bg-accent text-foreground.

Top headercontrol-plane/header.tsx — h-12, bg-[var(--ds-surface-chrome)], sticky, only a bottom separator.

Tab bardatabase/workspace-tabs.tsx — closeable tabs, active uses border-b-2 border-[var(--ds-primary)].

⌘KSearch…

ordersusersproducts

11.2 Overlays

Modals, slideovers, popovers and the command palette. All menus and palettes sit on --ds-surface-overlay above a --ds-surface-scrim backdrop when modal. Never tint the full overlay blue; use blue only for focused actions and wayfinding.

Command palettecontrol-plane/cmd-palette.tsx — centered, 620px, sharp overlay panel, ⌘K to toggle.

Settings pageapp/(dashboard)/settings/ — full-page settings with left rail nav.

Confirm dialogdashboard/delete-project-dialog.tsx — narrow, destructive CTA in --ds-destructive.

Slideovercanvas/build-plan-slideover.tsx — right-docked, 480px, animates from translate-x-full.

Delete project?

This cannot be undone.

CancelDelete

11.3 Data surfaces

Virtualized grids, filter bars and sort panels. Grid rows are 32px tall, zebra-striped with --ds-surface-subtle. Headers use --ds-surface-muted and stick to the top of the scroll container.

Data griddatabase/data-grid.tsx — @tanstack/react-virtual, inline edit, cell selection.

Grid toolbardatabase/data-grid-toolbar.tsx — row count, selection, insert/delete actions.

Filter paneldatabase/filter-panel.tsx — popover anchored to toolbar filter button.

Sort paneldatabase/sort-panel.tsx — multi-sort with drag-to-reorder.

idemailcreated_at

1a@example.com2026-04-01

2b@example.com2026-04-02

3c@example.com2026-04-03

11.4 Status, banners & readiness

Persistent strips that communicate plan state, impersonation, or system notifications. Colored variants use color-mix against a ds-* token so the banner automatically adapts to light/dark.

Plan bannerdashboard/plan-banner.tsx — warning variant uses color-mix(var(--ds-warning) 12%).

Impersonationdashboard/impersonation-banner.tsx — floating, draggable, snaps to corners, solid --ds-primary.

Notification belldashboard/notification-bell.tsx — dot indicator in --ds-destructive when unread.

Readinessdashboard/readiness-indicator.tsx — 0→100 bar, colors ramp warning → success.

Memory healthmemory/memory-health-bar.tsx — segmented bar with tooltip per segment.

Your workspace is in read-only mode. Choose a plan to continue.

Impersonating user@example.com (00:42)Exit

11.5 AI chrome

AI-specific surfaces are the only place indigo is allowed. Everything else must use ds-* tokens. See §02 Palette exceptions for the full rule.

AI sidebardatabase/ai-sidebar.tsx — chat thread, SQL tool calls, permission badge.

Node chatcanvas/node-chat.tsx — per-node chat drawer, same accent rules as sidebar.

Project chatcanvas/project-chat.tsx — full-project chat, persists across nodes.

Chat avatarAI avatar uses #6366F1 background with white Kommit logo.

Kommit AI

I can help you query orders. What would you like to know?

11.6 Cards

Canonical card: dashboard/project-card.tsx. Copy its structure — don't re-invent. Dashboard cards use sharp panels with p-4, a 1px --ds-border-subtle border, and a hover:bg-[var(--ds-surface-elevated)] transition.

Backgroundbg-[var(--ds-surface-card)]

Hoverbg-[var(--ds-surface-elevated)]

Borderborder border-[var(--ds-border-subtle)]

Padding / radiusp-4

Body texttext-[13px] text-[var(--ds-text-secondary)]

Inventory dashboard

6 nodes · 4 filled · Next.js, Postgres

Ready to build

(hover state)

Elevated surface on hover.

11.7 Empty states

Empty states are instructional product surfaces, not apologies. Use the existing src/components/control-plane/empty-block.tsx contract for app surfaces: callers declare state, icon, heading, body, optional primary action, optional secondary action, and retry behavior for errors.

Preview / no-data

Create your first workflow

Map the agent process you want to govern, then attach policy gates, tools, and approval checkpoints.

Create workflow Read setup guide

Anatomy

01Icon or simple illustration that names the missing object

02One-line headline that tells the user what is empty

03One short paragraph that explains when data will appear

04Primary action when the user can resolve the empty state

05Optional secondary action for documentation or setup context

Full-page empty

Use when the route's primary object set is absent and the user cannot do useful work until it exists. Keep the page chrome, then center the instruction inside the content area.

Inline or tile empty

Use inside a table, queue, chart, or metric tile when the surrounding route still has useful filters, context, or adjacent panels.

Loading and error are different

Loading is temporary and uses skeletons or progress text. Error means data failed to load and needs a retry. Empty is a valid zero-data state with setup guidance.

StateUse whenTone

no-dataThe tenant has not created or connected the object yet.neutral

filteredObjects exist, but the current search, filter, or time window hides them.neutral

all-clearAn empty queue is the expected healthy state, such as no pending approvals.success

errorThe system failed to load the object set. Show retry and keep error copy specific.critical

Voice rule

Write empty copy as a next step: direct, specific, and calm. Avoid apologies, blame, or vague "no data" labels. Name the object that is missing and explain the first useful action.

Route	Empty means	Visual	Headline	Body	Action	Pattern
/dashboard	No runtime or workflow evidence connected yet	Inbox icon	Connect your first runtime	Connect one agent runtime so Kommit can start showing runs, approvals, cost, and audit evidence.	Connect first runtime	Full-page
/agents	No agents in the inventory	Agent icon	Add your first agent	Register the owner, tools, data sources, and operating environment for one production agent.	Add agent	Full-page
/workflows	No workflows	Workflow icon	Create your first workflow	Map the agent process you want to govern, then attach policy gates, tools, and approval checkpoints.	Create workflow	Full-page
/knowledge/library	No knowledge sources or documents	Document icon	Add a knowledge source	Upload a document or connect a source so agent runs can cite governed context.	Add source	Full-page
/connections	No integrations connected	Plug icon	Connect an integration	Add a runtime, SaaS app, repository, or data source before evidence can flow into Kommit.	Browse connectors	Full-page
/skills	No reusable agent skills available	Skills icon	Build from the skill catalog	Reusable capabilities will appear here when the workspace has catalog-backed agent skills.	Browse catalog	Full-page
/activity	No events in the selected window	Activity icon	No events yet	Agent and workflow events appear here after a connected runtime emits evidence.	Read event docs	Inline/tile
/approvals	Nothing pending review	Check circle icon	No approvals pending	Approval requests appear here when policy routes a sensitive action to a human reviewer.	No primary action	Inline/tile
/pull-requests	No pull-request evidence ingested	Pull request icon	No PR evidence ingested yet	Pull-request events appear when runtimes, CI, SDKs, or provider bridges emit review evidence.	No primary action	Full-page
/memory	No durable decisions or learnings captured	Brain icon	No evidence memory yet	Decisions, learnings, and contradictions appear after connected runs generate durable context.	Read memory docs	Inline/tile
/policies	No governance policies configured	Shield icon	Start with a policy template	Choose a baseline policy, then tune approval checkpoints and exceptions for the workspace.	Browse policy library	Full-page
/costs	No spend captured for the selected window	Bar chart icon	No spend yet	Cost data appears after a connected runtime emits model, token, or tool-cost evidence.	Read cost docs	Inline/tile
/admin/access-allowlist	No allowlist entries	Lock icon	Add the first allowlist entry	Restrict access by approved domains or addresses before expanding the pilot.	Add allowlist entry	Full-page
/evaluations	No evaluations run	Beaker icon	Create your first evaluation	Evaluation gates appear here when a workspace starts testing agent or model changes.	Create evaluation	Full-page
/analytics	No observability data	Bar chart icon	No analytics data yet	Analytics populate after runtime events, approvals, cost, and outcome evidence are connected.	Read analytics docs	Inline/tile