| name | Tala Editorial Operations | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| colors |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| typography |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| rounded |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| spacing |
|
Tala is a local-first coordination tool for people and AI agents working from one shared issue model. The interface should feel like a premium operations notebook: editorial, deliberate, information-rich, and calm under pressure. It should avoid generic SaaS decoration while remaining practical for repeated triage, planning, and feedback workflows.
The design language balances expressive page titles with dense operational controls. Issue data must be easy to scan at mobile sizes: priority, status, assignee, tags, blockers, child counts, and comments should be visible without turning cards into large marketing panels.
The base uses warm paper surfaces to create a focused field-notebook feeling. Charcoal is the primary action and text color. Deep indigo is the planning/navigation accent used for selected states, hierarchy focus, and dependency context. Green is reserved for completed, resolved, or unblocked states. Vermilion and amber are reserved for blockers, high priority, destructive warnings, and validation errors.
Do not use colors decoratively. Every strong color should communicate state, priority, navigation focus, or issue health.
Use Newsreader for screen titles, major section headings, and empty-state headlines. Use Inter for all controls, metadata, issue cards, editor surfaces, comments, and relationship lists.
All data-heavy UI should be compact and left aligned. Labels may use slight uppercase styling and modest tracking. Body text and Markdown previews should remain comfortable to read.
The app is mobile-first. Use a narrow single-column structure with persistent bottom navigation for Board, Hierarchy, Blockers, and Profile. Use top bars for current context and actions. Use drawers or sheets for filters, create issue, and relationship pickers.
Structure is created through tonal surfaces and typographic hierarchy, not heavy outlines. Cards can be compact, but should keep enough spacing for tap targets and text wrapping.
Favor tonal layering over large shadows. Floating sheets and menus can use a soft ambient shadow and a slightly brighter surface. Issue cards should feel like ledger entries, not decorative tiles.
Use subtle radii. Buttons, fields, cards, and chips should feel precise and editorial. Reserve full pills for tags, compact metadata chips, and segmented controls.
Bottom navigation has four destinations: Board, Hierarchy, Blockers, and Profile. Active state uses the deep indigo accent and a clear label.
Issue cards must show title, priority, assignee, tags, blocked indicator, child count, and comment count. They should support compact metadata rows and a clear status affordance.
Filters appear in a drawer with text query, assignee, priority, and tag controls. The drawer has clear apply and reset actions.
Markdown descriptions and comments use source-first editing with Source and Preview tabs. Preview should be visually distinct from the editor and show sanitized rendered Markdown.
Parent and blocker pickers use searchable issue lists. Blockers should clearly separate unresolved blockers from completed or canceled blockers. Cycle and validation errors should appear inline near the attempted relationship change.
Hierarchy and blocker planning screens are alternate projections of the same issue model. They should not introduce new data concepts. Use compact nodes, relationship lines, and status/priority markers that remain legible on mobile.