Design System

Brand guidelines & visual language · Extracted from official assets

Logo

The LELAK wordmark is a custom script typeface with a stylized "K" chevron in teal→purple gradient. Four official versions for different contexts.

Primary Versions

Negativa (dark bg)

Positiva (light bg)

With Tagline "Digital Innovation"

Negativa + Assinatura

Positiva + Assinatura

10 Years Anniversary Edition

10 Years — Negativa

10 Years — Positiva

Simplified (Icon / Small)

Icon — Negativa

Icon — Positiva

⬇ Logo A4 (PDF) ⬇ Negativa (PNG) ⬇ Positiva (PNG)

Usage Rules

Dark backgrounds: Always use Negativa version
Light backgrounds: Always use Positiva version
Formal contexts: Use "com assinatura" (with tagline)
Small sizes / Icons: Use simplified version (no tagline)
Minimum clear space: 1× height of the "K" on all sides
Never: Distort, recolor, add effects, or recreate the wordmark in text

Brand Backgrounds

Official brand backgrounds for presentations, social media, and digital assets.

lelak-bg.png

lelak-bg-image.png

lelak-bg2@2x.png (Retina)

⬇ Background 1 ⬇ Background 2 ⬇ Background Retina

Colors

The LELAK palette: deep purples as foundation, surf green as accent. Dark, premium, tech-forward.

Primary

Lilac 1

#8b44ff

--lilac-1

Accent Purple

#9250ff

--accent-purple

Surf Green

#00ffc2

--surf-green

Light Lilac

#aa77fd

--light-lilac

Dark Palette

Lilac 7 (Darkest)

#330168

--lilac-7

Lilac 4 (Background)

#1f0f42

--lilac-4

Lilac 5

#361e6d

--lilac-5

Deep Purple

#340a61

Neutral & Light

Light BG

#f7eef6

--light-bg

Lavender Blush

#e9daea

--lavender-blush

White

#ffffff

Black

#000000

Gradients

Signature gradients. The lilac→surf green accent is the hero element of the brand.

Hero Accent: #aa77fd → #00ffc2

Dark: #340a61 → #330168

Diagonal: #8b44ff → #00ffc2

Full Spectrum: dark → lilac → green

Typography

Primary brand font: Frutiger LT Std Condensed — a Swiss classic by Adrian Frutiger. Four weights available.

Frutiger LT Std Condensed — Light (300)

Simplicity is Complexity Resolved

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Frutiger LT Std Condensed — Regular (400)

Design & Digital Innovation

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Frutiger LT Std Condensed — Bold (700)

From Zürich and Floripa to All Markets

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Frutiger LT Std Condensed — Black (900)

LELAK — We Create Value

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Type Scale

3.4rem Hero Title

2.5rem Section Head

2rem Subsection

1.5rem Card Title

1rem Body text — We craft digital experiences that merge strategy, design, and technology.

0.875rem Small text, captions, metadata

0.75rem TAGS · LABELS · OVERLINES

Font Files

⬇ Light (.otf) ⬇ Regular (.otf) ⬇ Bold (.otf) ⬇ Black (.otf)

Spacing

Consistent spacing scale based on 4px grid.

4px

8px

16px

24px

32px

48px

64px

Buttons

Pill-shaped with generous padding. Frutiger Bold for labels.

Cards

Glassmorphism-inspired. Subtle borders, hover lift, dark semi-transparent backgrounds.

Case Study

Design transformation for a global food brand, increasing digital engagement by 340%.

Branding

Product Launch

End-to-end digital strategy for market entry in 6 European countries.

Strategy

AI Integration

Custom AI assistant reducing operational overhead by 60%.

Technology

Effects

Glassmorphism

Dark Gradient

Accent Gradient

Purple Glow

CSS Tokens

/* LELAK Design Tokens */
:root {
  /* Primary */
  --lilac-1: #8b44ff;
  --accent-purple: #9250ff;
  --surf-green: #00ffc2;
  --light-lilac: #aa77fd;

  /* Dark */
  --lilac-4: #1f0f42;
  --lilac-5: #361e6d;
  --lilac-7: #330168;

  /* Neutral */
  --light-bg: #f7eef6;
  --lavender-blush: #e9daea;

  /* Gradients */
  --gradient-accent: linear-gradient(to right, #aa77fd, #00ffc2 75%);
  --gradient-dark: linear-gradient(to bottom, #340a61, #330168);

  /* Typography */
  --font-brand: 'Frutiger LT Std', 'Open Sans Condensed', sans-serif;
  --font-body: 'Frutiger LT Std', 'Open Sans', sans-serif;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 100px;
}

Guidelines

Do

Use Frutiger Condensed for all headings and UI elements
Use dark backgrounds as default (lilac-4 or lilac-7)
Use surf green sparingly — CTAs and highlights only
Apply the accent gradient for hero elements and key CTAs
Keep body text at 60-70% opacity on dark backgrounds
Round corners generously (16px cards, pill buttons)
Use Negativa logo on dark, Positiva on light — never the reverse

Don't

Use surf green as a large background color
Mix light and dark modes on the same page
Recreate the wordmark in any typeface — use the logo file
Use sharp corners (0px radius)
Combine more than 2 gradients in the same view
Use fonts other than Frutiger for LELAK-branded materials