Congo Theme Style Guide #

This page demonstrates the complete design system for the Congo theme, including interactive theme switching and comprehensive content styling examples.

Interactive Theme Switcher #

Dark Mode

Current Preview: Congo Theme (Light Mode)

Click any theme below to preview how it would look on your site. Toggle dark mode to see both light and dark variations.

Congo

Violet & Fuchsia theme (default)

colorScheme = "congo"

Avocado

Lime & Emerald theme

colorScheme = "avocado"

Cherry

Rose & Green theme

colorScheme = "cherry"

Fire

Orange & Rose theme

colorScheme = "fire"

Ocean

Blue & Cyan theme

colorScheme = "ocean"

Sapphire

Indigo & Pink theme

colorScheme = "sapphire"

Slate

Slate & Gray theme

colorScheme = "slate"

Generated CSS Code #

Current Theme CSS Variables

Below is the actual CSS code that Congo uses for the Congo theme:

:root {
  /* Neutral Colors (Gray) */
  --color-neutral-50: 250, 250, 250;
  --color-neutral-100: 244, 244, 245;
  --color-neutral-200: 228, 228, 231;
  --color-neutral-300: 212, 212, 216;
  --color-neutral-400: 161, 161, 170;
  --color-neutral-500: 113, 113, 122;
  --color-neutral-600: 82, 82, 91;
  --color-neutral-700: 63, 63, 70;
  --color-neutral-800: 39, 39, 42;
  --color-neutral-900: 24, 24, 27;

  /* Primary Colors (Violet) */
  --color-primary-50: 245, 243, 255;
  --color-primary-100: 237, 233, 254;
  --color-primary-200: 221, 214, 254;
  --color-primary-300: 196, 181, 253;
  --color-primary-400: 167, 139, 250;
  --color-primary-500: 139, 92, 246;
  --color-primary-600: 124, 58, 237;
  --color-primary-700: 109, 40, 217;
  --color-primary-800: 91, 33, 182;
  --color-primary-900: 76, 29, 149;

  /* Secondary Colors (Fuchsia) */
  --color-secondary-50: 253, 244, 255;
  --color-secondary-100: 250, 232, 255;
  --color-secondary-200: 245, 208, 254;
  --color-secondary-300: 240, 171, 252;
  --color-secondary-400: 232, 121, 249;
  --color-secondary-500: 217, 70, 239;
  --color-secondary-600: 192, 38, 211;
  --color-secondary-700: 162, 28, 175;
  --color-secondary-800: 134, 25, 143;
  --color-secondary-900: 112, 26, 117;
}

Colors #

### Current Theme Colors - Congo

Color Token	CSS Token	Hex Value	Usage
Primary 50	`--color-primary-50`	rgb(245, 243, 255)	Light backgrounds
Primary 100	`--color-primary-100`	rgb(237, 233, 254)	Subtle backgrounds
Primary 200	`--color-primary-200`	rgb(221, 214, 254)	Borders, dividers
Primary 300	`--color-primary-300`	rgb(196, 181, 253)	Disabled states
Primary 400	`--color-primary-400`	rgb(167, 139, 250)	Secondary text
Primary 500	`--color-primary-500`	rgb(139, 92, 246)	Primary brand color
Primary 600	`--color-primary-600`	rgb(124, 58, 237)	Primary text, links
Primary 700	`--color-primary-700`	rgb(109, 40, 217)	Hover states
Primary 800	`--color-primary-800`	rgb(91, 33, 182)	Active elements
Primary 900	`--color-primary-900`	rgb(76, 29, 149)	Deep text

Neutral Colors #

Note: Neutral colors vary by Congo theme. Each theme uses a different neutral palette (Gray, Stone, or Slate) to complement its primary colors. Congo uses a 10-level color system from 50 (lightest) to 900 (darkest).

