Retro Memphis style tokens and row template for the list-styling skill. Bright contrasting colors, colored shadows, playful stacked card with a status-colored top banner and large progress number. Layout is a stacked vertical card with a bold colored header strip — NOT a sidebar layout. Use when the user says "retro," "memphis," "80s," "90s," "colorful," "playful," "fun style," or similar.
Instrucciones de origen · Vista previa de solo lectura
name
style-retro
description
Retro Memphis style tokens and row template for the list-styling skill. Bright contrasting colors, colored shadows, playful stacked card with a status-colored top banner and large progress number. Layout is a stacked vertical card with a bold colored header strip — NOT a sidebar layout. Use when the user says "retro," "memphis," "80s," "90s," "colorful," "playful," "fun style," or similar.
Retro Memphis — Style Tokens + Row Template
Bright, playful, LOUD. Every status is a different color. Colored shadows. Stacked vertical card with a bold colored banner. This is the fun one.
Layout philosophy: Stacked vertical card with colored banner. The top third of the card is a bold status-colored banner containing the document name in large white text. Below it, a white content area with the status badge, a large progress percentage, and deadline info. The banner color changes per status — the card's personality changes with every item. This is structurally different from Neobrutalism's horizontal sidebar split.
Badge Tokens
padding: 5px 14px
border-radius: 20px (full pill — playful, round, fun)
font-size: 12px
font-weight: 700
text-transform: uppercase
status_colors
Value
bg
text
border
banner_color
Draft
#fbbf24
#1f2937
2px solid #d97706
#fbbf24
In Review
#3b82f6
#ffffff
2px solid #7c3aed
#3b82f6
Revising
#f472b6
#ffffff
2px solid #db2777
#f472b6
Approved
#2dd4bf
#1f2937
2px solid #0d9488
#2dd4bf
Published
#a78bfa
#ffffff
2px solid #7c3aed
#a78bfa
_fallback
#e5e7eb
#374151
2px solid #9ca3af
#e5e7eb
CRITICAL: The banner_color IS the status bg color — the entire top of the card floods with the status hue. Draft cards have a yellow top. In Review cards have a blue top. Revising cards have a hot pink top. Every card in the list is a different color.
Progress Bar Tokens
progress_track_height: 10px
progress_track_bg: #fef3c7 (warm yellow tint)
progress_track_border: 2px solid #d97706
progress_track_radius: 5px
progress_fill_radius: 3px
progress_color_low: #f472b6 (HOT PINK — not red)
progress_color_mid: #3b82f6 (ELECTRIC BLUE — not amber)
progress_color_high: #2dd4bf (TEAL — not green)
progress_label_font_size: 28px (HUGE — the hero element)
progress_label_font_weight: 800
progress_label_color: #7c3aed (PURPLE)
Deadline Tokens
deadline_icon: 🗓️
date_font_size: 13px
date_normal_color: #374151
date_normal_weight: 600
date_overdue_color: #db2777 (HOT PINK — not red)
date_overdue_weight: 800
date_sublabel_color: #7c3aed (PURPLE)
overdue_label: 🔥 OVERDUE
Row Card Tokens
card_border: 3px solid (color matches status shadow_color)
card_border_radius: 12px (rounded — playful)
card_background: #ffffff
card_margin_bottom: 12px
card_shadow: 6px 6px 0px (large hard offset — COLORED per status)
banner_height: (auto — wraps content with padding)
banner_padding: 16px 20px
content_padding: 16px 20px
overdue_border_color: #db2777
overdue_shadow_color: #db2777
Row Template Layout
Stacked vertical card with a status-colored banner on top.
Key difference from Neobrutalism: Neobrutalism is a HORIZONTAL split (sidebar left, content right). Retro is a VERTICAL split (banner top, content bottom). Even the silhouettes are different.
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.
✅ VERTICAL STACKED layout with colored banner on top — NOT a sidebar (structurally different from Neobrutalism)
✅ Banner background FLOODS with the status color — yellow, blue, pink, teal, or lavender
✅ Document name is white-on-color in the banner — bold and prominent
✅ ✨ sparkle emoji in banner (🔥 for overdue) — playful decorative element
✅ Card border AND shadow color change per status — colored, NEVER black
✅ 6px hard offset colored shadows (bigger than Neobrutalism's 4px)
✅ Rounded corners (12px) — playful, not sharp
✅ Pill-shaped status badges (20px radius) with colored borders
✅ Progress percentage is HUGE (28px) and PURPLE — pushed to the right
✅ Progress bar track is warm yellow (#fef3c7) with amber border
✅ Progress fills are PINK → BLUE → TEAL (not red → amber → green)
✅ Deadline sublabel is PURPLE, overdue is HOT PINK with 🔥
✅ Every status gets its own distinct hue — no repeats
✅ Overdue cards: banner turns hot pink, border/shadow turn hot pink, 🔥 replaces ✨
✅ The list looks like a bag of candy exploded — in a good way
✅ Silhouette test: banner-on-top looks NOTHING like sidebar-on-left (Neobrutalism)
Responsive / mobile
≤ 600 px: drop the colored box-shadow offset from 4 px to 2 px so it doesn't clip the next card.
≤ 480 px: the banner stays full-width — it carries the identity. Stack the metadata (progress + deadline) vertically below it.
Hero text: the large progress percentage below the banner steps 32 px → 24 px on mobile. Do not go below 24 px.
Touch targets: ≥ 44 × 44 px on the row card.
Implementation notes
Status-tinted shadows render inconsistently
The colored box-shadow (hot pink for overdue, banner color elsewhere) is not portable:
Chrome / Edge: render the offset and color correctly.
Safari: occasionally mutes saturation on box-shadow colors, so the pink reads more salmon than hot.
Older SharePoint themes: strip multi-layer or colored box-shadow entirely.
Provide a fallback that does not depend on the shadow: the colored top banner must always render — it is the primary identity element. The shadow is decoration. When QA shows the shadow is missing in a target environment, do not add a different decoration; let the banner do the work.
The pink/blue/teal progress palette is intentional — explain it once
Consumers used to traffic-light progress (red < 30% → amber → green ≥ 70%) will see a 95 % card filled in teal and assume the style is broken. It is not. Retro Memphis progress goes pink → blue → teal by design — each value gets its own distinct hue, the way 80s Memphis palettes worked.
When applying this style for the first time in a tenant, surface this fact in a single sentence to the user: "Progress in Retro Memphis uses pink → blue → teal instead of red → amber → green — that's intentional."
