Style Guide

The type scale, colours and components that make up Davbev. Change them once in tokens.css and every page follows.

Typography

Space Grotesk for headings, Poppins for everything else. Sizes are for the 1600px design; they scale down on smaller screens.

  • We delve into the unknown depths of the earth.

    H1Space Grotesk Bold · 92 / 100%--fs-h1

  • 10+

    H2Space Grotesk Bold · 72 / 120%--fs-h2

  • Design with Purpose, Driven by Innovation

    H3Space Grotesk Bold · 68 / 120%--fs-h3

  • E-Commerce Website Redesign

    H4Space Grotesk Bold · 56 / 120%--fs-h4

  • Web design

    H5Space Grotesk Medium · 40 / 120%--fs-h5

  • Companies served

    H6Space Grotesk Medium · 32 / 130%--fs-h6

  • “While it’s essential to point out areas that need improvement, be sure to balance criticism with praise.”

    Sub 1Poppins Medium · 28 / 150%--fs-sub1

  • Trusted by startups & Fortune 500

    Sub 2Poppins Medium · 24 / 150%--fs-sub2

  • To help businesses like yours unleash their full potential through the power of storytelling, design, and innovation.

    Body 1Poppins Regular · 22 / 150%--fs-lead

  • Rated on Clutch

    Body 2Poppins Regular · 18 / 150%--fs-body

  • Responsive

    Link / buttonPoppins Medium · 16 / 110%--fs-ui

Colours

The theme is dark only. The five swatches of the Figma colour frame come first, then the other tokens the pages use.

  • Body text#98A0B3--text
  • Strong line#1C232D--line-strong
  • Avatar ring#202126--avatar
  • Surface#0B121C--surface
  • Strong text#F2F2F2--text-strong
  • Page#050D18--bg
  • Line#202A38--line
  • Heading#F9F7FF--heading
  • Button#557C8B → #3B5269--grad-buttondarker than Figma for 4.5:1 white text
  • Outline#89B3C3 → #46617E--grad-outlineFigma button colours
  • Chipteal → orange, 80%--grad-chipblog chips, badges, post tags
  • Featurednavy → blue → green--grad-featuredfeatured pricing card border

Buttons

Hover the buttons: the fill turns its gradient round, the outline fills in. Both move the arrow up and to the right.

Let’s work together variant="fill"
Let’s work together variant="outline" block

Labels

Outlined pills on project cards and services, muted outlines on the service cards, filled grey on job rows, gradient chips on blog photos and gradient-bordered post tags.

Responsivevariant="outline"
User researchvariant="line"
Full timevariant="soft"
Mobile App Designvariant="chip"
UI designvariant="tag"

Form fields

Pills for single-line fields and selects, a rounded box for messages. Click a field to see the focus ring; leave a required one empty to see the error state.

Video