Rankability Brand Standards
The complete guide to our visual identity, voice, and design system. Use these standards to maintain consistency across all touchpoints.
Logo Usage
Proper logo placement, sizing, and clear space requirements.
Color Tokens
Complete color palette with hex values and usage guidelines.
Typography
Graphik font family usage, type scale, and hierarchy.
Questions or Feedback?
Contact the design team at [email protected] for clarifications or to request updates to these standards.
Logo Usage
Our logo is the primary visual identifier of the Rankability brand. Use it consistently across all materials.
Primary Logo
Use the dark version on light backgrounds and the light version on dark backgrounds.
Clear Space
Maintain a minimum clear space equal to the height of the "R" in Rankability around all sides of the logo.
Minimum Size
Digital: 24px height
Print: 0.5" / 12mm
Logo Don'ts
Don't rotate the logo
Don't change colors
Don't stretch or distort
Download Logo Assets
Color Tokens
Our color palette is designed to be bold yet professional. Click any swatch to copy the hex value.
Primary Brand Colors
#000E4C
HSL: 229 100% 15%
Primary brand color, headings, CTAs
#327EEF
HSL: 216 86% 57%
Accent color, links, highlights
#F9F9F9
HSL: 0 0% 98%
Background, light sections
Academy Colors
Used exclusively in the Academy section for a distinct, professional learning environment.
#0B2A66
Academy hero backgrounds
#1E63FF
Academy accents, buttons
#151823
Dark text, headings
#9197A6
Secondary text, captions
#F5F7FB
Academy backgrounds
#C89A3C
Certifications, badges
Neutral Colors
#FFFFFF
#F3F4F6
#E5E7EB
#6B7280
#374151
#111827
Color Usage Guidelines
- • Use Deep Navy (#000E4C) for primary CTAs and important headings
- • Brand Blue (#327EEF) is for secondary actions, links, and accents
- • Maintain a minimum contrast ratio of 4.5:1 for text accessibility
- • Academy colors should only be used within the Academy section
Typography
Graphik is our primary typeface, providing a clean, modern, and professional appearance across all materials.
Font Family: Graphik
Aa Bb Cc Dd Ee Ff
The quick brown fox jumps over the lazy dog.
Regular
Weight: 400
Body text, paragraphs
Medium
Weight: 500
Subheadings, emphasis
Semibold
Weight: 600
Section headers, buttons
Bold
Weight: 700
Headlines, titles
Regular Italic
Weight: 400 Italic
Quotes, emphasis
Bold Italic
Weight: 700 Italic
Strong emphasis
Type Scale
Display
48-72px
Display Heading
Weight: 700
Line: 1.1
H1
36-48px
Heading One
Weight: 700
Line: 1.2
H2
30-36px
Heading Two
Weight: 600
Line: 1.25
H3
24-30px
Heading Three
Weight: 600
Line: 1.3
H4
20-24px
Heading Four
Weight: 600
Line: 1.4
Body Large
18-20px
Large body text for lead paragraphs and important content.
Weight: 400
Line: 1.6
Body
16px
Regular body text used for most content throughout the site.
Weight: 400
Line: 1.6
Body Small
14px
Smaller body text for secondary information and metadata.
Weight: 400
Line: 1.5
Caption
12px
Caption / Label Text
Weight: 500
Line: 1.4
Font Files
Graphik is self-hosted for performance. Available weights:
Graphik-Regular.woff2
Graphik-RegularItalic.woff2
Graphik-Medium.woff2
Graphik-Semibold.woff2
Graphik-Bold.woff2
Graphik-BoldItalic.woff2
Web Components
Reusable UI components with consistent styling. Built with Tailwind CSS.
Buttons
<!-- Primary --> <button class="px-6 py-3 bg-[#000E4C] hover:bg-[#001a66] text-white font-semibold rounded-lg"> Primary Button </button>
Cards
Feature Card
Brief description of the feature or benefit goes here.
Highlight Card
Use for premium features or important callouts.
Academy Card
Used specifically in the Academy section.
Form Elements
Badges & Tags
Deck & Video Rules
Standards for presentations, video content, and thumbnails.
Presentation Slides
Slide Dimensions
- • Standard: 16:9 aspect ratio (1920×1080px)
- • Title slides: Logo in top-left, 40px padding
- • Content slides: Logo in bottom-right, small
- • Use Deep Navy or white backgrounds only
Typography in Slides
- • Headlines: Graphik Bold, 48-60pt
- • Subheadlines: Graphik Semibold, 32-40pt
- • Body text: Graphik Regular, 24-28pt
- • Minimum text size: 18pt
Video Thumbnails
Specifications
- • Dimensions: 1280×720px (16:9)
- • File format: PNG or JPEG
- • Max file size: 2MB
- • Include faces when possible (increases CTR)
- • Use contrasting text for titles
- • Keep text to 4-5 words maximum
Style Guidelines
- • Background: Gradient from Navy to Blue
- • Text: White, Graphik Bold, 60-80pt
- • Include Rankability logo watermark
- • Episode/series number if applicable
- • Consistent style across series
Example thumbnail structure: Guest photo on left (if interview), title text on right, gradient background, logo in corner.
Video Intro & Outro
Intro (3-5 seconds)
- • Animated logo reveal
- • Sound: Subtle brand sting
- • Fade to content
Outro (5-8 seconds)
- • CTA: Subscribe / Visit website
- • Social media handles
- • Logo lockup centered
Voice & Tone
How we communicate with our audience across all channels.
Brand Voice
Expert
Knowledgeable without being condescending
Clear
Simple explanations, no jargon overload
Supportive
We're here to help you succeed
Action-Oriented
Focused on results and next steps
Writing Examples
"Optimize your content for AI search in 3 simple steps."
"Leverage our cutting-edge algorithmic solution to synergize your content optimization paradigm."
"Your rankings dropped? Here's how to fix it."
"It appears that your SERP visibility metrics have experienced a downward trajectory."
Tone by Context
| Context | Tone | Example |
|---|---|---|
| Marketing | Confident, inspiring | "Dominate AI search results" |
| Product | Clear, helpful | "Click here to run your first scan" |
| Support | Empathetic, solution-focused | "We understand, let's fix this together" |
| Academy | Educational, encouraging | "By the end of this module, you'll be able to..." |
| Error messages | Calm, actionable | "Something went wrong. Try again or contact us." |