Redesign: Scandinavian Calm — Pure Scandi Minimal aesthetic

[Copilot]

Full visual redesign of the Soc Ops Social Bingo app using a near-monochromatic, museum-quiet Scandinavian aesthetic — warm parchment surfaces, hairline borders, Josefin Sans 300/600, sage teal as the single accent.

CSS (app.css + index.html)

• Load Josefin Sans (300, 600) via Google Fonts; set as body font at weight 300
• Add :root Scandi palette as CSS custom properties (--color-bg, --color-surface, --color-accent, --color-marked-*, --color-winning-*, etc.)
• Add new utility classes: bg-linen, bg-surface, bg-sage, bg-marked-calm, bg-winning-calm, text-primary/muted/sage/marked/winning, border-calm/marked-calm/winning, tracking-widest/wide, font-light, uppercase, rounded-2xl, gap-2, mt-*, py-6, hover/active interaction utilities
• Add fadeSlideUp (0.6s, staggered) and fadeIn (0.3s scale) keyframes

Components

• StartScreen — parchment background, UPPERCASE letter-spaced title, "how to play" card with hairline border, sage CTA; staggered animate-fade-slide-up entry
• GameScreen — minimal header, muted back button (hover:text-primary), sage bingo completion banner replacing amber
• BingoBoard — gap-1 → gap-2 for breathing room
• BingoSquare — Scandi state classes (bg-marked-calm, bg-winning-calm, border-calm); free space as font-semibold text-sage; checkmark text-green-600 → text-sage; active:bg-linen on unmarked squares
• BingoModal — animate-fade-in entry, calm Josefin Sans heading, hover:bg-sage-hover on button

No logic changes — markup and class strings only.

Original prompt

Redesign: Scandinavian Calm — Variation 1: Pure Scandi Minimal

Perform a full visual redesign of the Soc Ops Social Bingo app using a Pure Scandi Minimal aesthetic. This is the most stripped-back interpretation: near-monochromatic, museum-quiet, every element earning its place. Think Copenhagen design gallery meets IKEA 1970s catalog.

---

Design Direction

Feeling: Ultra-restrained. Near silence. The board itself is the centrepiece; the UI recedes completely.

Palette (CSS variables — define in :root in app.css):

--color-bg: #F5F3EF           // warm parchment
--color-surface: #FAFAF8      // near-white
--color-border: #E0DBD4       // barely-there warm gray
--color-text: #2B2521         // dark warm charcoal
--color-text-muted: #8A8278   // quiet warm gray
--color-accent: #5B8E83       // sage teal (single accent, use sparingly)
--color-accent-hover: #4A7B70
--color-marked-bg: #D9EBE4    // faint sage wash
--color-marked-border: #9ABFB3
--color-marked-text: #2E5E52
--color-winning-bg: #EDE8DF   // barely-warm birch
--color-winning-border: #C6B89A
--color-winning-text: #6B5A3A

Typography:

• Font: Josefin Sans — weights 300 and 600 only, loaded via Google Fonts
• Body font-weight: 300 throughout (ultra-light dominates)
• Headings: 600 weight, letter-spacing: 0.15em, UPPERCASE
• Square text: 300 weight, tight leading, hyphenated

Key style principles:

• Hairline borders (1px, --color-border)
• Generous padding everywhere — never cramped
• Almost no shadows (remove shadow-xl; use shadow-sm max)
• Rounded corners: use border-radius: 0.75rem (rounded-xl) for cards, border-radius: 0.5rem (rounded-lg) for squares and buttons
• No gradients, no backgrounds layers — solid flat surfaces only
• Animations must feel like a slow exhale, not a pop

---

Files to change

1. SocOps/wwwroot/index.html

• Add Google Fonts link before app.css:

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;600&display=swap" rel="stylesheet" />

• Update theme-color meta to #5B8E83

2. SocOps/wwwroot/css/app.css

• Change body font-family: 'Josefin Sans', sans-serif; font-weight: 300
• Add all CSS custom properties listed above to :root
• Add new utility classes (do NOT remove existing ones — only add):
  • .bg-linen → var(--color-bg)
  • .bg-surface → var(--color-surface)
  • .bg-sage → var(--color-accent)
  • .bg-marked-calm → var(--color-marked-bg)
  • .bg-winning-calm → var(--color-winning-bg)
  • .text-primary → var(--color-text)
  • .text-muted → var(--color-text-muted)
  • .text-sage → var(--color-accent)
  • .text-marked → var(--color-marked-text)
  • .text-winning → var(--color-winning-text)
  • .border-calm → 1px solid var(--color-border) (as a border shorthand, OR add .border-calm { border-color: var(--color-border); } to pair with .border)
  • .border-marked-calm → border-color: var(--color-marked-border)
  • .border-winning → border-color: var(--color-winning-border)
  • .rounded-2xl → border-radius: 1rem
  • .gap-2 → gap: 0.5rem
  • .tracking-widest → letter-spacing: 0.15em
  • .tracking-wide → letter-spacing: 0.06em
  • .font-light → font-weight: 300
  • .max-w-lg → max-width: 32rem
  • .text-2xl → font-size: 1.5rem; line-height: 2rem
  • .text-base → font-size: 1rem; line-height: 1.5rem
  • .mt-2 → margin-top: 0.5rem
  • .mt-4 → margin-top: 1rem
  • .mt-6 → margin-top: 1.5rem
  • .mt-8 → margin-top: 2rem
  • .py-6 → padding-top: 1.5rem; padding-bottom: 1.5rem
  • .min-h-\[72px\] → min-height: 72px
  • .uppercase → text-transform: uppercase
  • .italic → font-style: italic
• Add animations:

  @keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-slide-up {
    animation: fadeSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .delay-1 { animation-delay: 0.1s; }
  .delay-2 { animation-delay: 0.22s; }
  .delay-3 { animation-delay: 0.36s; }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
  }
  .animate-fade-in {
    animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

3. SocOps/Components/StartScreen.razor

Replace the entire template with:

<div class="flex flex-col items-center justify-center min-h-full p-6 bg-linen">
    <div class="text-center max-w-sm w-full">
        <div class="animate-fade-slide-up">
            <p class="text-xs tracking-widest text-muted uppercase mb-2">Social Bingo</p>
            <h1 class="text-5xl font-light tracking-widest text-primary uppercase mb-8">Soc Ops</h1>
        </div>

        <div class="bg-surface ro...

</details>



<!-- START COPILOT CODING AGENT TIPS -->
---

💬 Send tasks to Copilot coding agent from [Slack](https://gh.io/cca-slack-docs) and [Teams](https://gh.io/cca-teams-docs) to turn conversations into code. Copilot posts an update in your thread when it's finished.