{"topic":"visual-tiers","content":"# The four-tier design system\n\nSecondPage's visual vocabulary is organized into four tiers. The tiers are a **decision framework you (the agent) use to author a static file bundle** whose treatment matches the content's tone, audience, and domain.\n\n## Tier 1: Foundation (always on)\n\nSemantic HTML, accessible native controls, responsive CSS, and only the JavaScript the Page needs. Do not let generic Tailwind palettes, rounded-card stacks, or SaaS/dashboard habits define the Page's final look. Ship every stylesheet, script, font, and image the Page needs in the bundle or through the supported media-upload flow.\n\nExpress the chosen treatment directly in the generated HTML, CSS, JS, and\nassets.\n\n## Tier 2: Tasteful enhancement\n\nQuiet, broadly compatible enhancements. Reach for these when content needs more visual character than Tier 1 alone:\n\n- app-like navigation, cards, filters, and tables\n- agent workflow vocabulary for plans, approvals, status, and questions\n- subtle text reveal and scroll motion, never gimmicky cursor effects\n- rich prose rendering for long-form reading\n- restrained analytical hierarchy for metrics, charts, and tables\n\nUse Tier 2 for: research briefs that need source-card variation, long-form essays with magazine-style hero treatments, dashboards that need polish, or any Page whose domain deserves a more specific visual language than the baseline document.\n\nDo not depend on a third-party UI registry just because it exists. Translate a\nuseful pattern into portable HTML, CSS, JavaScript, and local assets that you\ncan validate and include in the submitted bundle.\n\n## Tier 3: Specialized / asset-heavy\n\nUse only when a specific Page requires the interaction or asset. Build and\nvalidate it into the bundle:\n\n- an accessible map image or an interactive map implementation with the keys\n  and assets the author is permitted to use\n- sortable or filterable tables with progressive enhancement\n- diagrams, annotations, or charts whose scripts and assets are included with\n  the Page\n\nUse Tier 3 for: trip plans that need a map, dashboards with interactive tables, technical content with diagrams.\n\n## Tier 4: Opinionated maximalist\n\nSparkles, meteors, beams, animated gradients, marquees, bento grids. Use **ONLY** when the user/conversation explicitly justifies maximalist visual treatment:\n\n- \"Announce a launch\"\n- \"Make this feel celebratory\"\n- \"We need a wow factor for this Page\"\n- Product reveals, victory recaps, fundraise announcements\n\nTier 4 is about intensity, not quality. These components put spectacle in front of the message, which suits announcements and celebrations and undercuts working documents. Choose Tier 4 when the user's ask or the content's purpose calls for that energy, never as decoration on a report, brief, or reference page.\n\n## Default rule\n\nWhen in doubt, adapt the visual system to the content's domain before selecting\nlow-level components. Tier 3 is encouraged when maps, filters, charts,\ngalleries, or drawers make the Page more useful. Tier 4 only when the\nconversation justifies a higher-impact public treatment. The goal is first-shot\njoy and specificity, not a generic document with decorative UI.\n"}