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 Logos
We have two logo versions: a full-color logo for light backgrounds and an all-white logo for dark backgrounds.
Full Color (Light Backgrounds) 
All White (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
Brand Colors
Universal brand palette used across all sections of the Rankability platform, marketing, and communications.
#0B2A66
Hero backgrounds, headers
#1E63FF
Accents, buttons, links
#151823
Dark text, headings
#9197A6
Secondary text, captions
#F5F7FB
Light backgrounds
#C89A3C
Certifications, badges, highlights
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
- • Brand colors are universal and should be used consistently across all sections
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
Video Production Guide
High-End Tech Documentary style standards for all Rankability video content. Every video should feel like a premium documentary about AI and search technology.
High-End Tech Documentary Style
Our videos embody the production quality of premium tech documentaries. Think Apple keynotes meets Bloomberg technology segments - clean, authoritative, and visually sophisticated.
Pacing
Deliberate and confident. Let information breathe.
Tone
Authoritative yet approachable. Expert without arrogance.
Quality
Every frame intentional. No filler, no dead air.
Editing & Pacing
Zero-Gap Editing
- • Remove all pauses, "ums," and filler words
- • Cut directly from end of one sentence to start of next
- • Maintain natural speech rhythm despite tight editing
- • Use room tone to smooth cuts when needed
- • No dead air - every second should deliver value
J/L Cuts
- • J-Cut: Audio starts before video transition (builds anticipation)
- • L-Cut: Audio continues after video transition (maintains flow)
- • Use J-cuts to introduce screen recordings
- • Use L-cuts to return from demonstrations
- • Creates professional, documentary-quality transitions
Key Principle: Pacing should feel like a conversation with the smartest person in the room - efficient, clear, and respectful of the viewer's time.
Screen Recordings
Recording Standards
- • Resolution: 4K (3840×2160) or 1080p minimum
- • Frame rate: 60fps for smooth cursor movement
- • Clean desktop - hide all personal icons/bookmarks
- • Use browser in incognito mode (clean UI)
- • Zoom browser to 125-150% for visibility
Cursor & Interaction
- • Use default system cursor (no custom cursors)
- • Move cursor smoothly and deliberately
- • Pause cursor briefly on important elements
- • Use subtle click animations if software supports
- • Never rush - let viewers follow the action
Zoom & Focus
- • Use smooth zoom transitions (0.5-1s duration)
- • Zoom to 150-200% on key interface elements
- • Center the action in frame after zooming
- • Return to full view before major context shifts
Annotations
- • Use subtle highlight boxes (Brand Blue, 50% opacity)
- • Arrows: Simple, clean, same brand colors
- • Text callouts: Graphik Medium, 24-32px
- • Remove annotations after 2-3 seconds
Sound Design
Background Music
- • Ambient electronic, minimal percussion
- • Volume: -20dB to -25dB under voice
- • Fade in over 2-3 seconds at start
- • Swell slightly during transitions
- • No lyrics - instrumental only
Voice Audio
- • Target level: -6dB to -3dB peak
- • Apply light compression (3:1 ratio)
- • High-pass filter at 80Hz
- • De-ess if needed (6-8kHz range)
- • Consistent volume throughout
Sound Effects
- • Subtle "whoosh" for transitions (0.3-0.5s)
- • Soft clicks for UI interactions
- • Light risers before key reveals
- • Keep SFX volume low (-15dB to -20dB)
- • Never distracting - always enhancing
On-Screen Text & Typography
Color-Coded Text System
Use consistent color coding to help viewers quickly identify information types:
White
General information, narration points
Electric Blue #1E63FF
Keywords, technical terms, features
Green #00C06C
Wins, results, positive outcomes
Typography Specs
- • Font: Graphik (Medium or Semibold for titles)
- • Title cards: 48-72px, centered
- • Lower thirds: 32-40px, left-aligned
- • Callouts: 24-32px with subtle shadow
- • Always use proper kerning and tracking
Animation Rules
- • Fade in: 0.3-0.5 seconds, ease-out
- • Fade out: 0.2-0.3 seconds, ease-in
- • Slide in: From bottom or left, 0.4s
- • Hold on screen: 2-4 seconds minimum
- • No bouncy or playful animations
B-Roll Guidelines
Approved B-Roll Types
- ✓ Screen recordings of Rankability platform
- ✓ Data visualizations and charts
- ✓ Abstract tech motion graphics
- ✓ Professional office/workspace footage
- ✓ AI/search engine interface demonstrations
- ✓ Hands typing on keyboard (close-up)
Avoid
- ✗ Generic stock footage (shaking hands, meetings)
- ✗ Overly corporate or staged footage
- ✗ Cheesy "hacker" or "AI brain" visuals
- ✗ Low-resolution or watermarked footage
- ✗ Footage that doesn't match color grade
- ✗ Any footage longer than 5-7 seconds per clip
B-Roll Duration: Cut to B-roll for 3-7 seconds maximum. Always return to presenter or screen demonstration. B-roll should support the narrative, never become the narrative.
Video Thumbnails
Specifications
- • Dimensions: 1280×720px (16:9)
- • File format: PNG or JPEG
- • Max file size: 2MB
- • Include faces when possible (increases CTR)
- • 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
- • Consistent style across series
- • High contrast for visibility at small sizes
Intro & Outro
Intro (3-5 seconds)
- • Animated logo reveal with subtle motion
- • Sound: Minimal brand sting (electronic)
- • Cross-fade to content
- • Optional: Episode title card after logo
Outro (5-8 seconds)
- • Clear CTA: "Start free trial" or "Subscribe"
- • Website URL: rankability.com
- • Logo lockup centered
- • Fade to black over final 1-2 seconds
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." |