Design System & Style Guide

Ocean depth, engineered focus

The Nereus visual language

A refined blue-and-white system that trades clip-art illustration for precision typography, glass surfaces and calibrated depth — built to convert while it calms.

01 — Logo & usage

The lockup has a floor

The wordmark carries fine strokes and a 24px cap height at native size. Below 132px wide the “DEEP WORK” line goes fuzzy — at that point switch to the mark. Never scale the full lockup below the minimum.

Scale test · full lockup

lockup.png

240px

Preferred · hero & marketing

176px

Standard · site header

132px

Minimum · 132px wide / 46px tall

88px

Too small · wordmark breaks down

Mark only · below 132px

mark.png

64px

40px

24px

Favicons, app icons, avatars and anything under the lockup minimum use the figure + wave mark. Mark floor is 24px.

Clear space

Keep padding equal to the cap height of the “N” on all four sides. Never crowd the lockup with copy, buttons or edges.

Navy lockup on ice white or white

White knockout on navy or deep blue

Recolouring, gradients or drop shadows

Stretching, rotating or busy photo backdrops

Asset library

Every source file used in this guide, downloadable at original resolution.

Nereus lockup
PNG · 856×292 · transparent
Get
Nereus mark / app icon
PNG · 500×500
Get
Hero ocean plate
PNG · 1920×1080
Get
Product screenshot
JPG · marketing crop
Get
App Store badge
PNG · white variant
Get
Manifest FTS mark
SVG · vector
Get

02 — Colour palette

Four tokens, infinite depth

A deliberately narrow palette: deep navy for authority, ocean blue for identity, electric cyan for conversion moments, ice white for calm. Everything else is neutral slate.

#0B132B

Primary Deep Navy

Dark accents & high-contrast headers

slate-950 / nereus-navy

Usage · Headlines, dark hero canvas, footer, nav on scroll

#0066FF

Core Ocean Blue

Brand identity & primary buttons

blue-600 / nereus-blue

Usage · Primary CTA, links, active states, brand marks

#00D2FF

Electric Cyan

High-conversion focus states & badges

cyan-400 / nereus-cyan

Usage · Focus rings, badges, ambient glow, data highlights

#F8FAFC

Surface / Ice White

Clean, modern background

slate-50 / nereus-ice

Usage · Page surface, cards, section bands, input fills

Depth gradient

from-nereus-navy via-nereus-blue to-nereus-cyan

Ambient glow

cyan-400/55 radial · blur-3xl

Neutral ramp

slate-50 → slate-900

03 — Typography

Plus Jakarta Sans, tightly tracked

One geometric humanist family across the product and the site. Display sizes lean into negative tracking and heavy weight; body copy stays relaxed at 1.7 line-height for scannability.

Family

Plus Jakarta Sans

Fallback: Geist, system-ui

200 · ExtraLight

400 · Regular

600 · SemiBold

800 · ExtraBold

AaBbCc

H1 · Display

clamp 48–72px · 800 · -0.03em · leading-[1.05]

Master Deep Work without Distractions

H2 · Section title

36px · 700 · -0.02em · leading-tight

Distraction blocking across all your devices

H3 · Card title

20px · 700 · -0.01em

Scheduled focus sessions

Body · Base

18px · 400 · leading-[1.7] · slate-500

Nereus blocks distractions everywhere so you can enter flow state instantly.

Caption · Muted

13px · 500 · 0.08em · uppercase · slate-400

No credit card required · Cancel anytime

Font files

Self-host in production — the site loads Plus Jakarta Sans locally via next/font, so no Google Fonts request is made at runtime.

Plus Jakarta Sans
Primary · 400/500/600/700/800 · OFL
family .zip
Plus Jakarta Sans · specimen
Google Fonts · weights & preview
specimen
Geist
Fallback · variable · OFL
releases
@font-face snippet
CSS · self-hosted woff2 stack

04 — Components

Buttons, badges & glass cards

Live shadcn/ui primitives styled with the Nereus tokens. Hover and focus each control to inspect the motion and glow behaviour.

Buttons

Primary CTA · glow + lift

Secondary · outline & ghost

On dark surface

Badges & pills

Rating 4.9/5Productivity App of the DayPrivate by designNew · v2.0Focus session live

Input & focus state

Focus ring: ring-4 ring-cyan-400/25

Block the whole web

Site and app blocklists sync instantly across macOS, iOS and Chrome — no gaps to slip through.

Sessions that hold

Locked mode makes a focus block un-cancellable, so the decision is made once, in advance.

Depth analytics

See time submerged, streaks and interruption patterns rendered in calm, readable charts.

05 — Download CTAs

Four platforms, one decision

Never show four buttons. Detect the visitor's OS and browser, then surface a single primary desktop build, one mobile route, and the Chrome extension only when a Chromium browser is present.

Simulate

Live CTA stack

Routing rules

Primary · desktop build
User agent decides the label and the file: Windows → .exe, macOS → universal .dmg. Unknown desktop OS falls back to a neutral “Download for Desktop” pointing at /download.
Secondary · mobile
iOS routes straight to the App Store. Android shows a waitlist CTA until the build ships, then flips to Play Store with no layout change.
Tertiary · Chrome extension
Rendered only when Chromium is detected (Chrome, Edge, Brave, Arc, Opera). Safari and Firefox users never see a dead-end button.
Always available
A muted “All platforms” text link under the stack keeps every build one click away for anyone the detection gets wrong.

All platforms & older builds

06 — Hero visual direction

Two routes out of clip-art

Both directions keep the logo and the blue/white system. Toggle between them to compare a dark, atmospheric mesh against a crisp light vector treatment.

4.9/5 from 2,400+ deep workers

Master Deep Work without Distractions

Nereus blocks distractions everywhere so you can enter flow state instantly.

Session

01:24:36

Blocked today

147 attempts

Devices

Mac · iPhone · Chrome

Option A — slate-950 canvas · blue/cyan mesh blurs · glassmorphism cards · white type

07 — Conversion & trust

Social proof, monochrome and aligned

Logos render as flat grayscale at a fixed optical height, lifting to full contrast on hover. Paired with a compact rating strip, this becomes the highest-performing band above the fold.

Trusted by professionals at Netflix, Google & McKinsey