Inflated Clay 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.

Four analytics panels: a gauge, a split chart, a country table and a cohort grid.

Description

Rounded, puffed-up 3D forms in pastel color — controls that look pressed from soft clay, with thick edges, inner light and a squishy sense of give. Toylike and friendly without becoming childish.

Mood & Personality

Playful, Friendly, Clean, Uplifting

Energy Level

Vibrant

Emotional Bias

Positive

Tone Register

Intimate

Representation Mode

Symbolic

Real-world Accuracy

Stylized

Characters

Allowed (faceless)

Container / Boundary

Container presence

Explicit (shape mask)

Container shape

Fully rounded squircle

Container Dominance

Primary visual identity

Padding rules

Generous

Camera and Motion

Motion Intensity

Rhythmic

Motion Implication

Dynamic

Easing Function

Spring

Animation Duration Feel

Standard

Transition Type

Scale, Slide

References

Cultural References

Claymorphism, Minimalism

Temporal Reference

Contemporary

Guardrails

Common Artifacts to Avoid

AI Gloss / Plastic Smoothing

Avoided Visuals

flat pastel rectangles; grey drop shadows; hard edges; dense data screens; overinflated unpressable controls

Allowed Visuals

puffed squircles; thick rounded walls; colored soft shadows; finger-sized controls; soft volumetric icons

Custom Style Items

Clay Volume

Each form uses a lighter inner top gradient, darker base, and ambient-occlusion contact shadow.

Edge Highlight

Wrap a subtle inner-top highlight around every clay container to reinforce thickness.

Elevation Rhythm

Overlap forms slightly and stagger floating heights rather than aligning to a rigid grid.

Press Response

Controls squash slightly on press, then overshoot and rebound; state-change icons wobble.

Typography

Semibold, Aa, Bb, Typography

Font FamilyGeometric sans

Line HeightRelaxed

Font WeightsSemibold, Bold

Text Case

Sentence case

Hierarchy

Clear typographic scale

Text Integration

Embedded in shapes

Output Format

Creative Discipline

UI/UX

Medium

Digital

Delivery Mode

Interactive

Platform

Mobile

Presentation Context

Raw UI

UI & Web

Color Theme

Light

Background Tone

Slightly deeper tinted lilac ground

Accent Strategy

Multi-tonal palette

Layout Archetype

Feed

Density

Spacious

Surface Layers

Three-layer (page + card + elevated)

Elevation Approach

Shadow-based

Shadow Technique

Multi-layer stack

Corner Radius Scale

Extra-large (28px+)

Card Style

Filled tint

Button Shape

Full pill

Icon Style

Rounded filled

UI Imagery

3D renders

Animation Philosophy

Physics-based / Spring

Transition Speed

Standard (200–300ms)

Focus Ring Style

Glow halo

Shape Language

Shape Basis

Organic

Primitive Dominance

Circles, Freeform curves

Edge Sharpness

Fully rounded

Silhouette Clarity

Iconic

Negative Space Usage

Balanced

Colors

#F1EBFF34%Usage: Background

#FFFFFF18%Usage: Clay surfaces

#B7A6FF15%Usage: Lilac forms

#9BE8C811%Usage: Mint forms

#FFD98A9%Usage: Butter forms

#FF8FA87%Usage: Blush accent

#2B24406%Usage: Typography

Palette Size

6–8 colors

Color Temperature

Warm

Saturation Range

Muted

Contrast Strategy

Value contrast

Hue Relationships

Analogous

Gradient Policy

Subtle gradients only

Shadow Color

Hue-shifted

Accessibility Level

WCAG AA

Light & Shadow

Lighting Mood Style

High-key

Key Light Style

Diffused

Lighting Direction

Top-lit

Shadow Type

Long, very soft colored shadows

Fill-light Ratio

Even fill

Atmospheric Effects

Subsurface Scattering (SSS)

Lighting Presence

Explicit

Voice & Language

Formality

Casual

Vocabulary Level

Simple

Directness

Clear

Writing Perspective

First person (I/we)

Copy Pacing

Punchy

Emoji Usage

Occasional

Spatial Structure & Hierarchy

Grid System

Free-form

Visual Density

Airy

Hierarchy Clarity

Strong

Symmetry

Asymmetrical balance

Plane Separation Method

Overlap, Shadow

Surface, Material & Detail

Material Simulation

Wax

Surface Treatment

Matte modelling clay with soft waxy sheen

Surface Texture Style

Smooth

Abstraction Level

Stylized realism

Artistic Mediums & Techniques

Illustrative Technique

3D clay-rendered illustrations; puffy characters, chunky objects, rounded volumetric icons

......X