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
- 1.Maintain minimum clear space equal to the height of the "F" around the logo.
- 2.Do not stretch, rotate, or distort the logo in any way.
- 3.Use the standard logo on light backgrounds. For dark backgrounds, use the white version.
- 4.Minimum logo width: 120px for digital, 1 inch for print.
- 5.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
#be123c
oklch(0.55 0.22 15)
--crimson
Primary brand color. Use for CTAs, links, and accent elements.
Crimson Light
#e11d48
oklch(0.65 0.18 15)
--crimson-light
Hover states and secondary accents.
Teal
#0d9488
oklch(0.55 0.12 195)
--teal
Accent color for charts, highlights, and secondary CTAs.
Teal Light
#14b8a6
oklch(0.65 0.10 195)
--teal-light
Hover states for teal elements.
Neutrals
Black
#171717
Gray 900
#262626
Gray 600
#6b6b6b
Gray 400
#a3a3a3
Gray 200
#e5e5e5
Gray 100
#f5f5f5
White
#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
Outfit
Used for all headings, navigation, and display text. Bold weight (700) for emphasis.
View on Google FontsBody
DM Sans
Used for body text, paragraphs, and UI elements. Regular (400) and medium (500) weights.
View on Google FontsCode
JetBrains Mono
Used for code snippets, technical content, and monospace elements.
View on Google FontsType Scale
Heading 1
Outfit 700 / 3rem / 48px
The quick brown fox
Heading 2
Outfit 700 / 2.25rem / 36px
The quick brown fox
Heading 3
Outfit 700 / 1.5rem / 24px
The quick brown fox
Body
DM Sans 400 / 1rem / 16px
The quick brown fox jumps over the lazy dog.
Body Small
DM Sans 400 / 0.875rem / 14px
The quick brown fox jumps over the lazy dog.
Code
JetBrains Mono 400 / 0.875rem / 14px
const feisworld = "media"
UI Components
Buttons
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
- 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?+
Another example question?+
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/5Voice & 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