Docs

Claymorphism UI

StyleRef·@styleref·
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): Claymorphism UI • Output Format: Creative discipline: UI/UX; Digital; Delivery mode: Interactive; Web, Mobile; Pixel Perfect resolution. • Mood & Personality: Playful, Friendly, Clean; Energy: Vibrant; Emotional bias: Positive; Real-world accuracy: Stylized. • Colors: Palette: Solid Colors: [ #FFF9F0 17%, #C9B8F4 17%, #AEE8D2 16%, #FFC5AE 17%, #ADDDF7 16%, #F9DB7B 17%]; 3–5 colors; Warm temperature; Saturation: Rich; Readable color contrast; color is the primary hierarchy and grouping cue; No gradients; Color dominance: Background-dominant; Shadow Color: Hue-shifted; Accessibility: WCAG AA. • Typography: Humanist sans; Medium, Semibold; Font pairing: Single family; Hierarchy: Clear typographic scale; Text visual role: Purely functional. • Light & Shadow: Lighting mood style: Studio-flat; Key light style: Diffused; Shadow type: Soft; Shadow density: Light; Lighting presence: Explicit. • Spatial Structure & Hierarchy: Primary + secondary focal structure; Hierarchy: Strong; Grid system: Free-form; Visual density: Airy. • Surface, Material & Detail: Material simulation: Stylized soft modeling clay; Surface treatment: Matte; Texture: Smooth; Texture usage: None; Transparency: Opaque; Imperfection level: Polished; Stylized realism; Micro-detail allowance: Forbidden. • Shape Language: Geometric; Primitive dominance: Circles, Rectangles; Edge sharpness: Fully rounded; Curve consistency: Uniform radius; Negative space usage: Dominant. • References: Claymorphism, Skeuomorphism; Temporal reference: Contemporary; Reference Brands: Android 3D Bugdroid; Reddit 3D Snoo; Windows 11 Fluency emoji; Hype4 Academy. • UI & Web: Color theme: Light; Background tone: Warm off-white; Accent strategy: Multi-tonal palette; Surface layers: Two-layer (page + card); Elevation: Shadow-based; Shadow technique: Inset / inner shadow; Shadow weight: Soft; Glass effect: None; Borders: Borderless; Button shape: Full pill; Button hierarchy: Primary + Secondary + Ghost; Icon style: Rounded filled; Hover: Scale + shadow; Animation: Physics-based / Spring; Transition speed: Standard (200–300ms); Focus ring: Colored outline. • Guardrails: Avoid: AI Gloss / Plastic Smoothing, HDR over-processing, Studio Post-processing; Avoid Visuals: neumorphic same-color embossing; frosted translucency; glass blur; glossy highlights; metallic sheen; photorealistic clay texture; fingerprints; material grain; avoid neumorphic low-contrast controls; Avoid Colors: dark backgrounds; neutral gray shadows; monochrome low-contrast controls; Allowed Visuals: opaque pastel cards; pill buttons; rounded filled icons; warm off-white pages; hue-matched shadows; soft diffused elevation. • Inflation Shadow Stack: Every surface: bright tinted inset highlight along top edge, darker tinted inset shade below, plus one soft tinted outer drop shadow., Corner Radius Rule: Use oversized 20–40px radii; forms should read as puffy and balloon-like, never merely rounded., Shadow Tinting: Derive each highlight and shadow from its own surface hue; never use neutral gray elevation., Interaction Feel: Buttons compress through scale and changing shadow depth, as though pressed into soft clay.. 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

Made with this StyleRef

Same style, different prompts.

Style output
A home dashboard where the header, summary cards, shortcut tiles, and bottom nav all hold one consistent look.
A kids' learning screen where the character, answer buttons, and progress bar stay visually consistent.
A weather screen with the temperature, hourly row, and five-day outlook unified in a single style.
A phone screen showing an app onboading screens

Description

Claymorphism UI is the puffy, toy-like look of an interface molded from soft clay: cards, buttons, and icons with oversized rounded corners, opaque pastel fills, and the signature double inner shadow — a bright edge on top, a darker one below — that inflates each shape, plus a soft outer drop shadow that floats it above the page. The shadows are tinted to match their surface rather than neutral gray, which sells the 3D-object feel without trying to look photorealistic. It suits onboarding flows, kids' and education apps, friendly fintech, and illustration-heavy landing pages.

Shape Language

Shape Basis
Geometric
Primitive Dominance
Circles, Rectangles
Edge Sharpness
Fully rounded
Curve Consistency
Uniform radius
Negative Space Usage
Dominant

References

Cultural References
Claymorphism, Skeuomorphism
Temporal Reference
Contemporary
Reference Brands
Android 3D Bugdroid; Reddit 3D Snoo; Windows 11 Fluency emoji; Hype4 Academy

Guardrails

Common Artifacts to Avoid
AI Gloss / Plastic Smoothing, HDR over-processing, Studio Post-processing
Avoided Visuals
neumorphic same-color embossing; frosted translucency; glass blur; glossy highlights; metallic sheen; photorealistic clay texture; fingerprints; material grain; avoid neumorphic low-contrast controls
Avoided Colors
dark backgrounds; neutral gray shadows; monochrome low-contrast controls
Allowed Visuals
opaque pastel cards; pill buttons; rounded filled icons; warm off-white pages; hue-matched shadows; soft diffused elevation

Custom Style Items

Inflation Shadow Stack
Every surface: bright tinted inset highlight along top edge, darker tinted inset shade below, plus one soft tinted outer drop shadow.
Corner Radius Rule
Use oversized 20–40px radii; forms should read as puffy and balloon-like, never merely rounded.
Shadow Tinting
Derive each highlight and shadow from its own surface hue; never use neutral gray elevation.
Interaction Feel
Buttons compress through scale and changing shadow depth, as though pressed into soft clay.

Typography

Medium, Aa, Bb, Typography
Font FamilyHumanist sans
Font WeightsMedium, Semibold
Font Pairing Strategy
Single family
Hierarchy
Clear typographic scale
Text Visual Role
Purely functional

UI & Web

Color Theme
Light
Background Tone
Warm off-white
Accent Strategy
Multi-tonal palette
Surface Layers
Two-layer (page + card)
Elevation Approach
Shadow-based
Shadow Technique
Inset / inner shadow
Shadow Weight
Soft
Glass / Blur Effect
None
Border Philosophy
Borderless
Button Shape
Full pill
Button Hierarchy
Primary + Secondary + Ghost
Icon Style
Rounded filled
Hover Treatment
Scale + shadow
Animation Philosophy
Physics-based / Spring
Transition Speed
Standard (200–300ms)
Focus Ring Style
Colored outline

Light & Shadow

Lighting Mood Style
Studio-flat
Key Light Style
Diffused
Shadow Type
Soft
Shadow Density
Light
Lighting Presence
Explicit

Spatial Structure & Hierarchy

Focal Structure
Primary + secondary
Hierarchy Clarity
Strong
Grid System
Free-form
Visual Density
Airy

Colors

#FFF9F017%
#C9B8F417%
#AEE8D216%
#FFC5AE17%
#ADDDF716%
#F9DB7B17%
Palette Size
3–5 colors
Color Temperature
Warm
Saturation Range
Rich
Contrast Strategy
Readable color contrast; color is the primary hierarchy and grouping cue
Gradient Policy
No gradients
Color Dominance
Background-dominant
Shadow Color
Hue-shifted
Accessibility Level
WCAG AA

Output Format

Creative Discipline
UI/UX
Medium
Digital
Delivery Mode
Interactive
Platform
Web, Mobile
Resolution Target
Pixel Perfect

Mood & Personality

Mood & Personality
Playful, Friendly, Clean
Energy Level
Vibrant
Emotional Bias
Positive
Real-world Accuracy
Stylized

Surface, Material & Detail

Material Simulation
Stylized soft modeling clay
Surface Treatment
Matte
Surface Texture Style
Smooth
Texture Usage
None
Transparency / Opacity
Opaque
Imperfection Level
Polished
Abstraction Level
Stylized realism
Micro-detail Allowance
Forbidden
Terms of ServicePrivacy PolicyBlogDocsSTYLE.mdllms.txt
......X
© 2026 StyleRef. All rights reserved.