📦 deps(thirdparty): update snapshots
This commit is contained in:
ci[bot]
@@ -0,0 +1,270 @@
|
||||
---
|
||||
name: brutalism
|
||||
description: Web and App implementation guide for Brutalism. Trigger when user wants a raw appearance, intentionally unfinished look, and rejection of standard design conventions.
|
||||
date_added: "2026-06-17"
|
||||
risk: safe
|
||||
source: self
|
||||
source_type: self
|
||||
---
|
||||
|
||||
# Brutalism
|
||||
|
||||
> "Raw materials exposed. An intentional rejection of polish, gradients, and soft shadows."
|
||||
|
||||
|
||||
## When to Use
|
||||
Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the `design-it` skill and is not meant to be triggered directly.
|
||||
|
||||
## Core Principles
|
||||
1. **Unstyled Components**: Default browser styling for buttons, inputs, and links is celebrated.
|
||||
2. **Exposed Structure**: Grid lines, tables with visible borders, and stark boundaries are used instead of whitespace to separate content.
|
||||
3. **Anti-Aesthetic**: Intentional awkwardness. Elements might slightly overlap in a way that feels broken, or use system default fonts.
|
||||
|
||||
## Visual DNA
|
||||
- **Colors**: High contrast, often clashing. Pure `#0000FF` blue for links, `#FF0000` red for accents, on stark white or `#C0C0C0` grey backgrounds. **Industrial Chic** palette fits best.
|
||||
- **Typography**: Courier New, Times New Roman, Comic Sans, or default sans-serifs. No web fonts.
|
||||
- **Visuals**: Dithered images, pixelated graphics, or heavily compressed jpegs.
|
||||
|
||||
## Web Implementation
|
||||
- Use standard HTML tags without overriding their default appearance whenever possible.
|
||||
- **CSS Example**:
|
||||
```css
|
||||
body {
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* Expose the structure */
|
||||
.brutalist-container {
|
||||
border: 1px solid #000;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.brutalist-section {
|
||||
border-bottom: 2px dashed #000;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Default-looking button but massive */
|
||||
.brutalist-btn {
|
||||
background-color: #c0c0c0;
|
||||
border: 2px outset #ffffff;
|
||||
border-right-color: #000000;
|
||||
border-bottom-color: #000000;
|
||||
color: #000000;
|
||||
font-family: sans-serif;
|
||||
font-size: 24px;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.brutalist-btn:active {
|
||||
border-style: inset;
|
||||
}
|
||||
|
||||
/* System link blue */
|
||||
a {
|
||||
color: #0000FF;
|
||||
text-decoration: underline;
|
||||
}
|
||||
```
|
||||
|
||||
## App Implementation
|
||||
|
||||
### SwiftUI
|
||||
```swift
|
||||
struct BrutalistView: View {
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: 0) {
|
||||
Text("BRUTALISM")
|
||||
.font(.custom("Courier New", size: 32))
|
||||
.foregroundColor(.black)
|
||||
.padding(10)
|
||||
.border(Color.black, width: 2)
|
||||
|
||||
Divider().background(Color.black).padding(.vertical, 20)
|
||||
|
||||
Button(action: {}) {
|
||||
Text("CLICK_HERE")
|
||||
.font(.custom("Courier New", size: 24))
|
||||
.foregroundColor(.blue)
|
||||
.underline()
|
||||
}
|
||||
.padding(10)
|
||||
|
||||
// Raw structural container
|
||||
VStack(alignment: .leading) {
|
||||
Text("System Status: RAW").font(.custom("Courier New", size: 14))
|
||||
}
|
||||
.padding()
|
||||
.border(Color.black, width: 1)
|
||||
}
|
||||
.padding()
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
|
||||
.background(Color.white)
|
||||
}
|
||||
}
|
||||
```
|
||||
- Avoid all native `ButtonStyle` components. Use `Text` with `.underline()` mapped to system blue.
|
||||
- Use `.border(Color.black, width: 1)` instead of backgrounds or shadows.
|
||||
- Force monospace fonts like Courier New or Menlo.
|
||||
|
||||
### Flutter
|
||||
```dart
|
||||
class BrutalistScreen extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// DO NOT use MaterialApp theme or Scaffold if possible,
|
||||
// or strip them down completely.
|
||||
return Scaffold(
|
||||
backgroundColor: Colors.white,
|
||||
body: SafeArea(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.all(8),
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(color: Colors.black, width: 2),
|
||||
),
|
||||
child: const Text(
|
||||
'BRUTALISM',
|
||||
style: TextStyle(
|
||||
fontFamily: 'Courier',
|
||||
fontSize: 32,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
),
|
||||
const Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: 20),
|
||||
child: Divider(color: Colors.black, thickness: 2),
|
||||
),
|
||||
GestureDetector(
|
||||
onTap: () {},
|
||||
child: const Text(
|
||||
'CLICK_HERE',
|
||||
style: TextStyle(
|
||||
fontFamily: 'Courier',
|
||||
fontSize: 24,
|
||||
color: Colors.blue,
|
||||
decoration: TextDecoration.underline,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
- Avoid `ElevatedButton`, `Card`, or `AppBar`.
|
||||
- Build UI out of raw `Container`s with `Border.all(color: Colors.black)` and `Text` widgets.
|
||||
- Use `TextDecoration.underline` to indicate interactivity.
|
||||
|
||||
### React Native
|
||||
```jsx
|
||||
const BrutalistScreen = () => {
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#FFFFFF', padding: 16 }}>
|
||||
<View style={{
|
||||
borderWidth: 2,
|
||||
borderColor: '#000000',
|
||||
padding: 10,
|
||||
alignSelf: 'flex-start'
|
||||
}}>
|
||||
<Text style={{ fontFamily: 'monospace', fontSize: 32, color: '#000' }}>
|
||||
BRUTALISM
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={{ height: 2, backgroundColor: '#000', marginVertical: 20 }} />
|
||||
|
||||
<TouchableOpacity activeOpacity={1}>
|
||||
<Text style={{
|
||||
fontFamily: 'monospace',
|
||||
fontSize: 24,
|
||||
color: '#0000FF',
|
||||
textDecorationLine: 'underline'
|
||||
}}>
|
||||
CLICK_HERE
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<View style={{
|
||||
borderWidth: 1,
|
||||
borderColor: '#000',
|
||||
padding: 16,
|
||||
marginTop: 40
|
||||
}}>
|
||||
<Text style={{ fontFamily: 'monospace', color: '#000' }}>
|
||||
System Status: RAW
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
```
|
||||
- Strip away all native feel. Do not use `react-native-elements` or `react-native-paper`.
|
||||
- Set `activeOpacity={1}` on `TouchableOpacity` so there is no smooth fade — it should just click instantly.
|
||||
- Use pure hex colors: `#FFFFFF`, `#000000`, `#0000FF`.
|
||||
|
||||
### Jetpack Compose
|
||||
```kotlin
|
||||
@Composable
|
||||
fun BrutalistScreen() {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.background(Color.White)
|
||||
.padding(16.dp)
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.border(2.dp, Color.Black)
|
||||
.padding(10.dp)
|
||||
) {
|
||||
BasicText(
|
||||
text = "BRUTALISM",
|
||||
style = TextStyle(
|
||||
fontFamily = FontFamily.Monospace,
|
||||
fontSize = 32.sp,
|
||||
color = Color.Black
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
Spacer(Modifier.height(20.dp))
|
||||
Box(modifier = Modifier.fillMaxWidth().height(2.dp).background(Color.Black))
|
||||
Spacer(Modifier.height(20.dp))
|
||||
|
||||
BasicText(
|
||||
text = "CLICK_HERE",
|
||||
modifier = Modifier.clickable { },
|
||||
style = TextStyle(
|
||||
fontFamily = FontFamily.Monospace,
|
||||
fontSize = 24.sp,
|
||||
color = Color.Blue,
|
||||
textDecoration = TextDecoration.Underline
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
```
|
||||
- Use `BasicText` instead of `Text` to bypass Material theme defaults.
|
||||
- Build structural lines using `Box` with `.background(Color.Black)`.
|
||||
- **Do not** use `Button` or `Card` or any Material composables. Raw layouts only.
|
||||
|
||||
## Do's and Don'ts
|
||||
- **DO**: Use harsh, high-contrast borders (1px solid black) around everything.
|
||||
- **DON'T**: Use border-radius, drop shadows, or smooth transitions. If it animates, it should pop instantly (0s transition).
|
||||
|
||||
## Limitations
|
||||
- This is a styling reference and does not replace environment-specific validation, accessibility testing, or expert review.
|
||||
- Ensure appropriate contrast ratios and responsive behaviors are verified separately.
|
||||
Reference in New Issue
Block a user