Agence WagnerAgence Wagner
FRENDEELS
Retour aux designs
LudiqueBrutalistePastel
Aperçu

Cute-alism -- Design Reference

Cute-alism is the deliberate collision of Japan's kawaii culture with the raw, unpolished energy of brutalist web design. It pairs the soft, approachable warmth of rounded shapes, pastel candies, smiling faces, and sticker-like graphics with the structural honesty of thick black borders, asymmetric grids, system monospace fonts, and hard box-shadows that cast no blur. The result is a visual language that is simultaneously playful and confrontational -- cute elements forced into harsh containers, cartoon icons living inside stark grid cells, neon pinks bleeding through rigid black outlines. Where brutalism strips away decoration to expose structure, Cute-alism re-decorates that exposed structure with glitter, emoji, and candy color. Where kawaii softens every edge, Cute-alism reintroduces hard corners, heavy weights, and unapologetic asymmetry. The tension between these opposing forces is the entire point: a web page that feels like a sticker-bombed concrete wall, a monospace terminal that outputs hearts, a construction site wrapped in pastel ribbon.

Visual Characteristics

  • Thick black borders everywhere -- 3-5px solid black outlines on every container, card, and interactive element; the brutalist skeleton made visible
  • Hard box-shadows -- offset shadows (4-6px) with zero blur, creating a flat, stamped, almost screen-printed depth effect
  • Asymmetric CSS grid layouts -- deliberately uneven column and row distributions; nothing centered unless it creates comedic contrast
  • Neon and candy color saturation -- pinks, yellows, lilacs, and limes pushed to high saturation; colors that demand attention
  • Rounded elements inside sharp containers -- pill-shaped buttons, circular avatars, and soft blobs placed within rectangular brutalist frames
  • Sticker-like positioned elements -- decorative graphics, emoji, and icons absolutely positioned with slight rotation transforms, as if stuck on by hand
  • System monospace typography -- Courier and monospace stacks for body text and structural labels, preserving the brutalist foundation
  • Chunky rounded display fonts -- Baloo 2, Quicksand, or Nunito for headings and callouts, providing the kawaii counterpoint
  • Emoji and icon decorations -- smiling faces, stars, hearts, sparkles used as genuine design elements via pseudo-elements and inline decoration
  • Bright flat backgrounds -- sections and cards filled with solid saturated colors rather than gradients or textures
  • Intentional visual tension -- the cute and the brutal placed in direct contact; soft shapes touching hard edges at every opportunity
  • Stacked and overlapping elements -- cards, labels, and decorative pieces that overlap grid boundaries, creating a collage-like energy

Color Palette

The Cute-alism palette is built on maximum contrast between brutalist neutrals (black, white) and kawaii-inspired neon/pastel colors. Black provides the structural grid and borders; vivid colors fill the spaces between:

  • Black is the primary structural color -- borders, shadows, text in monospace contexts, grid lines
  • White as breathing space -- backgrounds for content areas, creating clean contrast against bright color blocks
  • Neon pink as the signature accent -- the most recognizable Cute-alism color, used for primary actions, headings, and key highlights
  • Candy yellow for warmth and energy -- secondary accent, used for callouts, badges, and background fills
  • Pastel lilac for softness -- provides gentle contrast in secondary content areas, tags, and decorative elements
  • Lime green for surprise and playfulness -- tertiary accent that adds unexpected energy, used sparingly for alerts or emphasis
  • Hot magenta for interactive states -- hover effects, active states, and attention-grabbing elements
  • Pastel blue for cool balance -- prevents the palette from becoming overwhelmingly warm; used for informational elements
  • No smooth gradients -- colors are applied as flat fills; where transition is needed, use hard color stops, not smooth blends

Suggested Implementation Palette

Role Color Hex
Border / Structure Pure Black #000000
Background Light Clean White #FFFFFF
Background Warm Soft Cream #FFF8F0
Primary Accent Neon Pink #FF2D8A
Secondary Accent Candy Yellow #FFE156
Tertiary Accent Pastel Lilac #C9A0FF
Pop Accent Lime Green #7AFF5E
Interactive Hot Magenta #FF47B5
Cool Balance Pastel Blue #A0D4FF
Surface Cute Blush Pink #FFD6E8
Surface Bright Mint Cream #D4FFE7
Text Primary Near Black #1A1A1A
Text Inverted White #FFFFFF
Shadow Pure Black #000000
Highlight Glow Warm Pink #FF8EC6
Sticker Yellow Bright Banana #FFF06B

Suggested CSS Custom Properties

