Ocean Modern Design System

01

Design Principles

The philosophy behind every decision in Ocean Modern.

1

Calm Confidence

Like still water, our interfaces communicate trust through restraint. We use teal gradients and soft shadows to create depth without overwhelming the user.

2

Natural Flow

Movement in Ocean Modern mimics water—gentle lifts, soft pulses, and wave-like transitions. Nothing jerky. Everything flows.

3

Accessible Depth

We create visual hierarchy through layering and subtle gradients, not harsh contrasts. Every element should feel approachable, never intimidating.

4

Professional Warmth

Teal is serious but not cold. Our palette balances ocean depths with foam and sand—professional enough for B2B, warm enough for humans.

02

Color System

A palette derived from the ocean's natural gradient—from deep blues to bright aqua.

Brand Colors

Ocean Deep

#0c4a6e

--color-ocean-900

Ocean Mid

#0369a1

--color-ocean-800

Teal (Primary)

#4a9d9e

--color-teal-600

Teal Light

#67b8b8

--color-teal-500

Aqua (Accent)

#22d3d3

--color-aqua-500

Background Gradient

foam → white → sand

Background system

Why These Colors?

✓ DO

Use teal-to-ocean gradients for primary actions

✗ DON'T

Use aqua alone for primary buttons (too bright)

03

Typography

Plus Jakarta Sans provides modern warmth with excellent legibility at all sizes.

48px

text-4xl

Display Heading

36px

text-3xl

Page Title

28px

text-2xl

Section Heading

24px

text-xl

Card Heading

17px

text-lg

Lead paragraph text for introductions

15px

text-base

Body text for most content and form inputs

13px

text-sm

Secondary text, labels, and captions

12px

text-xs

BADGES • STEP INDICATORS • METADATA

04

Spacing Scale

A 4px base unit creates consistent rhythm throughout the interface.

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-6

24px

--space-8

32px

--space-12

48px

--space-16

64px

Usage Guidelines

space-2 (8px): Gaps between related elements (buttons in a row)
space-4 (16px): Input padding, default gap
space-6 (24px): Card content margins, section sub-spacing
space-8 (32px): Content area margins
space-12 (48px): Card padding, major section boundaries
space-16 (64px): Section vertical padding

05

Components

Interactive elements built with the Ocean Modern token system.

Buttons

Variants

.btn-primary {
  background: linear-gradient(135deg, var(--color-teal-600), var(--color-ocean-800));
  box-shadow: 0 4px 14px rgba(74, 157, 158, 0.4);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(74, 157, 158, 0.5);
}

Form Inputs

Text Input

.input {
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md); /* 12px */
  padding: 14px 18px;
}

.input:focus {
  border-color: var(--color-teal-600);
  box-shadow: 0 0 0 4px rgba(74, 157, 158, 0.1);
}

Toggle Buttons

Yes/No Selection

Option Cards

Multi-Select Options

DroneDeploy

Pix4D

Litchi

UgCS

Progress Indicators

Step Progress

Badges

Status & Categories

Step 1 of 5 Verified New Feature

06

Motion Design

Animations that feel like gentle water movement—never jarring, always purposeful.

Interaction Patterns

Hover over each card to see the animation.

Lift

300ms ease

Scale

300ms bounce

Glow

500ms ease

Pulse

1.5s infinite

Wave Animation

The signature background element creates ambient movement.

/* Three layered waves with staggered timing */
.wave1 { animation: wave 15s linear infinite; opacity: 0.3; }
.wave2 { animation: wave 20s linear infinite -5s; opacity: 0.4; }
.wave3 { animation: wave 25s linear infinite -10s; opacity: 0.2; }

@keyframes wave {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

07

Token Architecture

A three-tier system that enables theming and maintainability.

/* ═══════════════════════════════════════════════════
   TIER 1: PRIMITIVES (Raw values, never used directly)
   ═══════════════════════════════════════════════════ */
--color-teal-600: #4a9d9e;
--space-4: 1rem;

/* ═══════════════════════════════════════════════════
   TIER 2: SEMANTIC (Purpose-driven, themeable)
   ═══════════════════════════════════════════════════ */
--color-brand-primary: var(--color-teal-600);
--color-text-primary: var(--color-slate-900);

/* ═══════════════════════════════════════════════════
   TIER 3: COMPONENT (Specific usage)
   ═══════════════════════════════════════════════════ */
--btn-padding-y: var(--space-4);
--input-border-width: 2px;

Why three tiers? Primitives give you raw values to reference. Semantic tokens give meaning (what is "primary"?). Component tokens make specific decisions. To theme the system, you only change Tier 2.