Our Visual Identity
Welcome to the Framebyte brand guidelines. This document outlines the core elements that define our visual presence across all platforms and communications.
Color Palette
Primary Emerald
#34d399The core brand color, used for primary actions and highlights.
Shades
Secondary Teal
#2dd4bfComplementary color for secondary actions and balanced UI.
Accent Cyan
#22d3eeLight accents, info states, and interactive elements.
Destructive Rose
#ef4444Used for errors, warnings, and high-priority negative actions.
Background
#030712Primary canvas color for the entire platform.
Muted
#94a3b8Used for secondary text, disabled states, and borders.
Typography
Outfit
Headings & Display
A geometric sans-serif that brings a modern, approachable feel to our brand headlines.
Sample Specimen
The quick brown fox jumps over the lazy dog
Light 300
Regular 400
Medium 500
Bold 700
Inter
Body & UI Components
Designed for high legibility and clean presentation in paragraphs and functional UI parts.
Sample Specimen
The quick brown fox jumps over the lazy dog
Light 300
Regular 400
Medium 500
Bold 700
Our Core Principles
Precision
Every frame and every byte matters. Our design is pixel-perfect and performance-driven.
Clarity
We prioritize information hierarchy and clear communication over excessive decoration.
Innovation
Using modern tech like glassmorphism and smooth animations to lead the digital frontier.
Graphic Design Elements
Social Media & Layouts
- Whitespace: Always maintain ample breathing room around central elements and text. Never crowd the edges.
- Imagery: Use high-contrast, professional photography. Prefer dark backgrounds with neon/glowing accents (Emerald/Cyan).
- Gradients: Apply gradients primarily to text highlights, buttons, or subtle background blurs. Avoid harsh linear gradients.
Visual Language
- Glassmorphism: Use blurred backgrounds with slight transparency and thin borders for depth (cards, overlays).
- Iconography: Use rounded, medium-weight outline icons (like Lucide styles). Keep sizes consistent.
- Shapes: Favor rounded rectangles (`rounded-2xl` / `3xl`) and circular elements over sharp corners.
Video Editing & Motion
Pacing & Flow
Fast-paced but digestable. Keep hooks under 3 seconds. Use J-cuts and L-cuts for seamless audio-visual transitions. Avoid long, static drone shots unless for emphasis.
Captions & Text
Use Outfit Bold for central captions. Keep to 2-4 words per screen. Highlight key words in Primary Emerald (#10b981) or yellow. Always add a subtle drop-shadow to text.
Sound Design
Audio is 50% of the video. Use subtle whooshes for fast transitions, moderate risers for build-ups, and soft impacts for text reveals. Keep background music at -20db below voiceover.