:root {
  /* Structure */
  --cutealism-black: #000000;
  --cutealism-white: #FFFFFF;
  --cutealism-cream: #FFF8F0;

  /* Primary palette */
  --cutealism-pink: #FF2D8A;
  --cutealism-yellow: #FFE156;
  --cutealism-lilac: #C9A0FF;
  --cutealism-lime: #7AFF5E;
  --cutealism-magenta: #FF47B5;
  --cutealism-blue: #A0D4FF;

  /* Surfaces */
  --cutealism-blush: #FFD6E8;
  --cutealism-mint: #D4FFE7;
  --cutealism-banana: #FFF06B;
  --cutealism-lavender: #E8D6FF;

  /* Text */
  --cutealism-text-primary: #1A1A1A;
  --cutealism-text-inverted: #FFFFFF;
  --cutealism-text-muted: #666666;

  /* Borders and shadows */
  --cutealism-border: #000000;
  --cutealism-border-width: 3px;
  --cutealism-shadow-offset: 5px;
  --cutealism-shadow: 5px 5px 0px #000000;
  --cutealism-shadow-sm: 3px 3px 0px #000000;

  /* Radius mixing */
  --cutealism-radius-none: 0px;
  --cutealism-radius-soft: 12px;
  --cutealism-radius-round: 50px;
  --cutealism-radius-circle: 50%;

  /* Functional mappings */
  --cutealism-bg-primary: var(--cutealism-white);
  --cutealism-bg-secondary: var(--cutealism-cream);
  --cutealism-bg-card: var(--cutealism-white);
  --cutealism-text-heading: var(--cutealism-pink);
  --cutealism-text-body: var(--cutealism-text-primary);
  --cutealism-accent-primary: var(--cutealism-pink);
  --cutealism-accent-secondary: var(--cutealism-yellow);
  --cutealism-border-color: var(--cutealism-border);
}

Typography

Typeface Characteristics

Cute-alism typography lives in the tension between two opposing font philosophies:

  • Monospace system fonts as the brutalist base -- Courier, Courier New, and generic monospace stacks provide raw, mechanical, undesigned text that signals structural honesty
  • Chunky rounded fonts as the kawaii layer -- Baloo 2, Quicksand, and Nunito bring softness, friendliness, and approachable warmth to headings and callouts
  • Bold and extra-bold weights preferred -- both monospace and rounded fonts are pushed to heavy weights, reinforcing the blocky, high-impact visual language
  • Large display sizes for headings -- cute rounded fonts rendered at 2-4rem create a poster-like, almost toybox quality
  • Uppercase monospace for labels -- structural labels, tags, and metadata rendered in uppercase Courier create the brutalist scaffolding
  • Mixed font pairing within single components -- a card might use monospace for the label and rounded for the title, placing both aesthetics in direct contact
  • Emoji used as typographic punctuation -- star, sparkle, heart, and face emoji appear inline with text, treated as legitimate typographic elements rather than decoration
  • No script or handwriting fonts -- the aesthetic avoids anything calligraphic; text is either mechanically monospaced or geometrically rounded
Font Style Usage
Baloo 2 Chunky rounded display Primary headings, hero text -- playful, bold, unmistakably cute
Quicksand Geometric rounded sans Secondary headings, navigation -- clean roundness with modern weight
Nunito Rounded terminal sans-serif Body text alternative, cards -- friendly and highly readable
Courier Prime Refined monospace Body text, code blocks, labels -- cleaner Courier for the brutalist layer
Space Mono Geometric monospace UI labels, metadata, tags -- modern monospace with character
IBM Plex Mono Industrial monospace Structural text, footers -- brutalist credibility

Typography CSS Example

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Quicksand:wght@500;600;700&family=Nunito:wght@400;600;700;800&family=Space+Mono:wght@400;700&display=swap');

/* Brutalist base -- monospace body */
body {
  font-family: 'Courier Prime', 'Courier New', Courier, monospace;
  font-size: 16px;
  line-height: 1.7;
  color: var(--cutealism-text-primary);
  font-weight: 400;
}

/* Cute headings -- chunky rounded */
h1, h2, h3 {
  font-family: 'Baloo 2', 'Quicksand', 'Nunito', sans-serif;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--cutealism-pink);
}

h2 {
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  color: var(--cutealism-text-primary);
}

h3 {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  color: var(--cutealism-lilac);
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-weight: 700;
}

/* Brutalist labels -- uppercase monospace */
.cutealism-label {
  font-family: 'Space Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cutealism-text-muted);
}

/* Cute callout text -- rounded and friendly */
.cutealism-callout {
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--cutealism-text-primary);
}

/* Inline emoji sizing */
.cutealism-emoji {
  font-size: 1.3em;
  vertical-align: middle;
  line-height: 1;
}

