Night Owl
A comprehensive color system inspired by the Night Owl VS Code theme, featuring semantic colors for text, backgrounds, and UI states.
On this page
Typography Variants#
Core#
Main content body — the heart of the app
This is the core typography variant. It demonstrates the primary text color and background styling for this context. This is how links appear within this variant, with hover effects that change the link color when you move your mouse over them.
The horizontal rule above uses the border color to create visual separation between content sections. This second paragraph demonstrates how multiple blocks of text appear together in this variant's styling.
const example = "code block";
Shell#
Surrounding context — subheader, sidebar, or supporting surfaces
This is the shell typography variant. It demonstrates the primary text color and background styling for this context. This is how links appear within this variant, with hover effects that change the link color when you move your mouse over them.
The horizontal rule above uses the border color to create visual separation between content sections. This second paragraph demonstrates how multiple blocks of text appear together in this variant's styling.
const example = "code block";
Frame#
Outermost structural layer — header/footer, page edges
This is the frame typography variant. It demonstrates the primary text color and background styling for this context. This is how links appear within this variant, with hover effects that change the link color when you move your mouse over them.
The horizontal rule above uses the border color to create visual separation between content sections. This second paragraph demonstrates how multiple blocks of text appear together in this variant's styling.
const example = "code block";
Success#
Positive feedback — success messages, confirmations, completions
This is the success typography variant. It demonstrates the primary text color and background styling for this context. This is how links appear within this variant, with hover effects that change the link color when you move your mouse over them.
The horizontal rule above uses the border color to create visual separation between content sections. This second paragraph demonstrates how multiple blocks of text appear together in this variant's styling.
const example = "code block";
Warning#
Cautionary alerts — warnings, important notices, potential issues
This is the warning typography variant. It demonstrates the primary text color and background styling for this context. This is how links appear within this variant, with hover effects that change the link color when you move your mouse over them.
The horizontal rule above uses the border color to create visual separation between content sections. This second paragraph demonstrates how multiple blocks of text appear together in this variant's styling.
const example = "code block";
Danger#
Critical alerts — errors, destructive actions, urgent attention
This is the danger typography variant. It demonstrates the primary text color and background styling for this context. This is how links appear within this variant, with hover effects that change the link color when you move your mouse over them.
The horizontal rule above uses the border color to create visual separation between content sections. This second paragraph demonstrates how multiple blocks of text appear together in this variant's styling.
const example = "code block";
Info#
Informational content — tips, helpful guidance, neutral notifications
This is the info typography variant. It demonstrates the primary text color and background styling for this context. This is how links appear within this variant, with hover effects that change the link color when you move your mouse over them.
The horizontal rule above uses the border color to create visual separation between content sections. This second paragraph demonstrates how multiple blocks of text appear together in this variant's styling.
const example = "code block";