csh
/
playbook
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
playbook/antigravity-awesome-skills/skills/design-it/retro-design/SKILL.md

284 lines
9.7 KiB
Markdown
Raw Blame History

---
name: retro-design
description: Web and App implementation guide for Retro Design (60s-80s). Trigger when user wants vintage aesthetics, warm muted colors, and nostalgic layouts.
date_added: "2026-06-17"
risk: safe
source: self
source_type: self
---
# Retro Design
> "A warm, analog feeling. Nostalgia through muted tones, grain, and classic typography."
## 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. **Warm, Analog Color Palettes**: Colors look faded by the sun or printed on aged paper.
2. **Texture and Noise**: A slight grain overlay to simulate film or old print media.
3. **Classic Typography Pairings**: Heavy, groovy display fonts paired with typewriter or classic serif body copy.
## Visual DNA
- **Colors**: **Monochromatic Brown** or warm, faded palettes (mustard yellow, burnt orange, sage green, off-white).
- **Typography**: Display fonts like `Cooper Black`, `Garamond`, or `Courier`.
- **Styling**: Badges, stamps, wavy borders, and halftone patterns.
## Web Implementation
- Use CSS filters and background noise images to create texture.
- **CSS Example**:
```css
body {
background-color: #F4E8D1; /* Aged paper */
color: #3E2723; /* Deep brown ink */
font-family: 'Georgia', serif;
/* Apply a subtle noise overlay using a pseudo-element or background image */
background-image: url('noise-texture.png');
background-blend-mode: multiply;
}
.retro-header {
font-family: 'Cooper Black', serif;
font-size: 4rem;
color: #D35400; /* Burnt orange */
text-shadow: 2px 2px 0px #F1C40F; /* Mustard yellow drop shadow */
letter-spacing: -1px;
}
.retro-card {
background-color: #FFF3E0;
border: 2px solid #3E2723;
border-radius: 12px;
padding: 24px;
/* Vintage offset shadow */
box-shadow: 8px 8px 0px #795548;
}
.retro-badge {
display: inline-block;
background-color: #E74C3C;
color: #F4E8D1;
font-family: monospace;
font-weight: bold;
padding: 8px 16px;
border-radius: 50%; /* Make it look like a sticker */
transform: rotate(-10deg);
}
```
## App Implementation
### SwiftUI
```swift
struct RetroCard: View {
let paperColor = Color(red: 0.96, green: 0.91, blue: 0.82) // #F4E8D1
let inkColor = Color(red: 0.24, green: 0.15, blue: 0.14) // #3E2723
var body: some View {
ZStack {
paperColor.ignoresSafeArea()
// Optional: Noise texture
Image("film_grain")
.resizable()
.blendMode(.multiply)
.opacity(0.3)
.ignoresSafeArea()
VStack(alignment: .leading, spacing: 24) {
Text("RETRO DESIGN")
.font(.custom("Cooper Black", size: 36))
.foregroundColor(Color(red: 0.83, green: 0.33, blue: 0.0)) // #D35400
.shadow(color: Color(red: 0.95, green: 0.77, blue: 0.06), radius: 0, x: 2, y: 2)
Text("Analog warmth and classic typography.")
.font(.custom("Georgia", size: 18))
.foregroundColor(inkColor)
}
.padding(32)
.background(Color(red: 1.0, green: 0.95, blue: 0.88))
.cornerRadius(12)
.overlay(
RoundedRectangle(cornerRadius: 12)
.stroke(inkColor, lineWidth: 2)
)
// Vintage solid offset shadow
.shadow(color: Color(red: 0.47, green: 0.33, blue: 0.28), radius: 0, x: 8, y: 8)
}
}
}
```
- A grain texture image can be overlaid using `.blendMode(.multiply)`. Be aware of memory usage with full-screen textures.
- Use `.shadow(radius: 0)` to create the hard offset shadows typical of 70s print media.
- Custom fonts like Cooper Black are absolutely required.
### Flutter
```dart
class RetroCard extends StatelessWidget {
final Color paperColor = const Color(0xFFF4E8D1);
final Color inkColor = const Color(0xFF3E2723);
@override
Widget build(BuildContext context) {
return Container(
color: paperColor,
child: Stack(
fit: StackFit.expand,
children: [
// Noise texture
Opacity(
opacity: 0.3,
child: Image.asset('assets/film_grain.png',
fit: BoxFit.cover,
colorBlendMode: BlendMode.multiply),
),
Center(
child: Container(
padding: const EdgeInsets.all(32),
decoration: BoxDecoration(
color: const Color(0xFFFFF3E0),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: inkColor, width: 2),
boxShadow: const [
BoxShadow(
color: Color(0xFF795548),
blurRadius: 0, // Hard offset shadow
offset: Offset(8, 8),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('RETRO DESIGN',
style: TextStyle(
fontFamily: 'Cooper',
fontSize: 36,
color: Color(0xFFD35400),
shadows: [Shadow(color: Color(0xFFF1C40F), offset: Offset(2, 2))],
)),
const SizedBox(height: 24),
Text('Analog warmth and classic typography.',
style: TextStyle(fontFamily: 'Georgia', fontSize: 18, color: inkColor)),
],
),
),
),
],
),
);
}
}
```
- Wrap backgrounds in a `Stack` to place a semi-transparent film grain asset over the solid color.
- Drop shadows for text and containers must have `blurRadius: 0` to emulate offset misregistered ink prints.
### React Native
```jsx
const RetroCard = () => {
return (
<ImageBackground
source={require('./film_grain.png')}
style={{ flex: 1, backgroundColor: '#F4E8D1', padding: 24, justifyContent: 'center' }}
imageStyle={{ opacity: 0.3, tintColor: '#3E2723' }}
>
<View style={{
backgroundColor: '#FFF3E0',
padding: 32,
borderRadius: 12,
borderWidth: 2,
borderColor: '#3E2723',
// Hard drop shadow
shadowColor: '#795548',
shadowOffset: { width: 8, height: 8 },
shadowOpacity: 1,
shadowRadius: 0,
elevation: 8, // Fallback for Android, though it blurs
}}>
<Text style={{
fontFamily: 'CooperBlack',
fontSize: 36,
color: '#D35400',
textShadowColor: '#F1C40F',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 0,
marginBottom: 24
}}>
RETRO DESIGN
</Text>
<Text style={{ fontFamily: 'Georgia', fontSize: 18, color: '#3E2723' }}>
Analog warmth and classic typography.
</Text>
</View>
</ImageBackground>
);
};
```
- Use `ImageBackground` on the root view for the grain.
- Android's `elevation` cannot do unblurred offset shadows natively. Use `react-native-drop-shadow` for perfect retro shadows on Android.
### Jetpack Compose
```kotlin
@Composable
fun RetroCard() {
val inkColor = Color(0xFF3E2723)
Box(modifier = Modifier.fillMaxSize().background(Color(0xFFF4E8D1))) {
// Noise Texture Overlay
Image(
painter = painterResource(id = R.drawable.film_grain),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier.matchParentSize().alpha(0.3f),
colorFilter = ColorFilter.tint(Color.Black, BlendMode.Multiply)
)
Box(
modifier = Modifier
.align(Alignment.Center)
.padding(24.dp)
// Fake hard shadow in compose by drawing behind
.drawBehind {
drawRoundRect(
color = Color(0xFF795548),
topLeft = Offset(8.dp.toPx(), 8.dp.toPx()),
size = size,
cornerRadius = CornerRadius(12.dp.toPx())
)
}
.background(Color(0xFFFFF3E0), RoundedCornerShape(12.dp))
.border(2.dp, inkColor, RoundedCornerShape(12.dp))
.padding(32.dp)
) {
Column {
Text("RETRO DESIGN",
fontFamily = FontFamily(Font(R.font.cooper_black)),
fontSize = 36.sp,
color = Color(0xFFD35400),
style = TextStyle(shadow = Shadow(Color(0xFFF1C40F), Offset(4f, 4f), 0f))
)
Spacer(Modifier.height(24.dp))
Text("Analog warmth and classic typography.",
fontFamily = FontFamily.Serif,
fontSize = 18.sp,
color = inkColor)
}
}
}
}
```
- Native `Modifier.shadow` creates soft blurs. Use `Modifier.drawBehind` to draw an offset `drawRoundRect` for the hard retro shadow block.
- Text shadows support hard offsets perfectly via `Shadow(color, offset, blurRadius = 0f)`.
## Do's and Don'ts
- **DO**: Use slightly off-white backgrounds (cream, beige) instead of pure `#FFFFFF` to simulate aged paper.
- **DON'T**: Use sleek, modern geometric sans-serifs or tech-focused neon colors.
## 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 View Git Blame Copy Permalink