OSGeo Brand Pack

The OSGeo logo features a compass rose symbolizing geographic orientation and navigation. Designed by Pim Tebbens (2017), licensed under CC BY-ND 4.0.

Logo Variants

Primary Logo
For light backgrounds

White Logo
For dark backgrounds

Emblem
Compact contexts

On Brand Gradient
Hero / banner usage

Clear Space & Minimum Size

Minimum clear space around the logo equals the height of the "O" in "OSGeo". This ensures the logo always has room to breathe.

Do

Use official logo files only
Maintain the original aspect ratio
Ensure adequate clear space
Use white variant on dark backgrounds

Don't

Stretch or distort the logo
Change logo colors
Add effects, shadows, or outlines
Place on busy or low-contrast backgrounds

Primary Colors

#4DB05B

OSGeo Green Pantone 361 U • RGB 77, 176, 91

#003A40

OSGeo Teal Pantone 330 U • RGB 0, 58, 64

#FFFFFF

White RGB 255, 255, 255

Secondary Colors

#6FCF7A

Light Green

#006670

Light Teal

#3A8A47

Dark Green

#001F22

Dark Teal

#2D6E4B

Mid Green

#00858C

Bright Teal

#004D52

Deep Teal

#5DC06B

Soft Green

Background Colors

#f8faf8

Light BG 1

#e8f5e9

Light BG 2

#c8e6c9

Light BG 3

System / UI Colors

#d32f2f

Danger

#ffc107

Warning

#4DB05B

Success

#003A40

Info

Typefaces

Miriam Libre Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Sintony Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Role	Font	Fallbacks	Weight
Headings	Miriam Libre	Helvetica Neue, sans-serif	Bold (700)
Body	Sintony	Helvetica Neue, sans-serif	Regular (400)
Display	Miriam Libre	serif	Bold (700)

Type Scale

Token	Size	Pixels	Usage
Size 1	`4rem`	64px	Hero titles
Size 2	`3.5rem`	56px	Large headings
Size 3	`2.2rem`	35px	Section titles
Size 4	`1.6rem`	26px	Subsection titles
Size 5	`1.2rem`	19px	Lead / large body
Size 6	`1rem`	16px	Body text, nav
Size 7	`0.75rem`	12px	Captions, footnotes

Responsive Hero Titles

/* Standard hero */
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 800;
line-height: 1.18;

/* Home hero */
font-size: clamp(3rem, 8vw, 7.5rem);
font-weight: 800;
line-height: 1.1;

Named Gradients

All gradients use a 135-degree angle with a three-stop structure anchored by the brand teal.

Earth (Primary)

#003A40#006670#4DB05B

Hero (Overlay)

rgba(0,58,64,0.95)rgba(0,102,112,0.85)rgba(77,176,91,0.75)

Ocean

#003A40#00B8D4#4DB05B

Forest

#001F22#2D6E4B#6FCF7A

Sunset

#003A40#FF6B6B#F59E0B

Shadow System

Shadows use OSGeo Teal as the base color (not pure black), keeping them on-brand.

Small0.08

Medium0.12

Large0.16

XL0.20

Glowgreen

Level	CSS Value
Small	`0 2px 4px rgba(0, 58, 64, 0.08)`
Medium	`0 4px 12px rgba(0, 58, 64, 0.12)`
Large	`0 8px 24px rgba(0, 58, 64, 0.16)`
XL	`0 16px 48px rgba(0, 58, 64, 0.2)`
Glow	`0 0 40px rgba(77, 176, 91, 0.3)`

Spacing Scale

xs

sm

md

lg

xl

2xl

3xl

Token	Value	Pixels
`--space-xs`	0.25rem	4px
`--space-sm`	0.5rem	8px
`--space-md`	1rem	16px
`--space-lg`	1.5rem	24px
`--space-xl`	2rem	32px
`--space-2xl`	3rem	48px
`--space-3xl`	4rem	64px
`--space-4xl`	6rem	96px

Border Radius

2pxSmall

4pxDefault

6pxLarge

8pxCookie

10pxButton

14pxBadge

20pxLogo box

PillRounded

Buttons

Primary Action Secondary Dark Button

/* Primary */   background: #4DB05B; color: #fff; border-radius: 10px; padding: 0.75rem 1.25rem;
/* Secondary */ background: transparent; border: 2px solid #003A40; color: #003A40;
/* Dark */      background: #003A40; color: #fff;

Glass Morphism (Hero Stats)

background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.25);

Responsive Breakpoints

Name	Width	Usage
Mobile	< 769px	Single column layout
Tablet	≥ 769px	Two column layout
Desktop	≥ 1024px	Full layout
Widescreen	≥ 1216px	Wide layout
Full HD	≥ 1408px	Maximum width

Easing Functions

Name	Value	Usage
Smooth	`cubic-bezier(0.4, 0, 0.2, 1)`	General transitions
Bounce	`cubic-bezier(0.68, -0.55, 0.265, 1.55)`	Playful interactions
Elastic	`cubic-bezier(0.175, 0.885, 0.32, 1.275)`	Springy feedback

Named Animations

Name	Duration	Usage
`fadeInUp`	0.8s	Content entrance
`floatLogo`	6s infinite	Logo subtle motion
`aurora`	20s infinite	Background ambient
`orbFloat`	20s infinite	Decorative orb motion

Standard Transition

transition: all 0.2s ease;

Iconography

OSGeo uses Font Awesome (solid and brands variants) for all iconography. No custom icon set is defined.

Quick Reference

Property	Value
Primary Green	`#4DB05B` (Pantone 361 U)
Primary Teal	`#003A40` (Pantone 330 U)
Heading Font	Miriam Libre Bold
Body Font	Sintony Regular
Button Radius	`10px`
Box Radius	`4px`
Shadow Base	`rgba(0, 58, 64, ...)`
Gradient Angle	135deg
Logo Clear Space	Height of "O" in OSGeo

Brand Pack

Logo