Design System
This page documents the visual system used by OptiFlowX: color palette, typography, and component previews.
Color Palette
Primary and semantic colors used across the site.
- Primary:
--md-primary-fg-color(brand blue) - Accent:
--md-accent-fg-color(accent orange) - Success:
--md-success-color - Warning:
--md-warning-color - Danger:
--md-danger-color - Info:
--md-info-color
Swatches
Primary
Primary:
var(--md-primary-fg-color)Accent
Accent:
var(--md-accent-fg-color)Semantic
Typography
- Text font: Inter (variable sizes)
- Code font: JetBrains Mono
Heading scale
H1 — Heading 1
H2 — Heading 2
H3 — Heading 3
H4 — Heading 4
H5 — Heading 5
H6 — Heading 6
Paragraph text sample:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.
Inline code example: print("hello world")
Code block sample:
def add(a, b):
return a + b
print(add(2, 3))
Components
Buttons
Primary button:
Secondary button:
Admonitions
!!! note "Note" This is a note admonition.
!!! tip "Tip" This is a tip admonition.
!!! warning "Warning" This is a warning admonition.
!!! danger "Danger" This is a danger admonition.
Tables
| Column A | Column B |
|---|---|
| Value 1 | Value 2 |
| Value 3 | Value 4 |