Brand Kit

Official brand guidelines for Feisworld Media. Use these assets and guidelines to maintain consistency across all touchpoints.

Logo

The Feisworld Media logo uses the Outfit font (700 weight). "Feisworld" appears in black, "Media" in crimson. For production assets, export from Figma with outlined fonts.

Primary Logo

Icon / Favicon

Usage Guidelines

  • Maintain minimum clear space equal to the height of the "F" around the logo.
  • Do not stretch, rotate, or distort the logo in any way.
  • Use the standard logo on light backgrounds. For dark backgrounds, use the white version.
  • Minimum logo width: 120px for digital, 1 inch for print.
  • For press/media use, the crimson background icon is preferred for maximum brand recognition.

PNG downloads are rendered with the correct Outfit Bold font at high resolution: 2400x600px for logos and 1024x1024px for icons (suitable for 300+ DPI print).

Color Palette

Brand Colors

  • Crimson
    Hex: #be123c oklch(0.55 0.22 15) --crimson

  • Crimson Light
    Hex: #e11d48 oklch(0.65 0.18 15) --crimson-light

  • Teal
    Hex: #0d9488 oklch(0.55 0.12 195) --teal

  • Teal Light
    Hex: #14b8a6 oklch(0.65 0.10 195) --teal-light

Neutrals

  • Black
    Hex: #171717
  • Gray 900
    Hex: #262626
  • Gray 600
    Hex: #6b6b6b
  • Gray 400
    Hex: #a3a3a3
  • Gray 200
    Hex: #e5e5e5
  • Gray 100
    Hex: #f5f5f5
  • White
    Hex: #ffffff

Color Usage

  • Primary Actions
    Use Crimson for primary buttons, links, and call-to-action elements. It draws attention and creates visual hierarchy.

  • Secondary Elements
    Use Teal sparingly for secondary accents, charts, and to create visual variety without competing with Crimson.

  • Text & Backgrounds
    Use Black for primary text, Gray 600 for secondary text, and White/Gray 100 for backgrounds.

  • Accessibility
    Ensure sufficient contrast ratios (4.5:1 for normal text, 3:1 for large text). Crimson on white passes WCAG AA.

Typography

Headings

  • Font: Outfit
    Used for all headings, navigation, and display text. Bold weight (700) for emphasis.
    View on Google Fonts

Body

  • Font: DM Sans
    Used for body text, paragraphs, and UI elements. Regular (400) and medium (500) weights.
    View on Google Fonts

Code

  • Font: JetBrains Mono
    Used for code snippets, technical content, and monospace elements.
    View on Google Fonts

Type Scale

  • Heading 1
    Outfit700 / 3rem / 48px
    "The quick brown fox"

  • Heading 2
    Outfit700 / 2.25rem / 36px
    "The quick brown fox"

  • Heading 3
    Outfit700 / 1.5rem / 24px
    "The quick brown fox"

  • Body
    DM Sans400 / 1rem / 16px
    "The quick brown fox jumps over the lazy dog."

  • Body Small
    DM Sans400 / 0.875rem / 14px
    "The quick brown fox jumps over the lazy dog."

  • Code
    JetBrains Mono400 / 0.875rem / 14px
    const feisworld = "media"

UI Components

Buttons

  • Primary Button
  • Secondary Button
  • Outline Button
  • Text Link

Cards

Card Title

Cards use 0.25rem border radius, 1px border, and consistent padding.

Card with Shadow

Use subtle shadows for elevation and visual hierarchy.

Accent Card

Use crimson tints for highlighted or featured content.

Spacing Scale

4px

8px

12px

16px

24px

32px

48px

64px

Use multiples of 4px for consistent spacing. Common values: 4, 8, 12, 16, 24, 32, 48, 64.

Content Components

These components are used in blog posts and articles. They follow consistent styling defined in our content system.

TL;DR Summary Box

Quick Summary

  • Key point one with supporting details
  • Key point two with supporting details

Callout Boxes

  • Tip
    Pro tips and helpful suggestions use green/emerald styling.
  • Warning
    Warnings and cautions use amber/yellow styling.
  • Info
    General information uses neutral gray styling.

Verdict Box

  • Verdict: Used for final conclusions or recommendations. Features a crimson border and subtle background tint.

Pros & Cons Lists

Pros

  • First advantage or benefit
  • Second advantage or benefit

Cons

  • First disadvantage or limitation
  • Second disadvantage or limitation

FAQ Accordion

  • What is the question format?+ FAQs use native HTML details/summary elements for SEO-friendly accordions. The plus sign rotates to minus when expanded.

  • Another example question?+ Consistent styling with rounded corners, subtle hover states, and clear visual hierarchy.

Blockquote

Blockquotes feature a crimson left border and subtle background. Used for quotes, testimonials, or highlighted text.

Code

Inline Code

Use inline code for short code snippets within text.

Code Block

const feisworld = "media";

Ratings

  • Star Rating
    ★★★★☆

  • Numeric Rating
    4.5/5

Voice & Tone

We Are

  • Authentic — Real stories, real expertise, no fluff
  • Expert — 15+ years of content creation experience
  • Approachable — Professional but warm and friendly
  • Forward-thinking — AI-native, future-focused

We Avoid

  • Hype — No exaggerated claims or buzzwords
  • Jargon — Clear language over industry speak
  • Formality — Conversational, not corporate
  • Vagueness — Specific examples and data