STYLE GUIDE

This style guide contains styles and elements that are used throughout the website.
Changes made here will be applied globally.

BRAND

Logo

Logo Image

Logo SVG

Font

Primary Font

Anybody

Secondary Font

HUMANE

Color

Accent Color

Accent Light

Accent

Accent Dark

Base Color

25

50

75

100

200

300

400

450

500

550

600

700

800

900

925

950

975

Neutral Color

Transparent

White

Black

TYPOGRAPHY

Headings

Heading 1

Lorem ipsum dolor sit amet DECODE

Heading 2

Lorem ipsum dolor sit amet DECODE

Heading 3

Lorem ipsum dolor sit amet DECODE

Heading 4

Lorem ipsum dolor sit amet DECODE

Heading 5

Lorem ipsum dolor sit amet DECODE

Heading 6

Lorem ipsum dolor sit amet DECODE

HTML Tags

Paragraphs

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.

Quote Blocks

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius enim in eros.

Links

Text Link

Unordered Lists

  • 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.

Ordered Lists

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Suspendisse varius enim in eros elementum tristique.
  3. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla ut commodo.

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

We are a creative digital agency that transforms ideas into powerful experiences across design, development, marketing and automation.

Cyber Fox Media began more than 8 years ago as a small graphic design studio with a big dream to create meaningful visual experiences.

What started with simple design projects has grown into a full creative and technology agency that builds brands from idea to execution.

Today the studio blends design, strategy, development, and automation to help businesses show up with clarity and confidence.

Every project is crafted with purpose so clients can stand out, communicate better, and work smarter in a fast changing digital world.

Cyber Fox Media continues to evolve with one mission in mind. Turn bold ideas into powerful experiences that inspire growth.

Text Styles

Text Weight

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text Weight Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text Weight Extra Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text Weight Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text Weight Semi Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text Weight Medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text Weight Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text Weight Light

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text Weight Extra Light

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text Weight Thin

Text Size

Lorem ipsum dolor sit amet.

Text Size xxGiant

Lorem ipsum dolor sit amet.

Text Size xGiant

Lorem ipsum dolor sit amet.

Text Size Giant

Lorem ipsum dolor sit amet.

Text Size xxHuge

Lorem ipsum dolor sit amet.

Text Size xHuge

Lorem ipsum dolor sit amet.

Text Size Huge

Lorem ipsum dolor sit amet.

Text Size xxLarge

Lorem ipsum dolor sit amet.

Text Size xLarge

Lorem ipsum dolor sit amet.

Text Size Large

Lorem ipsum dolor sit amet.

Text Weight Medium

Lorem ipsum dolor sit amet.

Text Size Regular

Lorem ipsum dolor sit amet.

Text Size Small

Lorem ipsum dolor sit amet.

Text Size Tiny

COLOR

Text Color

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Text 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

White

Lorem ipsum dolor sit amet, consectetur adipiscing elit varius.

Transparent

Theme Color

Theme Base

Lorem ipsum dolor sit amet.

Sample card styled with Background 1, Border 1, Text 1.

Primary Button

Sample card styled with Background 2, Border 2, Text 2.

Secondary Button

Sample card styled with Background 3, Border 3, Text 3.

Tertiary Button

Theme Inverse

Lorem ipsum dolor sit amet.

Sample card styled with Background 1, Border 1, Text 1.

Primary Button

Sample card styled with Background 2, Border 2, Text 2.

Secondary Button

Sample card styled with Background 3, Border 3, Text 3.

Tertiary Button

UTILITY

Page Wrapper

Navbar Wrapper

Main Wrapper

Section

Padding Global

Container

Layout

Max Width

Spacing Clean

Footer Wrapper