Live preview
Styled by its token map
Tokyo Night
Terminal ThemesA dark theme that celebrates the lights of downtown Tokyo at night: deep blue-black backgrounds, periwinkle-grey text, and cool neon accents — signal blue, magenta-purple, aqua-teal — glowing like signage through rain. Cinematic, blue-cast, and modern.
Palette
bg
#1a1b26
bg-storm
#24283b
surface
#414868
text
#a9b1d6
text-bright
#c0caf5
text-muted
#565f89
accent
#7aa2f7
accent-2
#bb9af7
cyan
#7dcfff
green
#9ece6a
red
#f7768e
orange
#ff9e64
About this style
Tokyo Night appeared in 2018-19 as a VS Code theme by the developer enkia, described simply as a theme that 'celebrates the lights of downtown Tokyo at night', and became one of the defining dark themes of the 2020s — its Neovim port by folke is among the most-starred colorschemes ever, and the palette now ships for terminals, browsers, and window managers. Unlike palettes organized by formal groups, Tokyo Night is documented as a syntax-role table: a published hex-to-purpose mapping (function blue #7aa2f7, keyword purple #bb9af7, string green #9ece6a, comment blue-grey #565f89) across three variants — Night, the lighter-panelled Storm, and a Light mode. Its web character is cinematic rather than cozy: every neutral carries the same rainy blue cast, so pages feel like one continuous night scene with accents as distant signage. Use it for dashboards, developer tools, portfolio sites, and analytics products — the accent set doubles as an excellent chart-series palette, which few terminal themes can claim. It differs from Dracula in temperature and restraint (cool and atmospheric versus warm-charcoal and loud) and from Nord in energy (neon signage versus arctic calm). Keep the glow budget tiny; the theme's sophistication is that the city lights feel far away.
Editor Foreground #a9b1d6 on #1a1b26 passes AA (~8:1); #c0caf5 headings exceed 10:1
Comment #565f89 on #1a1b26 is ~2.8:1 — fails AA; use it only for decorative or large secondary text, never information-bearing copy
Blue #7aa2f7 and cyan #7dcfff pass AA as text on the Night background; orange #ff9e64 and red #f7768e pass for large text and icons — verify small-text uses
Accent-filled buttons need dark #1a1b26 text; white-on-blue fails at these values
---
name: tokyo-night
description: Apply the Tokyo Night visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Tokyo Night, mentions tokyonight, tokyo night storm, neon city theme, or describes deep blue-black night base, periwinkle-tinted foreground, neon signage accent set — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---
# Tokyo Night Design System
A dark theme that celebrates the lights of downtown Tokyo at night: deep blue-black backgrounds, periwinkle-grey text, and cool neon accents — signal blue, magenta-purple, aqua-teal — glowing like signage through rain. Cinematic, blue-cast, and modern.
Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values come from the officially published token set. When in doubt, match the reference sites listed at the end.
## When to use
- Building a new page or component that should read as Tokyo Night.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (tokyonight, tokyo night storm, neon city theme, night city palette), or describes its traits: deep blue-black night base; periwinkle-tinted foreground; neon signage accent set; cool cinematic blue cast; storm and night variants.
## Design tokens
### Color palette
- Page background — Night variant editor background: `#1a1b26` (--color-bg)
- Lifted panels and sidebars — Storm variant background: `#24283b` (--color-bg-storm)
- Cards, wells, selection — Terminal Black: `#414868` (--color-surface)
- Body text — Editor Foreground: `#a9b1d6` (--color-text)
- Headings, variables, emphasis — Terminal White: `#c0caf5` (--color-text-bright)
- Comments and secondary content: `#565f89` (--color-text-muted)
- Primary accent, links and buttons — Terminal Blue, function names: `#7aa2f7` (--color-accent)
- Secondary accent — Terminal Magenta, keywords: `#bb9af7` (--color-accent-2)
- Info accents, object properties, headings — Terminal Cyan: `#7dcfff` (--color-cyan)
- Success, strings, class names: `#9ece6a` (--color-green)
- Errors and destructive actions — Terminal Red: `#f7768e` (--color-red)
- Warnings, numbers and constants: `#ff9e64` (--color-orange)
### Typography
- Display / headings: JetBrains Mono (fallback: SFMono-Regular, Menlo, monospace)
- Body: Plus Jakarta Sans (fallback: -apple-system, Segoe UI, sans-serif)
- Mono / data: JetBrains Mono (fallback: SFMono-Regular, Menlo, monospace)
- Type scale: 1.28 ratio, base 16px — computed steps: 16px / 20px / 26px / 34px / 43px / 55px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.2, letter-spacing -0.015em
- Body: line-height 1.65, letter-spacing 0
### Spacing, radius, border
- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 64, 96 — Sleek and slightly dense, like a well-designed IDE — panels can sit close, but keep neon accents sparse so the night sky stays dark between the lights.
- Border radius: sm 6px, md 10px, lg 14px — Modern rounded panels, echoing the theme's contemporary editor-UI origins.
- Border treatment: 1px solid #414868 — Terminal Black hairlines between panels; active elements upgrade to a 1px #7aa2f7 blue border.
### Shadows
- none: `none` — Default — layer with the night/storm/terminal-black background steps
- panel: `0 4px 20px rgba(22, 22, 30, 0.6)` — Floating panels and dropdowns over the page
- neon-focus: `0 0 0 2px rgba(122, 162, 247, 0.4)` — Focus rings — a restrained blue glow, the only neon halo in the system
### Layout
- Max content width: 1280px
- IDE-inspired composition: Storm #24283b side panels against the darker Night #1a1b26 canvas
- Blue #7aa2f7 leads interaction; purple, cyan, and the warm accents are syntax-role seasoning
- Dashboards shine here — charts can use the full terminal accent set as a ready-made series palette
### Effects
- Code blocks reproduce the theme verbatim: #1a1b26 ground, #565f89 comments, full accent syntax set
- Hero backgrounds may use a very subtle radial glow of #414868 suggesting distant city light
### Motion
- Easing: cubic-bezier(0.25, 0.1, 0.25, 1); durations 110ms / 190ms / 320ms
- Smooth and cinematic — soft fades and 2-4px translates, like panels sliding in an editor
- Focus and hover glows fade in over the base duration rather than snapping
## CSS variables (drop-in)
```css
:root {
--color-bg: #1a1b26;
--color-bg-storm: #24283b;
--color-surface: #414868;
--color-text: #a9b1d6;
--color-text-bright: #c0caf5;
--color-text-muted: #565f89;
--color-accent: #7aa2f7;
--color-accent-2: #bb9af7;
--color-cyan: #7dcfff;
--color-green: #9ece6a;
--color-red: #f7768e;
--color-orange: #ff9e64;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--shadow-panel: 0 4px 20px rgba(22, 22, 30, 0.6);
--shadow-neon-focus: 0 0 0 2px rgba(122, 162, 247, 0.4);
--border-default: 1px solid #414868;
--font-display: "JetBrains Mono", SFMono-Regular, Menlo, monospace;
--font-body: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", SFMono-Regular, Menlo, monospace;
--text-base: 16px;
--leading-heading: 1.2;
--leading-body: 1.65;
--tracking-heading: -0.015em;
--tracking-body: 0;
--ease: cubic-bezier(0.25, 0.1, 0.25, 1);
--duration-fast: 110ms;
--duration-base: 190ms;
--duration-slow: 320ms;
}
```
Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;600&display=swap" rel="stylesheet">`
## Component recipes
- **Nav:** Bar on #16161e-adjacent Night bg with links in #a9b1d6; active link in #7aa2f7 with a soft blue glow underline; optional Storm-toned command-palette trigger styled like an editor search box.
- **Hero:** JetBrains Mono headline in #c0caf5 with a key phrase in #7aa2f7, over #1a1b26 with a faint distant-glow radial; sub-copy in #a9b1d6; CTA pair in blue solid and purple outline.
- **Card:** Storm #24283b panel, 10px radius, 1px #414868 border, 20-24px padding; title #c0caf5, body #a9b1d6, accent icon in cyan or purple; hover border shifts to blue.
- **Button (primary):** Blue #7aa2f7 fill with #1a1b26 text, 6px radius, 600 weight; hover brightens toward cyan #7dcfff with the neon-focus glow.
- **Button (secondary):** Transparent, 1px #414868 border, #a9b1d6 text; hover lifts background to #24283b and border to #565f89.
- **Form fields:** Input on #24283b with 1px #414868 border, 6px radius; focus applies the blue neon-focus ring; placeholder in #565f89 with a visible label in #a9b1d6.
Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).
## Signature element
City-light accents through a blue filter: #7aa2f7 blue and #bb9af7 purple glowing on the near-black indigo #1a1b26 base, with every neutral — even the comments #565f89 — tinted the same rainy blue. Spend boldness here; keep everything else quiet.
## Do
- Keep every neutral blue-cast — Tokyo Night has no true grays, and that rainy tint is the identity
- Lead with blue #7aa2f7 and let purple/cyan support; warm accents only for warnings and data
- Use the Night/Storm pairing as your two-level surface system, as the theme's own variants do
- Treat chart series and syntax tokens as the same palette — it was designed for exactly that
## Don't
- Don't warm up the backgrounds or text — one beige surface breaks the night-city atmosphere
- Don't set body copy in comment #565f89; it is deliberately recessive
- Don't over-glow: one focus halo is cinematic, neon on everything is a different (synthwave) style
## Accessibility notes
- Editor Foreground #a9b1d6 on #1a1b26 passes AA (~8:1); #c0caf5 headings exceed 10:1
- Comment #565f89 on #1a1b26 is ~2.8:1 — fails AA; use it only for decorative or large secondary text, never information-bearing copy
- Blue #7aa2f7 and cyan #7dcfff pass AA as text on the Night background; orange #ff9e64 and red #f7768e pass for large text and icons — verify small-text uses
- Accent-filled buttons need dark #1a1b26 text; white-on-blue fails at these values
## Reference sites
- Tokyo Night VS Code theme: https://github.com/tokyo-night/tokyo-night-vscode-theme
For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.
Install this skill
Claude Code — download the zip, then unzip into your skills folder
unzip tokyo-night.zip -d ~/.claude/skills/shadcn/ui — apply as a theme to any shadcn project
npx shadcn add https://claude-design-skills.convoke.software/r/tokyo-night.jsonclaude.ai — upload the zip as a custom skill
Settings → Capabilities → Skills → Upload skill → tokyo-night.zip