Theme Styles
Symbols
Access the Figma Design

Zinda Agency Style Guide

Welcome to the team!
You will find our guidelines in the following manual, including fonts, typo, icons and more.

View Onboarding in Notion About us in Notion

Colors

Primary Colors

Primary 1
#3774e9
Primary 2
#171717

Secondary Colors

Primary 2 - lighter
#6096fd
Secondary 1
#d8d7da
Secondary 2
#9c9c9e

Neutral Colors

Neutral 800
#000000
Neutral 700
#080808
Neutral 600
#363636
Neutral 500
#9c9c9e
Neutral 200
#f3f3f3
Neutral 100
#ffffff

Typography

Rich Text

Heading H1 - Aa Bb Cc Dd

Heading 1 - 68px/1.233em

Heading H2 - Aa Bb Cc Dd

Heading 2 - 48px

Heading H3 - Aa Bb Cc Dd

Heading 3 - 32px

Heading H4 - Aa Bb Cc Dd

Heading 4 - 24px
Heading H5 - Aa Bb Cc Dd
Heading 5 - 18px
Heading H6 - Aa Bb Cc Dd
Heading 6 - 16px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus.

Paragraph Small - 16px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Default - 18px/1.667em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Large - 24px/1.583em
Link - Lorem ipsum dolor sit amet
Links

Bold - Lorem ipsum dolor sit amet

Bold Text

Italic - Lorem ipsum dolor sit amet

Italic Text
“Proin sed libero enim sed faucibus turpis in. Nisi est sit amet facilisis. Venenatis cras sed felis eget velit. A erat nam at lectus urna duis”
Block Quote
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur.
  • Lorem ipsum dolor sit amet, consectetur adipiscing.
Bullet List
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing.
Numbered List
Rich Text - Agency X Webflow Template
Proin sed libero enim sed faucibus turpis in. Nisi est sit amet facilisis.
Figure and Figure Caption

Icons

zinda agencyzinda agencyGraphs Icon - Zinda AgencyBlue magnifying glass icon on a white background.Pencil icon - Zinda AgencyBlue app icon with a white image placeholder symbol featuring two mountains and a sun.Blue four-way arrow icon indicating movement or resizing in all directions.Icon showing three vertical blue bars of increasing height representing a growth chart.Icon of four ascending vertical bars representing a signal strength indicator.White ascending bar chart icon on a blue rounded square background.Blue circular arrows forming a refresh or sync icon on a white background.Blue magnifying glass icon representing search.Magnet Icon - Zinda AgencyBlue icon of a document with horizontal lines and a folded corner.Blue square icon with white letters SEO inside.Blue icon of a computer monitor displaying a webpage with text and image elements.Blue envelope icon with a plus sign indicating new email or add message.Blue square icon with ascending bar chart consisting of three vertical bars.Blue globe icon representing the internet or global network on a rounded square white background.Graph - Zinda AgencyFour blue geometric shapes arranged with three squares and one tilted diamond on a light gradient background.Blue medal icon with a star in the center.Blue icon depicting a wrench crossed with a screwdriver on a white background.Blue rounded square icon with a white percent symbol and a diagonal line.Blue folder icon with a gear symbol indicating settings or configuration.Blue square icon with white code brackets symbol representing coding or programming.Blue grid icon with three squares and a plus sign on a light rounded square background.Icon of a rocket launching from a computer screen, symbolizing startup or technology launch.Blue square icon with four white geometric shapes: circle, triangle, square, and rectangle.Blue icon depicting two user silhouettes within a rounded square background.Blue computer cursor arrow clicking on a circular target icon with concentric rings.Blue verification badge with a white checkmark inside.Minimalistic icon of stacked blue documents on a rounded square background.Blue square app icon with white stylized letters 'my' in lowercase.Icon of a computer monitor displaying a news webpage with text lines and a photo.Whatsapp icon in blue - Zinda AgencyYoutube icon in blue - Zinda AgencyLinkedIn logo icon in blue - Zinda AgencyBlue Instagram app icon with white camera symbol and lens detail.Blue Facebook logo with a white lowercase f on a rounded square background.Blue speech bubble chat icon with two overlapping chat bubbles.Light Icon - Zinda Agencyzinda agencyPhone Icon - Zinda AgencyMagnet Icon - Zinda AgencyBranded website - Zinda Agencyzinda agencyzinda agency

Buttons

Small  
Button Primary - Small
Default  
Button Primary - Default
Large  
Button Primary - Large
Small
Button Secondary - Small
Default
Button Secondary - Default
Large
Button Secondary - Large

Cards

Card Default

Lorem ipsum consectetur amet sit comeneer ilrems dolce issilmolil olme diment solem ipum adolemro dolor sit.