{"visualLanguage":{"id":"granite-ledger","name":"Granite Ledger","version":"v0.1.0","stability":"stable","summary":"Professional, slate-toned layouts with calm structure and clear hierarchy.","mood":"professional","density":"balanced","tags":["professional","enterprise","finance","calm","reliable"],"stacks":["html","tailwind","shadcn","mui"],"palette":["#F4F5F7","#1A1F2B","#3F6AE0","#9CA3AF","#E5E7EB","#0F766E"],"constraints":["density:balanced","stacks:html,tailwind,shadcn,mui","tags:professional,enterprise,finance"],"tokenSummary":"6 palette tokens · 6 spacing steps · balanced density","allowedTargets":["shadcn","tailwind","html","json","mui"],"versionHash":"a842da04ce95fd06cff4049df5ebbdde459a3c072b55200e64ce96f51d185bda","updatedAt":"2026-01-01","tokenSet":{"palette":{"paper":"#F4F5F7","ink":"#1A1F2B","accent":"#3F6AE0","highlight":"#9CA3AF"},"colorRoles":{"light":{"background":"#F4F5F7","surface":"#F4F5F7","surfaceAlt":"#9CA3AF","surfaceRaised":"#9CA3AF","overlay":"#9CA3AF","border":"#9CA3AF","borderSubtle":"#9CA3AF","borderStrong":"#1A1F2B","text":"#1A1F2B","textMuted":"#9CA3AF","textDisabled":"#9CA3AF","link":"#3F6AE0","accent":"#3F6AE0","accentText":"#F4F5F7"},"dark":{"background":"#1A1F2B","surface":"#1A1F2B","surfaceAlt":"#9CA3AF","surfaceRaised":"#9CA3AF","overlay":"#9CA3AF","border":"#9CA3AF","borderSubtle":"#9CA3AF","borderStrong":"#F4F5F7","text":"#F4F5F7","textMuted":"#9CA3AF","textDisabled":"#9CA3AF","link":"#3F6AE0","accent":"#3F6AE0","accentText":"#1A1F2B"}},"colorMode":"light","colorStates":{"light":{"surface":{"hover":"#9CA3AF","active":"#3F6AE0","disabled":"#F4F5F7"},"border":{"default":"#9CA3AF","focus":"#3F6AE0","disabled":"#9CA3AF"},"text":{"default":"#1A1F2B","muted":"#9CA3AF","disabled":"#9CA3AF"},"accent":{"hover":"#3F6AE0","active":"#3F6AE0"}},"dark":{"surface":{"hover":"#9CA3AF","active":"#3F6AE0","disabled":"#1A1F2B"},"border":{"default":"#9CA3AF","focus":"#3F6AE0","disabled":"#9CA3AF"},"text":{"default":"#F4F5F7","muted":"#9CA3AF","disabled":"#9CA3AF"},"accent":{"hover":"#3F6AE0","active":"#3F6AE0"}}},"colorRamps":{"neutral":["#F4F5F7","#F4F5F7","#9CA3AF","#9CA3AF","#9CA3AF","#9CA3AF","#9CA3AF","#1A1F2B","#1A1F2B","#1A1F2B"],"accent":["#3F6AE0","#3F6AE0","#3F6AE0","#3F6AE0","#3F6AE0","#3F6AE0","#3F6AE0","#3F6AE0","#3F6AE0","#3F6AE0"]},"semantic":{"success":"#16a34a","warning":"#f59e0b","info":"#3F6AE0","danger":"#dc2626","muted":"#9CA3AF"},"typography":{"display":{"family":"Space Grotesk, 'Inter', system-ui, sans-serif","weight":600,"lineHeight":1.2,"letterSpacing":"0em","casing":"title"},"body":{"family":"Inter, system-ui, sans-serif","weight":400,"lineHeight":1.5,"letterSpacing":"0em","casing":"sentence"},"mono":{"family":"IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace","weight":500,"lineHeight":1.4,"letterSpacing":"0em"},"scale":{"xs":12,"sm":14,"md":16,"lg":18,"xl":20,"2xl":24,"3xl":30,"4xl":36,"5xl":48,"6xl":60}},"space":{"xs":4,"sm":8,"md":12,"lg":16,"xl":24,"2xl":32},"radius":{"sm":8,"md":12,"lg":16,"xl":24},"shadow":{"soft":"0 14px 40px rgba(0,0,0,0.08)","hard":"0 0 0 1px rgba(0,0,0,0.08)"},"border":{"width":{"thin":1,"thick":2},"style":"solid"},"motion":{"fast":"150ms","base":"200ms","slow":"300ms","easing":"cubic-bezier(0.4, 0, 0.2, 1)"},"opacity":{"muted":0.7,"disabled":0.4,"overlay":0.55},"z":{"base":1,"overlay":10,"modal":30,"toast":40},"interaction":{"focusRing":{"color":"#3F6AE0","width":2,"offset":3,"style":"solid"},"states":{"hoverOpacity":0.94,"activeOpacity":0.88,"disabledOpacity":0.5,"selectedOpacity":0.92,"pressedScale":0.99},"outlines":{"width":1,"color":"#9CA3AF"},"keyboard":{"indicator":"focus-ring","behavior":"show-on-focus"},"motionSafety":"respect-reduced-motion"},"content":{"voice":"friendly","casing":{"headings":"title","body":"sentence"},"numerals":{"format":"localized","decimalPlaces":2},"dates":{"format":"yyyy-MM-dd"},"ellipsis":{"maxLines":2,"strategy":"ellipsis"},"placeholders":"Use concise, action-oriented placeholders."},"accessibility":{"contrast":{"text":4.5,"ui":3},"tapTarget":44,"focusOrder":"natural","aria":{"nav":"role=navigation, aria-label required","forms":"associate labels, describe errors, aria-live for status","tables":"use scope on headers, describe sortable state"},"motionReduction":"respect"},"dataViz":{"palette":{"categorical":["#3F6AE0","#9CA3AF","#10b981","#8b5cf6"],"sequential":["#e0f2fe","#93c5fd","#3b82f6","#1d4ed8"],"diverging":["#dc2626","#fbbf24","#22c55e","#0ea5e9"]},"grid":{"color":"rgba(0,0,0,0.08)","width":1},"axis":{"color":"#1A1F2B","width":1,"labelCase":"title"},"stroke":{"width":2,"radius":6},"tooltip":{"background":"#F4F5F7","text":"#1A1F2B","shadow":"0 12px 30px rgba(0,0,0,0.12)"}},"i18n":{"rtl":false,"numeralSystem":"latn","dateFormat":"yyyy-MM-dd","typographyFallbacks":["Inter","system-ui","sans-serif"]},"compliance":{"status":"brand-critical","usage":{"do":["Respect density and palette constraints","Keep accent usage minimal"],"dont":["Override guardrails","Add new accent colors"]},"allowedStacks":["html","tailwind","shadcn","mui"]},"layout":{"grid":{"columns":12,"gutter":24,"maxWidth":1280},"breakpoints":{"sm":640,"md":768,"lg":1024,"xl":1280},"container":{"padding":{"mobile":16,"desktop":22},"maxWidth":1200},"section":{"verticalSpacing":24},"media":{"aspectRatios":["16:9","4:3","1:1"]}},"componentSpecs":{"button":{"variants":["primary","secondary","ghost"],"states":["default","hover","active","focus","disabled"],"requiredTokens":["colorRoles.light.accent","colorRoles.dark.accent","colorRoles.light.accentText","colorRoles.dark.accentText","typography.scale.md","radius.lg"],"sizeTokens":{"height":"space.2xl","paddingX":"space.lg","paddingY":"space.sm","radius":"radius.lg"},"typographyTokens":{"size":"typography.scale.md","weight":"typography.display.weight","lineHeight":"typography.display.lineHeight","letterSpacing":"typography.display.letterSpacing","family":"typography.display.family"},"anatomy":["root","label"],"a11yTokens":["focus-visible"]},"input":{"variants":["default","filled"],"states":["default","focus","disabled","error"],"requiredTokens":["colorRoles.light.surface","colorRoles.dark.surface","colorRoles.light.border","colorRoles.dark.border","typography.scale.sm","radius.md"],"sizeTokens":{"height":"space.2xl","paddingX":"space.md","paddingY":"space.sm","radius":"radius.md"},"typographyTokens":{"size":"typography.scale.sm","weight":"typography.body.weight","lineHeight":"typography.body.lineHeight","letterSpacing":"typography.body.letterSpacing","family":"typography.body.family"},"anatomy":["label","control","helper"],"a11yTokens":["label-associated","described-by"]}},"componentGuardrails":{"hero":{"required":["headline","supporting copy","primary action"],"allowedPatterns":["image-right","image-left","split"],"maxAccents":1,"maxActions":2,"notes":["Keep eyebrow short","One accent block per hero"]},"nav":{"required":["brand","primary links"],"allowedPatterns":["topbar","sidebar"],"maxAccents":0,"maxActions":1,"notes":["Use focus ring on nav links","Keep link labels <= 2 words"]},"table":{"required":["header","rows","hover/focus states"],"allowedPatterns":["sortable columns"],"maxAccents":0,"maxActions":2,"notes":["Use zebra or divider rows","Include empty-state copy"]},"card":{"required":["title","body"],"allowedPatterns":["media-top","media-left"],"maxAccents":1,"maxActions":2,"notes":["Respect radius scale","Avoid more than 2 badges"]},"form":{"required":["label","helper text","error state"],"allowedPatterns":["stacked","inline"],"maxAccents":0,"maxActions":1,"notes":["Inputs full-width on mobile","Use consistent spacing scale"]},"chart":{"required":["axes labels","legend","tooltip"],"allowedPatterns":["line","bar"],"maxAccents":1,"maxActions":0,"notes":["Use dataViz palette","Keep gridlines subtle"]}},"density":"balanced","mood":"professional","stacks":["html","tailwind","shadcn","mui"],"tags":["professional","enterprise","finance","calm","reliable"],"guardrails":["Density in {balanced}","Palette tokens = 6","Accent usage <= 1 primary per section"]},"content":"## Intent\nGranite Ledger is a professional visual language for analytics, compliance,\nand internal tooling. It favors slate neutrals, precise spacing, and calm\naccents that read as trustworthy.\n\n## Tokens\n- Background: `#F4F5F7`\n- Ink: `#1A1F2B`\n- Accent: `#3F6AE0`\n- Muted: `#9CA3AF`\n- Surface: `#E5E7EB`\n- Signal: `#0F766E`\n- Radius: `14px`\n- Divider: `1px solid rgba(26, 31, 43, 0.16)`\n\n## Layout cues\n- Keep layouts aligned to a 12-column grid with measured gaps.\n- Use accent on primary actions and key status markers only.\n- Favor subtle borders over heavy shadows.\n\n## Shadcn UI snippet\n```tsx\n<Card className=\"rounded-[14px] border-slate-200 bg-white\">\n  <CardHeader>\n    <CardTitle>Ledger overview</CardTitle>\n    <CardDescription>Quiet structure with dependable hierarchy.</CardDescription>\n  </CardHeader>\n  <CardContent className=\"space-y-3\">\n    <div className=\"rounded-lg border border-slate-200 px-4 py-3\">\n      <p className=\"text-sm text-slate-600\">Compliance status</p>\n    </div>\n    <Button size=\"sm\">Review</Button>\n  </CardContent>\n</Card>\n```"},"links":{"page":"/visual-languages/granite-ledger","api":"/api/visual-languages/granite-ledger","versions":"/api/visual-languages/granite-ledger/versions","diff":"/api/visual-languages/granite-ledger/diff?from=v0.1.0&to=v0.1.0"},"generatedAt":"2026-04-17T13:20:02.820Z"}