Brand Book

Updated: Apr 3, 2026

01Logo & Mark
LogoMarkSafe SpaceColor UsageMisuse
02Typography
AspektaWeights & styles
03Colors
PrimarySecondary
04Iconography
Icon LibrarySocial IconsNumber Label
05Website
ButtonsInputsNavigationFooterVisual Brand AssetsVideoTeam PhotosGrid
Download press kit
05Website

The website is where the brand goes to work. It combines message, motion, layout, and interaction into something that feels clear, fast, and convincingly built.

Buttons

Buttons are designed to move people forward without adding friction. From directional CTAs to form controls, each component is straightforward, recognizable, and tuned for action.

Arrow CTA — Regular

20px · Aspekta 400 ·

-0.2px tracking · gap 8px · padding-bottom 8px

Arrow CTA — Large

40px · Aspekta 400 · -0.4px tracking · height 48px

Large Form Pill

Contact form · category select · 64px · border-radius 80px · hover fills white

Form Pill

Contact form · budget select · 48px · border-radius 56px · click to select

Filter Pill

Work / Insights pages · content filter with count · 40px · click to select

Radio Button

Contact form · square toggle · 24×24px · white border · white fill on select

Play Button

Video player · 56×56px · white bg · black icon

Inputs

All inputs: #121212 bg · transparent fill · bottom border only · Aspekta 400 · no outline on focus

Email Input

Footer newsletter · 20px · border-bottom 1px solid rgba(255,255,255,0.1) · padding-bottom 16px

Dropdown (Form Field)

Contact form · Default → Expanded → Filled · click to interact

Navigation

All inputs: #121212 bg · transparent fill · bottom border only · Aspekta 400 · no outline on focus

Desktop navigation with logo and vertical right-aligned links

Desktop — Default (transparent, on light hero)

Links vertical right column · 16px · color #121212 · normal tracking · padding-bottom 3.2px

Mobile navigation header with logo and Menu button

Mobile — Default

Logo + 'Menu' text · 18px

Mobile menu open with full-screen dark overlay, navigation links, and social links

Mobile — Menu Open

Full-screen · 40px links · weight 350

Footer

#121212 background · padding 0 32px · full-width

Website footer with newsletter signup, navigation links, social links, and legal information

Visual Brand Assets

3D renders of the Zypsy logo with various materials. Available in JPG and PNG. Files live at zypsy/brand/imagery/Zypsy Logo Renders/

3D render of Zypsy logo — textured yellow surfaces with sharp triangle shadow3D render of Zypsy logo — curved yellow bands with crosshatch accent3D render of Zypsy logo — textured yellow pillars and star form3D render of Zypsy logo — glass rings and translucent shapes3D render of Zypsy logo — textured diamond with crosshatch pattern3D render of Zypsy logo — asterisk form with mixed material arms

Video

Animated logo render for intros, transitions, and motion contexts. Files live at zypsy/brand/video/

Team Photos

Portrait photos for all team members. Used on the About/Team page and in media kits. Files live at zypsy/brand/team-photos/ · PNG format.

Arek

Arek

Engineering Lead

Evin

Evin

Co-founder & CCO

Hubert

Hubert

Senior Frontend Engineer

Shoko

Shoko

Senior Project Manager

Kaz

Kaz

Founder

Matt Kim

Matt Kim

CEO

Olivier

Olivier

Design Director

Matt Crisp

Matt Crisp

Senior Visual Designer

Pietro

Pietro

Visual Designer

Marcin

Marcin

Senior Product Designer

Rafal

Rafal

Product Design Lead

Darek

Darek

Product Design Director

Vivian

Vivian

COO

Trisha

Trisha

Brand & New Business Director

Augusto

Augusto

Lead Webflow Developer

Grid

We use a 12-column grid at 1440px with 32px margins and 16px gutters to maintain consistent alignment and clear visual structure across all layouts.

12-column grid system diagram showing 1440px width, 32px margins, and 16px gutters
04. Iconography
X - TwitterInstagramLinkedInhello@zypsy.com

© 2026 Zypsy, Inc. All rights reserved

Privacy PolicyTerms of ServiceCustomer TermsDesigner TermsSPBQII