",
"css": ".ds-table-wrap { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } .ds-table { width: 100%; border-collapse: collapse; font-size: 14px; color: #334155; } .ds-table th { padding: 12px 24px; text-align: left; color: #334155; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; background: #f8fafc; } .ds-table td { padding: 12px 24px; border-top: 1px solid #f1f5f9; line-height: 1.5; } .ds-table tbody tr:nth-child(odd) { background: #f8fafc; } .ds-table tbody tr:nth-child(even) { background: #f1f5f9; } .ds-table tbody tr:hover { background: #f6f0fe; } .ds-mini-pill { display: inline-flex; border-radius: 9999px; padding: 1px 8px; border: 1px solid #caa8f9; background: #f6f0fe; color: #6e3dbb; font-size: 12px; font-weight: 600; }"
},
{
"name": "Sidebar Item",
"kind": "nav",
"refersTo": "sidebar-item",
"description": "Primary navigation row for the MSP application shell.",
"html": "Dashboard",
"css": ".ds-sidebar-item { display: flex; align-items: center; gap: 8px; min-width: 220px; padding: 8px; margin: 0 8px; border-radius: 6px; color: #f5f5f5; background: transparent; font: 500 14px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; text-decoration: none; transition: background-color 150ms cubic-bezier(0.25, 1, 0.5, 1); } .ds-sidebar-item:hover { background: #1e293b; } .ds-sidebar-item-active { background: rgb(138 77 234 / 0.2); } .ds-sidebar-icon { width: 20px; height: 20px; color: #94a3b8; } .ds-sidebar-item:focus-visible { outline: none; box-shadow: 0 0 0 2px #8a4dea; }"
},
{
"name": "Tabs",
"kind": "custom",
"refersTo": "tabs",
"description": "Compact local navigation for details, comments, time, documents, and settings sections.",
"html": "",
"css": ".ds-tabs { display: flex; border-bottom: 1px solid #e2e8f0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } .ds-tab { position: relative; padding: 8px 16px; border: 0; background: transparent; color: #64748b; font-size: 14px; line-height: 1.4; cursor: pointer; transition: color 150ms cubic-bezier(0.25, 1, 0.5, 1); } .ds-tab:hover { color: #334155; } .ds-tab-active { color: #0f172a; font-weight: 600; } .ds-tab-active::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; border-radius: 9999px; background: #8a4dea; } .ds-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #8a4dea; }"
}
],
"narrative": {
"northStar": "The Modern Workbench",
"overview": "Alga PSA should feel like a modern operations workbench: quiet enough for long service days, dense enough for real MSP throughput, and exact enough that users trust every status, total, and action. The visual system uses familiar product UI patterns, crisp semantic tokens, and compact spacing to keep the task in front of the user.\n\nThe system is product-first. It borrows Notion's directness and Twenty.com's clean business-object clarity, then adapts both for ticket queues, billing approvals, project status, automation, assets, and client-facing transparency. The /msp area can be denser and more operator-focused. The /client area should translate the same model into calmer service visibility.\n\nThis system rejects dated enterprise MSP software, especially the heavy clutter associated with ConnectWise. It also rejects generic AI-generated SaaS UI: purposeless cards, decorative gradients, vague empty states, and elements placed without thought are forbidden.",
"keyCharacteristics": [
"Quiet, dense, and exact.",
"Restrained product color with Operator Purple used for action and selection.",
"Tonal layering first, with lift reserved for interaction.",
"Systematic component vocabulary across MSP and client surfaces.",
"Strong keyboard, focus, and status communication for operational confidence."
],
"rules": [
{
"name": "The Action Rarity Rule",
"body": "Operator Purple is for action, active state, focus, or selection. If it appears only to decorate, remove it.",
"section": "colors"
},
{
"name": "The Semantic Color Rule",
"body": "Success, warning, error, and info states must include iconography, labels, or text. Color alone is never sufficient.",
"section": "colors"
},
{
"name": "The No Decorative Gradient Rule",
"body": "Gradients are prohibited unless they explain a real state or are part of tenant-provided branding in a constrained client portal context.",
"section": "colors"
},
{
"name": "The Native Tool Rule",
"body": "Use one system sans family for product UI. Do not introduce display fonts into buttons, labels, tables, or data-heavy surfaces.",
"section": "typography"
},
{
"name": "The Density Needs Contrast Rule",
"body": "Dense screens need weight, spacing, and muted text contrast. Do not make every label the same size and weight.",
"section": "typography"
},
{
"name": "The Earned Lift Rule",
"body": "A surface earns a shadow only when it floats above other content, appears temporarily, or responds to interaction.",
"section": "elevation"
},
{
"name": "The Flat Workbench Rule",
"body": "Default work areas stay flat. Use borders, spacing, and hierarchy before adding shadow.",
"section": "elevation"
}
],
"dos": [
"Do keep MSP operator screens dense, but use hierarchy so priority, ownership, status, and next action are obvious.",
"Do use Operator Purple for primary action, selected state, focus, and active navigation.",
"Do use Slate Workspace and Slate Panel to separate areas before adding decorative effects.",
"Do make every status readable without color: include text, iconography, or both.",
"Do keep /client surfaces calmer than /msp surfaces while preserving the same component vocabulary.",
"Do use skeleton states for content loading and reserve spinners for short, isolated actions."
],
"donts": [
"Don't make Alga PSA feel like dated enterprise MSP software, especially the heavy clutter associated with ConnectWise.",
"Don't make screens feel AI-generated with decorative gradients, purposeless cards, vague empty states, or elements placed without thought.",
"Don't place elements without a task, state, or orientation purpose. Purpose before presence is mandatory.",
"Don't use side-stripe accent borders on cards, list items, callouts, or alerts. Use a full border, tint, icon, or clearer copy instead.",
"Don't use gradient text.",
"Don't use glassmorphism as a default surface treatment.",
"Don't create low-density dashboards that look polished but fail to support real MSP throughput.",
"Don't use consumer-style gloss for operational, financial, or service-delivery workflows."
]
}
}