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

Full-width app shell with persistent 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

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