This post shows you how to use your beautiful color palette for emphasis in your content! You now have several ways to add primary-scarlet and other colors to your writing.
Text Colors
You can emphasize individual words or phrases with color:
- Turquoise surf for cool highlights
- Cerulean blue for professional emphasis
- Bright amber for warm attention-grabbing text
- Primary scarlet for important warnings or key points
Background Highlights
For more emphasis, you can highlight entire phrases:
This is highlighted in turquoise
This stands out with bright amber
This demands attention with scarlet
Emphasis Boxes
For important information, use emphasis boxes:
How to Use These in Your Content
Method 1: Inline HTML in Markdown
This is normal text with <span class="text-scarlet">scarlet emphasis</span> in the middle.
Method 2: CSS Classes
<span class="text-turquoise">**Bold turquoise text**</span>
<span class="highlight-amber">Highlighted amber text</span>
Method 3: Emphasis Boxes
<div class="emphasis-turquoise">
<strong>Title:</strong> Your important content here.
</div>
Method 4: Direct CSS (Advanced)
<span style="color: var(--primary-scarlet); font-weight: bold;">
Custom scarlet text
</span>
Available Color Classes
Text Colors:
.text-turquoise- Turquoise surf.text-cerulean- Cerulean blue.text-amber- Bright amber.text-scarlet- Primary scarlet
Highlights:
.highlight-turquoise- Turquoise highlight.highlight-amber- Amber highlight.highlight-scarlet- Scarlet highlight
Emphasis Boxes:
.emphasis-turquoise- For insights and information.emphasis-amber- For important notices.emphasis-scarlet- For critical warnings
Physics Examples
Here’s how you might use these in your physics content:
The quantum coherence time in our superconducting circuits was measured to be T₂ = 45 μs.
The colors automatically adapt to light and dark themes, so they’ll always look great! 🎨
Enjoyed this post?