BRAND BOOK

Medalion Technology visual identity

Complete guide to brand elements: logo variants, color palette, typography, clear space and misuses. All assets are downloadable directly from this page.

/Logo/Clear space/Colors/Misuses/Typography/Key visual
Primary

Primary

primary

Full-color mark with emerald accents — default variant.

Icon mark

Icon mark

icon

Just the mark — favicons, avatars, compact placements.

Horizontal lockup

Horizontal lockup

horizontal

Mark + "medalion.tech" wordmark on one line — headers, footers.

Vertical lockup

Vertical lockup

vertical

Mark above wordmark — square promo materials, social tiles.

Monochrome

Monochrome

mono

Single-color version — single-ink print, watermarks, documents.

/clear-space

Clear space

Minimum empty space around the logo equals 1× mark height. It keeps the logo legible and prevents crowding.

1× X
1× X
1× X
1× X
Logo z polem ochronnym

Clear space = 1× X (X is the mark height)

/colors

Color palette

CMYK and Pantone values are mathematical approximations from HEX — request a proof before final print.

Emerald Primary

Main accent — CTA buttons, icons, highlights, charts.

Dark Background

Base background — page, sections, panels.

Foreground White

Text and primary elements on dark surfaces.

Surface Card

Card surfaces, popovers, modal windows.

Border Muted

Subtle borders, separators, dividers.

Muted Foreground

Secondary text, captions, metadata.

/misuse

Misuses

These examples show what NOT to do. Preserve aspect ratio, original colors and proper contrast.

Do not stretch the logo. Preserve aspect ratio.

Do not rotate the logo. Always upright.

Do not recolor the logo with non-brand hues.

Do not add drop shadows, glows or 3D effects.

Do not place the logo on low-contrast backgrounds.

Lorem
ipsum
dolor
sit

Do not violate clear space — 1× mark height minimum.

/typography

Typography

Inter is the brand typeface for all reading text — headings, body copy and UI. JetBrains Mono is a technical accent reserved for code, terminal output and data.

PRIMARY TYPEFACE
Inter
Self-hosted (variable font)
Weights in use400 / 500 / 600 / 700
Fallback stacksystem-ui, sans-serif
TECHNICAL ACCENT
JetBrains Mono
Only: code, terminal output, data, technical labels
HEADINGS · 600 · 32–48PX

AI in medicine demands precision and trust.

BODY TEXT · 400 · 16PX

Body text uses weight 400 at 16 px with 1.6–1.75× line height. Minimum UI text size is 14 px.

CODE / TECHNICAL VALUES · 500 · 12–13PX
const brand = {
  primary: '#33D6AE',
  sans: 'Inter',
  mono: 'JetBrains Mono',
};
RULES
  • Inter for all reading text — no monospace body copy
  • JetBrains Mono strictly as a technical accent
  • Icons come from the Lucide set — never emoji
  • One CTA green: #33D6AE (the --primary token), no glow effects
  • Headings: weight 600 (semibold) with tight tracking
/key-visual

Key visual

Digital graphic motifs that shape the brand character. Apply subtly as background layers.

AI w medycynie

Emerald Accent

text-primary

The #33D6AE color accents key phrases in hero headings. Apply flat (no gradients), never on body text.

Kontakt

CTA Button

bg-primary

Primary action button — --primary fill (#33D6AE) with dark text, no glow effects. Use for a single CTA per view.

/services
Card surface

Terminal Card

.terminal-border

Card with gradient border and emerald top line — evokes terminal UI. Default container for content.

$ medalion --start

Prompt Cursor

.animate-blink

Blinking terminal cursor (`▍`) and `$` prompt — used in hero sections and typing animations.

// brand tokens
const brand = {
  color: "emerald",
}

Syntax Highlight

.code-*

Code coloring from palette: emerald (string), cyan (function), yellow (type), violet (keyword), gray (comment).

Cookie consentAkceptuj

Glass Overlay

.glass

Translucent background with backdrop-blur — used in mobile menu, cookie banner, dialogs.

Need higher-resolution assets?

For additional source files (AI, EPS, production-ready) or brand consultation, reach out at [email protected]