7UKI ID — Digital Brand Guidelines

Logotype & Icons

Named logotypes and icons with multi-format file variants. Each preview auto-detects the optimal contrast canvas — download individual formats, or bundle every format of a logotype into a .ZIP.

2 logotypes

Auto-contrast canvas

PRIMARY

LEV Brand Logo

svg • 1.6 KB
png • 6.6 KB

PRODUCT

LEV one Logo

svg • 3.8 KB
png • 9.5 KB

Clear Space

The minimum clear space that must surround the logo. Width and Height stay linked to the mark's aspect ratio — auto-detected from the file, or overridden from the admin intake to fix square SVG viewBox padding — while the safe space is automatically locked to 1/3 of the longest edge.

Logo DimensionsOVERRIDE

Width (W)

Height (H)

BOX SOURCEOVERRIDE

INTRINSIC AR1.00 : 1

SAFE UNIT (X)83px (1/3 edge)

LOGO BOX250 × 250px

EXCLUSION ZONE416 × 416px

Typography

The client's font system — a full specimen on the left, and a live layout composition set in the uploaded fonts on the right.

01 — Heading font500 · Medium

Poppins

Custom file uploaded

Character map

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0 1 2 3 4 5 6 7 8 9

! ? & @ # % $

02 — Body font400 · Regular

Inter

Custom file uploaded

Character map

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0 1 2 3 4 5 6 7 8 9

! ? & @ # % $

LEV — Live Sample Copy

Clarity is the loudest signal a brand can send.

Every headline, layout, and interface this brand touches should feel deliberate and precise. Set type on a strict grid, keep the hierarchy unmistakable, and let the structure do the explaining.

When in doubt, reduce. Fewer styles, tighter spacing, and one confident voice outperform a crowded page every time — this is how the brand speaks at every size.

Brand Voice

Tone guidelines, copywriting snippets, and slogan examples in rich text. Click any card to copy the snippet in both rich text (Docs / Slack) and Markdown (ChatGPT / Claude).

4 snippets

Photography

Reference photography defining the client's visual style — lighting, framing, and grading — with do / don't usage rules.

Reference Gallery — 17 photos

Photography Do's & Don'ts

2 rules

DO

Use studio light

Bla bla bla

DON'T

Use shitty lights

Don't do it

Sonic Identity

Audio logos, podcast intros, and sound marks. Play any file, scrub the timeline, or download the source.

1 file

PPS_Logo-Sound-Design_03.mp3

pps-logo-sound-design-03.mp3

0:00 / --:--

Design Tokens

Export the client's color and typography system as ready-to-use code. Switch between CSS variables, a Tailwind config, or Figma Tokens JSON, then copy to your clipboard.

tokens.css

@font-face {
  font-family: Poppins;
  src: url(https://wmlzgtvyvjnvgeqveqel.supabase.co/storage/v1/object/public/brand-assets/lev/fonts/poppins-medium.ttf) format("truetype");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url(https://wmlzgtvyvjnvgeqveqel.supabase.co/storage/v1/object/public/brand-assets/lev/fonts/inter-regular.otf) format("opentype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Color System */
  --color-primary: #111215;
  --color-secondary: #E7E4DC;
  --color-accent: #E05A32;
  --color-dark: #71717A;
  --color-light: #F4F4F5;

  /* Typography */
  --font-heading: "Poppins", sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", sans-serif;
  --font-body-weight: 400;
}

Color Palette

The client's official color system. Click any swatch to copy its HEX value. Contrast ratios are measured against white and black per WCAG 2.1.

Primary#111215

ON WHITE18.73AAAAA

ON BLACK1.12AAAAA

Secondary#E7E4DC

ON WHITE1.27AAAAA

ON BLACK16.53AAAAA

Accent#E05A32

ON WHITE3.70AAAAA

ON BLACK5.68AAAAA

Dark#71717A

ON WHITE4.83AAAAA

ON BLACK4.35AAAAA

Light#F4F4F5

ON WHITE1.10AAAAA

ON BLACK19.11AAAAA

Assets

Logo files and brand assets. Each preview auto-detects the optimal contrast canvas, download individual files, or package the complete set as a .ZIP.

8 files

Auto-contrast canvas

Logo D.svg

image/svg+xml · 1.7 KB

Logo D1.svg

image/svg+xml · 1.6 KB

Logo B.svg

image/svg+xml · 3.9 KB

Logo B1.svg

image/svg+xml · 3.8 KB

Logo-B.png

image/png · 11.5 KB

Logo-B1.png

image/png · 9.5 KB

Logo-D.png

image/png · 7.1 KB

Logo-D1.png

image/png · 6.6 KB

Do's & Don'ts

Logo usage rules for the client brand. Green marks approved usage; red marks prohibited usage.

2 rules

DO

Keep clear space

Around the logo so it's not close to any other graphic elements.

DON'T

Stretch the logo

Don't do crazy stuff, use your head ;)

Lottie Animation

Motion identities for the client brand. Animations play on a continuous loop — pause any player, or download the .JSON source file.

1 animation

PBS Flow.json

pbs-flow.json

Lottie · Loop

Live Workspace

Interactive workspaces — Figma, Miro, Pitch — embedded live on the hub. Open any workspace in full screen, or jump to the source in a new tab.

1 workspace

Figma

Canva

Package the client's color system and vector marks as a Canva Brand Kit pack — a palette CSV, SVG logos, and an import guide — ready to upload at canva.com/brand.

Pack Contents

palette.csv5 colors
assets/Logo D.svgSVG
assets/Logo D1.svgSVG
assets/Logo B.svgSVG
assets/Logo B1.svgSVG
canva-import-guide.txtguide

Palette

Primary#111215
Secondary#E7E4DC
Accent#E05A32
Dark#71717A
Light#F4F4F5