{"visualLanguage":{"id":"quiet-lattice","name":"Quiet Lattice","version":"v0.1.1","stability":"stable","summary":"Calm, layered surfaces with soft micro-dividers and spacious rhythm.","mood":"serene","density":"balanced","tags":["wellness","calm","minimal","soft","focus"],"stacks":["tailwind","shadcn"],"palette":["#F7F4EE","#1B2A2F","#4FA39B","#D9C8B4","#EFE8DD","#9BCAC4"],"constraints":["density:balanced","stacks:tailwind,shadcn","tags:wellness,calm,minimal"],"tokenSummary":"6 palette tokens · 6 spacing steps · balanced density","allowedTargets":["shadcn","tailwind","html","json","mui"],"versionHash":"6c56f3f3ef6457cc3668a35a74288dfa2bd278c95cb3006b854bc1f78ea6b5bd","updatedAt":"2026-01-02","tokenSet":{"palette":{"paper":"#F7F4EE","ink":"#1B2A2F","accent":"#4FA39B","highlight":"#D9C8B4"},"colorRoles":{"light":{"background":"#F7F4EE","surface":"#F7F4EE","surfaceAlt":"#D9C8B4","surfaceRaised":"#D9C8B4","overlay":"#D9C8B4","border":"#D9C8B4","borderSubtle":"#D9C8B4","borderStrong":"#1B2A2F","text":"#1B2A2F","textMuted":"#D9C8B4","textDisabled":"#D9C8B4","link":"#4FA39B","accent":"#4FA39B","accentText":"#F7F4EE"},"dark":{"background":"#1B2A2F","surface":"#1B2A2F","surfaceAlt":"#D9C8B4","surfaceRaised":"#D9C8B4","overlay":"#D9C8B4","border":"#D9C8B4","borderSubtle":"#D9C8B4","borderStrong":"#F7F4EE","text":"#F7F4EE","textMuted":"#D9C8B4","textDisabled":"#D9C8B4","link":"#4FA39B","accent":"#4FA39B","accentText":"#1B2A2F"}},"colorMode":"light","colorStates":{"light":{"surface":{"hover":"#D9C8B4","active":"#4FA39B","disabled":"#F7F4EE"},"border":{"default":"#D9C8B4","focus":"#4FA39B","disabled":"#D9C8B4"},"text":{"default":"#1B2A2F","muted":"#D9C8B4","disabled":"#D9C8B4"},"accent":{"hover":"#4FA39B","active":"#4FA39B"}},"dark":{"surface":{"hover":"#D9C8B4","active":"#4FA39B","disabled":"#1B2A2F"},"border":{"default":"#D9C8B4","focus":"#4FA39B","disabled":"#D9C8B4"},"text":{"default":"#F7F4EE","muted":"#D9C8B4","disabled":"#D9C8B4"},"accent":{"hover":"#4FA39B","active":"#4FA39B"}}},"colorRamps":{"neutral":["#F7F4EE","#F7F4EE","#D9C8B4","#D9C8B4","#D9C8B4","#D9C8B4","#D9C8B4","#1B2A2F","#1B2A2F","#1B2A2F"],"accent":["#4FA39B","#4FA39B","#4FA39B","#4FA39B","#4FA39B","#4FA39B","#4FA39B","#4FA39B","#4FA39B","#4FA39B"]},"semantic":{"success":"#16a34a","warning":"#f59e0b","info":"#4FA39B","danger":"#dc2626","muted":"#D9C8B4"},"typography":{"display":{"family":"Playfair Display, '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":16,"md":20,"lg":24,"xl":32},"shadow":{"soft":"0 10px 26px rgba(27, 42, 47, 0.12)","hard":"0 0 0 1px rgba(27, 42, 47, 0.12)"},"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":"#4FA39B","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":"#D9C8B4"},"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":["#4FA39B","#D9C8B4","#10b981","#8b5cf6"],"sequential":["#e0f2fe","#93c5fd","#3b82f6","#1d4ed8"],"diverging":["#dc2626","#fbbf24","#22c55e","#0ea5e9"]},"grid":{"color":"rgba(0,0,0,0.08)","width":1},"axis":{"color":"#1B2A2F","width":1,"labelCase":"title"},"stroke":{"width":2,"radius":6},"tooltip":{"background":"#F7F4EE","text":"#1B2A2F","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":["tailwind","shadcn"]},"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":"serene","stacks":["tailwind","shadcn"],"tags":["wellness","calm","minimal","soft","focus"],"guardrails":["Density in {balanced}","Palette tokens = 6","Accent usage <= 1 primary per section"]},"content":"## Intent\nQuiet Lattice suits wellness dashboards and calm productivity tools. It leans on\nsoft surfaces, subtle borders, and a restrained teal accent to encourage focus.\n\n## Tokens\n- Background: `#F7F4EE`\n- Ink: `#1B2A2F`\n- Accent: `#4FA39B`\n- Muted: `#D9C8B4`\n- Surface: `#EFE8DD`\n- Mist: `#9BCAC4`\n- Radius: `24px`\n- Divider: `1px solid rgba(27, 42, 47, 0.12)`\n\n## Layout cues\n- Sections float inside rounded containers with 32px padding.\n- Use thin dividers and low-contrast charts.\n- Buttons are capsule-shaped with soft teal fill.\n\n## Shadcn UI snippet\n```tsx\n<Card className=\"rounded-3xl border-muted bg-white/80\">\n  <CardHeader>\n    <CardTitle>Quiet workspace</CardTitle>\n    <CardDescription>Soft rhythm, clean labels, calm surface tones.</CardDescription>\n  </CardHeader>\n  <CardContent>\n    <div className=\"flex items-center justify-between rounded-2xl border border-muted p-4\">\n      <span className=\"text-sm text-muted-foreground\">Calm focus mode</span>\n      <Button size=\"sm\">Enable</Button>\n    </div>\n  </CardContent>\n</Card>\n```"},"links":{"page":"/visual-languages/quiet-lattice","api":"/api/visual-languages/quiet-lattice","versions":"/api/visual-languages/quiet-lattice/versions","diff":"/api/visual-languages/quiet-lattice/diff?from=v0.1.1&to=v0.1.1"},"generatedAt":"2026-04-17T13:20:02.575Z"}