Freshwater Futures Brand Guide

Logo

Full Logo

Light Background fwf.logo.tight.light.svg / .png

Dark Background fwf.logo.tight.dark.svg / .png

Favicon

White Background FWF favicon - whiteBckgr.png

Blue Background FWF favicon - blueBckgr.png

Usage Guidelines

Clear Space

Maintain minimum clear space equal to the height of the "f" in "futures" on all sides.

Minimum Size

Digital: 120px width minimum. Print: 25mm width minimum. Icon mark: 32px minimum.

Don'ts

Never rotate, stretch, recolor, or add effects. Don't place on busy backgrounds without sufficient contrast.

Design Principles

Clarity over decoration

Every element earns its place. We strip away the unnecessary to let the essential shine through. If it doesn't serve the user, it doesn't belong.

Warmth in precision

Technical excellence feels approachable. We combine rigorous craft with human warmth, making complex technology feel inviting and understandable.

Trust through craft

Quality details signal reliability. Consistent spacing, considered typography, and polished interactions tell users they can trust what we build.

Boldness in restraint

Gold stands out because we use it sparingly. Our accent colors have impact precisely because they're reserved for moments that matter.

Color Palette

Primary Brand Colors

yellow

HEX #FEC601

RGB 254, 198, 1

Tailwind yellow

Primary CTAs, active states, highlights. Use sparingly for maximum impact.

blue

HEX #003F59

RGB 0, 63, 89

Tailwind blue

Primary backgrounds, headers, text on light surfaces. The foundation of the visual identity.

red

HEX #E05C1F

RGB 224, 92, 31

Tailwind red

Alerts, destructive actions, critical states. Never decorative, always purposeful.

Extended Palette

gradient-start #002A39

blue-2 #162069

gradient-mid #0A1445

gradient-end #1C2885

purple #B31CDF

white #D9D9D9

Background Gradient

gradient-start

#002A39

gradient-mid

#0A1445

gradient-end

#1C2885

Typography

Ubuntu

Headings & Display font-ubuntu

Humanist sans-serif with distinctive character. Use for all H1-H4 headings and display text.

Wonder Unit Sans

Body & UI font-wonder

Clean, friendly sans-serif. Self-hosted. Use for body text, paragraphs, UI labels, and form elements.

JetBrains Mono

Code & Metrics font-mono

Precise monospace for code snippets, data metrics, timestamps, and technical information.

Type Scale

H1 / 48px

Dashboard Overview

H2 / 36px

Performance Metrics

H3 / 24px

Agent Activity

Body / 18px

Our AI agents have processed over 50,000 interactions this month, each logged for review.

Small / 14px

Last updated 5 minutes ago

Metric / 36px

98.5%

Components

Buttons

Primary

Main actions, CTAs

Secondary

Supporting actions

Ghost

Tertiary, cancel

Danger

Destructive actions

Dark Background

On gradient/navy bg

Badges & Tags

Default Active Complete Failed Pending AI Featured

Cards

Basic Card

Border outline style with rounded corners. Used for content grouping.

border border-stone-200

Elevated Card

Shadow style for interactive or featured content with hover effects.

shadow-sm hover:shadow-md

Navy Card

Dark variant for dashboard sections or featured content blocks.

bg-navy text-gold

Website Dark UI

The marketing site uses a dark gradient background with light text

Freshwater Futures

Services Products Blog About

AI Engineering Services

Build AI that actually works

We design and deploy AI systems that deliver measurable results, not just demos.

Home / Services / AI Engineering

Custom AI Agents RAG Systems LLM Integration Featured

Explore services Read case studies

Contrast & Accessibility

White on Navy

16.2:1 AAA Pass

Gold on Navy

8.7:1 AAA Pass

Navy on Gold

8.7:1 AAA Pass

Navy on White

16.2:1 AAA Pass

Red on White

4.6:1 AA Large Only

Grey on Light

4.8:1 AA Pass

Spacing System (8px base)

4px p-1

8px p-2

12px p-3

16px p-4

24px p-6

32px p-8

48px p-12

64px p-16