Brand Style Guide

    The SurveyKar
    brand system.

    Consistent identity builds trust at every touchpoint. This document defines how SurveyKar looks, communicates, and behaves — from the logo to the last pixel of a status badge.

    02 — Color

    Brand Colors

    The palette anchors around a warm, saturated orange. Purple is reserved exclusively for AI-powered features — it never appears in general product UI.

    Primary

    Brand Orange

    #E8621A

    Orange Strong

    #B84412

    Orange Mid

    #FEDBCA

    Orange Light

    #FFF2EA

    AI / Secondary — use only for AI features

    AI Purple

    #6B5FDC

    Purple Strong

    #4E43BF

    Purple Light

    #EDEAFF

    Neutral Scale

    Console

    #0E0E11

    Near Black

    #161D2F

    Mid Gray

    #5C6680

    Border

    #D8DCE8

    Canvas

    #F4F5F8

    White

    #FFFFFF

    Status

    Success#167A3A
    Warning#AA5F00
    Error#C23535
    Info#0B5FA5

    03 — Typography

    Type System

    Three typefaces, three roles. IBM Plex Sans handles all product UI and body copy. IBM Plex Mono is for data and precision labels. Inter carries marketing headlines.

    IBM Plex Sans

    The measure of a good survey
    is a better decision.

    ABCDEFGHIJKLMNOPQRSTUVWXYZ   abcdefghijklmnopqrstuvwxyz   0123456789   !@#$%&*()

    UI BodyIBM Plex Sans400 · 500 · 600 · 700

    IBM Plex Mono

    response_rate: 87.4%
    avg_time: 2m 34s
    NPS_score: +62

    ABCDEFGHIJKLMNOPQRSTUVWXYZ   0123456789   { } [ ] ( ) < > = + - _ / \ | @ # $ %

    Data & CodeIBM Plex Mono400 · 500 · 600

    Inter

    Smart surveys,
    better insights.

    ABCDEFGHIJKLMNOPQRSTUVWXYZ   abcdefghijklmnopqrstuvwxyz   0123456789   !?,.;:&

    Marketing DisplayInter Variable400 · 500 · 600 · 700 · 800
    2xl · 36pxSurvey Results
    xl · 24pxResponse Overview
    lg · 18pxQuestion 4 of 12
    md · 15pxHow satisfied are you with your overall experience today?
    sm · 13pxResponses are anonymous and cannot be traced back to you.
    xs · 11pxACTIVE · 234 RESPONSES

    04 — Spacing

    Spacing & Radius

    A 4 px base grid. The design language is named "Console Precision" — corners are intentionally sharp (4 px) to signal a precision instrument.

    Spacing Scale

    --s-1
    4px
    --s-2
    8px
    --s-3
    12px
    --s-4
    16px
    --s-6
    24px
    --s-8
    32px
    --s-12
    48px
    --s-16
    64px

    Border Radius

    --r-sm2px
    --r4px
    --r-md8px
    --r-lg12px

    05 — Voice & Name

    Name Usage

    The product is SurveyKar — one word, capital S, capital K. Never split, hyphenated, or all-lowercase unless constrained by a technical platform.

    ✓Correct

    SurveyKar

    Standard spelling — always preferred

    Collect feedback with SurveyKar.

    Proper noun mid-sentence, no article needed

    ✗Incorrect

    Surveykar / Survey-Kar / survey kar

    Wrong capitalisation, spacing, or hyphen

    surveykar / SURVEYKAR

    All-lowercase and all-caps both distort brand identity

    Official Tagline

    Smart surveys, better insights.

    Use in marketing, hero sections, and email footers. Always keep the trailing period — it is part of the mark. Never truncate, paraphrase, or translate it without brand approval.

    06 — Patterns

    Pattern Style

    Geometric textures derived from the icon mark's stacked-line motif. Use as background fills for email headers, presentation slides, or campaign banners.

    Orange Dot
    Console Lines
    Neutral Grid
    AI Purple

    Left to right: Orange Dot · Console Lines · Neutral Grid · AI Purple. Never place pattern tiles over body text.