Neo-Brutalism UI Guide et outils CSS

Brutalisme réinterprété avec une esthétique plus pop, digitale et systémique.

Massif, contrasté, géométrique, mais avec une intention graphique plus contrôlée et expressive.

Fonts

  • 1. Space Grotesk
  • 2. Inter
  • 3. Manrope
  • 4. Barlow Condensed
  • 5. Abril Fatface
  • 6. IBM Plex Sans
  • 7. Archivo Black
  • 8. Work Sans
  • 9. JetBrains Mono

Palettes

#E9027B

#FB5600

#FDD201

#8DE902

#4EB518

#5294FF

#00AAE8

#DCEBFE

#151009

#FCFAF8

UI Assets

Border

Bouton
Bouton 
border: 3px solid #000;
box-shadow: 4px 4px 0px #000;

Scrollbar

body {
    --sb-track-color: #151009;
    --sb-thumb-color: #8DE902;
    --sb-size: 16px;
}

body::-webkit-scrollbar {
    width: var(--sb-size);
}

body::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 1px;
}

body::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 1px;
}

Background

background-color: #DCEBFE;
background-size: 70px 70px;
background-image: 
    linear-gradient(90deg, #80808033 1px, #0000 0),
    linear-gradient(#80808033 1px, #0000 0);

Shadow Hover

Hover me
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0px #000;
border: 3px solid #000;

:hover {
    transform: translate(0, 0);
    box-shadow: 0px 0px 1px #000,
    0 8px 22px 0 rgba(31, 38, 135, 0.1);
}

Shadow Blur

background: rgba(220, 235, 254, 0.1);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
border-radius: 16px;
border: 0px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 22px 0 rgba(31, 38, 135, 0.1);

Textured Hover

Hover me
background-color: #4EB518;
background-image: 
    radial-gradient(#8DE902 1px, transparent 0);
background-size: 10px 10px;
border-radius: 8px;
transition: all 0.15s ease;

:hover {
    transform: translate(-4px, -4px);
    box-shadow: 6px 6px 0px #000;
}

Outline

outline: 3px solid #00C2FF;
outline-offset: 3px;
background-color: #00C2FF;
border: 4px solid #000;
border-radius: 4px;

Text Shadow

Text shadow
text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.7);
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;

Stroke Text

Stroke text
color: transparent;
-webkit-text-stroke: 2px #000;
font-weight: 800;
letter-spacing: 2px;

Underline

UNDERLINE
text-decoration: none;
border-bottom: 4px solid #000;
padding-bottom: 2px;
box-shadow: 0px 3px 0px #FF6811;

Offset Border

border: 3px solid #000;
box-shadow: 6px 6px 0px #FF6811;
background-color: #FCFAF8;

Clear grid

background-image:
  linear-gradient(#000 2px, transparent 2px),
  linear-gradient(90deg, #000 2px, transparent 2px);
background-size: 40px 40px;
background-color: #FFF;

Brutalist Rotation

transform: rotate(-2deg);
border: 3px solid #000;
box-shadow: 6px 6px 0px #000;

Stabilo

STABILO
background: linear-gradient(transparent 60%, #FF6811 60%);
font-weight: 700;

Offset Shadow

Offset Shadow
box-shadow: 8px 8px 0px #000;
border: 3px solid #000;

Typographic

Typographic
padding: 20px;
border: 4px solid #000;
outline: 4px solid #FF6811;
outline-offset: -10px;

Industrial Label

Industrial
background-color: transparent;
border: 3px solid #000;
border-right: none;
padding: 4px 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 2rem;
line-height: 1;

Animation Assets

Wiggle

Hover me
@keyframes wiggle {
  0% { transform: translate(0,0) rotate(0deg); }
  20% { transform: translate(2px,-2px) rotate(1deg); }
  40% { transform: translate(-2px,2px) rotate(-1deg); }
  60% { transform: translate(1px,-1px) rotate(0.5deg); }
  80% { transform: translate(-1px,1px) rotate(-0.5deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

animation: wiggle 0.25s ease-in-out;

Jump

Hover me
transition: transform 0.1s ease;
transform: translateY(0);

:hover {
  transform: translateY(-6px);
}

Snap

Clic me
transition: transform 0.05s linear;

:active {
  transform: translate(4px,4px);
}

Shake

Hover me
@keyframes brutal-shake {
  0%, 100% { transform: translate(0,0); }
  25% { transform: translate(4px,0); }
  50% { transform: translate(-4px,0); }
  75% { transform: translate(4px,0); }
}

animation: brutal-shake 0.15s linear;

Blink

Hover me
@keyframes hard-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

animation: hard-blink 0.6s steps(2, start) infinite;

Glitch

Hover me
@keyframes glitch {
  0% { clip-path: inset(0 0 0 0); }
  20% { clip-path: inset(10% 0 0 0); }
  40% { clip-path: inset(0 0 20% 0); }
  60% { clip-path: inset(5% 0 10% 0); }
  80% { clip-path: inset(15% 0 5% 0); }
  100% { clip-path: inset(0 0 0 0); }
}

animation: glitch 0.4s steps(2, end);

Cursor

Hover me
cursor: 
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.svg), auto;

Crack

Hover me
transition: all 0.1s cubic-bezier(.2,1.4,.4,1);

:hover {
    opacity: 0.8;
    transform: rotate(1deg) translate(4px,4px);
}

Press

Clic me
transition: transform 0.05s linear;

:active {
  transform: scale(0.92) translate(2px,2px);
}

Neon

Hover me
@keyframes neon {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0; }
}

animation: neon 1.2s infinite;

Créatif Assets

Mechanical

Hover me
@keyframes mech-step {
  0% { transform: translate(0,0); }
  33% { transform: translate(6px,0); }
  66% { transform: translate(6px,6px); }
  100% { transform: translate(0,6px); }
}
animation: mech-step 0.25s steps(2, end);

Overprint

Hover me
background-image: repeating-linear-gradient(
  to bottom,
  rgba(0,0,0,0.1) 0px,
  rgba(0,0,0,0.1) 1px,
  transparent 1px,
  transparent 3px
);

Inspirations

  • Image webdesign Néo Brutaliste de Dribble
  • Image webdesign espace FAQ
  • Image landing page Starbucks de Dribble
  • Image webdesign coloré au style 'fait main'
  • Image webdesign épuré et coloré
  • Image hero section massive
  • Image flyers / poster