Redesign: Scandi Arctic Light aesthetic (Scandinavian Calm Variation 3)

[Copilot]

Full visual redesign of the Soc Ops Bingo app to a Nordic arctic aesthetic — cool pale blues, ice whites, crisp geometry, and a single aurora teal accent. No logic changes.

CSS (app.css + index.html)

• Font: Syne 400/700 via Google Fonts, replacing system-ui
• Design tokens: Full --color-* palette in :root (bg, surface, border, text, accent, marked, winning states)
• New utilities: bg-linen (gradient bg), bg-surface/sage/marked-calm/winning-calm, text-primary/muted/sage/marked/winning, border-calm/marked-calm/winning, tracking-widest/wide, uppercase, rounded-md/2xl, gap-2, and others
• Animations: fadeSlideUp (staggered page load, 0.3s) and fadeIn (modal, 0.2s) — short, precise timing
• theme-color: #2563eb → #2D8B78

Components

• StartScreen: Uppercase geometric heading with staggered animate-fade-slide-up reveals; teal CTA
• GameScreen: Stripped-back header; bingo banner switches from amber/emoji to icy blue + ✦
• BingoBoard: gap-1 → gap-2; bg-linen on grid wrapper for "ice grid" gap colour
• BingoSquare: All state classes (default/marked/winning) repointed to Arctic token classes; rounded → rounded-md; checkmark text-green-600 → text-sage; free space adds text-sm for hierarchy
• BingoModal: 🎉 → ✦; shadow-xl + bounce animation removed; animate-fade-in + border-calm instead

Original prompt

Redesign: Scandinavian Calm — Variation 3: Scandi Arctic Light

Perform a full visual redesign of the Soc Ops Social Bingo app using a Scandi Arctic Light aesthetic. Inspired by Nordic winter light, frozen fjords, and Finnish modernist architecture. Cool pale blues, ice whites, crisp geometry, and a single aurora teal-green accent. This is the most distinctive and contemporary of the three interpretations — precise, graphic, and atmospheric.

---

Design Direction

Feeling: A first light over a frozen lake. Everything is clear, cool, quiet. Space and light are the material.

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

--color-bg: #EBF0F4           // arctic pale blue-gray
--color-surface: #F5F8FA      // ice white surface
--color-border: #C8D6E0       // cool thin blue-gray border
--color-text: #1A2732         // deep arctic navy
--color-text-muted: #607080   // cool mid-blue gray
--color-accent: #2D8B78       // aurora teal
--color-accent-hover: #1E7566
--color-marked-bg: #CBE8E0    // pale aurora wash
--color-marked-border: #72BDB0
--color-marked-text: #175C50
--color-winning-bg: #D0E4EE   // pale arctic blue
--color-winning-border: #7AAFC8
--color-winning-text: #1A3F57

Typography:

• Font: Syne — weights 400 and 700 — crisp, geometric, contemporary Nordic. Load via Google Fonts.
• Headings: Syne 700, generous letter-spacing: 0.12em, UPPERCASE
• Body: Syne 400, natural spacing
• Square text: Syne 400, small, tight
• Button text: Syne 700, uppercase, letter-spacing: 0.1em

Key style principles:

• Crisp, geometric — prefer sharper corners for inner elements (squares use border-radius: 0.375rem i.e. rounded-md) while cards stay at rounded-xl
• The board background gap (between squares) should use the --color-bg to give an "ice grid" feel
• No shadows at all — flat, architectural
• The bingo winning squares should feel stark and icy: cool blue, not golden
• Introduce a CSS gradient on the page background: linear-gradient(160deg, #EBF0F4 0%, #DCE8F0 100%) for atmospheric depth
• Animations feel precise and immediate (shorter durations — 0.25s), not drifty

---

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=Syne:wght@400;700&display=swap" rel="stylesheet" />

• Update theme-color meta to #2D8B78

2. SocOps/wwwroot/css/app.css

• Change body:

  body {
      font-family: 'Syne', sans-serif;
      -webkit-tap-highlight-color: transparent;
  }

• Add all CSS custom properties to :root
• Add semantic utility classes (do NOT remove existing ones):
  • .bg-linen → background: linear-gradient(160deg, var(--color-bg) 0%, #DCE8F0 100%); min-height: 100%; (gradient background for the arctic atmosphere)
  • .bg-surface → background-color: var(--color-surface)
  • .bg-sage → background-color: var(--color-accent)
  • .bg-marked-calm → background-color: var(--color-marked-bg)
  • .bg-winning-calm → background-color: var(--color-winning-bg)
  • .text-primary → color: var(--color-text)
  • .text-muted → color: var(--color-text-muted)
  • .text-sage → color: var(--color-accent)
  • .text-marked → color: var(--color-marked-text)
  • .text-winning → color: var(--color-winning-text)
  • .border-calm → border-color: var(--color-border)
  • .border-marked-calm → border-color: var(--color-marked-border)
  • .border-winning → border-color: var(--color-winning-border)
  • .rounded-2xl → border-radius: 1rem
  • .rounded-md → border-radius: 0.375rem
  • .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 through .mt-8 → margin-top equivalents
  • .py-6 → padding-top: 1.5rem; padding-bottom: 1.5rem
  • .uppercase → text-transform: uppercase
• Add animations (precise, quick — arctic rhythm):

  @keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-slide-up { animation: fadeSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .delay-1 { animation-delay: 0.07s; }
  .delay-2 { animation-delay: 0.15s; }
  .delay-3 { animation-delay: 0.24s; }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1); }
  }
  .animate-fade-in { animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both; }

3. SocOps/Components/StartScreen.razor

Replace the entire template:

<div class="flex flex-co...

</details>



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

📍 Connect Copilot coding agent with [Jira](https://gh.io/cca-jira-docs), [Azure Boards](https://gh.io/cca-azure-boards-docs) or [Linear](https://gh.io/cca-linear-docs) to delegate work to Copilot in one click without leaving your project management tool.