The Kommit logo is a pixelated “K” made from rounded rectangles on a blue square. Available as SVG and PNG.
KommitKommitMark: 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.
Surfaces
--ds-surface-app#FAFAFA--ds-surface-card#FFFFFF--ds-surface-elevated#FFFFFF--ds-surface-subtlergba(0,0,0,0.02)--ds-surface-mutedrgba(0,0,0,0.04)--ds-surface-overlayrgba(0,0,0,0.5)Surfaces nest in a strict hierarchy. A raised popover always sits on a card, which always sits on the app background. Don't skip levels — a dropdown on the app background (no card between) reads as floating and flat.
1 · --ds-surface-appDashboard body, workspace frame2 · --ds-surface-cardPanel, sidebar, project card3 · --ds-surface-elevatedPopover, dropdown, tooltip--ds-surface-appDashboard body, workspace frame--ds-surface-cardApp sidebar, project card, data-grid panel--ds-surface-elevatedPopover, dropdown menu, command palette, tooltip--ds-surface-overlayBehind a modal or slideoverBorders
--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#000000--ds-text-secondary#555555--ds-text-muted#666666--ds-text-disabled#AAAAAABrand & Status
--ds-primary#2864E9 (blue)--ds-primary-hover#1D4ED8 (blue (darker))--ds-success#22C55E (green)--ds-warning#F59E0B (amber)--ds-destructive#EF4444 (red)--ds-info#3B82F6 (blue)Node Type Colors
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.
2. macOS window-control dots
Used only in marketing mockups that imitate a macOS window. Never in real product chrome.
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.
40pxMarketing hero headingWhat do you want to build next?32pxPage headingDesign System24pxSection headingRecent projects17pxSubsectionFont Families15pxLarge bodyStart something new, continue an existing project14pxBody textPer-node AI conversations13pxDefault UIManage all registered users.12pxCaptionLast updated 3m ago11pxLabelBEFORE10pxTag/BadgePromotedFont Families
--font-heading--font-geist-sans--font-geist-mono4px8px12px16px20px24px32px// 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.
// 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).
lucide-react16px (size-4)Sharp corners, no decoration, every element earns its space. If it doesn't serve the user it gets removed.
Space Grotesk for major headings. Geist Sans for body and UI text. Geist Mono only for labels, counters, code, and technical chrome.
Design for dark mode first, then verify in light. Dark is the primary experience. Light must hold up too.
Pack information tightly, but use whitespace strategically so nothing feels cramped. Density with intent.
Terminal aesthetics, box-drawing characters, `//` comments as labels. We embrace the command-line lineage.
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 |
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, headers, and tab bars. These sit at --ds-surface-card on top of the app background and use the border-b + h-12 header pattern everywhere.
dashboard/app-sidebar.tsx — 240px wide, collapsible, groups for Projects / Workspace / Account.database/workspace-icon-sidebar.tsx — 48px wide, icon-only. Active: bg-accent text-foreground.dashboard/dashboard-header.tsx — h-12, bg-background/60 backdrop-blur-md, sticky, z-50.database/workspace-tabs.tsx — closeable tabs, active uses border-b-2 border-[var(--ds-primary)].11.2 Overlays
Modals, slideovers, popovers and the command palette. All overlays sit on --ds-surface-elevated above a --ds-surface-overlay scrim. Never use pure black for the scrim — the overlay token is rgba(0,0,0,0.6) in dark mode.
dashboard/command-palette.tsx — centered, 640px, rounded-xl, shadow-2xl, ⌘K to toggle.app/(dashboard)/settings/ — full-page settings with left rail nav.dashboard/delete-project-dialog.tsx — narrow, destructive CTA in --ds-destructive.canvas/build-plan-slideover.tsx — right-docked, 480px, animates from translate-x-full.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.
database/data-grid.tsx — @tanstack/react-virtual, inline edit, cell selection.database/data-grid-toolbar.tsx — row count, selection, insert/delete actions.database/filter-panel.tsx — popover anchored to toolbar filter button.database/sort-panel.tsx — multi-sort with drag-to-reorder.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.
dashboard/plan-banner.tsx — warning variant uses color-mix(var(--ds-warning) 12%).dashboard/impersonation-banner.tsx — floating, draggable, snaps to corners, solid --ds-primary.dashboard/notification-bell.tsx — dot indicator in --ds-destructive when unread.dashboard/readiness-indicator.tsx — 0→100 bar, colors ramp warning → success.memory/memory-health-bar.tsx — segmented bar with tooltip per segment.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.
database/ai-sidebar.tsx — chat thread, SQL tool calls, permission badge.canvas/node-chat.tsx — per-node chat drawer, same accent rules as sidebar.canvas/project-chat.tsx — full-project chat, persists across nodes.#6366F1 background with white Kommit logo.orders. What would you like to know?11.6 Cards
Canonical card: dashboard/project-card.tsx. Copy its structure — don't re-invent. All dashboard cards use rounded-lg p-4, a 1px --ds-border-subtle border, and a hover:bg-[var(--ds-surface-elevated)] transition.
bg-[var(--ds-surface-card)]bg-[var(--ds-surface-elevated)]border border-[var(--ds-border-subtle)]rounded-lg p-4text-[13px] text-[var(--ds-text-secondary)]