# Claymorphism UI

Claymorphism UI features puffy, toy-like interfaces with oversized rounded corners, opaque pastel fills, and signature double inner shadows for a soft, inflated look.

| | |
|---|---|
| Style | Claymorphism UI |
| Category | UI/UX |
| Tags | claymorphism, playful, pastel, rounded, soft shadows, 3d, friendly, modern |
| Author | @styleref (https://styleref.io/u/styleref) |
| Palette | #fff9f0 #c9b8f4 #aee8d2 #ffc5ae #adddf7 #f9db7b |
| Published | 2026-08-11 |
| Canonical URL | https://styleref.io/share/8pf9fkva-3e4afdfe947b |

## 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):

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.
 • Inspiration Images: https://piteahvrjstrlirkpoid.supabase.co/storage/v1/object/public/images/public/5462369f-9f52-464e-bf69-8c2949b37e31.webp.
 • 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

## 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/8pf9fkva-3e4afdfe947b?format=flux        # also: midjourney, diffusion, json
https://styleref.io/api/v1/styles/8pf9fkva-3e4afdfe947b/style.md           # a ready-to-commit STYLE.md
```

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

```
styleref://gallery/8pf9fkva-3e4afdfe947b
styleref://gallery/8pf9fkva-3e4afdfe947b/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/8pf9fkva-3e4afdfe947b