Design Systems Today
Back to Scandinavian Pack
Editor Theme Preview · Scandinavian

Scandinavian Editor Theme

A live mock of the Scandinavian VS Code, Cursor, and terminal theme — every color driven by the same token table that ships in the editor-theme ZIP.

Preview. The actual install ships color-theme.json files for VS Code + Cursor and palette files for Warp / iTerm2 / Ghostty.

VS Code · Cursor

Same JSON schema works in both editors. Colors below are the exact values the install script writes — sidebar, tab strip, syntax tokens, status bar, all driven from the theme.

scandinavian-app · HeroSection.tsx
☰
🔍
⎇
▶
⚙
HeroSection.tsx
Pricing.tsx
theme.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { useState } from 'react';
import type { ReactNode } from 'react';
 
// Renders the hero banner with a CTA pair.
export function Hero(): ReactNode {
  const [count, setCount] = useState(0);
 
  return (
    <section className="hero">
      <h1>Ship a vibe, not a wireframe</h1>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </section>
  );
}
⎇ main*⇡ 2⇣ 0✓ Ready
TypeScript ReactUTF-8LF

Terminal (Warp / iTerm2 / Ghostty)

ANSI palette mapped from chart1..5 and destructive. Same palette file imports cleanly into Warp, iTerm2, and Ghostty.

scandinavian-app — zsh
❯ git status
On branch main
Your branch is up to date with 'origin/main'.
 
Changes not staged for commit:
modified: src/app/page.tsx
modified: src/components/Hero.tsx
 
Untracked files:
src/components/NewSection.tsx
 
❯ npm run build
> next build
✓ Compiled successfully
✓ Generating static pages (5/5)
Route (app) Size
○ / 4.2 kB
○ /pricing 3.8 kB
 
❯ █

Want the full Scandinavian pack?

The Scandinavian Theme Pack bundles this editor theme with a Next.js landing template and an AI-coder vibe pack — three surfaces in one vibe.

See Scandinavian PackAll Editor Themes (free)