Brand Guidelines

    Brand Identity Manual and Usage Guidelines: Blurt

    Revision date: 2026-09-22

    This document compiles the technical, chromatic, typographic, and compositional guidelines for the visual identity of Blurt. Its objective is to ensure consistency, legibility, and coherence across all physical, digital, and product (Web 3.0) applications.

    Where a colour is used by the web interfaces, this manual names the token that carries it in the codebase (src/app/assets/stylesheets/_variables.scss). Change the token, not the individual rule.

    1. Brand Identity and Philosophy

    • Brand Name: Blurt (graphically rendered in the isotype as B!URT).
    • Purpose / Territory: Decentralized Web 3.0 platform focused on freedom of expression, direct content monetization, and community empowerment.
    • Tone of Voice: Approachable, dynamic, accessible, disruptive, and modern.

    2. Logo and Isotype

    The primary identifier combines an anthropomorphic sphere in corporate orange with a solid black lower band housing the name B!URT (incorporating an inverted/integrated exclamation mark as the letter "I").

    Key Symbol Elements:

    1. Base Sphere: Corporate orange #ff5a00 circle with a top-left highlight to add volume and dynamism.
    2. Expressive Features: Stylized, cartoon-inspired eyes and eyebrows displaying an alert, expressive gaze.
    3. Lower Plate: Semicircular lower black band providing visual grounding and typographic support.
    4. Typographic Wordmark: White typography set against a black background with an accent on the ! mark.

    3. Clear Space and Minimum Size

    3.1. Modular Unit and Clear Space

    To preserve the legibility and prominence of the identifier relative to other graphic elements or text:

    • Modular Unit (y): Corresponds to the total height of the letter B in the internal wordmark.
    • Protective Perimeter Margin: A minimum clear space of one modular unit (y) must be maintained on all sides (top, bottom, left, and right) around the bounding box of the combination mark.
    • No text, graphic, trim edge, or secondary element may intrude into this zone.

    3.2. Minimum Reproduction Sizes

    To prevent loss of detail in the eyes, reflections, and the legibility of the B!URT text:

    Medium / ContextSuggested Minimum SizeSupported Minimum Size
    Digital (Screens)50px x 50px40px x 40px
    Print (Physical)1.5cm x 1.5cm1.0cm x 1.0cm

    Note: Below 40px or 1.0cm, internal facial details and typography lose sharpness, and adequate reproduction cannot be guaranteed.

    4. Corporate Typography

    Open-source typefaces available on Google Fonts are used, aligning with the ecosystem's philosophy of openness and freedom.

    4.1. Primary Typeface: Inter

    • Primary usage: Base typeface for the wordmark, body copy, marketing collateral, and general communications.
    • Characteristics: Neutral, geometric sans-serif specifically designed for high legibility on screens of any resolution.
    • Source: Inter on Google Fonts

    4.2. Web & Headings Typeface: Source Sans 3

    • Primary usage: Primary headings/headers, promotional titles, marketing highlights, and the official website UI.
    • Characteristics: Highly warm typeface with fluid reading rhythm and outstanding contrast in heavy weights (Bold / SemiBold).
    • Source: Source Sans 3 on Google Fonts

    5. Color System

    5.1. Primary Logo Colors

    ColorHEXRGBCMYKApplication
    Blurt Orange#ff5a00255, 90, 0C:0, M:65, Y:100, K:0Primary brand color, isotype body, calls to action
    Blurt Black#0000000, 0, 0C:0, M:0, Y:0, K:100Isotype lower base, high-contrast text
    Pure White#ffffff255, 255, 255C:0, M:0, Y:0, K:0Wordmark text, highlights, and neutral backgrounds

    #ff5a00 is the colour of the logo artwork and of the application icons, and is the reference value for the brand. The web interfaces carry it in the token $color-orange.

    5.2. Complementary Colors / Marketing Accents

    Supporting colors designed for high-contrast combinations across banners, social media, and advertising campaigns. These are campaign colours only; they are not part of the interface palette.

    NameHEXRGBCMYKFunction
    Deep Electric Violet#3626a754, 38, 167C:68, M:77, Y:0, K:35Split backgrounds, institutional marketing blocks
    Vibrant Cyber Green#00ff000, 255, 0C:100, M:0, Y:100, K:0Brush-style highlights, active states, updates / new features

    5.3. Interface Palette

    The web interfaces ship three themes: original, light and dark. original and light differ only in the accent hover colour.

    Shared tokens

    TokenHEXUsage
    $color-orange#ff5a00Accent: action buttons, active links, badges
    $color-orange-light#ff7842Accent hover (original theme only)
    $color-blue-dark#2c3a45Borders, form fields, menu background in dark
    $color-text-white#fafbfcLight text, and page background in light themes
    $color-text-gray#788187Subtitles, inactive icons, dividers
    $color-text-gray-light#a6b2baMetadata, timestamps, auxiliary labels
    $color-text-dark#333333Body text on light backgrounds

    Per theme

    Roleoriginal / lightdark
    Page background#fafbfc ($color-background-off-white)#1c252b ($color-background-dark)
    Card / module surface#ffffff ($color-white)#1c252b ($color-background-dark)
    Primary text#333333 ($color-text-dark)#fafbfc ($color-text-white)
    Secondary text#788187 ($color-text-gray)#a6b2ba ($color-text-gray-light)
    Highlight background#f3faf0#11161a ($color-blue-black-darkest)
    Menu background#1c252b ($color-background-dark)#2c3a45 ($color-blue-dark)

    Contrast note. Orange on white reaches 3.13:1. That meets WCAG AA for large text only; it does not meet the 4.5:1 required for normal body text. Use the accent for headings, buttons and links rather than for running copy, and do not place small orange text on a white background.

    6. Design Tokens

    The interface palette lives in src/app/assets/stylesheets/_variables.scss and is consumed through _themes.scss. Use these names; do not introduce a parallel set.

    $color-orange:                 #ff5a00;  // brand accent