/* Tag / badge text */
.cutealism-tag {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

Key Design Elements and Motifs

Thick Black Borders

The defining structural element -- every surface is outlined:

  • 3-5px solid black borders on all containers, cards, buttons, and images
  • Borders are always pure black (#000000), never gray or colored, to maintain brutalist honesty
  • Double-border effects achieved by nesting elements or using outline + border together
  • Border-width as visual hierarchy -- more important elements get thicker borders (5px), secondary elements thinner (3px)
  • No border-radius on structural containers -- the brutalist frame stays sharp; only inner elements get rounding

Hard Box-Shadows

Flat, no-blur shadows that create a stamped or printed depth effect:

  • Standard offset: 5px right, 5px down -- consistent across the design for visual coherence
  • Zero blur radius always -- the shadow edge is as hard as the border edge
  • Black shadow color matching the border, reinforcing the structural grid
  • Shadow as interaction feedback -- shadows reduce or disappear on :active states, simulating physical button press
  • Layered shadows on hover -- shadow offset increases slightly on hover to suggest lift

Sticker-Like Decorative Elements

Playful positioned elements that break the grid:

  • Absolutely positioned decorative items -- emoji, icons, and small graphics placed outside normal flow
  • Slight rotation transforms (rotate(-3deg) to rotate(5deg)) -- mimicking hand-placed stickers
  • Drop-shadow or border creating a sticker outline -- elements appear peeled up from the surface
  • Overlapping container boundaries -- stickers deliberately cross card edges and grid lines
  • Random-feeling but intentional placement -- each sticker position is designed, but appears casual

Rounded vs. Sharp Contrast

The core visual tension of the aesthetic:

  • Outer containers: sharp corners (border-radius: 0) -- the brutalist frame
  • Inner elements: rounded or pill-shaped (border-radius: 12px to 50px) -- the kawaii content
  • Buttons always rounded -- pill shapes or soft radius, sitting inside sharp-cornered cards
  • Avatar images fully circular -- border-radius: 50% with thick black borders
  • Badge/tag elements: pill-shaped -- small rounded rectangles with bright background fills

Emoji as Design Elements

Emoji transcend decoration to become structural design components:

  • Pseudo-element emoji via ::before and ::after -- stars, sparkles, hearts positioned alongside headings
  • Emoji bullet points replacing standard list markers
  • Large-scale emoji as section dividers -- a single emoji at 3-4rem size breaking up content areas
  • Emoji in navigation -- smiling face or star prefixed to menu items
  • Animated emoji -- subtle rotation or scale animations on hover to add life

Bright Color Blocks

Flat saturated fills that divide and organize:

  • Full-width color band sections -- alternating background colors between page sections
  • Colored card backgrounds -- individual cards in pink, yellow, lilac, or lime
  • Accent bars -- thin (4-8px) horizontal or vertical colored strips as section separators
  • Color coding by function -- consistent colors for consistent content types (e.g., pink for primary, yellow for highlights, lilac for secondary)

Layout Principles

  • Asymmetric CSS grid -- columns and rows deliberately uneven; a typical layout might use grid-template-columns: 2fr 1fr or 1fr 2fr 1fr rather than equal divisions
  • Dense packing -- elements fill available space without excessive whitespace; the grid feels full and energetic
  • Overlapping elements -- stickers, badges, and decorative items positioned to overlap container edges via negative margins or absolute positioning
  • Mixed alignment -- some elements left-aligned, others centered, creating visual rhythm through inconsistency
  • Generous padding inside containers -- while the grid is tight, individual cards have comfortable internal padding (1.5-2.5rem)
  • Thick visible grid gaps -- gap: 1rem or more between grid items, with the background color visible between, making the grid structure apparent
  • Full-bleed color sections -- some sections break out of the content container to span the full viewport width with a bright background
  • Vertical stacking for emphasis -- important content gets a full-width row; less critical content is packed into multi-column arrangements
  • No symmetry obligation -- the layout actively avoids perfect centering or mirroring; a two-column section might have a narrow left and wide right

Modern Web Adaptation

  • Use CSS Grid with named areas for the asymmetric layout framework
  • Bright background sections alternate between white, pink, yellow, and lilac to create visual variety
  • Cards with thick borders and hard shadows as the primary content container
  • Sticky navigation with monospace labels and emoji prefixes
  • Sticker overlays as absolutely positioned ::before/::after pseudo-elements on section containers
  • Responsive approach: grid shifts from multi-column to single-column on small screens; sticker elements reposition or hide; border widths can thin slightly

CSS/Design Techniques

Brutalist Card with Cute Interior

/* The signature Cute-alism card: sharp outside, soft inside */
.cutealism-card {
  background: var(--cutealism-white);
  border: var(--cutealism-border-width) solid var(--cutealism-border);
  box-shadow: var(--cutealism-shadow);
  padding: 2rem;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cutealism-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0px var(--cutealism-black);
}

.cutealism-card:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px var(--cutealism-black);
}

/* Card with colored background variant */
.cutealism-card--pink {
  background: var(--cutealism-blush);
}

.cutealism-card--yellow {
  background: var(--cutealism-banana);
}

.cutealism-card--lilac {
  background: var(--cutealism-lavender);
}

.cutealism-card--mint {
  background: var(--cutealism-mint);
}

Hard Shadow Buttons

/* Rounded cute button inside the brutalist system */
.cutealism-button {
  display: inline-block;
  padding: 0.75rem 2rem;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cutealism-text-inverted);
  background: var(--cutealism-pink);
  border: var(--cutealism-border-width) solid var(--cutealism-border);
  border-radius: var(--cutealism-radius-round);
  box-shadow: var(--cutealism-shadow-sm);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.cutealism-button:hover {
  background: var(--cutealism-magenta);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px var(--cutealism-black);
}

.cutealism-button:active {
  transform: translate(2px, 2px);
  box-shadow: 0px 0px 0px var(--cutealism-black);
}

/* Color variants */
.cutealism-button--yellow {
  background: var(--cutealism-yellow);
  color: var(--cutealism-text-primary);
}

.cutealism-button--lilac {
  background: var(--cutealism-lilac);
  color: var(--cutealism-text-primary);
}

.cutealism-button--lime {
  background: var(--cutealism-lime);
  color: var(--cutealism-text-primary);
}

Sticker Decoration via Pseudo-Elements

/* Sticker-like emoji decoration on sections and cards */
.cutealism-sticker {
  position: relative;
}

/* Top-right sticker */
.cutealism-sticker::before {
  content: attr(data-sticker);
  position: absolute;
  top: -12px;
  right: -8px;
  font-size: 2rem;
  transform: rotate(12deg);
  z-index: 10;
  filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.3));
  pointer-events: none;
}

