{"visualLanguage":{"id":"citrus-arcade","name":"Citrus Arcade","version":"v0.1.0","stability":"stable","summary":"Playful, radiant surfaces with candy-bright accents and roomy rhythm.","mood":"playful","density":"spacious","tags":["playful","bright","energetic","friendly","retail"],"stacks":["html","tailwind","shadcn","mui"],"palette":["#FFF6E6","#1B1B1F","#FF7A1A","#FFD166","#FFE5B4","#7BDFF2"],"constraints":["density:spacious","stacks:html,tailwind,shadcn,mui","tags:playful,bright,energetic"],"tokenSummary":"6 palette tokens · 6 spacing steps · spacious density","allowedTargets":["shadcn","tailwind","html","json","mui"],"versionHash":"56a31106dae14dbaf30ccc589613af860c1996045cedbe7bb79e06465333d522","updatedAt":"2026-01-01","tokenSet":{"palette":{"paper":"#FFF6E6","ink":"#1B1B1F","accent":"#FF7A1A","highlight":"#FFD166"},"colorRoles":{"light":{"background":"#FFF6E6","surface":"#FFF6E6","surfaceAlt":"#FFD166","surfaceRaised":"#FFD166","overlay":"#FFD166","border":"#FFD166","borderSubtle":"#FFD166","borderStrong":"#1B1B1F","text":"#1B1B1F","textMuted":"#FFD166","textDisabled":"#FFD166","link":"#FF7A1A","accent":"#FF7A1A","accentText":"#FFF6E6"},"dark":{"background":"#1B1B1F","surface":"#1B1B1F","surfaceAlt":"#FFD166","surfaceRaised":"#FFD166","overlay":"#FFD166","border":"#FFD166","borderSubtle":"#FFD166","borderStrong":"#FFF6E6","text":"#FFF6E6","textMuted":"#FFD166","textDisabled":"#FFD166","link":"#FF7A1A","accent":"#FF7A1A","accentText":"#1B1B1F"}},"colorMode":"light","colorStates":{"light":{"surface":{"hover":"#FFD166","active":"#FF7A1A","disabled":"#FFF6E6"},"border":{"default":"#FFD166","focus":"#FF7A1A","disabled":"#FFD166"},"text":{"default":"#1B1B1F","muted":"#FFD166","disabled":"#FFD166"},"accent":{"hover":"#FF7A1A","active":"#FF7A1A"}},"dark":{"surface":{"hover":"#FFD166","active":"#FF7A1A","disabled":"#1B1B1F"},"border":{"default":"#FFD166","focus":"#FF7A1A","disabled":"#FFD166"},"text":{"default":"#FFF6E6","muted":"#FFD166","disabled":"#FFD166"},"accent":{"hover":"#FF7A1A","active":"#FF7A1A"}}},"colorRamps":{"neutral":["#FFF6E6","#FFF6E6","#FFD166","#FFD166","#FFD166","#FFD166","#FFD166","#1B1B1F","#1B1B1F","#1B1B1F"],"accent":["#FF7A1A","#FF7A1A","#FF7A1A","#FF7A1A","#FF7A1A","#FF7A1A","#FF7A1A","#FF7A1A","#FF7A1A","#FF7A1A"]},"semantic":{"success":"#16a34a","warning":"#f59e0b","info":"#FF7A1A","danger":"#dc2626","muted":"#FFD166"},"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":"#FF7A1A","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":"#FFD166"},"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":["#FF7A1A","#FFD166","#10b981","#8b5cf6"],"sequential":["#e0f2fe","#93c5fd","#3b82f6","#1d4ed8"],"diverging":["#dc2626","#fbbf24","#22c55e","#0ea5e9"]},"grid":{"color":"rgba(0,0,0,0.08)","width":1},"axis":{"color":"#1B1B1F","width":1,"labelCase":"title"},"stroke":{"width":2,"radius":6},"tooltip":{"background":"#FFF6E6","text":"#1B1B1F","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":28,"maxWidth":1280},"breakpoints":{"sm":640,"md":768,"lg":1024,"xl":1280},"container":{"padding":{"mobile":24,"desktop":32},"maxWidth":1200},"section":{"verticalSpacing":40},"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":"spacious","mood":"playful","stacks":["html","tailwind","shadcn","mui"],"tags":["playful","bright","energetic","friendly","retail"],"guardrails":["Density in {spacious}","Palette tokens = 6","Accent usage <= 1 primary per section"]},"content":"## Intent\nCitrus Arcade is built for playful commerce, creator tools, and cheerful\ndashboards. It mixes citrus accents with airy layouts so the UI feels bold\nwithout becoming loud.\n\n## Tokens\n- Background: `#FFF6E6`\n- Ink: `#1B1B1F`\n- Accent: `#FF7A1A`\n- Highlight: `#FFD166`\n- Citrus: `#FFE5B4`\n- Pop: `#7BDFF2`\n- Radius: `28px`\n- Shadow: `0 18px 36px rgba(27, 27, 31, 0.14)`\n\n## Layout cues\n- Use 40px section padding with large gaps between cards.\n- Keep accent usage playful but limited to one primary surface per section.\n- Favor rounded panels and friendly, oversized labels.\n\n## Tailwind sample\n```tsx\n<div className=\"rounded-[28px] border border-orange-200 bg-white/90 p-7 shadow-[0_18px_36px_rgba(27,27,31,0.14)]\">\n  <div className=\"flex items-center justify-between\">\n    <p className=\"text-xs uppercase tracking-[0.24em] text-orange-500\">Citrus</p>\n    <span className=\"rounded-full bg-orange-600 px-3 py-1 text-xs text-white\">Play</span>\n  </div>\n  <h3 className=\"mt-5 text-2xl font-semibold text-slate-900\">Arcade highlights</h3>\n  <p className=\"mt-2 text-sm text-slate-600\">\n    Bright accents and roomy layouts for joyful experiences.\n  </p>\n</div>\n```"},"links":{"page":"/visual-languages/citrus-arcade","api":"/api/visual-languages/citrus-arcade","versions":"/api/visual-languages/citrus-arcade/versions","diff":"/api/visual-languages/citrus-arcade/diff?from=v0.1.0&to=v0.1.0"},"generatedAt":"2026-04-17T13:27:42.308Z"}