Cody Ogden'sStyle Guide

Introduction

My style guide serves as a foundation to expressing my friendly and familiar presence by creating unity and continuity across of my web properties. This style guide builds on my years of experience working on the web to create foundational design components that best represent me. This is a living document, and changes will be tracked on GitHub.

You can find influence of this style guide being used in a variety of places, including my projects like Killed by Google, Press.css, and DarkMode.wtf.

Color

Use of a common color palette creates a sense of unity and familiarity. This color palette is minimal, friendly, and flexible for a variety of projects.

  • Water

    Hex
    RGB
    Var
    Txt
  • Grass

    Hex
    RGB
    Var
    Txt
  • Grape

    Hex
    RGB
    Var
    Txt
  • Chocolate

    Hex
    RGB
    Var
    Txt
  • Apple

    Hex
    RGB
    Var
    Txt
  • Clementine

    Hex
    RGB
    Var
    Txt
  • Sunflower

    Hex
    RGB
    Var
    Txt
  • Gunmetal

    Hex
    RGB
    Var
    Txt
  • White

    Hex
    RGB
    Var
    Txt
  • Cloud

    Hex
    RGB
    Var
    Txt
  • Mist

    Hex
    RGB
    Var
    Txt
  • Fog

    Hex
    RGB
    Var
    Txt
  • Steam

    Hex
    RGB
    Var
    Txt
  • Smoke

    Hex
    RGB
    Var
    Txt
  • Night

    Hex
    RGB
    Var
    Txt
  • Black

    Hex
    RGB
    Var
    Txt

Inter

The primary font face for digital properties.

A
B
C
Č
Ć
D
Đ
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
Š
T
U
V
W
X
Y
Z
Ž
a
b
c
č
ć
d
đ
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
š
t
u
v
w
x
y
z
ž
А
Б
В
Г
Ґ
Д
Ђ
Е
Ё
Є
Ж
З
Ѕ
И
І
Ї
Й
Ј
К
Л
Љ
М
Н
Њ
О
П
Р
С
Т
Ћ
У
Ў
Ф
Х
Ц
Ч
Џ
Ш
Щ
Ъ
Ы
Ь
Э
Ю
Я
а
б
в
г
ґ
д
ђ
е
ё
є
ж
з
ѕ
и
і
ї
й
ј
к
л
љ
м
н
њ
о
п
р
с
т
ћ
у
ў
ф
х
ц
ч
џ
ш
щ
ъ
ы
ь
э
ю
я
Α
Β
Γ
Δ
Ε
Ζ
Η
Θ
Ι
Κ
Λ
Μ
Ν
Ξ
Ο
Π
Ρ
Σ
Τ
Υ
Φ
Χ
Ψ
Ω
α
β
γ
δ
ε
ζ
η
θ
ι
κ
λ
μ
ν
ξ
ο
π
ρ
σ
τ
υ
φ
χ
ψ
ω
ά
Ά
έ
Έ
Ή
ί
ϊ
ΐ
Ί
ό
Ό
ύ
ΰ
ϋ
Ύ
Ϋ
Ώ
Ă
Â
Ê
Ô
Ơ
Ư
ă
â
ê
ô
ơ
ư
1
2
3
4
5
6
7
8
9
0
?
!
(
%
)
[
#
]
{
@
}
/
&
\
<
-
+
÷
×
=
>
®
©
$
£
¥
¢
:
;
,
.
*

Permanent Marker

Use this font to call attention to specific content. Use sparingly.

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
s
t
u
v
w
x
y
z
Ê
Ô
â
ê
ô
1
2
3
4
5
6
7
8
9
0
?
!
(
%
)
[
#
]
{
@
}
/
&
\
<
-
+
÷
×
=
>
®
©
$
£
¥
¢
:
;
,
.
*