Color Scheme
Main Colors
- Background Color (
--ifm-background-color): #1A1818 - Main background color. - Navbar Background (
--ifm-navbar-background-color): #1f1d1e - Navbar background. - Text Color (
--ifm-font-color-base): #ffffff - Primary text color. - Heading Color (
--ifm-heading-color): #ffffff - Color for headings.
Neutral and Text Colors
- Primary Text Color (
--black100): #1f1d1e - Used for primary text. - Secondary Text Color (
--black60): #d35b00 - Used for secondary text. - Backgrounds and Borders (
--black10): #FEE1CC - Used for backgrounds and borders.
Accent Colors
- Secondary Light Blue (
--secondary-light-blue): #20a4f3 - Bright blue for links and interactive elements. - Positive Default (
--positive-default): #31c587 - Green for success messages. - Warning Default (
--warning-default): #f6aa50 - Amber for warnings. - Negative (
--negative): #e93c51 - Red for errors.
These colors are integral to our design system, ensuring a cohesive and accessible user experience in both light and dark modes.
You can write content using GitHub-flavored Markdown syntax.
Markdown Syntax
To serve as an example page when styling markdown based Docusaurus sites.
Headers
H1 - Create the best documentation
H2 - Create the best documentation
H3 - Create the best documentation
H4 - Create the best documentation
H5 - Create the best documentation
H6 - Create the best documentation
Collapsible Sections
Our documentation features collapsible sections for efficient navigation and concise presentation of detailed information.
Section 1 Title
Content for Section 1.
Tabs
Our documentation uses tabs to effectively organize and display content in a clear, segmented format.
- Apple
- Orange
- Banana
This is an apple 🍎
This is an orange 🍊
This is a banana 🍌
Emphasis
Emphasis, aka italics, with asterisks or underscores.
Strong emphasis, aka bold, with asterisks or underscores.
Combined emphasis with asterisks and underscores.
Strikethrough uses two tildes. Scratch this.
Lists
- First ordered list item
- Another item
- Unordered sub-list.
- Actual numbers don't matter, just that it's a number
- Ordered sub-list
- And another item.
- Unordered list can use asterisks
- Or minuses
- Or pluses
Links
I'm an inline-style link with title
You can use numbers for reference-style link definitions
Or leave it empty and use the link text itself.
Some text to show that the reference links can follow later.
Code
var s = 'JavaScript syntax highlighting';
alert(s);
s = "Python syntax highlighting"
print(s)
No language indicated, so no syntax highlighting.
function highlightMe() {
console.log('This line can be highlighted!');
}
Tables
Colons can be used to align columns.
| Tables | Are | Cool |
|---|---|---|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.
| Markdown | Less | Pretty |
|---|---|---|
| Still | renders | nicely |
| 1 | 2 | 3 |
Blockquotes
Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.
Quote break.
This quote demonstrates how a lengthy sentence can be effectively wrapped within a blockquote. It serves as a practical example of Markdown's versatility in formatting text, allowing for both italic and bold styles within the same quote.
Inline HTML
- Definition list
- Is something people use sometimes.
- Markdown in HTML
- Does not work very well. Use HTML tags.
Line Breaks
Here's a line for us to start with.
This line is separated from the one above by two newlines, so it will be a separate paragraph.
This line is also a separate paragraph, but... This line is only separated by a single newline, so it's a separate line in the same paragraph.
Admonitions
This is a note component
This is a tip component
This is important/info component
This is a caution/warning component
This is a danger component