Pastel style tokens and row template for the list-styling skill. Soft candy colors, inverted badges (light bg + dark text), rounded cards with a tinted left panel that matches the status hue. Friendly and approachable. Use when the user says "pastel," "soft colors," "candy," "friendly," "approachable," or similar.
Instrucciones de origen · Vista previa de solo lectura
name
style-pastel
description
Pastel style tokens and row template for the list-styling skill. Soft candy colors, inverted badges (light bg + dark text), rounded cards with a tinted left panel that matches the status hue. Friendly and approachable. Use when the user says "pastel," "soft colors," "candy," "friendly," "approachable," or similar.
Pastel — Style Tokens + Row Template
Soft, friendly, candy-colored. Inverted badges (light tint bg, dark colored text). Each card has a soft tinted left panel matching the status hue — the whole left side blushes with the status color.
Layout philosophy: Tinted panel card. A soft-colored left panel (about 80px wide) shows the progress percentage in the status's dark color. The panel's background is the status's lightest tint. The rest of the card is white with stacked metadata. Feels warm and inviting.
Badge Tokens (inverted — light bg, dark text)
padding: 5px 14px
border-radius: 10px
font-size: 12px
font-weight: 600
text-transform: none
status_colors
Value
bg
text
border
panel_tint
Draft
#f1f5f9
#64748b
1px solid #e2e8f0
#f1f5f9
In Review
#dbeafe
#1d4ed8
1px solid #bfdbfe
#dbeafe
Revising
#fff7ed
#c2410c
1px solid #fed7aa
#fff7ed
Approved
#dcfce7
#15803d
1px solid #bbf7d0
#dcfce7
Published
#d1fae5
#047857
1px solid #a7f3d0
#d1fae5
_fallback
#f3f4f6
#6b7280
1px solid #e5e7eb
#f3f4f6
Row Card Tokens
card_border: 1px solid #e5e7eb
card_border_radius: 12px
card_background: #ffffff
card_margin_bottom: 10px
card_shadow: 0px 2px 8px #0000000a
panel_width: 80px
overdue_panel_tint: #fef2f2
overdue_panel_text: #dc2626
Row Template Layout
Tinted left panel with hero number, white right side with metadata.
╭───────┬──────────────────────────────────────────────╮
│ │ │
│ 72% │ API Guide.docx │
│ │ [In Review] · 📅 5/15/2026 │
│ (blue │ ░░░░░░░░██████████████████████░░░░░░░░░ │
│ tint) │ │
╰───────┴──────────────────────────────────────────────╯
↑ panel bg is lightest tint of status hue
rowFormatter JSON
Adapt before applying. The column names below ([$Status], [$Progress], [$Deadline]) are example placeholders — replace them with the actual internal column names from the user's list. Also update every status value string ('Draft', 'In Review', 'Revising', etc.) to match the user's actual Choice values. Follow list-styling Step 3.
✅ TINTED LEFT PANEL that changes color per status — the whole panel blushes
✅ Panel shows progress percentage in the status's dark color
✅ Overdue panel turns soft pink (#fef2f2) with red text
✅ INVERTED badges — light tinted bg + dark text + tinted border (not solid fill)
✅ Title Case on badges — not uppercase
✅ Soft rounded card corners (12px) — friendly, not sharp
✅ Progress bar fills are PASTEL (light pink, light blue, light green)
✅ 📅 icon on deadlines
✅ Overdue is lowercase "overdue" — soft, not alarming
✅ Gentle shadow, not hard offset
✅ Different from all others: tinted panel (not sidebar/stripe/stacked/compartments/hero number)
Responsive / mobile
≤ 480 px: the 80 px (now 96 px — see below) tinted left panel collapses to a top stripe running the full card width, with the percentage centered above the title.
≤ 720 px: card padding steps down from 16px 20px to 12px 16px. Keep border-radius at 12 px; it carries the style.
Touch targets: pastel is friendly, so consumers tap more. Every interactive element ≥ 44 × 44 px on mobile.
Hero text: percentage number can step from 28 px → 22 px on mobile; do not go below 22 px or it loses presence.
Implementation notes
Widen the tinted panel — 80 px clips 100%
The shipped reference uses an 80 px left panel. A three-digit progress value (100%) clips at that width when the digit weight is bold. Set the panel to 96 px, or set the number child to flex-wrap: nowrap; overflow: visible so the % glyph is allowed to bleed slightly out of the panel boundary. Do not shrink the font; the percentage must stay legible at desktop reading distance.
Pastel contrast audit (pinned)
Pastel BG / text pairs are easy to fail — these have been checked at WebAIM and meet WCAG AA or better. Re-verify whenever a token changes.
Panel BG
Text
Ratio
WCAG
Pink #FDE2E4
#9B2C3F
≈ 6.8 : 1
AA
Blue #E0F2FE
#0C4A6E
≈ 8.3 : 1
AAA
Green #DCFCE7
#166534
≈ 7.1 : 1
AAA
Yellow #FEF9C3
#854D0E
≈ 6.2 : 1
AA
Lavender #EDE9FE
#5B21B6
≈ 7.4 : 1
AAA
Never pair a pastel BG with a tint of the same hue for text — the contrast collapses. Always pair with a saturated counterpart of the same family.
