The Kommit logo is a pixelated “K” made from rounded rectangles on a blue square. Available as SVG.
KommitKommitMark: Pixelated “K” — 8 rounded rectangles (4 vertical bar + 2 upper arm + 2 lower arm) on a #2563EB 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.svg (512×512 vector).
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)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#000000--ds-text-secondary#555555--ds-text-muted#666666--ds-text-disabled#AAAAAABrand & Status
--ds-primary#2563EB (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
28pxPage headingDesign System20pxSection headingTypography17pxSubsectionFont Families15pxLarge bodyA complete toolkit14pxBody textPer-node AI conversations13pxDefault UIManage all registered users.12pxCaptionLast updated 3m ago11pxLabelBEFORE10pxTag/BadgePromotedFont Families
--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.
font-mono for all headings, labels, and UI chrome. Body text can use sans. The terminal aesthetic is intentional.
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 |