/* Bottom-left sticker */
.cutealism-sticker::after {
  content: attr(data-sticker-2);
  position: absolute;
  bottom: -10px;
  left: -6px;
  font-size: 1.6rem;
  transform: rotate(-8deg);
  z-index: 10;
  filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.3));
  pointer-events: none;
}

/* Animated sticker hover -- subtle wiggle */
@keyframes cutealism-wiggle {
  0%, 100% { transform: rotate(12deg); }
  25% { transform: rotate(16deg); }
  75% { transform: rotate(8deg); }
}

.cutealism-sticker:hover::before {
  animation: cutealism-wiggle 0.4s ease-in-out;
}

Asymmetric Grid Layout

/* Core asymmetric grid -- the structural brutalist framework */
.cutealism-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}

/* Alternate asymmetry for variety */
.cutealism-grid--reverse {
  grid-template-columns: 1fr 2fr;
}

/* Three-column asymmetric */
.cutealism-grid--three {
  grid-template-columns: 1fr 2fr 1fr;
}

/* Dense auto-flow for collage feel */
.cutealism-grid--collage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-flow: dense;
  gap: 1rem;
}

/* Span items for asymmetry within auto-grid */
.cutealism-grid--collage > *:nth-child(3n+1) {
  grid-column: span 2;
}

/* Responsive: collapse to single column */
@media (max-width: 768px) {
  .cutealism-grid,
  .cutealism-grid--reverse,
  .cutealism-grid--three {
    grid-template-columns: 1fr;
  }
}

Emoji Bullet List

/* Replace standard bullets with emoji */
.cutealism-list {
  list-style: none;
  padding: 0;
}

.cutealism-list li {
  padding: 0.4rem 0 0.4rem 2rem;
  position: relative;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
}

.cutealism-list li::before {
  content: '\2B50'; /* star emoji */
  position: absolute;
  left: 0;
  top: 0.4rem;
  font-size: 1.1rem;
}

/* Alternate emoji per item */
.cutealism-list li:nth-child(2n)::before { content: '\2728'; /* sparkles */ }
.cutealism-list li:nth-child(3n)::before { content: '\1F496'; /* sparkling heart */ }
.cutealism-list li:nth-child(5n)::before { content: '\1F31F'; /* glowing star */ }

Brutalist Tag / Badge

/* Monospace tags with colored backgrounds */
.cutealism-tag {
  display: inline-block;
  padding: 0.2rem 0.8rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 2px solid var(--cutealism-border);
  border-radius: var(--cutealism-radius-round);
  background: var(--cutealism-yellow);
  color: var(--cutealism-text-primary);
  box-shadow: 2px 2px 0px var(--cutealism-black);
}

.cutealism-tag--pink {
  background: var(--cutealism-pink);
  color: var(--cutealism-text-inverted);
}

.cutealism-tag--lilac {
  background: var(--cutealism-lilac);
  color: var(--cutealism-text-primary);
}

.cutealism-tag--lime {
  background: var(--cutealism-lime);
  color: var(--cutealism-text-primary);
}

Glitter / Sparkle Effect

/* Animated sparkle particles -- the kawaii magic touch */
@keyframes cutealism-sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

.cutealism-sparkle {
  position: relative;
  overflow: visible;
}

.cutealism-sparkle::before,
.cutealism-sparkle::after {
  content: '\2726'; /* sparkle character */
  position: absolute;
  font-size: 1rem;
  color: var(--cutealism-yellow);
  pointer-events: none;
  animation: cutealism-sparkle 2s ease-in-out infinite;
}

.cutealism-sparkle::before {
  top: -8px;
  right: -4px;
  animation-delay: 0s;
}

.cutealism-sparkle::after {
  bottom: -6px;
  left: -4px;
  animation-delay: 0.7s;
  font-size: 0.7rem;
  color: var(--cutealism-pink);
}

Color Block Section Divider

/* Full-width colored section bands */
.cutealism-section {
  padding: 3rem 2rem;
  border-top: var(--cutealism-border-width) solid var(--cutealism-border);
  border-bottom: var(--cutealism-border-width) solid var(--cutealism-border);
}

.cutealism-section--pink {
  background: var(--cutealism-blush);
}

.cutealism-section--yellow {
  background: var(--cutealism-banana);
}

.cutealism-section--lilac {
  background: var(--cutealism-lavender);
}

.cutealism-section--white {
  background: var(--cutealism-white);
}

/* Accent bar divider between sections */
.cutealism-divider {
  height: 6px;
  background: var(--cutealism-pink);
  border: none;
  border-top: 2px solid var(--cutealism-border);
  border-bottom: 2px solid var(--cutealism-border);
}

/* Emoji section divider */
.cutealism-divider--emoji {
  text-align: center;
  font-size: 2rem;
  padding: 1rem 0;
  border-top: var(--cutealism-border-width) solid var(--cutealism-border);
  background: var(--cutealism-white);
  letter-spacing: 1rem;
}

/* Brutalist nav with cute touches */
.cutealism-nav {
  display: flex;
  align-items: center;
  gap: 0;
  border: var(--cutealism-border-width) solid var(--cutealism-border);
  background: var(--cutealism-white);
  box-shadow: var(--cutealism-shadow-sm);
}

.cutealism-nav a {
  padding: 0.8rem 1.5rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--cutealism-text-primary);
  border-right: var(--cutealism-border-width) solid var(--cutealism-border);
  transition: background 0.1s ease;
}

.cutealism-nav a:last-child {
  border-right: none;
}

