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

308 lines
11 KiB
Markdown
Raw Blame History

---
name: soft-pastel
description: Web and App implementation guide for Soft Pastel Design. Trigger when user wants gentle colors, calming UI, baby/lifestyle branding, or low-contrast aesthetics.
date_added: "2026-06-17"
risk: safe
source: self
source_type: self
---
# Soft Pastel Design
> "Calm, airy, and gentle. A low-stress interface built on washed-out, cheerful hues."
## 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. **Desaturated, High-Lightness Colors**: Every color is mixed with a heavy amount of white.
2. **Soft, Rounded Edges**: Border radii are large and friendly.
3. **Airy Spacing**: Generous whitespace prevents the soft colors from feeling muddy or crowded.
## Visual DNA
- **Colors**: Mint green, baby blue, blush pink, lavender, and buttercream yellow. Use a warm, slightly off-white background (e.g., `#FFFBF7`) rather than clinical `#FFFFFF`.
- **Typography**: Soft, rounded sans-serifs (`Quicksand`, `Nunito`) or elegant, low-contrast serifs. Avoid aggressive, ultra-bold fonts.
- **Shadows**: Very soft, large-spread shadows, often tinted with the pastel color rather than black.
## Web Implementation
- **CSS Example**:
```css
:root {
--pastel-bg: #FFFBF7;
--pastel-pink: #FFD1DC;
--pastel-blue: #AEC6CF;
--pastel-green: #B7E4C7;
--pastel-text: #4A4A4A; /* Soft dark grey, NOT pure black */
}
body {
background-color: var(--pastel-bg);
color: var(--pastel-text);
font-family: 'Nunito', sans-serif;
line-height: 1.6;
}
.pastel-card {
background-color: #ffffff;
border-radius: 24px;
padding: 40px;
/* Tinted, very soft shadow */
box-shadow: 0 20px 40px rgba(174, 198, 207, 0.15);
}
.pastel-pill {
background-color: var(--pastel-pink);
color: #a05a6c; /* Darker version of the pink for contrast */
border-radius: 50px;
padding: 8px 24px;
font-weight: 700;
display: inline-block;
}
.pastel-btn {
background-color: var(--pastel-blue);
color: #2b5563; /* Darker text */
border: none;
border-radius: 12px;
padding: 16px 32px;
transition: transform 0.2s;
}
.pastel-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(174, 198, 207, 0.4);
}
```
## App Implementation
### SwiftUI
```swift
struct SoftPastelView: View {
// Pastel Palette
let bg = Color(hex: "FFFBF7")
let pink = Color(hex: "FFD1DC")
let blue = Color(hex: "AEC6CF")
let textDark = Color(hex: "4A4A4A")
var body: some View {
ScrollView {
VStack(spacing: 32) {
// Pastel Card
VStack(alignment: .leading, spacing: 16) {
Text("Calm & Airy")
.font(.custom("Nunito-Bold", size: 28))
.foregroundColor(textDark)
Text("Generous whitespace and soft corners prevent the desaturated colors from feeling muddy.")
.font(.custom("Nunito-Regular", size: 16))
.foregroundColor(textDark.opacity(0.8))
.lineSpacing(6)
}
.padding(40)
.frame(maxWidth: .infinity, alignment: .leading)
.background(Color.white)
.cornerRadius(32) // Soft, large radius
// Tinted pastel shadow instead of black/gray
.shadow(color: blue.opacity(0.2), radius: 30, y: 15)
// Pastel Button
Button(action: {}) {
Text("Gentle Action")
.font(.custom("Nunito-Bold", size: 18))
.foregroundColor(Color(hex: "2B5563")) // Darker contrast of the blue
.frame(maxWidth: .infinity)
.padding(.vertical, 20)
.background(blue)
.cornerRadius(20)
}
}
.padding(24)
}
.background(bg.ignoresSafeArea())
}
}
```
- A custom font like Nunito or Quicksand is practically required. System fonts are often too rigid.
- The `shadow(color:)` must be tinted with one of your pastel palette colors, never black or gray.
- Corner radii should be very large (20-32).
### Flutter
```dart
class SoftPastelScreen extends StatelessWidget {
final Color bg = const Color(0xFFFFFBF7);
final Color pink = const Color(0xFFFFD1DC);
final Color blue = const Color(0xFFAEC6CF);
final Color textDark = const Color(0xFF4A4A4A);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: bg,
body: SingleChildScrollView(
padding: const EdgeInsets.all(24.0),
child: Column(
children: [
// Pastel Card
Container(
width: double.infinity,
padding: const EdgeInsets.all(40),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(32), // Soft edges
boxShadow: [
// Tinted shadow
BoxShadow(color: blue.withOpacity(0.2), blurRadius: 30, offset: const Offset(0, 15))
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Calm & Airy', style: TextStyle(fontFamily: 'Nunito', fontSize: 28, fontWeight: FontWeight.bold, color: textDark)),
const SizedBox(height: 16),
Text('Generous whitespace and soft corners.', style: TextStyle(fontFamily: 'Nunito', fontSize: 16, height: 1.6, color: textDark.withOpacity(0.8))),
],
),
),
const SizedBox(height: 32),
// Pastel Button
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: blue,
foregroundColor: const Color(0xFF2B5563), // Darker text for contrast
minimumSize: const Size(double.infinity, 60),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
elevation: 0, // Remove default harsh shadow
),
child: const Text('Gentle Action', style: TextStyle(fontFamily: 'Nunito', fontSize: 18, fontWeight: FontWeight.bold)),
),
],
),
),
);
}
}
```
- Disable `elevation` on Flutter buttons and cards if you want to apply custom tinted drop shadows. Default elevations cast black shadows.
### React Native
```jsx
const SoftPastelScreen = () => {
const colors = {
bg: '#FFFBF7',
blue: '#AEC6CF',
textDark: '#4A4A4A'
};
return (
<ScrollView style={{ flex: 1, backgroundColor: colors.bg, padding: 24 }}>
{/* Pastel Card */}
<View style={{
backgroundColor: '#FFFFFF',
borderRadius: 32,
padding: 40,
marginBottom: 32,
// iOS tinted shadow
shadowColor: colors.blue, shadowOffset: { width: 0, height: 15 },
shadowOpacity: 0.2, shadowRadius: 30,
// Android tinted shadow (Requires Android 9+)
elevation: 10, shadowColor: colors.blue,
}}>
<Text style={{ fontFamily: 'Nunito-Bold', fontSize: 28, color: colors.textDark, marginBottom: 16 }}>
Calm & Airy
</Text>
<Text style={{ fontFamily: 'Nunito-Regular', fontSize: 16, lineHeight: 26, color: colors.textDark, opacity: 0.8 }}>
Generous whitespace and soft corners prevent the desaturated colors from feeling muddy.
</Text>
</View>
{/* Pastel Button */}
<TouchableOpacity style={{
backgroundColor: colors.blue,
borderRadius: 20,
paddingVertical: 20,
alignItems: 'center'
}}>
<Text style={{ fontFamily: 'Nunito-Bold', fontSize: 18, color: '#2B5563' }}>
Gentle Action
</Text>
</TouchableOpacity>
</ScrollView>
);
};
```
- Make sure you are using a soft, non-pure-white background (`#FFFBF7`) so that pure `#FFFFFF` cards pop nicely against it without harsh borders.
- Tinted shadows work on Android 9+ via `shadowColor` combined with `elevation`.
### Jetpack Compose
```kotlin
@Composable
fun SoftPastelScreen() {
val bg = Color(0xFFFFFBF7)
val blue = Color(0xFFAEC6CF)
val textDark = Color(0xFF4A4A4A)
Column(
modifier = Modifier.fillMaxSize().background(bg).verticalScroll(rememberScrollState()).padding(24.dp)
) {
// Pastel Card
Box(
modifier = Modifier
.fillMaxWidth()
.shadow(
elevation = 20.dp,
shape = RoundedCornerShape(32.dp),
ambientColor = blue, // Tinted shadow
spotColor = blue
)
.background(Color.White, RoundedCornerShape(32.dp))
.padding(40.dp)
) {
Column {
Text(
text = "Calm & Airy",
fontSize = 28.sp,
fontWeight = FontWeight.Bold,
color = textDark,
fontFamily = FontFamily.SansSerif // Replace with Nunito
)
Spacer(Modifier.height(16.dp))
Text(
text = "Generous whitespace and soft corners.",
fontSize = 16.sp,
lineHeight = 26.sp,
color = textDark.copy(alpha = 0.8f),
fontFamily = FontFamily.SansSerif
)
}
}
Spacer(Modifier.height(32.dp))
// Pastel Button
Button(
onClick = { },
colors = ButtonDefaults.buttonColors(containerColor = blue, contentColor = Color(0xFF2B5563)),
shape = RoundedCornerShape(20.dp),
modifier = Modifier.fillMaxWidth().height(60.dp),
elevation = null
) {
Text("Gentle Action", fontSize = 18.sp, fontWeight = FontWeight.Bold)
}
}
}
```
- The `shadow` modifier in Compose takes `ambientColor` and `spotColor`. Set both to your pastel accent color to achieve the soft tinted glow.
## Do's and Don'ts
- **DO**: Use illustrative assets that match the pastel vibe (flat vectors, soft gradients).
- **DON'T**: Use stark black borders, sharp corners, or high-saturation primary 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