Markdown

M A T T E A T E L I E R

Premium Studio-Grade Color Theme for Visual Studio Code

Luxury minimalism. Deep focus. Matte-finish elegance.

6 Premium Editions · Semantic Language Colors · Deep Focus Mode · Custom Icon Pack

✦ Philosophy

Matte Atelier is a luxury matte coding experience engineered for developers who demand clarity, calmness, and precision from their tools.

Every color. Every surface. Every state. Carefully calibrated - like tuning a precision instrument.

No neon. No noise. No distractions. Just signal.

"Zero shine, maximum clarity."

Design Principles

Principle	Description
Matte, never glossy	Every surface is flat, warm, distraction-free
Semantic, not decorative	Colors carry meaning, not decoration
Soft contrast	High readability without harsh edges
Cinematic depth	Layered surfaces with micro-contrast
Calm atmosphere	Engineered for sustained deep work
Intelligent hierarchy	Visual weight guides attention naturally

Think: Luxury camera gear. Architectural render studios. Editorial design suites.

✦ Premium Editions

Six meticulously crafted variants. One cohesive brand family.

■ Obsidian

Signature matte black. The foundational experience.

Ultra-deep charcoal background with clean, soft typography contrast. Zero shine, maximum clarity. This is the edition everything else is built from.

editor background: #141416

□ Obsidian High Contrast

Clarity without compromise.

Brighter syntax tokens optimized for daylight and high-glare environments. Enhanced contrast ratios meet WCAG AA+ standards. Every border, every focus indicator — sharpened for visibility.

editor background: #0a0a0c

◉ Obsidian Colorblind

Inclusive by design.

Rebuilt on a blue-orange-purple color axis. No information conveyed by red-green distinction alone. Tested for deuteranopia, protanopia, and tritanopia. Strong hue separation with thoughtful semantic differentiation.

editor background: #141416

▢ Ivory

Premium editorial light.

Warm off-white background inspired by fine paper, architectural drawings, and editorial design. Calm and refined — like reading a beautifully typeset book. The light theme done right.

editor background: #f0ece4

◇ Sapphire

Cinematic midnight blue.

Deep navy matte with cool-toned syntax. Inspired by midnight architecture, deep ocean floors, and observatory domes. Elegant focus for late-night sessions.

editor background: #0e1420

✻ Rosé

Warm evening ambiance.

Rose-tinted dark background with subtle amber undertones. Inspired by golden hour, candlelit studios, and evening warmth. Gentle on the eyes when the sun goes down.

editor background: #181212

✦ Semantic Language Personalities

Each programming language has a unique color personality derived from color psychology. Syntax coloring is semantic, not decorative — every hue carries intentional meaning.

Color Psychology at Work

Python ── Teal evokes analytical clarity. Mint suggests growth. JavaScript ── Amber conveys creative energy. Gold suggests craftsmanship. Rust ── Orange signals industrial strength. Warmth implies reliability. SQL ── Purple conveys authority. Silver implies precision. Go ── Cyan signals modernity. Aqua implies clean, flowing logic.

text

All syntax coloring is:

▪ Matte — desaturated, never neon
▪ Balanced — no single color dominates
▪ Low eye strain — optimized for long sessions
▪ High clarity — tokens are instantly distinguishable
▪ Semantic — meaning over aesthetics

✦ Deep Focus Mode

A distraction-free environment that transforms your editor into a quiet design studio at night.

Activate:

Method	Action
Keyboard	`Ctrl+Shift+Alt+F` / `Cmd+Shift+Alt+F`
Command Palette	`Matte Atelier: Toggle Deep Focus Mode`
Status Bar	Click the eye icon in the bottom bar

What Changes

Minimap ── hidden Breadcrumbs ── hidden Code lens ── hidden Folding controls ── hidden Glyph margin ── hidden Indent guides ── hidden Whitespace rendering ── hidden Line spacing ── increased (configurable 1.5x–3x) Editor padding ── 24px top and bottom Scrollbars ── minimized to 6px Cursor animation ── smooth Cursor style ── block (configurable) Line numbers ── relative Inactive panels ── subtly dimmed Status bar ── shows "Deep Focus" indicator

text

The Experience

Imagine walking into a quiet studio at 2 AM.

