Dopamine Color Interface

StyleRef·@styleref·

Extract your style to start building your Style Board.

Made with this StyleRef

Same style, different prompts.

A single list screen: two stacked program cards over a fixed bottom navigation.

A learning dashboard: sidebar, XP bar, illustrated course cards and a schedule column.

A hero built around a large product object, with avatars and a partner card.

Description

Saturated, joyful color used at full strength — big color-blocked panels, playful contrasts and cheerful graphic elements. Built to make an ordinary task feel like a good time.

Typography

Semibold, Aa, Bb, Typography

Font FamilyGeometric sans

Line HeightTight

Font WeightsSemibold, Extra Bold

Letter SpacingTight

Type ScaleModular

Text Case

Sentence case

Font Pairing Strategy

Weight contrast

Hierarchy

Strong contrast

Text Presence

Required

Text Visual Role

Secondary visual element

Text Integration

Overlaid

Output Format

Creative Discipline

UI/UX

Medium

Digital

Delivery Mode

Interactive

Platform

Mobile

Presentation Context

Raw UI

Spatial Structure & Hierarchy

Grid System

Column grid

Visual Density

Comfortable

Hierarchy Clarity

Strong

Layout Axis

Vertical

Symmetry

Near symmetry

Balance Type

Center-weighted

Perspective Style

Flat

Focal Structure

Single

Plane Separation Method

Color/value shift

Surface, Material & Detail

Surface Treatment

Flat

Surface Texture Style

Smooth

Texture Usage

None

Imperfection Level

Flawless

Transparency / Opacity

Opaque

Pattern / Motif Usage

None

References

Cultural References

Pop Art, Dopamine dressing

Temporal Reference

Contemporary

Artistic Mediums & Techniques

Physical Medium

None

Illustrative Technique

Flat design, Vector illustration

Custom Style Items

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.

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 Approach

Soft colored shadows, derived from each component’s hue

Shadow Technique

Single drop shadow

Border Philosophy

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 Pattern

Bottom tab bar

Data Display Style

Card grid

Data Visualization Style

Colorful categorical

UI Imagery

Bright flat vector illustration and hard-masked cutout photography on solid fields

Loading Style

Progress bar

Empty State Style

Illustration + CTA

Hover Treatment

Scale + shadow

Focus Ring Style

Colored outline

Animation Philosophy

Physics-based / Spring

Transition Speed

Fast (80–150ms)

Scroll Behavior

Scroll-triggered reveals

Light & Shadow

Lighting Presence

None (flat)

Shadow Type

Soft

Shadow Density

Light

Lighting Mood Style

Studio-flat

Shape Language

Shape Basis

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

Stroke Usage

No stroke (fill-only)

Guardrails

Common Artifacts to Avoid

Over-saturation

Avoided 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

Colors

#FFF4E320%Usage: Background

#FF6A1316%Usage: Dominant screen field

#FF3E9A15%Usage: Accent panels

#1F5BFF15%Usage: Accent panels

#9BE01E12%Usage: Accent panels

#7A2BE010%Usage: Accent panels

#18131212%Usage: Typography

AI Gradient 1

#FF6A130%

#FF8A3D100%

AI Gradient 2

#FF3E9A0%

#FF6BB2100%

Palette Size

6–8 colors

Color Temperature

Warm

Saturation Range

Electric

Contrast Strategy

Hue contrast

Hue Relationships

Cheerful clashing pairs rather than harmonious relationships

Gradient Policy

Subtle gradients only

Color Dominance

Single dominant color

Shadow Color

Hue-shifted

Black & White Point

Pure black + Pure white

Accessibility Level

WCAG AA

Mood & Personality

Uplifting, Playful, Bold, Confident

Energy Level

High-Octane

Emotional Bias

Positive

Tone Register

Intimate

Representation Mode

Symbolic

Real-world Accuracy

Stylized

Characters

Allowed (detailed)

Humor Usage

Frequent

Voice & Language

Formality

Casual

Vocabulary Level

Simple

Directness

Straightforward

Sentence Length

Short

Metaphor Density

Literal

Writing Perspective

Second person (you)

Copy Pacing

Punchy

Jargon / Technical Level

None

Emoji Usage

Occasional; celebratory moments only, never labels

Container / Boundary

Container presence

Explicit (shape mask)

Container shape

Rounded square

Corner treatment

Fully rounded

Container Dominance

Primary visual identity

Padding rules

Generous

Edge behavior

Intentional bleed

Camera and Motion

Motion Intensity

Kinetic

Motion Implication

Dynamic

Easing Function

Spring

Animation Duration Feel

Snappy

Animation Sequencing

Small overshoot pop-ins; number count-ups

Post-processing & Render Style

Image Treatment

Cutout

Background & Environment

Background Type

Solid color

Environment Mood

Abstract

Background–Subject Relationship

Contrasting

Background Complexity

Simple

......X