Back to Health Site
Design System v1.0

Valhalla Health Design System

A comprehensive guide to product style, typography, and brand elements for every design and development.

Logo Concepts

A comprehensive guide to product style, typography, and brand elements for every design and development.

Infinity 8

Infinity loop forming the number 8 with a pulse heartbeat

Hexagonal 8

Geometric hexagon with integrated 8 pattern

DNA Helix 8

DNA double helix structure forming an 8

Circuit 8

Tech circuit board pattern creating an 8

Organic Flow 8

Flowing organic shapes merging into an 8

Heartbeat ECG 8

ECG/EKG wave pattern forming an 8

Cellular 8

Cell division and mitosis forming an 8

Molecular 8

Molecular structure with atoms forming an 8

Wellness Loop 8

Continuous wellness cycle forming an 8

Neural Network 8

Brain synapses and neural pathways forming an 8

Stethoscope 8

Medical stethoscope shaped like an 8

Shield Protection 8

Medical shield and protection forming an 8

Growth Spiral 8

Fibonacci growth spiral forming an 8

Balance Yin-Yang 8

Balanced health concept with yin-yang forming an 8

Pulse Wave 8

Sound and pulse waves forming an 8

Brand Colors

Core colors and brand accents ensure a consistent brand presence across all designs and platforms.

Green Valhalla 1

#009867
rgb(0, 152, 103)

Green Valhalla 2

#00B07F
rgb(0, 176, 127)

Teal Valhalla 1

#00C69A
rgb(0, 198, 154)

Teal Valhalla 2

#008C78
rgb(0, 140, 120)

CyanLight

#00D6EE
rgb(0, 214, 238)

Blue Valhalla 1

#3F7EFF
rgb(63, 126, 255)

Neutral Colors

White

#FFFFFF

Light Gray 1

#F8F8F8

Light Gray 2

#E0E0E0

Gray

#A9A9A9

Dark Gray

#4F4F4F

Black

#000000

Typography

Our typeface selection ensures a clear, legible, and accessible experience for all users.

Aa Bb Cc
Inter — Display

Heading 1

Heading 2

Heading 3

Heading 4

Body Large — The quick brown fox jumps over the lazy dog

Body Medium — The quick brown fox jumps over the lazy dog

Body Small — The quick brown fox jumps over the lazy dog

Brand Gradients

Our gradients add depth and visual interest while maintaining brand consistency.

Primary Gradient

Green Valhalla 2 → Green Valhalla 1

Secondary Gradient

Teal Valhalla 2 → Blue Valhalla 1

Accent Gradient

CyanLight → Green Valhalla 2

Callout Gradient

Blue Valhalla 1 → CyanLight

Spacing Scale

Consistent spacing ensures a balanced and harmonious layout across all interfaces.

XXS
2px
XS
4px
S
8px
12px
M
16px
24px
L
32px
XL
48px
XXL
64px
XXXL
80px

Border Radius

Our border radius values provide a consistent visual softness and modern aesthetic.

Small

4px

Medium

8px

Large

999px