Inspiration first, drift never.

Citrus Arcade

Playful, radiant surfaces with candy-bright accents and roomy rhythm.

Vanilla HTMLTailwindShadcn UIMaterial UISpacious densitystable

ID: citrus-arcade

Version: v0.1.0

Updated: 2026-01-01

Get JSON

Constraints

density:spaciousstacks:html,tailwind,shadcn,muitags:playful,bright,energetic

Token summary

6 palette tokens · 6 spacing steps · spacious density

Stability cue

stable contract · enforce tokens & guardrails

Token boundaries (hard limits)

Density in {spacious}Palette tokens = 6Accent usage <= 1 primary per section

Pair with a structure

Choose the execution surface.

Structures define the required slots. Pair this visual language with a structure when calling `POST /api/emit` to get deterministic output targets.

Structure

Dashboard

App shell with sidebar navigation, filter toolbar, alert banner, stats tiers, data tables, charts, and right-rail insights.

Structure

SaaS

Marketing page with hero, trust strip, metrics, feature grid, integrations, pricing, case study, FAQ, and CTA.

Structure

Editorial

Publication layout with masthead, nav, featured story, highlights, trending, resources, archive, and newsletter signup.

Structure

Portfolio

Personal or studio portfolio with hero, work gallery, services, testimonials, and contact call-to-action.

Structure

Support

Helpdesk workspace with ticket inbox, ticket detail, customer context, and response tools.

Token sandbox

Component Preview

See how buttons, cards, and forms look with this language's tokens applied.

Component Previewplayfulspacious density

signatured7604f67

Buttons

Tokens applied

Card

playfulActive

Dashboard Overview

A sample card showing typography, badges, and layout rhythm.

Form Elements

Email address

Send me updates

Badges

AccentHighlightOutline

Alert

Quiet Lattice Notice

New

Tokens applied to emphasize clear, low-noise messaging.

Input Group

Palette

#FFF6E6

#1B1B1F

#FF7A1A

#FFD166

#FFE5B4

#7BDFF2

Guardrail cues

Density: spacious
Buttons: primary · secondary · ghost · highlight
Layout: button row, card, form fields

Language brief

Intent

Citrus Arcade is built for playful commerce, creator tools, and cheerful dashboards. It mixes citrus accents with airy layouts so the UI feels bold without becoming loud.

Tokens

Background: #FFF6E6
Ink: #1B1B1F
Accent: #FF7A1A
Highlight: #FFD166
Citrus: #FFE5B4
Pop: #7BDFF2
Radius: 28px
Shadow: 0 18px 36px rgba(27, 27, 31, 0.14)

Layout cues

Use 40px section padding with large gaps between cards.
Keep accent usage playful but limited to one primary surface per section.
Favor rounded panels and friendly, oversized labels.

Tailwind sample

<div className="rounded-[28px] border border-orange-200 bg-white/90 p-7 shadow-[0_18px_36px_rgba(27,27,31,0.14)]">
  <div className="flex items-center justify-between">
    <p className="text-xs uppercase tracking-[0.24em] text-orange-500">Citrus</p>
    <span className="rounded-full bg-orange-600 px-3 py-1 text-xs text-white">Play</span>
  </div>
  <h3 className="mt-5 text-2xl font-semibold text-slate-900">Arcade highlights</h3>
  <p className="mt-2 text-sm text-slate-600">
    Bright accents and roomy layouts for joyful experiences.
  </p>
</div>

Aurora

Live

Agent grid summary

Modular tile layout with bright delimiters and ample breathing room.

AccentDensity: spacious

Agent snapshot

{
  "id": "citrus-arcade",
  "name": "Citrus Arcade",
  "version": "v0.1.0",
  "stability": "stable",
  "constraints": [
    "density:spacious",
    "stacks:html,tailwind,shadcn,mui",
    "tags:playful,bright,energetic"
  ],
  "tokenSummary": "6 palette tokens · 6 spacing steps · spacious density",
  "tokenSet": {
    "palette": {
      "paper": "#FFF6E6",
      "ink": "#1B1B1F",
      "accent": "#FF7A1A",
      "highlight": "#FFD166"
    },
    "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"
      }
    },
    "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"
        ]
      }
    },
    "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"
    ]
  },
  "stacks": [
    "html",
    "tailwind",
    "shadcn",
    "mui"
  ],
  "tags": [
    "playful",
    "bright",
    "energetic",
    "friendly",
    "retail"
  ]
}

PlayfulBrightEnergeticFriendlyRetail