Book a meeting
Braindbook®

Part three Design and asset system

Part three · Design and asset system

One system for designers, developers and suppliers.

Tokens, components, accessibility and approved files.

  1. 20 Digital UX and design system
  2. 21 Asset library and downloads
Design and asset system

Digital UX and design system

The website, the slides and every screen draw from one set of tokens. Change a token and everything that uses it changes with it.

UX principles

Draft for approval
01Work first

Projects are the proof. Every page leads to work or to a conversation.

02One action per screen

One primary button; everything else is secondary or a link.

03Honest states

Real empty, loading, error and success states. Prototypes say they are prototypes.

04Accessible by default

WCAG 2.2 AA: contrast, keyboard, visible focus, 44px targets, reduced motion.

Tokens

Semantic tokens name a job, not a colour. Use text/primary, not ink, so a theme can change without a rewrite.

TokenValueRefers to
text/primaryink
text/on-blueon-blue
surface/pagepaper
surface/quietmist
surface/brandbraind-blue
action/primarybraind-blue
status/successsuccess
status/errorerror
status/provisionalvolt
Spacing · 4px base
481216202432404864
Radius
sm12pxpanel22pxmedia28pxcard35pxpillpill

Download the full set as design-tokens.json. Motion tokens are in Motion.

Components

Download logoBook a meetingPackagingIdentity
Card · 35px radius

Panels, colour cards and image frames.

Brand moment

Blue fields carry On Blue text.

Favicon and app icon

Braind® | Branding agencybraind.am
Browser tab: the symbol as favicon
App icon: white symbol on Braind Blue
braind
Avatar: the symbol on Braind Blue

Accessibility

WCAG 2.2 AA is the floor for every Braind screen, including prototypes.

  • Text contrast 4.5:1, large text 3:1
  • Every action works with the keyboard, focus is visible
  • Touch targets at least 44 × 44px
  • Motion stops under prefers-reduced-motion
  • Forms: labels, inline errors, error summary
  • Images have alt text; decorative ones have empty alt
  • Language set per element for Armenian and Russian text

Colour pairs that pass are in Contrast.

Design and asset system

Asset library and downloads

Partly documented

One place for every approved file. Only approved, distributable files can be downloaded; font files are never sent.

Packs

Available

Logo pack

Wordmark and symbol in Braind Blue, Jet Black and white. SVG.

Open
Available

Brand guidelines

This Braindbook. Always current; no PDF to go out of date.

Open
To be added

PDF guidelines

A printable export for partners who need a file.

On request

Fonts

Braind Sans and Nohemi are licensed. Available to Braind and licensed partners on request.

To be added

Templates

Presentation, social and document templates.

To be added

UI kit

Website components and tokens.

To be added

Print files

Stationery and merch artwork with print specifications.

Asset library

PreviewAssetCategoryFormatVersionUsageStatus
Wordmark, Braind BlueLogoSVGOct 2024Primary logo on paper and light accents.ApprovedDownload
Wordmark, Jet BlackLogoSVGOct 2024Single-colour use on paper and light accents.ApprovedDownload
Wordmark, On BlueLogoSVGOct 2024On Braind Blue, the gradient and photography.ApprovedDownload
Symbol, Braind BlueSymbolSVGOct 2024Avatars, favicons, app icons, stamps, merch details.ApprovedDownload
Symbol, Jet BlackSymbolSVGOct 2024Single-colour symbol on light grounds.ApprovedDownload
Symbol, On BlueSymbolSVGOct 2024Social profile picture on Braind Blue.ApprovedDownload
Made in Braind badgeBadgeSVG—Stickers and apparel: the round Made in Braind, Yerevan badge in Braind Blue.ApprovedDownload
Braind SansFontOTF / WOFF2—Custom brand family. Proprietary: available to Braind and licensed partners on request.RestrictedOn request
NohemiFontOTF / WOFF2—Web headline face. Licensed separately; not distributed here.RestrictedOn request

7 files available. Pattern, photography and template files will be added once approved.

Naming and metadata

Draft for approval

Anyone opening a file should be able to answer four questions without asking.

Is this the current version?May I use it?Where may I use it?May I edit it?
File naming

braind_logo_wordmark_blue_rgb_v1-0.svg

Brand · category · item · colour · colour space · version · format. Lowercase, underscores, no spaces.

Every record carries
  • Name
  • Category
  • Format
  • Version
  • Language
  • Usage notes
  • Approval status
  • Rights and expiry
  • Owner
  • Superseded files move to an archive folder; they are never deleted or overwritten.
  • Every file has one owner who answers for it.