skills.rest
Javeria-Javaid
Javeria-JavaidCOMMUNITY
Explore all skills by this author →
GitHub

brutalism

Implements brutalist UI styling with raw borders, monospace fonts, and default browser aesthetics.

3|Updated Jul 17, 2026
Search Tags:#css#styling#web design#brutalism#ui design#swiftui#flutter
One-click install
npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill brutalism-javeria-javaid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brutalism
Source: https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore/tree/main/Users/Javeria/Desktop/Alkhidmat_foundation_lahore/.agents/skills/design-it/brutalism
Command: npx skills add https://github.com/Javeria-Javaid/Alkhidmat_foundation_lahore --skill brutalism-javeria-javaid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing a brutalist interface requires deliberately rejecting modern polish—gradients, shadows, rounded corners—which is hard to do consistently across web and mobile frameworks without a concrete reference. ## Core Features & Use Cases - Visual DNA Reference: Defines the brutalist palette (pure #0000FF links, #FF0000 accents, stark white or #C0C0C0 backgrounds), monospace typography, and exposed structural borders. - Cross-Platform Code Examples: Provides ready-to-adapt implementations in CSS, SwiftUI, Flutter, React Native, and Jetpack Compose. - Use Case: A developer building a portfolio site with an intentionally raw, anti-design aesthetic can copy the CSS patterns for outset buttons, dashed section dividers, and system-blue underlined links directly into their project. ## Quick Start Apply the brutalism style guide to build a landing page with exposed black borders, monospace fonts, and default-looking buttons.

Frequently Asked Questions about brutalism

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a brutalist website design with CSS?▼

Use 1-2px solid black borders around containers, monospace or default system fonts, and pure hex colors like #0000FF for links and #FFFFFF backgrounds. Avoid border-radius, box-shadows, and transitions; elements should render instantly with no animation.

How to build brutalist UI in Flutter or React Native?▼

Build layouts from raw Containers or Views with Border.all in black and plain Text widgets. Avoid ElevatedButton, Card, AppBar, and component libraries like react-native-paper; use underlined blue text for interactive elements instead.

What colors and fonts are used in brutalist design?▼

Brutalism uses high-contrast clashing colors: pure #0000FF blue links, #FF0000 red accents, on stark white or #C0C0C0 grey backgrounds. Typography relies on Courier New, Times New Roman, or default system sans-serifs with no web fonts.

Can I use Material components in a brutalist Jetpack Compose app?▼

No, Material composables like Button and Card should be avoided because they impose themed styling. Use BasicText instead of Text to bypass theme defaults, and build structural lines with Box and a black background modifier.

What are the limitations of brutalist UI styling?▼

Brutalism is a styling reference only and does not replace accessibility testing or expert design review. Contrast ratios and responsive behaviors must be verified separately, since the anti-aesthetic approach can conflict with usability standards.

Related Skills

Explore More Design & Creative Skills→
tDaliletDalile

frontend-design

Generate frontend interfaces with design context and accessibility standards.

Community
Intermediate
OlatisunkanmiOlatisunkanmi
8

i-adapt

Guide responsive design adaptation across mobile, tablet, and desktop breakpoints.

Community
Intermediate
lexicalninjalexicalninja
2

accessibility-design-checker

Identify accessibility issues in UI designs, wireframes, and prototypes.

Community
Intermediate
mohamed-g-shoaibmohamed-g-shoaib

make-interfaces-feel-better

Apply UI polish principles for typography, motion, and design tokens.

Community
Advanced