Boostlook Style Guide
Comprehensive reference of every design token and component in the Boostlook design system.
Color Primitives
Primary
Brand Orange
Secondary
Positive
Negative
Warning
Syntax Colors
Strong (light mode)
Weak (dark mode)
Semantic Color Tokens
These tokens map primitives to semantic roles. They automatically switch between light and dark themes.
Text
| Token | Swatch |
|---|---|
--text-main-text-primary | |
--text-main-text-body-primary | |
--text-main-text-body-secondary | |
--text-main-text-body-tetriary | |
--text-main-text-body-quaternary | |
--text-main-text-link-blue | |
--text-main-text-link-blue-secondary |
Surface / Background
| Token | Swatch |
|---|---|
--surface-background-main-base-primary | |
--surface-background-main-surface-primary | |
--surface-background-main-surface-secondary | |
--surface-background-main-surface-tetriary | |
--surface-background-main-surface-blue-primary | |
--surface-background-main-surface-blue-secondary | |
--surface-background-main-surface-blue-tetriary | |
--surface-weak |
Border
| Token | Swatch |
|---|---|
--border-border-primary | |
--border-border-secondary | |
--border-border-tetriary | |
--border-border-quaternary | |
--border-border-active | |
--border-border-blue | |
--border-border-positive | |
--border-border-negative | |
--border-border-warning | |
--stroke-weak |
State Colors
| Token | Swatch |
|---|---|
--text-states-text-positive | |
--text-states-text-negative | |
--text-states-text-warning | |
--text-states-text-additional | |
--text-states-text-error-strong | |
--text-states-text-error-mid |
Code Syntax Tokens
| Token | Swatch | Use |
|---|---|---|
--text-code-blue | Keywords | |
--text-code-green | Strings, functions | |
--text-code-yellow | Numbers, comments | |
--text-code-pink | Preprocessor | |
--text-code-grey | Comments | |
--text-code-red | Operators | |
--text-code-purple | Keywords (alt) | |
--text-code-neutral | Default text | |
--text-code-navy | Classes | |
--text-code-turquoise | Constants |
Typography Scale
Font Size Scale
Heading Hierarchy
Heading sizes are responsive (mobile vs desktop). Resize the browser to see the shift.
Font Families
Noto Sans (body) — The quick brown fox jumps over the lazy dog. 0123456789
Noto Sans Italic — The quick brown fox jumps over the lazy dog. 0123456789
Monaspace Neon (code) — const x = fn(); // 0123456789
Monaspace Xenon (code italic) — // This is a comment
Font Weight Variations
Light (300) — The quick brown fox jumps over the lazy dog.
Regular (400) — The quick brown fox jumps over the lazy dog.
Medium (500) — The quick brown fox jumps over the lazy dog.
Semibold (600) — The quick brown fox jumps over the lazy dog.
Bold (700) — The quick brown fox jumps over the lazy dog.
Spacing & Sizing Scale
Responsive Spacing (Figma Tokens)
These tokens are responsive (mobile → desktop). Resize the browser to see the shift.
Primitive Spacing
Headings
All six heading levels as they appear in documentation pages.
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Paragraphs & Text
This is a standard paragraph of body text. It demonstrates the default font size, line height, and color used across all documentation pages. Good typography makes technical content easier to read and understand.
This paragraph contains bold text, italic text, and bold italic text. It also includes inline code for referencing identifiers like std::vector<int> or function names like co_await within prose.
A shorter paragraph to show spacing between consecutive blocks of text.
Links
An internal link to another page in this documentation set.
An external link to Boost.org that opens in a new tab.
A same-page anchor link back to the Headings section above.
Lists
Code Blocks
highlight.js Code Block
A C++ code block with highlight.js markup:
#include <iostream>
#include <vector>
#include <algorithm>
namespace example {
template<typename T>
class container
{
public:
/// Constructs an empty container
container() = default;
/// Adds an element to the back
void push_back(const T& value)
{
data_.push_back(value);
}
/// Returns the number of elements
[[nodiscard]] size_t size() const noexcept
{
return data_.size();
}
private:
std::vector<T> data_;
};
} // namespace example
int main()
{
example::container<int> c;
c.push_back(42);
c.push_back(17);
std::cout << "Size: " << c.size() << "\n";
return 0;
}cpp-highlight Code Block
Markup as produced by the cpp-highlight toolchain:
#include <boost/capy/capy.hpp>
#include <iostream>
namespace capy = boost::capy;
// A simple coroutine that returns an int
capy::task<int> compute(int x, int y)
{
auto result = co_await capy::async_add(x, y);
co_return result * 2;
}
int main()
{
auto ctx = capy::make_context();
auto val = ctx.run(compute(21, 21));
std::cout << "Result: " << val << "\n"; // prints 84
return 0;
}Rouge-style Code Block
Markup as produced by the Rouge highlighter (Asciidoctor default):
#include <string>
#include <optional>
template<typename T>
class result
{
public:
// Construct from a value
explicit result(T value)
: value_(std::move(value)) {}
// Construct from an error string
explicit result(std::string error)
: error_(std::move(error)) {}
bool has_value() const noexcept
{
return value_.has_value();
}
private:
std::optional<T> value_;
std::string error_;
};Admonitions
| This is a note admonition. Use it for supplementary information that adds context without being critical to the main flow. |
| This is a tip admonition. Use it for helpful suggestions, best practices, or shortcuts that improve the reader’s workflow. |
| This is a warning admonition. Use it when the reader might encounter unexpected behavior or potential pitfalls. |
| This is a caution admonition. Use it for actions that could cause data loss, security issues, or other serious consequences. |
| This is an important admonition. Use it for essential information that the reader must not overlook. |
Tables
| Name | Type | Default | Description |
|---|---|---|---|
|
|
|
The size of the internal read buffer in bytes. |
|
|
|
Maximum time to wait for an operation to complete. |
|
|
|
Number of retry attempts before reporting failure. |
|
|
|
Enable detailed logging of internal operations. |
Dividers
Content above a horizontal rule.
Content below a horizontal rule. The <hr> element provides visual separation between sections.
Breadcrumbs
Breadcrumbs are visible in the toolbar above the page title. They show the navigation path: Home / Style Guide.