Web Dev Company

Style Guide

Showcase of styles and components used across this site.

Colors

Mountain Meadow

--color-mountain-meadow-50
50
--color-mountain-meadow-100
100
--color-mountain-meadow-200
200
--color-mountain-meadow-300
300
--color-mountain-meadow-400
400
--color-mountain-meadow-500
500
--color-mountain-meadow-600
600
--color-mountain-meadow-700
700
--color-mountain-meadow-800
800
--color-mountain-meadow-900
900
--color-mountain-meadow-950
950

Sycamore

--color-sycamore-50
50
--color-sycamore-100
100
--color-sycamore-200
200
--color-sycamore-300
300
--color-sycamore-400
400
--color-sycamore-500
500
--color-sycamore-600
600
--color-sycamore-700
700
--color-sycamore-800
800
--color-sycamore-900
900
--color-sycamore-950
950

Tawny Port

--color-tawny-port-50
50
--color-tawny-port-100
100
--color-tawny-port-200
200
--color-tawny-port-300
300
--color-tawny-port-400
400
--color-tawny-port-500
500
--color-tawny-port-600
600
--color-tawny-port-700
700
--color-tawny-port-800
800
--color-tawny-port-900
900
--color-tawny-port-950
950

Dove Gray

--color-dove-gray-50
50
--color-dove-gray-100
100
--color-dove-gray-200
200
--color-dove-gray-300
300
--color-dove-gray-400
400
--color-dove-gray-500
500
--color-dove-gray-600
600
--color-dove-gray-700
700
--color-dove-gray-800
800
--color-dove-gray-900
900
--color-dove-gray-950
950

Typography

Heading / Display

You shall not pass!

Font: Roboto

CSS var: --font-heading

Body

One does not simply walk into Mordor.

Font: Nunito

CSS var: --font-body

Radius & Buttons

CSS var: --radius

Buttons

Responsive Breakpoints

Current viewport width: —px
below small—px(below sm:)

Each bar is visible only at or above its breakpoint width.

Resize your browser to see bars appear/disappear at their respective thresholds.