$color-orange-light:           #ff7842;  // accent hover
$color-black:                  #000;
$color-white:                  #fff;

$color-background-off-white:   #fafbfc;  // page background, light themes
$color-background-dark:        #1c252b;  // page background, dark theme
$color-blue-black-darkest:     #11161a;  // highlight background, dark theme
$color-blue-dark:              #2c3a45;  // borders, menu background

$color-text-dark:              #333;     // body text, light themes
$color-text-white:             #fafbfc;  // body text, dark theme
$color-text-gray:              #788187;  // secondary text, light themes
$color-text-gray-light:        #a6b2ba;  // secondary text, dark theme

    For work outside the web front-ends, the same values as CSS custom properties:

    :root {
  --blurt-orange: #ff5a00;
  --blurt-black: #000000;
  --blurt-white: #ffffff;

  --blurt-purple: #3626a7;   /* campaigns only */
  --blurt-green: #00ff00;    /* campaigns only */

  --font-primary: 'Inter', sans-serif;
  --font-headings: 'Source Sans 3', sans-serif;
}

    7. Composition Guidelines & Social Banners

    Based on vertical social media assets (9:16 ratio or story / post formats):

    1. Visual Hierarchy:
      • Top Header: Centered placement of the B!URT logomark against the canvas background, respecting its clear space.
      • Split-Screen Background Composition: Divided backgrounds using complementary solid blocks (e.g., left half in #3626a7 and right half in #ffffff, or dark background #1c252b with #00ff00 green accents).
      • Supporting Imagery: Photographs of people with expressive attitudes or conceptual characters cut out and layered to create three-dimensional depth.
    2. Calls to Action (CTAs):
      • Rounded-corner buttons in corporate orange (#ff5a00) with white or black text.
      • Brush-stroke highlights in neon green (#00ff00) for taglines such as "Empower your community".
    3. Footer Link Bar:
      • Lower bar as a flat horizontal block (orange #ff5a00 or green #00ff00).
      • Clean, centered typography for institutional URLs: blurt.blog / blurtwallet.com

    8. Unacceptable / Prohibited Uses

    • Do not distort proportions: The isotype must always remain perfectly circular.
    • Do not alter the original face colors: The sphere must not be modified with arbitrary shades, nor should the eye colors be inverted.
    • Do not scale below supported minimums: Do not use the logomark at sizes smaller than 40px on digital displays or 1.0cm in print.
    • Do not invade the clear space: Always keep the perimeter clearance equal to the height of the letter "B" free from elements.
    • Do not alter internal typography: The B!URT lettering must not be replaced with another font or rearranged.