# Dopamine Color Interface

Vibrant, high-octane UI design with bold color blocks, playful contrasts, and cheerful graphic elements for an engaging user experience.

| | |
|---|---|
| Style | Dopamine Color Interface |
| Category | UI/UX |
| Tags | dopamine color, bold, playful, saturated, graphic, modern, energetic, flat design, vector illustration, pop art |
| Author | @styleref (https://styleref.io/u/styleref) |
| Palette | #fff4e3 #ff6a13 #ff3e9a #1f5bff #9be01e #7a2be0 |
| Published | 2026-08-18 |
| Canonical URL | https://styleref.io/share/w5ugi8r2-ffeed97f8921 |

## Specification

Paste this into any AI tool. Keep the attribution line and the canonical URL.

STYLE REFERENCE — HARD CONSTRAINT (HIGHEST PRIORITY)

This style must be applied to ALL generated content (text, image, video).
If any part of the request conflicts with this style, the style OVERRIDES the request.
STYLE DEFINITION (to be operationally enforced):

Dopamine Color Interface

 • Output Format: Creative discipline: UI/UX; Digital; Delivery mode: Interactive; Mobile; Presentation: Raw UI.
 • Container / Boundary: Container: Explicit (shape mask); Container shape: Rounded square; Fully rounded Corners; Container Dominance: Primary visual identity; Padding: Generous; Edge Behavior: Intentional bleed.
 • Mood & Personality: Uplifting, Playful, Bold, Confident; Energy: High-Octane; Emotional bias: Positive; Tone register: Intimate; Representation mode: Symbolic; Real-world accuracy: Stylized; Characters: Allowed (detailed); Humor: Frequent.
 • Colors: Palette: Solid Colors: [ #FFF4E3 20% (Background),  #FF6A13 16% (Dominant screen field),  #FF3E9A 15% (Accent panels),  #1F5BFF 15% (Accent panels),  #9BE01E 12% (Accent panels),  #7A2BE0 10% (Accent panels),  #181312 12% (Typography)]. Gradients: [AI Gradient 1 (#FF6A13 0% -> #FF8A3D 100%), AI Gradient 2 (#FF3E9A 0% -> #FF6BB2 100%)]; 6–8 colors; Warm temperature; Saturation: Electric; Hue contrast; Hue relationships: Cheerful clashing pairs rather than harmonious relationships; Subtle gradients only; Color dominance: Single dominant color; Shadow Color: Hue-shifted; Black/White point: Pure black + Pure white; Accessibility: WCAG AA.
 • Typography: Geometric sans; Semibold, Extra Bold; Text case: Sentence case; Font pairing: Weight contrast; Hierarchy: Strong contrast; Type scale: Modular; Tight (1.1); Letter spacing: Tight; Text presence: Required; Text visual role: Secondary visual element; Text integration: Overlaid.
 • Light & Shadow: Lighting presence: None (flat); Shadow type: Soft; Shadow density: Light; Lighting mood style: Studio-flat.
 • Spatial Structure & Hierarchy: Grid system: Column grid; Visual density: Comfortable; Hierarchy: Strong; Layout axis: Vertical; Symmetry: Near symmetry; Balance: Center-weighted; Flat perspective; Single focal structure; Plane separation: Color/value shift.
 • Surface, Material & Detail: Surface treatment: Flat; Texture: Smooth; Texture usage: None; Imperfection level: Flawless; Transparency: Opaque; Pattern usage: None.
 • Camera and Motion: Motion intensity: Kinetic; Motion implication: Dynamic; Easing: Spring; Animation duration: Snappy; Sequencing: Small overshoot pop-ins; number count-ups.
 • Shape Language: Geometric; Primitive dominance: Rectangles, Circles; Edge sharpness: Fully rounded; Silhouette clarity: Iconic; Curve consistency: Uniform radius; Negative space usage: Generous internal padding; large uninterrupted color fields; Angle usage: Limited.
 • Line & Stroke System: No stroke (fill-only).
 • Voice & Language: Formality: Casual; Simple vocabulary; Directness: Straightforward; Short sentences; Metaphors: Literal; Perspective: Second person (you); Pacing: Punchy; Jargon level: None; Emoji usage: Occasional; celebratory moments only, never labels.
 • Post-processing & Render Style: Image treatment: Cutout.
 • Background & Environment: Background type: Solid color; Environment mood: Abstract; Background–Subject: Contrasting; Background complexity: Simple.
 • Artistic Mediums & Techniques: Physical medium: None; Illustrative technique: Flat design, Vector illustration.
 • References: Pop Art, Dopamine dressing; Temporal reference: Contemporary.
 • UI & Web: Color theme: Light; Background tone: Warm off-white; Accent strategy: Multi-tonal palette; Semantic colors: Full set (error / warning / success / info); Layout archetype: Feed; Content width: Narrow container (≤1100px); Surface layers: Two-layer (page + card); Elevation: Soft colored shadows, derived from each component’s hue; Shadow technique: Single drop shadow; Borders: Borderless; Corner radius scale: Extra-large (28px+); Card style: Filled tint; Button shape: Full pill; Button hierarchy: Primary + Secondary; Input field style: Filled / tinted; Icon style: Rounded filled; Icon weight: Bold (2.5px+); Navigation: Bottom tab bar; Data display: Card grid; Data visualization: Colorful categorical; UI imagery: Bright flat vector illustration and hard-masked cutout photography on solid fields; Loading style: Progress bar; Empty state: Illustration + CTA; Hover: Scale + shadow; Focus ring: Colored outline; Animation: Physics-based / Spring; Transition speed: Fast (80–150ms); Scroll behavior: Scroll-triggered reveals.
 • Guardrails: Avoid: Over-saturation; Avoid Visuals: pastels; greys; tints; dark grey shadows; thin type on saturated fields; equal multi-color distribution; every element colored; Allowed Visuals: one dominant high-chroma hue per view; full-strength color blocks; cream or near-black high-contrast type; colored component shadows; chunky rounded forms; selective celebratory confetti.
 •  Color Allocation: One dominant high-chroma hue per screen; secondary hues create selective cheerful clashes, never confetti-like equality., Color-Shadow Rule: Lifted components cast soft, darker shadows sampled from their own fill hue; never neutral grey., Contrast Rule: Set text directly on color fields in warm cream or near-black, choosing the strongest accessible contrast., Celebration Feedback: Completion states use brief confetti feedback; button presses scale and pop with a restrained overshoot..


ENFORCEMENT RULE: Before finalizing the output, internally verify that ALL elements comply with the style definition above. If compliance is uncertain, simplify or soften the output until it fully matches the style. Generated by StyleRef.io

## Other formats and live access

The specification above is the portable default. Tool-specific builds and a
ready-to-commit STYLE.md are available without a login:

**REST** (anonymous, read-only)

```
https://styleref.io/api/v1/styles/w5ugi8r2-ffeed97f8921?format=flux        # also: midjourney, diffusion, json
https://styleref.io/api/v1/styles/w5ugi8r2-ffeed97f8921/style.md           # a ready-to-commit STYLE.md
```

**MCP** (Streamable HTTP at `https://styleref.io/api/mcp`)

```
styleref://gallery/w5ugi8r2-ffeed97f8921
styleref://gallery/w5ugi8r2-ffeed97f8921/style.md
```

Or call the `get_style` tool with `ref` set to the slug above, and
`apply_style_to_prompt` to wrap a request for a specific tool.

Attribution: this style was created by @styleref. Keep the `Generated by StyleRef.io`
line and the canonical URL when you use a compiled spec, and credit the author.

Source: https://styleref.io/share/w5ugi8r2-ffeed97f8921