Color Token	CSS Token	Hex Value	Usage
Neutral 50	`--color-neutral-50`	rgb(250, 250, 250)	Page backgrounds
Neutral 100	`--color-neutral-100`	rgb(244, 244, 245)	Card backgrounds
Neutral 200	`--color-neutral-200`	rgb(228, 228, 231)	Borders
Neutral 300	`--color-neutral-300`	rgb(212, 212, 216)	Input borders
Neutral 400	`--color-neutral-400`	rgb(161, 161, 170)	Placeholder text
Neutral 500	`--color-neutral-500`	rgb(113, 113, 122)	Secondary text
Neutral 600	`--color-neutral-600`	rgb(82, 82, 91)	Body text
Neutral 700	`--color-neutral-700`	rgb(63, 63, 70)	Headings
Neutral 800	`--color-neutral-800`	rgb(39, 39, 42)	Dark text
Neutral 900	`--color-neutral-900`	rgb(24, 24, 27)	Darkest text

Secondary Colors #

Note: Secondary colors change based on the selected Congo theme color scheme, complementing the primary colors. Each theme has its own unique secondary color palette.

Color Token	CSS Token	Hex Value	Usage
Secondary 50	`--color-secondary-50`	rgb(253, 244, 255)	Light accent backgrounds
Secondary 100	`--color-secondary-100`	rgb(250, 232, 255)	Subtle accent backgrounds
Secondary 200	`--color-secondary-200`	rgb(245, 208, 254)	Accent borders, dividers
Secondary 300	`--color-secondary-300`	rgb(240, 171, 252)	Disabled accent states
Secondary 400	`--color-secondary-400`	rgb(232, 121, 249)	Secondary accent text
Secondary 500	`--color-secondary-500`	rgb(217, 70, 239)	Secondary brand color
Secondary 600	`--color-secondary-600`	rgb(192, 38, 211)	Secondary links
Secondary 700	`--color-secondary-700`	rgb(162, 28, 175)	Secondary hover states
Secondary 800	`--color-secondary-800`	rgb(134, 25, 143)	Strong accent
Secondary 900	`--color-secondary-900`	rgb(112, 26, 117)	Deep accent

Typography #

Size	Token	Example	Usage
3XL	`text-3xl`	The quick brown fox	Page titles
2XL	`text-2xl`	The quick brown fox	Section headers
XL	`text-xl`	The quick brown fox	Card titles
LG	`text-lg`	The quick brown fox	Large text
Base	`text-base`	The quick brown fox	Body text
SM	`text-sm`	The quick brown fox	Small text
XS	`text-xs`	The quick brown fox	Captions

Font Weights #

Weight	Token	Example
Light	`font-light`	The quick brown fox
Normal	`font-normal`	The quick brown fox
Medium	`font-medium`	The quick brown fox
Semibold	`font-semibold`	The quick brown fox
Bold	`font-bold`	The quick brown fox

Spacing #

Token	Value	Usage
1	`0.25rem`	4px
2	`0.5rem`	8px
3	`0.75rem`	12px
4	`1rem`	16px
6	`1.5rem`	24px
8	`2rem`	32px
12	`3rem`	48px
16	`4rem`	64px
24	`6rem`	96px

Text Links #

Primary Link #

This is a primary link

<a href="#" class="text-primary-600 hover:text-primary-700 underline">Primary Link</a>

Secondary Link #

This is a secondary link

<a href="#" class="text-neutral-600 hover:text-primary-600 underline">Secondary Link</a>

Subtle Link #

This is a subtle link

<a href="#" class="text-primary-600 hover:underline">Subtle Link</a>

External Link #

This is an external link

<a href="#" class="text-primary-600 hover:text-primary-700 underline" target="_blank">
  External Link <svg>...</svg>
</a>

Components #

Buttons #

Badges #

Primary Secondary Error Success Warning

Card #

Card Title

This is a sample card component with some example content to demonstrate the styling.

Form Input #

Sample Input

Usage Guidelines #

Color Usage #

Use Primary 500 for main brand elements and call-to-action buttons
Use Primary 600 for text links and interactive elements
Use Neutral colors for backgrounds, borders, and body text
Maintain sufficient contrast ratios for accessibility

Typography Scale #

Use consistent heading hierarchy (3XL → 2XL → XL → LG)
Stick to the defined font weights for consistency
Ensure proper line-height for readability

Spacing System #

Use the 4px base unit system for consistent spacing
Apply spacing tokens consistently across components
Maintain visual rhythm with consistent vertical spacing

Interactive Elements #

Include hover states for all clickable elements
Use subtle transitions for smooth interactions
Ensure touch targets are at least 44px for mobile accessibility

