Flatcap for Visual Studio Code
Flatcap is a design system and color scheme tailored for application interfaces, code editors, and data-dense dashboards. Drawing inspiration from the Nord theme, it embraces principles of calm, clean aesthetics, and a dimmed pastel color approach to reduce eye strain during long coding or administration sessions.
🚀 How to Install
- Open Visual Studio Code.
- Go to the Extensions view (
Ctrl+Shift+X).
- Search for
Flatcap.
- Click Install.
- Click Set Color Theme and select Flatcap.
🎨 Philosophy & Design
Flatcap draws inspiration from the Nord theme, embracing principles of calm, clean aesthetics, and a dimmed pastel color approach. It is built to be:
- Minimalist: Reduces visual noise by avoiding harsh contrasts.
- Comfortable: Specifically tuned for low-light environments to reduce eye strain.
- Modern: Uses a flat, matte color finish that feels distinct yet familiar.
Color Palette
The system relies on 20 core colors divided into four distinct families.
| Family |
Description |
| Deep Twilight |
Structural foundation. Deep, matte backgrounds (#121418) to create focus. |
| Dawnlight |
Typography hierarchy. From muted metadata (#b2b6bf) to crisp body text (#cbced5). |
| Ocean Blues |
Primary interaction. Calming blues (#81a1c1) for actions and navigation. |
| Vivid Accents |
Semantic feedback. Desaturated accents for errors (#bf616a) and success (#a3be8c). |
✒️ Typography & Fonts
For the best visual experience, Flatcap recommends configuring your editor settings with these fonts:
Recommended Settings
Add this to your settings.json for the full experience:
{
"editor.fontFamily": "'Cascadia Code NF', 'Fira Code', monospace",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"workbench.colorTheme": "Flatcap"
}
Distributed under the MIT License.
