Skip to content

Brand · Visual identity

Brand Guidelines

This manual describes how the LBS visual identity is built and how to apply it: the logo and its approved variations, clear space and minimum sizes, the colour palette, typography, and the tone the lab uses when it speaks.

The identity belongs to the whole lab — papers, posters, slides, tools, and websites should look like they come from the same place. When in doubt, choose the simplest correct option and keep the logo clear of everything else.

Back to documents

Name and wordmark

The lab is “LBS” in short form and “Laboratório de Bioinformática e Sistemas” in full. The full name is institutional and stays in Portuguese in formal contexts, even in material written in another language; translations are there to help readers, nothing more.

LBS
Always in capitals, never “L.B.S.” or “Lbs”. Safe to use on its own once the full name has appeared.
Laboratório de Bioinformática e Sistemas
The official full name. Keep it in Portuguese on letterheads, agreements, and anywhere the lab is named institutionally.
Laboratory of Bioinformatics and Systems
Reading translation, used in English text. Equivalents: Laboratorio de Bioinformática y Sistemas (ES) and Laboratoire de Bioinformatique et Systèmes (FR).
DCC · UFMG
Always attribute the lab to the Department of Computer Science at the Federal University of Minas Gerais. Use a middle dot, not a slash or a hyphen.

The wordmark inside the logo is outlined artwork, not live text. It is always in Portuguese and is never re-typeset or translated.

The logo

The identity has two parts: the digital symbol — the arrow rising out of a dotted globe — and the wordmark. They combine into three lockups and three colourways. Each version ships as an SVG, which scales without loss, and as a transparent PNG.

Horizontal lockup

Symbol to the left of the wordmark. The default for headers, footers, letterheads, and slide masters — anywhere the space is wider than it is tall. This is the version this website uses.

Brand Guidelines — Horizontal lockup, Colour

Colour

Default. Use on white and light backgrounds.

Brand Guidelines — Horizontal lockup, Navy

Navy

One-colour use: print without gradients, engraving, stamps, and monochrome documents.

Brand Guidelines — Horizontal lockup, White

White

On navy, dark, or photographic backgrounds. This is the version the site's dark theme uses.

Vertical lockup

Symbol above the wordmark. Use it where the space is narrow or square — posters, roll-ups, badges, social profile headers, and the corner of a scientific poster.

Brand Guidelines — Vertical lockup, Colour

Colour

Default. Use on white and light backgrounds.

Brand Guidelines — Vertical lockup, Navy

Navy

Light backgrounds.

Brand Guidelines — Vertical lockup, White

White

Dark and photographic backgrounds.

Symbol only

The symbol without the wordmark. Use it only where LBS is already named nearby, or where the space is too small for the full lockup — favicons, avatars, app icons, watermarks, and section markers.

Brand Guidelines — Symbol only, Colour

Colour

Default, on light backgrounds.

Brand Guidelines — Symbol only, Navy

Navy

One-colour use and very small sizes.

Brand Guidelines — Symbol only, White

White

Dark and photographic backgrounds.

Clear space and minimum size

Keep a margin equal to half the height of the symbol free on all four sides of the logo. Nothing enters that margin — text, rules, images, or the edge of the page. When in doubt, give it more room, not less.

LBS½x½x½x½x

Horizontal lockup

144 px / 40 mm

Minimum width. This is the size the site header uses on small screens.

Vertical lockup

96 px / 25 mm

Minimum width.

Symbol

32 px / 10 mm

Minimum width. Below that, use the navy version — the gradient stops reading.

What not to do

The lockups are finished artwork. Scale them proportionally and leave everything else alone.

  • Do not stretch, squash, or rotate the logo. Scale it proportionally.
  • Do not recolour it outside the three approved colourways.
  • Do not place the colour or navy lockup on a dark or busy background — that is what the white version is for.
  • Do not re-typeset the wordmark. It is outlined artwork, not text, and it is never translated.
  • Do not build your own lockup by moving the symbol and the wordmark apart.
  • Do not add drop shadows, outlines, bevels, or glows.
  • Do not crowd it. Respect the clear space.
  • Do not put it in a white box on a coloured background when the white version could sit on that background directly.

Colour

The palette is deep blue and cyan for science, computation, and trust, and green for the life sciences. Orange is a rare accent — used to mark one thing on a page, never as a second brand colour. Purple, red, dominant black or grey, and neon are outside the palette.

Logo colours

Taken from the artwork itself. Use these when reproducing the logo or matching it in print.

LBS Navy

#093373

Solid navy — symbol and wordmark in one-colour use

Navy gradient

#123F86 → #082F68

Symbol body in the colour version

LBS Teal

#05ADB6 → #00889C

Symbol highlight in the colour version

White

#FFFFFF

Reversed logo on dark and photographic backgrounds

Interface palette

The tokens the website and the lab's tools are built on. Each has a light-theme and a dark-theme value; in code, use the token, not the raw hex.

InkLight #08213F · Dark #E8F4FFPrimary text and solid dark surfaces
MarineLight #0F6FB8 · Dark #76C4FFLinks, section labels, and primary actions
CyanLight #139BD7 · Dark #57CDFFHighlights, icons, and data accents
LeafLight #35A972 · Dark #62DC9DLife-science accent and positive states
AmberLight #F4A01B · Dark #F8B84CRare accent. One per screen, at most
MutedLight #5F728B · Dark #9AB3CDSecondary text and captions
LineLight #DCE8F4 · Dark #253E58Borders, rules, and card edges
CloudLight #F7FBFF · Dark #09192BPage and card backgrounds

Typography

Two stacks: a serif for display and a sans for everything else. Both are stacks rather than single fonts, so material stays consistent on machines that do not have the first choice installed.

Display

Bioinformatics

Iowan Old Style → Newsreader → Fraunces → Georgia

Page titles and headlines. Set large, tight, and sparingly.

Text and interface

Laboratory of Bioinformatics and Systems

Inter → Manrope → Geist → system UI

Body copy, navigation, labels, buttons, and tables — everything that is not a headline.

Section labels

RESEARCH AREAS

Sans, weight 900, uppercase, 0.2em letter-spacing

The small marine-blue label above a section. Keep it short — two or three words.

Voice and tone

Agreed in the lab's internal branding survey. We sound like researchers who ship things.

Innovative

Lead with what is new and why it matters, not with the method.

Interdisciplinary

Write so a biologist and a computer scientist both follow. Expand a term the first time it appears.

Entrepreneurial

Concrete and forward-looking. Name the tool, the dataset, the result.

Modern

Short sentences, active voice, no institutional throat-clearing.

Trustworthy

Never overstate a result. Cite it, link it, or leave it out.

Avoid

  • Purple in any brand context
  • Red as an accent — it reads as an error state
  • Black or grey as a dominant colour
  • Neon and high-saturation gradients outside the logo

Files

The nine logo versions live in public/logos/ in this repository, each one as an SVG and as a transparent PNG — eighteen files in all. Reach for the SVG whenever you can: it scales without loss. The PNG is there for editors that will not open a vector, such as Word, PowerPoint, and social platforms. Download the full set as a ZIP, or grab an individual file from the cards above.

ZIP · 9 SVG + 9 PNG · ~1.5 MB

Download all logos (ZIP)