Table of Contents
- Introduction & Brand Essence
- Logo
- 2.1 Logo Variations & Usage
- 2.2 Clear Space & Minimum Size
- 2.3 Incorrect Usage
- Color Palette
- 3.1 Primary Colors
- 3.2 Secondary / Accent Colors
- 3.3 Neutral & Support Colors
- 3.4 Color Usage Guidelines & Examples
- Typography
- 4.1 Primary Typeface(s)
- 4.2 Secondary / Supporting Typefaces
- 4.3 Web / Digital Fonts
- 4.4 Hierarchy, Weights & Styles
- 4.5 Usage Rules
- Visual Elements & Graphic Style
- 5.1 Iconography / Illustrations
- 5.2 Patterns, Textures & Overlays
- 5.3 Photography / Image Style
- 5.4 Motion & Animation Principles
- Brand Voice & Messaging
- 6.1 Brand Personality & Tone
- 6.2 Key Messaging Pillars
- 6.3 Do's & Don'ts in Copywriting
- Application Examples
- 7.1 Business Cards
- 7.2 Letterheads & Stationery
- 7.3 Social Media Posts / Banners
- 7.4 Web / App UI Components
- 7.5 Animation / Motion Graphics
- 7.6 Promotional Collateral
- Digital Guidelines
- 8.1 Web / UI Constraints
- 8.2 Responsive Behavior
- 8.3 File Formats & Export Settings
- Brand Assets & File Structure
- 9.1 Master Files (AI, Figma, PSD)
- 9.2 Asset Library (Icons, Logos, Patterns)
- 9.3 Naming Conventions
- Guidelines for Co-Branding / Partnerships
- Governance & Updates
- Contact & Support
1. Introduction & Brand Essence
Mission / Purpose
Deviannies Studio exists to empower businesses with dependable creative support — to "deliver design that's impossible to ignore, hard to forget, and easy to obsess over." (Adapted from homepage messaging) (deviannies.com)
Vision
To be a leading global creative partner — transforming brands through strategic design and visual intelligence.
Core Values
- Clarity & Purpose
- Creativity with Intent
- Reliability & Consistency
- Collaboration & Transparency
- Impact & Results
These values should inform every design decision, every brand interaction, and every collaboration.
2. Logo
2.1 Logo Variations & Usage
You should have (or create) the following logo variants:
- Primary Logo (Full Mark) — the full, preferred version.
- Secondary / Simplified Mark — for use in constrained spaces (e.g. icon, favicon).
- Monochrome / Single-Color Version — black or white version for maximum flexibility.
- Reverse / Inverted Version — for use on dark backgrounds.
Provide all versions in vector (SVG, AI) and high-resolution raster (PNG) formats.
2.2 Clear Space & Minimum Size
- Define a "clear space" around the logo (for instance: the height of the letter "D" in "Deviannies" on all sides).
- Specify a minimum size for legibility (for print and digital). E.g. minimum width for print: 20 mm; digital: 50 px.
2.3 Incorrect Usage
Show visual examples (with "X" marks) of what not to do with the logo. Examples:
- Don't stretch, skew, or distort the logo.
- Don't change the logo colors (outside the approved palette).
- Don't place it on backgrounds with insufficient contrast.
- Don't use drop shadows, glows, or unapproved effects.
- Don't combine it with other graphic elements that interfere, or overlay imagery through it.
3. Color Palette
3.1 Primary Colors
These are the brand's core colors. For example:
| Name | Use case | HEX / RGB / CMYK / Pantone |
|---|
| DVS-Primary Blue | Brand identity, headers, dominant backgrounds | #0A3D91 / RGB(10,61,145) / CMYK(...) |
| Accent Yellow | Highlights, call-to-actions | #FFC500 / RGB(255,197,0) / CMYK(...) |
(These are example names & codes; you should replace with the actual colors you use.)
3.2 Secondary / Accent Colors
Use supporting colors that complement the primaries. These can be used for accents, backgrounds, dividers, etc.
3.3 Neutral & Support Colors
Include whites, off-whites, grays, and blacks for text, background, and structure.
3.4 Color Usage Guidelines & Examples
- Use heavy contrast between text and background (especially for readability).
- Avoid too many colors in one layout — maintain hierarchy and restraint.
- Pair primary with neutral + one accent in most compositions.
- Provide "forbidden combinations" (e.g. primary blue text on secondary blue background).
4. Typography
4.1 Primary Typeface(s)
Name and show the primary font(s) used for headings, logos, etc. (e.g., "Montserrat Bold", "Inter", etc.)
4.2 Secondary / Supporting Typefaces
For body copy, captions, etc. (e.g. "Roboto Regular", "Open Sans", etc.)
4.3 Web / Digital Fonts
If your primary fonts are not web-safe, provide web font alternatives or usage via services (Google Fonts, Adobe Fonts). Include fallback fonts.
4.4 Hierarchy, Weights & Styles
Define a typographic scale:
- H1, H2, H3, H4
- Subhead / Subtitle
- Body / Paragraph
- Caption / Footnote
- Buttons / Navigation
Include font weight, line height, letter spacing, size scaling, color usage.
4.5 Usage Rules
- Limit the number of font weights (to keep consistency).
- Don't mix too many different fonts.
- Always ensure good readability (especially for digital).
- Use italics sparingly; avoid decorative fonts in body text.
5. Visual Elements & Graphic Style
5.1 Iconography / Illustrations
- Define the style of icons (line, filled, flat, outlines, stroke weight).
- Define consistent geometry, corner radius, weights.
- Show how icons align with text and usage rules.
- Provide a library of approved icons.
5.2 Patterns, Textures & Overlays
- Define approved patterns (geometric, abstract, gradient overlays) that complement brand.
- Show correct usage—background, divider, accent, overlay on images, etc.
5.3 Photography / Image Style
- Describe the photography style (light, airy, high-contrast, muted, etc.).
- Define treatments — e.g. color overlays, duotone, cropping guidelines.
- Show acceptable and unacceptable image styles (e.g. avoid too saturated, too many filters, inconsistent treatments).
5.4 Motion & Animation Principles
Because Deviannies does motion and animation:
- Define your animation style (e.g. smooth transitions, ease-in/out, duration guidelines).
- Motion brand transitions (logo reveal, loading animations).
- Keyframe rules (e.g. never more than 3-5 seconds, no abrupt jumps unless intentional).
- Use consistent easing curves (e.g. cubic-bezier, ease-out).
- Show brand transitions, motion logo, micro-interactions in UI.
- Rules for animated text, motion overlays, looping behavior.
6. Brand Voice & Messaging
6.1 Brand Personality & Tone
Define adjectives that describe the voice (e.g. confident, approachable, intelligent, creative, bold). Decide on formality level (friendly vs. formal). Decide pronoun usage (we, us, you).
6.2 Key Messaging Pillars
Outline core message themes you lean on. For example:
- "Design that performs, not just looks pretty"
- "Unlimited creativity, one simple plan"
- "From identity to motion — holistic solutions"
6.3 Do's & Don'ts in Copywriting
Do:
- Use active voice
- Keep sentences concise
- Use "you" and "we" for connection
Don't:
- Use jargon or overly technical terms with clients
- Use passive constructions excessively
- Use slang or overly casual phrases (unless in playful campaigns)
Also include sample approved phrases and taglines, and examples of misuse.
7. Application Examples
Show how your brand should look across real touchpoints. For each, provide mockups:
- 7.1 Business Cards — Front & back, placement of logo, name, title, contact info, QR code (if any).
- 7.2 Letterheads & Stationery — Margins, watermark, header/footer usage.
- 7.3 Social Media Posts / Banners — Templates for Instagram, LinkedIn banner, Twitter cover, Facebook. Rules for how much text, logo placement, image overlay.
- 7.4 Web / App UI Components — Buttons, headers, navigation, cards, forms. Spacing, grid, shadows, hover states.
- 7.5 Animation / Motion Graphics — Short examples: intro, transitions, micro-interactions, etc.
- 7.6 Promotional Collateral — Flyers, brochures, merch, posters, signage — how the brand is applied.
8. Digital Guidelines
8.1 Web / UI Constraints
- Responsive breakpoints
- Grid system (12-column, etc.)
- Padding / margin rules
- Button / input states (normal, hover, active, disabled)
- Accessibility (contrast ratios, alt text, accessible font sizes)
8.2 Responsive Behavior
Show how elements rearrange or scale across desktop → tablet → mobile. Guidelines for hiding or collapsing elements, logo scaling, typography adjustments.
8.3 File Formats & Export Settings
Specify recommended file formats for each medium:
| Use Case | Format | Color Mode | Export Settings |
|---|
| Logos | SVG / AI | RGB / CMYK | Export with outlines, no stray points |
| Web / UI | PNG / SVG / WebP | RGB | Optimized for size, no unnecessary metadata |
| Print | PDF / EPS | CMYK | Embed fonts, 300 dpi, bleed, crop marks |
| Animation | MP4 / GIF / Lottie | RGB | appropriate bitrates, loop settings |
9. Brand Assets & File Structure
9.1 Master Files
- Keep master source files (vector, Figma, etc.) in a secure versioned archive.
- Only trained members should edit master files.
9.2 Asset Library
- Organized folders for logos, icons, patterns, illustrations, textures.
- A naming convention (e.g. logo_primary.svg, icon_phone_filled.svg, pattern_diagonal_01.svg).
9.3 Naming Conventions & Version Control
- Use semantic, consistent names.
- Include version numbers and dates (e.g. logo_primary_v2_2025.svg).
- Document usage rights if external assets are involved (e.g. images, icons).
10. Guidelines for Co-Branding / Partnerships
- How to place Deviannies logo vs partner logo (size ratio, alignment, spacing).
- Acceptable color treatments (monochrome version, reversed).
- Margins and safe zones when combining.
- Do's and don'ts in co-branded collateral.
11. Governance & Updates
- Who owns brand guidelines (internal role or team).
- How and when to review and update (e.g. annually, when rebranding).
- How collaborators (freelancers, agencies) get access to the latest version.
- A process for requesting new assets or variations.
12. Contact & Support
Provide contact details (email, internal Slack or project channel) for brand asset requests, clarifications, or approvals. If there is a brand guardian or team, mention that role.
