Home / Bold and Raw / Anti Design
Anti Design CSS Template, Free with Live Demo
Free anti design website template for creative brands. Clashing fonts, rotated blocks, a moving ticker and rule breaking layout. Live demo and download. The example is Static Bloom, an indie record label.
What is anti design?
Anti design breaks the rules on purpose. Fonts clash, blocks sit at odd angles, and nothing lines up the way a normal template would. It feels like a flyer taped to a wall.
It still needs care underneath. On phones the blocks fall back into a simple column, links stay easy to find, and the ticker stops for people who prefer less motion.
Good for
- Record labels and bands
- Fashion and streetwear
- Art collectives and galleries
- Festivals and nightlife
What you get in this template
- Three clashing fonts used together
- Blocks placed and rotated freely
- Scrolling ticker that stops with reduced motion
- Round rotated sticker badge
- Stacks into one clean column on phones
The key CSS
This is the part that makes the anti design look work. Copy it into your own project.
.blk { position: absolute; border: 2px solid #0a0a0a; padding: 18px 20px; }
.a { top: 10px; left: 4%; transform: rotate(-3deg); background: #c6ff00; }
.d { transform: rotate(-6deg); background: #ff2e88; }
@media (max-width: 820px) {
.blk { position: static; width: auto; }
}How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
What is anti design?
It is a style that rejects clean, balanced layouts. Designers use clashing fonts, overlaps, odd angles and raw colors to make something that feels personal and hard to ignore.
Is anti design bad for usability?
It can be, so keep the basics working: readable text, obvious links and a simple layout on phones. This template does all three.
Who should use anti design?
Brands with a strong creative identity, like music, fashion and art. For banks or clinics it would send the wrong message.
More Bold and Raw designs
011. Neo Brutalism
Stackd, an invoicing tool for freelancers
012. Raw Brutalist
KXLR, a community radio station
013. Swiss Grid
Grid Days, a design conference in Zurich
014. Bold Type Hero
Pace, a running club
016. Y2K Revival
Starlite, a mixtape playlist site
017. Memphis
Confetti Co., a party planner
018. Retro Pixel
Frog Knight, an indie game launch page
019. Newspaper Editorial
The Harbor Gazette, a local news site