Skip to main content

Components

·452 words·3 mins
A showcase of Blowfish components with Fortego’s custom color scheme.

Alert Components
#

Alerts are perfect for highlighting important information:

Default Alert - This uses the primary steel blue color.
Success Alert - Great for confirmations and positive messages.
Info Alert - Use this for informational content that needs attention.
Warning Alert - Important notices that require user attention.
Hot Alert - For urgent or exciting announcements with our bitcoin orange accent!
Idea Alert - Share insights and innovative thinking.

Badges
#

Badges are inline elements perfect for tags, labels, and metadata:

Default Badge Primary Secondary Accent Technology Security Innovation

Buttons
#

Interactive buttons styled with Fortego colors:

Standard Button Learn About Features External Link

Icon Buttons
#

Combine buttons with icons for enhanced UX:

Featured Download Continue

Typography & Text Styles
#

Headings Hierarchy
#

Heading 1
#

Heading 2
#

Heading 3
#

Heading 4
#

Heading 5
#
Heading 6
#

Text Emphasis
#

Regular text appears in our custom dark brown color on the papyrus background.

Bold text stands out clearly.

Italic text for subtle emphasis.

Bold and italic for maximum emphasis.

Links #

This is a standard link that will use our primary steel blue color.

Here’s another example link to demonstrate hover states.

Lists
#

Unordered List
#

  • First item using steel blue bullets
  • Second item with perfect contrast
  • Third item showcasing readability
    • Nested item one
    • Nested item two
    • Nested item three

Ordered List
#

  1. Primary color: Steel blue
  2. Secondary color: Bronze
  3. Accent color: Bitcoin orange
  4. Background: Papyrus
  5. Text: Dark brown

Blockquotes
#

“In the world of digital assets, security and innovation must go hand in hand.”

— Fortego Philosophy

Single line blockquote demonstrating our typography.


Code Blocks
#

Inline code looks like this: const color = "steel-blue" with proper styling.

Block code example:

// Fortego color palette
const colors = {
  primary: '#4178AF',    // Steel blue
  secondary: '#B48755',   // Bronze  
  accent: '#F7931A',      // Bitcoin orange
  background: '#F5F0E6',  // Papyrus
  text: '#2D231A'         // Dark brown
};
/* Custom styling */
:root {
  --color-primary: 65, 120, 175;
  --color-secondary: 180, 135, 85;
  --color-accent: 247, 147, 26;
}

Horizontal Rules
#

Horizontal rules help separate content:


They use our color scheme for subtle visual separation.


Tables
#

Color Hex Code Usage
Steel Blue #4178AF Primary brand
Bronze #B48755 Secondary
Bitcoin #F7931A Accents & CTA
Papyrus #F5F0E6 Background
Dark Brown #2D231A Text & Headers

Icons
#

Blowfish includes icon support:


Summary
#

This page demonstrates how Fortego’s custom color scheme integrates seamlessly with all Blowfish components, creating a cohesive and professional appearance throughout the site.

All components are now styled with Fortego’s unique color palette: steel blue, bronze, and bitcoin orange on a warm papyrus background with dark brown text.