Brutalism
Raw typography and exposed structure suit an intentionally utilitarian visual voice.
Open field noteStyles
Compare visual density, depth, texture, and emphasis to choose a look that supports your content and interactions.
Search within: Styles
11 field notes
Styles
Flat design
Solid surfaces and explicit labels establish hierarchy when simulated depth adds little value.
Open field note
Glassmorphism
Use translucent, blurred panels to preserve background context while keeping foreground content readable.
Open field note
Liquid Glass
An adaptive, floating control material preserves rich content beneath a distinct navigation layer.
Open field note
Material 3 Expressive
Color, shape, size and motion emphasize key actions within the Material design system.
Open field note
Minimalism
Reduce competing elements to focus attention while retaining essential information and controls.
Open field note
Neobrutalism
Bright blocks, thick outlines and hard shadows give selected content deliberate graphic emphasis.
Open field note
Neumorphism
Similar-tone surfaces and paired shadows suggest soft raised or pressed controls.
Open field note
Retro digital
Early-computer windows, pixel details and type evoke a deliberate digital nostalgia.
Open field note
Skeuomorphism
Familiar object and material cues explain digital content through a recognizable physical metaphor.
Open field note
Tactile collage
Layered paper, tape and fragments create an assembled, handmade visual character.
Open field note| Concept | Features | Advantages | Limitations | Suitable situations | Combination conditions |
|---|---|---|---|---|---|
| Brutalism | Exposed structure and raw typography | Direct hierarchy for utilitarian notices | A rough tone can reduce comfort | Information priority over polished decoration | Lists and strong typographic hierarchy |
| Flat design | Simple shapes and explicit states | Clear service and time choices | Weak affordances if boundaries disappear | Low ornament for routine transactions | Grid, labels and visible focus |
| Glassmorphism | Translucency and backdrop blur preserve background context | Translucent panels retain the background context. | Contrast depends on the backdrop; offer an opaque mode and test each scene. | Choose it when background context matters. | Pair with a simple grid and an opaque readability fallback. |
| Liquid Glass | Translucent floating control surfaces | Content remains visually primary | Native optical behavior is not reproduced | Content-focused navigation over photography | Opaque fallback and stable text surfaces |
| Material 3 Expressive | Expressive shape, scale and motion | Strong emphasis on a primary action | Emphasis can compete with dense content | A welcoming, prominent participation action | Clear states and reduced-motion support |
| Minimalism | Deliberate reduction and spacing | Essentials stay easy to scan | Hidden essentials make the task harder | Few priorities with optional detail | Single column and progressive disclosure |
| Neobrutalism | Bold outlines, hard shadows and color | Playful event blocks remain distinct | Strong contrast can become visual noise | Lively identity with explicit controls | Filtering, grids and clear selection marks |
| Neumorphism | Raised and inset surfaces from paired shadows | A tactile focus for a small control set | Low-contrast edges need reinforcement | A calm control panel with clear states | Text labels, borders and visible focus |
| Retro digital | Early digital window and pixel motifs | A recognizable arcade-era identity | Nostalgia must not obscure current controls | A nostalgic interface over natural materials | Legible type and accessible window behavior |
| Skeuomorphism | Familiar physical object references | A notebook metaphor explains recipe structure | Imitation must not restrict interaction | Recognizable object roles over abstract surfaces | Real text and direct serving controls |
| Tactile collage | Layered cutouts, paper and mixed media | Different memory types retain distinct character | Overlap can harm order and legibility | A collected board over one consistent object | DOM order and explicit reorder buttons |