Available Congo Themes #

The Congo theme comes with several built-in color schemes. To change your site’s theme, update the colorScheme parameter in your config/_default/params.toml file:

colorScheme = "forest"  # or congo, avocado, ocean, cherry, fire, sapphire, slate, neon

Each theme includes both light and dark mode variations that automatically adapt based on user preferences or manual selection.

Interactive UI Elements #

This section demonstrates various form controls and interactive elements that adapt to the current theme:

All UI elements below will automatically update their colors when you switch themes above. Try changing themes to see the live adaptation!

Form Controls

  <div class="form-group">
    <label for="demo-select">Select Dropdown</label>
    <select id="demo-select" class="form-control">
      <option value="">Choose an option...</option>
      <option value="congo">Congo Theme</option>
      <option value="avocado">Avocado Theme</option>
      <option value="cherry">Cherry Theme</option>
      <option value="fire">Fire Theme</option>
      <option value="ocean">Ocean Theme</option>
      <option value="forest">Forest Theme</option>
      <option value="minimal">Minimal Theme</option>
    </select>
  </div>
  
  <div class="form-group">
    <label for="demo-input">Text Input</label>
    <input type="text" id="demo-input" class="form-control" placeholder="Enter some text...">
  </div>
  
  <div class="form-group">
    <label for="demo-textarea">Textarea</label>
    <textarea id="demo-textarea" class="form-control" rows="3" placeholder="Enter multiple lines of text..."></textarea>
  </div>
</div>

<div class="ui-section">
  <h4>Radio Buttons</h4>
  <div class="radio-group">
    <div class="radio-item">
      <input type="radio" id="radio1" name="demo-radio" value="option1" checked>
      <label for="radio1">Primary Option</label>
    </div>
    <div class="radio-item">
      <input type="radio" id="radio2" name="demo-radio" value="option2">
      <label for="radio2">Secondary Option</label>
    </div>
    <div class="radio-item">
      <input type="radio" id="radio3" name="demo-radio" value="option3">
      <label for="radio3">Alternative Option</label>
    </div>
  </div>
  
  <h4 style="margin-top: 20px;">Checkboxes</h4>
  <div class="checkbox-group">
    <div class="checkbox-item">
      <input type="checkbox" id="check1" checked>
      <label for="check1">Enable notifications</label>
    </div>
    <div class="checkbox-item">
      <input type="checkbox" id="check2">
      <label for="check2">Subscribe to newsletter</label>
    </div>
    <div class="checkbox-item">
      <input type="checkbox" id="check3">
      <label for="check3">Remember my preferences</label>
    </div>
  </div>
</div>

<div class="ui-section">
  <h4>Buttons</h4>
  <button class="btn btn-primary">Primary Button</button>
  <button class="btn btn-secondary">Secondary Button</button>
  <button class="btn btn-outline">Outline Button</button>
  
  <h4 style="margin-top: 20px;">Toggle Switches</h4>
  <div class="toggle-container">
    <span>Feature A</span>
    <div class="toggle-switch active" onclick="toggleSwitch(this)">
      <div class="toggle-slider"></div>
    </div>
  </div>
  <div class="toggle-container">
    <span>Feature B</span>
    <div class="toggle-switch" onclick="toggleSwitch(this)">
      <div class="toggle-slider"></div>
    </div>
  </div>
  <div class="toggle-container">
    <span>Feature C</span>
    <div class="toggle-switch active" onclick="toggleSwitch(this)">
      <div class="toggle-slider"></div>
    </div>
  </div>
</div>

<div class="ui-section">
  <h4>Range Slider & File Input</h4>
  
  <div class="form-group">
    <label for="demo-range">Range Slider</label>
    <input type="range" id="demo-range" class="form-control" min="0" max="100" value="50">
    <small style="color: rgb(var(--color-neutral-600));">Value: <span id="range-value">50</span></small>
  </div>
  
  <div class="form-group">
    <label for="demo-file">File Upload</label>
    <input type="file" id="demo-file" class="form-control">
  </div>
  
  <div class="form-group">
    <label for="demo-date">Date Input</label>
    <input type="date" id="demo-date" class="form-control">
  </div>
</div>