.cutealism-nav a:hover {
  background: var(--cutealism-yellow);
}

.cutealism-nav a.active {
  background: var(--cutealism-pink);
  color: var(--cutealism-text-inverted);
}

/* Brand in nav -- rounded cute style */
.cutealism-nav .brand {
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  padding: 0.5rem 1.5rem;
  color: var(--cutealism-pink);
  border-right: var(--cutealism-border-width) solid var(--cutealism-border);
}

Materials and Textures (Visual Metaphors for Web)

Physical / Cultural Reference Web Equivalent
Sticker-bombed laptop or phone case Absolutely positioned emoji/icon pseudo-elements with rotation transforms scattered across containers
Brutalist concrete surface Flat white or light gray backgrounds with thick black border outlines and hard box-shadows
Kawaii character goods (plushies, keychains) Rounded pill-shaped buttons, circular avatar images, soft border-radius on inner elements
Neon signage on raw brick Bright saturated color fills (background: #FF2D8A) contained within stark black-bordered frames
Purikura (Japanese photo booth) sticker sheets Grid-based card layouts with colorful backgrounds, decorative borders, and playful positioned elements
Handmade zine with cut-and-paste collage Asymmetric grid with overlapping elements, mixed typography, and varied alignment
Glitter and sparkle craft materials CSS @keyframes animations on pseudo-elements using sparkle Unicode characters, subtle rotation and scale
Washi tape strips Thin colored horizontal bars (6-8px) with black top and bottom borders used as section dividers
Blackboard with chalk drawings Dark-background variant: #1A1A1A background with white monospace text and bright colored accents
Candy packaging Cards with bright background fills (pink, yellow, lime) wrapped in thick black borders -- product-like containment

Imagery and Visual Content Guidelines

When creating or sourcing imagery for a Cute-alism styled site:

  • Favor simple cartoon illustrations and icons -- flat vector-style artwork with thick outlines, not photographic imagery
  • Use bold, limited color palettes in illustrations -- match the neon pink / candy yellow / lilac palette; avoid subtle tonal variation
  • Outline everything -- all illustrations and icons should have visible black outlines (2-3px) to match the border language
  • Circular or rounded image crops -- avatars and feature images cropped to circles or rounded rectangles with thick black borders
  • Sticker aesthetic for standalone graphics -- images should feel like they could be peeled off the page; slight white border + black outline + drop-shadow
  • Emoji and Unicode symbols as genuine graphics -- use emoji at large scale (3-6rem) as intentional visual elements, not afterthoughts
  • Avoid gradients in illustrations -- flat fills only, matching the no-gradient rule of the overall palette
  • High contrast required -- all imagery must read clearly against bright background colors; avoid pale or washed-out graphics
  • Photography, if used, gets the brutalist treatment -- thick black borders, hard box-shadow, slight rotation transform; treat photos as stickers stuck onto the layout
  • Animated GIFs and micro-animations welcome -- bouncing icons, wiggling stickers, and pulsing sparkles reinforce the playful energy
  • No realism, no subtlety -- every visual element should be immediately legible and deliberately placed; the aesthetic rewards boldness over refinement
Aesthetic Relationship to Cute-alism
Neubrutalism The closest structural relative; Cute-alism takes Neubrutalism's thick borders and hard shadows and injects kawaii color and decoration where Neubrutalism stays restrained
Cutecore Shares the kawaii visual vocabulary (pastels, rounded shapes, emoji, stickers) but without the brutalist structural framework; Cutecore is purely soft
Dopamine Design Overlapping color energy and joyful maximalism; Dopamine Design uses gradients and organic shapes where Cute-alism insists on flat fills and hard edges
Brutalism The raw structural ancestor; Cute-alism preserves brutalism's honesty of construction but rejects its austerity by filling every exposed surface with candy color
Kawaii The cultural and visual source for the "cute" half; Cute-alism channels kawaii through a brutalist filter, adding structure and edge to inherent softness
Y2K Shares the neon palette and playful energy; Y2K tends toward chrome, translucency, and futurism where Cute-alism stays flat and hand-crafted
Kidcore Overlapping childlike exuberance and bright primary colors; Kidcore is more nostalgic and toy-like, Cute-alism more design-conscious and intentionally contrasting

Implementation Notes

  • The tension is the point -- if every element is cute, the design becomes Cutecore; if every element is brutal, it becomes Neubrutalism. Cute-alism requires both forces in visible conflict on every screen. Always pair a rounded element with a sharp one, a neon fill with a black border, a chunky heading with monospace body text.
  • Black borders are non-negotiable -- removing the thick black outlines eliminates the brutalist half of the equation. Every container, card, button, and image must have a visible solid black border. Without them, the design collapses into generic colorful web design.
  • Hard shadows, never blurred -- the moment you add blur to a box-shadow, the brutalist edge softens into something else. Keep all shadows at zero blur with pixel-level offset precision. The shadow should look like a second copy of the shape, offset and black.
  • Flat colors only -- gradients belong to other aesthetics. Cute-alism uses solid, saturated fills. If you need visual variety, use different flat colors in adjacent areas, not gradients within a single area.
  • Monospace text grounds the design -- it is tempting to use rounded fonts everywhere because they are more visually appealing. Resist this. The monospace body text, labels, and metadata are what keep the design from becoming purely decorative. The mechanical quality of Courier is essential scaffolding.
  • Emoji must be intentional -- scatter too many and the design becomes cluttered; too few and the kawaii energy fades. Use emoji as you would use icons in a design system: consistently, purposefully, and with established meaning.
  • Performance matters for animations -- sparkle effects, wiggle animations, and hover transforms should use transform and opacity only (GPU-composited properties). Avoid animating box-shadow, border, or background-color for smooth performance.
  • Accessibility consideration -- the high contrast of black borders on bright colors is inherently accessible for visual boundaries, but ensure text color combinations meet WCAG AA contrast ratios. Neon pink text on white fails; neon pink text on black passes. Use the dark text color (#1A1A1A) on bright backgrounds.
  • Sticker elements need z-index management -- with many absolutely positioned decorative elements, establish a clear z-index hierarchy: base content at default, stickers at z-index: 10, modals or overlays above that.

Quick-Start: Minimal Cute-alism Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cute-alism Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Quicksand:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --cutealism-black: #000000;
      --cutealism-white: #FFFFFF;
      --cutealism-cream: #FFF8F0;
      --cutealism-pink: #FF2D8A;
      --cutealism-yellow: #FFE156;
      --cutealism-lilac: #C9A0FF;
      --cutealism-lime: #7AFF5E;
      --cutealism-magenta: #FF47B5;
      --cutealism-blue: #A0D4FF;
      --cutealism-blush: #FFD6E8;
      --cutealism-mint: #D4FFE7;
      --cutealism-banana: #FFF06B;
      --cutealism-lavender: #E8D6FF;
      --cutealism-text-primary: #1A1A1A;
      --cutealism-text-inverted: #FFFFFF;
      --cutealism-text-muted: #666666;
      --cutealism-border: #000000;
      --cutealism-border-width: 3px;
      --cutealism-shadow: 5px 5px 0px #000000;
      --cutealism-shadow-sm: 3px 3px 0px #000000;
      --cutealism-radius-soft: 12px;
      --cutealism-radius-round: 50px;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: var(--cutealism-cream);
      color: var(--cutealism-text-primary);
      font-family: 'Courier New', Courier, monospace;
      font-size: 16px;
      line-height: 1.7;
      min-height: 100vh;
    }

    /* -- Navigation -- */
    .nav {
      display: flex;
      align-items: center;
      border-bottom: var(--cutealism-border-width) solid var(--cutealism-border);
      background: var(--cutealism-white);
    }

    .nav .brand {
      font-family: 'Baloo 2', sans-serif;
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--cutealism-pink);
      padding: 0.6rem 1.5rem;
      border-right: var(--cutealism-border-width) solid var(--cutealism-border);
    }

    .nav a {
      padding: 0.8rem 1.2rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.8rem;
      font-weight: 700;
      text-decoration: none;
      color: var(--cutealism-text-primary);
      border-right: var(--cutealism-border-width) solid var(--cutealism-border);
      transition: background 0.1s ease;
    }

    .nav a:hover { background: var(--cutealism-yellow); }
    .nav a.active { background: var(--cutealism-pink); color: var(--cutealism-text-inverted); }

    /* -- Hero Section -- */
    .hero {
      background: var(--cutealism-pink);
      border-bottom: var(--cutealism-border-width) solid var(--cutealism-border);
      padding: 4rem 2rem;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .hero h1 {
      font-family: 'Baloo 2', sans-serif;
      font-size: clamp(2.2rem, 6vw, 4rem);
      font-weight: 800;
      color: var(--cutealism-white);
      line-height: 1.1;
      margin-bottom: 1rem;
    }

    .hero p {
      font-family: 'Space Mono', monospace;
      font-size: 0.9rem;
      color: var(--cutealism-text-inverted);
      max-width: 500px;
      margin: 0 auto 2rem;
    }

    /* Hero sticker decorations */
    .hero::before {
      content: '\2B50';
      position: absolute;
      top: 20px;
      left: 30px;
      font-size: 2.5rem;
      transform: rotate(-15deg);
    }

    .hero::after {
      content: '\1F496';
      position: absolute;
      bottom: 25px;
      right: 35px;
      font-size: 2.2rem;
      transform: rotate(10deg);
    }

    /* Hero button */
    .hero-btn {
      display: inline-block;
      padding: 0.8rem 2.5rem;
      font-family: 'Quicksand', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--cutealism-text-primary);
      background: var(--cutealism-yellow);
      border: var(--cutealism-border-width) solid var(--cutealism-border);
      border-radius: var(--cutealism-radius-round);
      box-shadow: var(--cutealism-shadow-sm);
      cursor: pointer;
      text-decoration: none;
      transition: transform 0.1s ease, box-shadow 0.1s ease;
    }

    .hero-btn:hover {
      transform: translate(-1px, -1px);
      box-shadow: 4px 4px 0px var(--cutealism-black);
    }

    .hero-btn:active {
      transform: translate(2px, 2px);
      box-shadow: 0px 0px 0px var(--cutealism-black);
    }

    /* -- Main Content Grid -- */
    .main {
      max-width: 1000px;
      margin: 2rem auto;
      padding: 0 1.5rem;
    }

    /* Asymmetric two-column grid */
    .grid-asym {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    /* -- Cards -- */
    .card {
      background: var(--cutealism-white);
      border: var(--cutealism-border-width) solid var(--cutealism-border);
      box-shadow: var(--cutealism-shadow);
      padding: 2rem;
      position: relative;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .card:hover {
      transform: translate(-2px, -2px);
      box-shadow: 7px 7px 0px var(--cutealism-black);
    }

    .card h2 {
      font-family: 'Baloo 2', sans-serif;
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--cutealism-pink);
      margin-bottom: 0.5rem;
      line-height: 1.2;
    }

    .card h3 {
      font-family: 'Quicksand', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--cutealism-lilac);
      margin-bottom: 0.5rem;
    }

    .card p {
      margin-bottom: 0.8rem;
      color: var(--cutealism-text-primary);
    }

    .card .label {
      font-family: 'Space Mono', monospace;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--cutealism-text-muted);
      margin-bottom: 0.5rem;
    }

    /* Colored card variants */
    .card--pink { background: var(--cutealism-blush); }
    .card--yellow { background: var(--cutealism-banana); }
    .card--lilac { background: var(--cutealism-lavender); }
    .card--mint { background: var(--cutealism-mint); }

    /* Sticker on card */
    .card--sticker::before {
      content: attr(data-sticker);
      position: absolute;
      top: -10px;
      right: -8px;
      font-size: 1.8rem;
      transform: rotate(12deg);
      z-index: 10;
      filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.2));
    }

    /* -- Tags -- */
    .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

    .tag {
      display: inline-block;
      padding: 0.15rem 0.7rem;
      font-family: 'Space Mono', monospace;
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      border: 2px solid var(--cutealism-border);
      border-radius: var(--cutealism-radius-round);
      background: var(--cutealism-yellow);
      box-shadow: 2px 2px 0px var(--cutealism-black);
    }

    .tag--pink { background: var(--cutealism-pink); color: var(--cutealism-text-inverted); }
    .tag--lilac { background: var(--cutealism-lilac); }
    .tag--lime { background: var(--cutealism-lime); }
    .tag--blue { background: var(--cutealism-blue); }

    /* -- Sidebar card with cute interior -- */
    .sidebar-card {
      background: var(--cutealism-white);
      border: var(--cutealism-border-width) solid var(--cutealism-border);
      box-shadow: var(--cutealism-shadow);
      padding: 1.5rem;
      text-align: center;
    }

    .sidebar-card .emoji-icon {
      font-size: 3rem;
      display: block;
      margin-bottom: 0.5rem;
    }

    .sidebar-card h3 {
      font-family: 'Baloo 2', sans-serif;
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--cutealism-text-primary);
      margin-bottom: 0.5rem;
    }

    .sidebar-card p {
      font-size: 0.85rem;
      color: var(--cutealism-text-muted);
    }

    .sidebar-card .btn-small {
      display: inline-block;
      margin-top: 1rem;
      padding: 0.4rem 1.2rem;
      font-family: 'Quicksand', sans-serif;
      font-size: 0.85rem;
      font-weight: 700;
      background: var(--cutealism-lime);
      border: 2px solid var(--cutealism-border);
      border-radius: var(--cutealism-radius-round);
      box-shadow: 2px 2px 0px var(--cutealism-black);
      text-decoration: none;
      color: var(--cutealism-text-primary);
      cursor: pointer;
    }

    /* -- Emoji Divider -- */
    .divider {
      text-align: center;
      font-size: 1.8rem;
      padding: 1.2rem 0;
      letter-spacing: 1.5rem;
      border-top: var(--cutealism-border-width) solid var(--cutealism-border);
      border-bottom: var(--cutealism-border-width) solid var(--cutealism-border);
      background: var(--cutealism-white);
      margin-bottom: 2rem;
    }

    /* -- Reverse grid for second section -- */
    .grid-asym-reverse {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    /* -- Color band section -- */
    .color-band {
      background: var(--cutealism-banana);
      border-top: var(--cutealism-border-width) solid var(--cutealism-border);
      border-bottom: var(--cutealism-border-width) solid var(--cutealism-border);
      padding: 3rem 2rem;
      text-align: center;
      margin: 2rem 0;
      position: relative;
    }

    .color-band h2 {
      font-family: 'Baloo 2', sans-serif;
      font-size: clamp(1.5rem, 4vw, 2.5rem);
      font-weight: 800;
      color: var(--cutealism-text-primary);
      margin-bottom: 0.5rem;
    }

    .color-band p {
      font-family: 'Space Mono', monospace;
      font-size: 0.85rem;
      max-width: 600px;
      margin: 0 auto;
    }

    .color-band::before {
      content: '\2728';
      position: absolute;
      top: 15px;
      right: 25px;
      font-size: 2rem;
      transform: rotate(8deg);
    }

    .color-band::after {
      content: '\1F31F';
      position: absolute;
      bottom: 15px;
      left: 25px;
      font-size: 1.8rem;
      transform: rotate(-12deg);
    }

    /* -- Three-column feature grid -- */
    .grid-three {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .feature-card {
      background: var(--cutealism-white);
      border: var(--cutealism-border-width) solid var(--cutealism-border);
      box-shadow: var(--cutealism-shadow-sm);
      padding: 1.5rem;
      text-align: center;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .feature-card:hover {
      transform: translate(-2px, -2px);
      box-shadow: 5px 5px 0px var(--cutealism-black);
    }

    .feature-card .icon {
      font-size: 2.5rem;
      margin-bottom: 0.8rem;
      display: block;
    }

    .feature-card h3 {
      font-family: 'Baloo 2', sans-serif;
      font-size: 1.1rem;
      font-weight: 800;
      margin-bottom: 0.3rem;
    }

    .feature-card p {
      font-size: 0.85rem;
      color: var(--cutealism-text-muted);
    }

    .feature-card:nth-child(1) { background: var(--cutealism-blush); }
    .feature-card:nth-child(2) { background: var(--cutealism-mint); }
    .feature-card:nth-child(3) { background: var(--cutealism-lavender); }

    /* -- Footer -- */
    .footer {
      border-top: var(--cutealism-border-width) solid var(--cutealism-border);
      background: var(--cutealism-black);
      color: var(--cutealism-text-inverted);
      padding: 2rem;
      text-align: center;
      font-family: 'Space Mono', monospace;
      font-size: 0.8rem;
      margin-top: 2rem;
    }

    .footer span {
      color: var(--cutealism-pink);
    }

    /* -- Sparkle animation -- */
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(3deg); }
      75% { transform: rotate(-3deg); }
    }

    @keyframes sparkle {
      0%, 100% { opacity: 0.4; transform: scale(0.8); }
      50% { opacity: 1; transform: scale(1.1); }
    }

    /* -- Responsive -- */
    @media (max-width: 768px) {
      .grid-asym,
      .grid-asym-reverse,
      .grid-three {
        grid-template-columns: 1fr;
      }

      .nav {
        flex-wrap: wrap;
      }

      .hero { padding: 2.5rem 1.5rem; }
      .main { padding: 0 1rem; }
    }
  </style>
</head>
<body>
  <!-- Navigation -->
  <nav class="nav">
    <div class="brand">Cute-alism</div>
    <a href="#" class="active">Home</a>
    <a href="#">Projects</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

  <!-- Hero Section -->
  <section class="hero">
    <h1>Hard Borders, Soft Hearts</h1>
    <p>WHERE KAWAII MEETS BRUTALISM // CUTE THINGS IN ROUGH CONTAINERS</p>
    <a href="#" class="hero-btn">Explore Now</a>
  </section>

  <!-- Main Content -->
  <div class="main">

    <!-- Asymmetric Grid: Wide Left, Narrow Right -->
    <div class="grid-asym">
      <div class="card card--sticker" data-sticker="&#x2B50;">
        <div class="label">// FEATURED PROJECT</div>
        <h2>Sticker Bomb Dashboard</h2>
        <p>A monitoring interface that proves data visualization can be adorable without losing clarity. Chunky rounded charts sit inside sharp-cornered panels. Every metric has a mood.</p>
        <div class="tags">
          <span class="tag tag--pink">DESIGN</span>
          <span class="tag">UI/UX</span>
          <span class="tag tag--lilac">KAWAII</span>
          <span class="tag tag--lime">NEW</span>
        </div>
      </div>
      <div class="sidebar-card">
        <span class="emoji-icon">&#x1F31F;</span>
        <h3>Quick Stats</h3>
        <p>47 designs<br>12 color combos<br>infinite sparkle</p>
        <a href="#" class="btn-small">View All</a>
      </div>
    </div>

    <!-- Emoji Divider -->
    <div class="divider">&#x2728; &#x1F496; &#x2B50; &#x1F31F; &#x2728;</div>

    <!-- Reverse Asymmetric Grid: Narrow Left, Wide Right -->
    <div class="grid-asym-reverse">
      <div class="card card--yellow">
        <div class="label">// STATUS</div>
        <h3>System Check</h3>
        <p style="font-family: 'Space Mono', monospace; font-size: 0.85rem;">
          BORDERS: THICK<br>
          SHADOWS: HARD<br>
          CORNERS: MIXED<br>
          VIBES: IMMACULATE
        </p>
      </div>
      <div class="card card--sticker" data-sticker="&#x1F496;">
        <div class="label">// LATEST UPDATE</div>
        <h2>Concrete Candy</h2>
        <p>New component library that pairs brutalist grid systems with kawaii micro-interactions. Every hover state sparks joy. Every click lands with a satisfying thunk.</p>
        <div class="tags">
          <span class="tag tag--blue">COMPONENTS</span>
          <span class="tag tag--pink">RELEASED</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Full-Width Color Band -->
  <section class="color-band">
    <h2>Build Something Bold and Cute</h2>
    <p>THICK BORDERS. HARD SHADOWS. NEON FILLS. ROUND BUTTONS. THE COLLISION IS THE AESTHETIC.</p>
  </section>

  <!-- Feature Cards -->
  <div class="main">
    <div class="grid-three">
      <div class="feature-card">
        <span class="icon">&#x1F338;</span>
        <h3>Soft Inside</h3>
        <p>Rounded buttons, pill tags, and circular icons live happily within the hard grid.</p>
      </div>
      <div class="feature-card">
        <span class="icon">&#x1F9F1;</span>
        <h3>Hard Outside</h3>
        <p>Thick black borders and zero-blur shadows form the brutalist skeleton.</p>
      </div>
      <div class="feature-card">
        <span class="icon">&#x2728;</span>
        <h3>Sparkle Always</h3>
        <p>Emoji decorations and candy colors turn raw structure into celebration.</p>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer class="footer">
    <span>CUTE-ALISM</span> // KAWAII x BRUTALISM // HARD BORDERS SOFT HEARTS
  </footer>
</body>
</html>
← Retour aux designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Tous droits réservés.

Designs issus de chrislemke/website_designs, sous licence MIT.