The lights are low. Your tools are laid out with precision. There is nothing between you and the work. Just calm, focused craftsmanship.

That is Deep Focus Mode.

✦ Custom Icon Pack

A cohesive file icon set designed with the same matte philosophy.

Design Language:

▪ Flat matte surfaces — no gloss, no gradients
▪ Subtle shadow depth — just enough dimension
▪ Muted but distinct colors — language-aligned
▪ Geometric clarity — clean, precise shapes
▪ Premium refined forms — crafted, not generic

Coverage: Languages ── TypeScript, JavaScript, Python, Rust, Go, HTML, CSS, SCSS, SQL, Markdown, YAML, Shell, and more

Frameworks ── React, Vue, Svelte, Tailwind, Prisma, GraphQL

Config ── Docker, Git, ESLint, Prettier, Babel, Webpack, Vite, environment files

Folders ── src, components, test, config, api, docs, assets, styles, hooks, utils, types, lib, database, scripts, .github, .vscode, and more

text

✦ Installation

From VS Code Marketplace

Open VS Code
Press Ctrl+Shift+X to open Extensions
Search "Matte Atelier"
Click Install
text

From Command Line

code --install-extension aadityanarayan.matte-atelier

From VSIX File

code --install-extension matte-atelier-1.0.0.vsix

✦ Getting Started

Step 1 — Select Your Edition

Ctrl+Shift+P  -->  "Preferences: Color Theme"

Choose from:

Matte Atelier — Obsidian
Matte Atelier — Obsidian High Contrast
Matte Atelier — Obsidian Colorblind
Matte Atelier — Ivory
Matte Atelier — Sapphire
Matte Atelier — Rosé

Or use the built-in edition picker:

Ctrl+Shift+P  -->  "Matte Atelier: Select Edition"

Step 2 — Activate the Icon Pack

Ctrl+Shift+P  -->  "Preferences: File Icon Theme"
                -->  "Matte Atelier Icons"

Step 3 — Try Deep Focus Mode

Ctrl+Shift+Alt+F

Press again to return to normal.

✦ Configuration

All settings are under matteAtelier.* in VS Code preferences.

{
  // Enable Deep Focus Mode
  "matteAtelier.deepFocusMode": false,

  // Line height multiplier in Deep Focus (1.5 – 3.0)
  "matteAtelier.deepFocusLineSpacing": 2.0,

  // Cursor style in Deep Focus: "block" | "line" | "underline"
  "matteAtelier.deepFocusCursorStyle": "block",

  // Smooth cursor animation
  "matteAtelier.cursorSmoothAnimation": true,

  // Hide activity bar and status bar in Deep Focus
  "matteAtelier.reducedChrome": false,

  // Enable per-language semantic color personalities
  "matteAtelier.semanticLanguageColors": true
}

✦ Recommended Setup

Pair with these VS Code settings for the complete studio experience:

{
  // Theme
  "workbench.colorTheme": "Matte Atelier — Obsidian",
  "workbench.iconTheme": "matte-atelier-icons",

  // Typography
  "editor.fontFamily": "'Berkeley Mono', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace",
  "editor.fontSize": 14,
  "editor.fontLigatures": true,
  "editor.lineHeight": 1.7,
  "editor.letterSpacing": 0.3,

  // Smooth experience
  "editor.smoothScrolling": true,
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.cursorBlinking": "smooth",

  // Bracket colors (uses theme palette)
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.guides.highlightActiveIndentation": true,

  // Semantic highlighting (activates language personalities)
  "editor.semanticHighlighting.enabled": true,

  // Clean UI
  "editor.renderWhitespace": "boundary",
  "editor.minimap.renderCharacters": false,
  "workbench.tree.indent": 16,
  "workbench.list.smoothScrolling": true,
  "window.titleBarStyle": "custom",

  // Terminal
  "terminal.integrated.fontFamily": "'JetBrains Mono', monospace",
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.lineHeight": 1.4
}

Important: "editor.semanticHighlighting.enabled": true is required for the language-specific color personalities to work.

Recommended Language Extensions

For the richest syntax coloring, install these language servers:

Python     ──  Pylance (by Microsoft)
Rust       ──  rust-analyzer
Go         ──  Go (by Google)
TypeScript ──  Built-in (no extension needed)

