Visual Brand Guidelines · v1
Build with the Empractica brand
Everything you need to represent Empractica correctly — logo, color, type, iconography, photography, and UI components, with the source files ready to download.
01 Logo
The Empractica logo
The primary logo pairs the full-color hex mark with the lowercase empractica wordmark. Use the dark version on light backgrounds and the light version on dark backgrounds for maximum readability.
Primary logo
Full color · use wherever possible
Minimum size
90px / 1.25in
Never reproduce the logo smaller than this. Below it, the mark loses legibility and the wordmark fills in.
Always use the provided logo files. Do not recreate the logo by changing the typeface or the icon color.
Logo variants
Primary — dark
Primary — light
One color — black
One color — white
Use the one-color logos for single-color printing, or on busy or colorful backgrounds where the full-color mark would compete.
Minimum clear space
xx
xx
Keep clear space equal to the height of the hex mark (x) on all sides so the logo always has room to breathe.
Logo don'ts
× Don't stretch or squish
× Don't rotate
× Don't recolor
× Don't place on busy backgrounds
02 Color
Color palette
Three colors and two neutrals. Bright Blue is the primary brand color — use it as the main accent wherever possible. Tints may be used when more colors are needed, such as data visualization. Click any value to copy it.
Click to copy
Click to copy
Click to copy
Click to copy
Click to copy
How to use
Bright Blue for accents and primary actions. Cool Black for body text. Dark Blue for default dark buttons and the wordmark. Cool Gray for surfaces. Red for errors and required fields only.
Neutrals & Cool Black tints
White
#ffffff
Cool Gray
#e6ecef
Black 25%
#bfc7cb
Black 50%
#809098
Black 75%
#405864
Cool Black
#002030
Gradients
Blue gradient — freeform
Primary · Cool Black → Dark Blue → Bright Blue
Blue gradient — linear
Secondary
Cool Gray — linear
Subtle light wash
Use the freeform blue gradient wherever possible — on hero sections, presentation covers, and login screens. Gradient is reserved for marketing and hero contexts, never for app chrome.
03 Typography
Type system
Empractica's brand font is Figtree, an open-source Google font chosen for ease of use across applications. On web, or where custom fonts are unavailable, fall back to the system font Trebuchet.
Weights in use
Figtree
SemiBold 600 · display headers H1–H3
Figtree
Bold 700 · H4, eyebrows, buttons
Figtree
Medium 500 · H5
Figtree
Regular 400 · body copy
Figtree
Light 300 · large display
Figtree
ExtraBold 800 · emphasis
H1
Headline
600 · 4.5rem · tracking -.075rem
H2
Section title
600 · 3.5rem · tracking -.075rem
H3
Subsection heading
600 · 2.75rem · tracking -.075rem
H4
Card and block title
700 · 1.75rem
H5
Supporting heading in Medium
500 · 1.25rem
Eyebrow
Category label / H7
700 · .75rem · tracking .05rem · uppercase
Body
Body copy in Figtree Regular. Lead with the benefit, follow with the mechanism — short, declarative sentences that read as confident and plain-English.
400 · 1.25rem · line-height 1.55
04 Visual Elements
Watermark treatment
The branded hex watermark works as a background element on both dark and light surfaces. Adjust opacity and sizing so it always sits behind your content and never reduces readability.
On dark background
Watermark tinted white at low opacity over the freeform blue gradient.
On light background
Watermark in brand blue over a Cool Gray surface.
05 Iconography
Icon library
A library of 19 icons drawn on a 24×24 grid with a 1pt stroke, rounded corners, and rounded end-caps. Icons can be one color (Bright Blue) or two colors (Bright Blue + Dark Blue). Click an icon to download its SVG.
Icon style rules
- 1pt stroke in Bright Blue #1b9bea
- 1pt stroke in Dark Blue #094360
- 24×24 pt grid, 1pt minimum padding
- Rounded corners and rounded end-caps
06 Photography
Photography
Stock imagery establishes a polished, authoritative feel. Portray business professionals at work in candid moments. Poses and expressions should read natural, professional, and positive — choose photos with a warm hue and rich contrast.
DoUse candid, warmly-lit photography of professionals genuinely at work, with rich contrast and natural expressions.
AvoidOverly staged or posed shots, cool flat lighting, or playful expressions that undercut the authoritative tone.
07 UI Guidelines
UI components
Apply these patterns across Empractica's digital presence. All text appears in Cool Black unless otherwise noted. Hover the buttons to see interactive states.
Buttons
On light
On dark
Form inputs
First name
First name
First name *This field is required.
Disabled
All inputs: 10px radius, 1.5px border. Default #bfc7cb, focus #1b9bea, error #d83d22.
Picker inputs
Checkbox
Radio
Card layouts
Eyebrow category
Card with image
Lead with the benefit. Follow with the mechanism in one or two short lines.
Eyebrow category
Image card
A branded gradient stands in where photography isn't available.
Icon card
Pair a two-color icon with a short, declarative title and supporting copy.
Eyebrow category
Text-only card
When the message is the focus, drop the media and let the type carry the card.
08 Content
Voice & tone
Write like the brand looks — crisp and confident. Short sentences, imperative verbs, plain English. Address the reader as "you." No jargon, no exclamation points, no emoji.
Professional
Confident and authoritative without being stiff. We sound like a capable colleague, not a press release.
Plain-English
No jargon. Lead with the benefit, then explain the mechanism. Keep sentences short and declarative.
Considered
Every word earns its place. We imply excitement through clarity, never through exclamation marks or emoji.
Casing rules
Wordmark
Always lowercase — empractica. Refer to the company as "Empractica" in running copy, but the logo wordmark is never capitalized.
Headings
Sentence case — "Primary logo", "Color palette".
Eyebrows
ALL CAPS with wide tracking for category labels and eyebrows.
Buttons
Title Case — "Primary Button", "Hero Button", "Text Call-to-Action".
In practice
✓ Use
Follow the clear space guidelines so the logo always has room to breathe.
× Avoid
Make your logo pop with tons of breathing room — it looks amazing!
09 Downloads
Get the assets
Download the complete brand kit, or grab an individual pack. Every download is bundled as a zip with the original source files.
The complete Empractica brand kit
Logos, watermark, gradients, photography, the full icon library, Figtree font files, and the color & type token sheet — everything on this page in one download.