Additional Content Examples #

Buttons and Interactive Elements #

Since Congo is primarily a content theme, buttons are typically styled through custom CSS or Congo’s built-in shortcodes:

Primary Button Secondary Button

Badges and Tags #

You can create inline badges using Congo’s badge shortcode:

New Updated Featured

Key-Value Pairs #

Technology Stack:

Frontend: Hugo Static Site Generator
Theme: Congo v2.7.3
Styling: Tailwind CSS
Deployment: Netlify
CMS: Netlify CMS

Definition Lists #

Term 1: Definition for term 1
Term 2: Definition for term 2; Another definition for term 2

Code with Syntax Highlighting #

# Python example
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# Generate sequence
fib_sequence = [fibonacci(i) for i in range(10)]
print(f"Fibonacci sequence: {fib_sequence}")

# YAML configuration example
site:
  title: "Balamurugan's Portfolio"
  description: "UX Designer & Developer"
  theme: "congo"
  params:
    colorScheme: "congo"
    defaultAppearance: "light"

{
  "name": "portfolio-site",
  "version": "1.0.0",
  "dependencies": {
    "hugo": "^0.124.0",
    "congo-theme": "^2.7.3"
  }
}

Advanced Formatting #

Keyboard Shortcuts #

Press Ctrl + C to copy, or ⌘ + V to paste on Mac.

Abbreviations #

The HTML specification is maintained by the W3C.

*[HTML]: Hyper Text Markup Language *[W3C]: World Wide Web Consortium

Embedded Content #

YouTube Video Embed #

Twitter Embed #

Custom Styled Content #

Pro Tip: This is a custom styled callout that adapts to the current theme colors. The background and border colors change automatically when you switch themes above.

This style guide demonstrates the full range of content styling available in the Congo theme. All elements automatically adapt to the selected color scheme and respect both light and dark mode preferences.

Markdown Content Styling Reference #

The following section demonstrates how various markdown elements are styled in the Congo theme:

Typography Examples #

Heading 1 #

Heading 2 #

Heading 3 #

Heading 4 #

Heading 5 #

Heading 6 #

Bold text and italic text demonstrate text emphasis. You can also use inline code for technical terms.

Text Formatting #

This is a paragraph with bold text, italic text, and bold italic text. Here’s some inline code and a link to the Congo documentation.

~~Strikethrough text~~ is also supported.

This is a blockquote. It’s useful for highlighting important information or quotes from other sources.
Blockquotes can span multiple paragraphs and are styled consistently across all Congo themes.

Lists #

Unordered List #

First item
Second item with a longer description to show wrapping
- Nested item
- Another nested item
Third item

Ordered List #

First numbered item
Second numbered item
1. Nested numbered item
2. Another nested item
Third numbered item

Task List #

Completed task
Pending task
Another pending task

Code Examples #

Here’s an inline code example: const theme = 'congo'

// Code block example
function updateTheme(themeName) {
  const root = document.documentElement;
  root.style.setProperty('--primary-color', themeName);
  console.log(`Theme changed to: ${themeName}`);
}

/* CSS code block */
:root {
  --color-primary-500: 139, 92, 246;
  --color-neutral-100: 245, 245, 245;
}

<!-- HTML code block -->
<div class="theme-card" data-theme="congo">
  <h3>Congo Theme</h3>
  <p>Default Congo color scheme</p>
</div>

Tables #

Theme	Primary Color	Secondary Color	Neutral Color
Congo	Violet	Fuchsia	Gray
Avocado	Lime	Emerald	Stone
Cherry	Rose	Pink	Gray
Fire	Orange	Red	Slate
Ocean	Sky	Blue	Slate
Forest	Green	Emerald	Neutral
Minimal	Slate	Gray	Zinc

Alerts and Callouts #

Note: This is an alert callout using Congo’s shortcode system.

Info: This demonstrates an info alert with an icon.

Images and Media #

Congo Theme Preview — Sample image showing content styling

Horizontal Rule #

Mathematical Expressions #

When KaTeX is enabled, you can include mathematical expressions:

Inline math: $E = mc^2$

Block math: $$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

Footnotes #

Here’s a sentence with a footnote¹.

This is the footnote text that appears at the bottom of the page. ↩︎