Colomin is a desktop CSV editor for macOS built with the egui immediate-mode UI framework. The design language is minimal and data-first: the spreadsheet grid is the product, and every surrounding element — toolbars, sidebars, the status bar — exists only to serve the data within it.

The aesthetic is deliberately quiet. There are no drop shadows, no gradients, no decorative illustration. What remains is a precise system of flat colour, consistent 1 px strokes, and careful typographic hierarchy.

The palette is built around two axes: surface depth and semantic state.

Surface depth uses just two levels: background (the app canvas) and surface (panels, headers, the gutter). The difference between them is intentionally subtle — a few luminance steps — enough to define structure without drawing the eye away from cell content.

Semantic state colours communicate interactive meaning:

The state-edited warm amber tint is the only warm hue in an otherwise cool-neutral palette. Its job is to make unsaved work impossible to miss — it reads immediately, even in peripheral vision.

Themes ship in four variants — Colomin Light, Colomin Dark, GitHub Light, GitHub Dark — all following the same semantic token structure. The accent shifts from #3B82F6 (light) to #60A5FA (dark) to maintain sufficient contrast on dark surfaces while preserving the same blue identity.

Two font families divide the interface by function:

• Proportional (system UI font) — menus, labels, sidebar controls, status bar. Text here supports navigation and commands.
• Monospace (system monospace font) — data cells, row numbers, the cell editor's input area. Monospace alignment lets column values scan vertically at a glance, the way a spreadsheet user expects.

The default cell size is 12 px, user-adjustable from 10 to 18 px. Row-number text is always cell size − 2 px (min 8 px) to sit visually subordinate to cell content. The cell editor footer line height expands to cell size + 4 px to provide comfortable reading in the multiline view.

Weights stay at 400 for data and labels; 600 (semi-bold) for section headings and active column headers only. Restraint in weight keeps the grid readable under high density.

Colomin uses almost no rounding. Table cells and row backgrounds are perfectly rectangular — border-radius: 0. The only rounded element is the 4 px corner on buttons and scrollbar thumbs.

This is deliberate: rounded corners imply containment and card-like groupings. In a dense grid, unnecessary rounding would create visual noise. Flat edges let rows and columns read as the continuous, scannable bands they are.

The grid is designed for information density:

• Default row height: 30 px
• Cell horizontal padding: 6 px each side (12 px total)
• Border strokes: 1 px throughout

This is compact but not cramped. The 30 px row height provides enough vertical whitespace for legibility at 12 px font size while keeping more rows visible without scrolling. The 6 px cell padding gives cell text room to breathe without wasting horizontal space.

The layout follows a 4 px base unit. All spacing values are multiples of 4.

There are no shadows anywhere in the interface. Depth is expressed through colour only: the background is slightly darker than the surface layer above it. This keeps the aesthetic flat and direct — consistent with a tool where the data is the focus.

The row-number gutter sits visually behind the table body, reinforced by its tertiary text colour. The sidebar uses the surface colour to read as a distinct panel without a drop shadow separating it.

Motion in Colomin is functional, not decorative. Two animated systems exist:

Overlay scrollbars behave like macOS native scrollbars: invisible at rest, fading in at 8 α/s when the user scrolls, then lingering for 600 ms before fading out at 1.5 α/s. While the cursor is inside the table area, the thumbs remain faintly visible at 35 % opacity. This keeps the scroll affordance discoverable without cluttering the view.

Marching ants selection — the dashed border around the selected cell range animates at 12 units/s with a 9-unit dash period, matching spreadsheet conventions (Excel, Numbers) and communicating "active selection" unambiguously.

No other motion is used. Hover state changes are instantaneous.

The table is the primary surface. Headers use the surface background with a 1 px border bottom rule. When a column is sorted or focused, that rule recolours to accent. Rows alternate between background (default) and state-hover-row (pointer contact). The selected range fills with state-selection and gains a 1 px dashed accent border (animated).

Column resize handles occupy the bottom 4 px of each header cell. They are border-coloured at rest and accent-coloured on hover — a thin but discoverable affordance.

The gutter is a fixed-width column on the left, permanently visible. It uses text-tertiary for the row numbers and a 1 px right border to separate it from cell content. On row-resize hover, its bottom border recolours to accent, consistent with the column resize treatment.

The cell editor opens as a right-hand sidebar. Its default width is 300 px, freely draggable between 200 and 800 px. The background is surface — the same level as the table header — which visually places it "above" the app canvas. The input area uses monospace type matching the table cells for visual consistency.

Buttons use a minimal outlined style: surface fill, 1 px border, 4 px radius. Hover promotes the border to accent and shifts fill to state-hover-row. Active state uses accent-subtle fill. Destructive buttons recolour their label to state-danger; the border and shape remain identical to avoid jarring contrast.

Custom overlay scrollbars match the macOS idiom: translucent thumbs, no visible track, no scrollbar arrows. Thumb colour progresses from text-tertiary (normal) through a blend of text-secondary/text-tertiary (hover) to text-secondary (dragging). The 4 px thumb radius softens the only moving element on screen.

A 22 px bar at the bottom of the window. label-sm typography, text-secondary colour, separated from the table by a 1 px border top rule. Used for row/column counts and cursor position — reference information, never controls.

1. Data first. The grid occupies maximum available space. Chrome elements are narrow and static.
2. Flat, not lifeless. No shadows or gradients, but colour and stroke provide clear hierarchy.
3. Semantic colour. Every colour token has one job. No colour is used decoratively.
4. Monospace for data. All user-entered values render in monospace. Proportional type is reserved for UI.
5. Motion as signal. The two animated systems (scrollbars, marching ants) communicate affordance and state — not brand personality.
6. Theme-agnostic tokens. The semantic token layer (accent, surface, state-*) maps identically across all four themes; only the resolved hex values differ.