✦ Accessibility

Obsidian Colorblind Edition

Engineered for color vision deficiency (CVD):

Blue-orange-purple color axis — universally distinguishable
No red-green dependency — zero information loss
Strong hue separation across all CVD types
Tested for deuteranopia, protanopia, and tritanopia
Git diffs use blue (added) / orange (deleted) / purple (modified)
Diagnostics use orange (error) / amber (warning) / blue (info)

Obsidian High Contrast Edition

Built for maximum visibility:

WCAG AA+ contrast ratios on all text
Enhanced borders — every boundary visible
Stronger focus indicators — never lose your cursor
Brighter syntax — tokens pop without harsh saturation
Daylight optimized — readable in bright environments

✦ Commands & Shortcuts

Command	Shortcut	Description
Toggle Deep Focus	Ctrl+Shift+Alt+F	Enter or exit Deep Focus Mode
Select Edition	via palette	Quick-pick edition selector
Reset Settings	via palette	Restore all defaults

Access all commands:

Ctrl+Shift+P  -->  Type "Matte Atelier"

✦ Adaptive UI States

Every interactive state has been carefully designed:

State	Behavior
Active tab	Full foreground, teal top border
Inactive tab	Dimmed foreground, no border
Hover	Subtle background shift — never loud
Focus ring	Translucent teal outline
Error	Muted dusty red — never harsh crimson
Warning	Warm amber — informative, not alarming
Success	Soft sage green — calm confirmation
Git added	Muted sage
Git deleted	Muted dusty rose
Git modified	Muted olive
Search match	Amber background with soft border

✦ Color Palette Reference

Obsidian Edition — Core Surfaces

Void          #0e0e10    ████  Terminal, deepest panels
Base          #141416    ████  Editor background
Raised        #1a1a1e    ████  Sidebar, secondary panels
Surface       #202024    ████  Tabs, input fields
Overlay       #26262b    ████  Dropdowns, tooltips
Elevated      #2c2c32    ████  Active selections

Obsidian Edition — Accent Palette

Teal          #6b9e9e    ████  Python, parameters, focus
Mint          #7eb89e    ████  Python functions
Amber         #c9a86c    ████  JS/TS keywords
Gold          #d4b87a    ████  JS/TS functions
Orange        #c08a60    ████  HTML tags, Rust
Champagne     #d4c4a0    ████  HTML attributes
Steel Blue    #7a9bb5    ████  CSS, JSON keys
Frost         #b8c4d0    ████  JSON values, readonly
Purple        #9b85b5    ████  SQL, decorators
Cyan          #72b5c0    ████  Go keywords
Rose          #c08888    ████  Errors (muted)
Sage          #88a888    ████  Success (muted)

Guidelines

No neon or oversaturated colors
No glossy or gradient UI elements
Maintain matte consistency across variants
Every color must serve a semantic purpose
Test with multiple languages and file types
Colorblind edition must pass CVD simulation testing

✦ License

MIT License. See LICENSE for details.

Crafted for developers who treat their tools like instruments.

M A T T E A T E L I E R S T U D I O

Zero shine. Maximum clarity.

Matte Atelier - Premium Studio Theme

aadityanarayan

M A T T E A T E L I E R

✦ Philosophy

Design Principles

✦ Premium Editions

■ Obsidian

□ Obsidian High Contrast

◉ Obsidian Colorblind

▢ Ivory

◇ Sapphire

✻ Rosé

✦ Semantic Language Personalities

Color Psychology at Work

✦ Deep Focus Mode

What Changes

The Experience

✦ Custom Icon Pack

✦ Installation

From VS Code Marketplace

From Command Line

From VSIX File

✦ Getting Started

Step 1 — Select Your Edition

Step 2 — Activate the Icon Pack

Step 3 — Try Deep Focus Mode

✦ Configuration

✦ Recommended Setup

Recommended Language Extensions

✦ Accessibility

Obsidian Colorblind Edition

Obsidian High Contrast Edition

✦ Commands & Shortcuts

✦ Adaptive UI States

✦ Color Palette Reference

Obsidian Edition — Core Surfaces

Obsidian Edition — Accent Palette

Guidelines

✦ License