rk@tigase.net opened 2 days ago
-
Work Log — Design Sztab Visual Grammar
This work log documents the progress on creating the unified visual grammar for the Sztab UI, including typography, color palette, dialog structure, and overall component consistency.
1. Initial visual grammar definition
Time: 0.6h
Reviewed existing UI components (Navbar, Sidebar, Users, Profile, Password, Dialogs).
Identified inconsistencies in font usage, spacing rhythm, and color palette.
Chose IBM Plex Mono as the unified typeface and sage-green as the primary palette direction.
2. Tailwind configuration update
Time: 0.4h
Created and documented the updated
tailwind.config.js.
Defined color tokens for sage-greens, charcoal text, and neutral backgrounds.
Added global fontFamily configuration for the new typewriter look.
3. Global typography pass
Time: 0.8h
Updated
index.cssbase styles to establish IBM Plex Mono across the entire application.
Retuned heading sizes, line height, and default letter spacing to match the typewriter tone.
4. Navbar refinement
Time: 1.0h
Rebuilt the NavBar layout using the new palette and spacing grammar.
Simplified the component, tightened padding, refined dropdown motion, and applied the typewriter font globally.
Updated focus and hover interactions to fit the sage aesthetic.
5. Sidebar refinement
Time: 0.8h
Cleaned up the Sidebar typography.
Standardized active/hover states using the new palette.
Updated spacing, icons, and link rhythm to align with the visual grammar.
6. Dialog and modal system refactor
Time: 1.4h
Rebuilt modal structure for Profile, Change Password, Create User, Edit User, and User Delete confirmation.
Applied unified headers, border weight, dialog surface color, input structure, spacing, and footer button design.
Ensured consistency across font sizes and button placement.
7. Table, list, and form cleanup
Time: 0.8h
Refined Users table styles (row spacing, hover affordances, header typography).
Cleaned up all form fields with consistent padding, focus states, and border radius.
Aligned labels, inputs, and vertical rhythm across screens.
8. Final audit and polish
Time: 0.6h
Ran a full sweep over the UI to ensure typography, spacing, palette usage, and component shape are consistent.
Validated look and behavior across pages.
Performed final round of micro-adjustments in spacing and border weight.
Total Time: 7 hours
-
Previous Value Current Value Open
In Progress
-
Any screenshot to have an idea how it looks? :)
I’ll share a living, connected version of the UI — so you can start using Sztab end-to-end. (I’m still getting fully comfortable with TypeScript, so there’s a small learning curve, but the new UI is shaping up really well.)
I’m finishing the UI wiring now; you’ll have it tomorrow morning.
| Type |
New Feature
|
| Priority |
Normal
|
| Assignee | |
| Version |
none
|
| Sprints |
n/a
|
| Customer |
n/a
|
Sztabina UI Design Language
Version: 2025-11-15
Author: Rk@tigase.net Scope: Web UI (React + Tailwind)
This document describes the visual grammar of the Sztab user interface. The goal is a coherent, durable, and easily maintained design system.
1. Design Philosophy
The Sztab UI is intentionally spare. It should feel calm, structured, and readable at a glance. Features grow steadily; visual noise should not.
Principles:
Monospace clarity.
The entire UI uses IBM Plex Mono for a clean, typewritten look.
A restrained, natural palette.
Sage-green backgrounds and soft neutrals form the foundation. Blue is reserved for interactive accents.
Hierarchy through spacing, not decoration.
Elements breathe. Borders are sparse. Shadows are minimal and consistent.
2. Typography
Primary font: IBM Plex Mono (weights 300, 400, 500, 600)
Usage:
Do not mix in other fonts.
3. Color System
Palette values are declared in index.css as CSS variables.
Core tokens:
Rules:
4. Layout and Spacing
Spacing scale: 0.5rem, 1rem, 1.5rem, 2rem.
Guidelines:
5. Components
5.1 Navigation
5.2 Modals
5.3 Forms
5.4 Tables
6. Interaction Patterns
7. Implementation References
8. Future Extensions
Planned: