Live preview
Bathys homepage: a deep navy page framed by thin cyan corner brackets, the capitalised headline The deep ocean, read in twelve milliseconds, its last two words in glowing cyan, beside a sphere of faint cyan points and lines, above a filled cyan Deploy sensor array button and a column of figures — 4,092 ocean buoys live, 12ms acoustic latency, 2.4B readings sampled per day
21 / ASTRO THEME

Bathys

For a platform whose product is a reading.

  • Deep tech
  • Climate and ocean
  • Data platform

The twenty-first Quaeris Design release. An ocean-intelligence platform carrying three product pages, published tiers, an about page and a journal with authors and categories — twenty-five routes, with the whole demo live and open to inspection.

MEASURED FROM THE DEMO
29.3 KB
JavaScript
25
Indexable routes
0
Blocking stylesheets
3
Font families
WebP
Images
Astro 7.3
Built with

Every figure came from astro-design-bathys.pages.dev. Open it and check.

One published website. VAT included; the studio licence covers client work. 14 days to withdraw, until the first download.

THE BRIEF

What it is for, and who it suits.

A visual direction for a platform that sells what it measures. Abyssal navy, one sonar cyan, Rajdhani set light and in capitals for the headlines, Inter for reading and JetBrains Mono for every label, with sharp corners, hairlines and corner brackets instead of cards. The home page is a dive: scrolling down the capabilities section descends through five ocean depth zones while one sticky console follows the chapter in view — and the Three.js globe above it is only fetched once the page is idle, on a screen wide enough to show it.

  • Ocean, climate and environmental monitoring platforms
  • Deep-tech start-ups selling sensors, robotics or instruments
  • Data and observability products with a live console to show
  • Research programmes and agencies presenting a technical system
THE PAGE SET

Routes you get, and where they come from.

Every route below is generated at build and served as a static file.

Pages

Written once, edited in place.
  • Home
  • Features
  • Sensor array
  • Deployment
  • Pricing
  • Journal
  • About
  • Contact
  • Legal notice
  • Site map

Collections

One Markdown file becomes a route, an index entry and a listing.
  • Article × 6
  • Author × 3
  • Category × 6

System

Generated, never hand-maintained.
  • 404
  • sitemap.xml
  • robots.txt
DESIGN NOTES

The decisions behind the look.

01

The capabilities section is a dive.

Five chapters on the left drive one sticky operator console on the right, each screen following the chapter in view and changing with a sonar wipe. A depth gauge tracks the descent from the epipelagic to the hadal zone, the light fades as the page goes deeper and marine snow drifts past. Under reduced motion the states are static and the console switches by tab.

02

The globe arrives after everything else.

The hero is a sphere of 2,600 points with fourteen moorings sending sonar pings, drawn in Three.js. A CSS poster stands in its place first, and the library is only requested after the page has loaded and the browser is idle — never on a phone, under reduced motion, with Save-Data or without WebGL. It caps its pixel ratio, pauses off-screen and is disposed when the page is left.

03

Every surface is drawn with a line.

There are no rounded cards and no shadows to hold the layout together. Hairlines in translucent cyan divide the sections, corner brackets frame the header and the console, a depth ruler runs down the hero and every label is set in JetBrains Mono with wide tracking. The same few rules carry the product pages, the pricing tiers and the journal.

04

Nothing third-party by default.

Identity, contact form, analytics and newsletter each live in one file under src/config. Out of the box the theme ships no third-party script, sets no cookie and needs no account: the form uses mailto, analytics and the newsletter are off. A provider chosen without its key falls back with a warning in the build instead of shipping broken.

PALETTE
  • Abyss #020617 Page ground and the hero
  • Thermocline #06131b The top of the descent section
  • Foam #f8fafc Headlines and figures
  • Silt #94a3b8 Secondary text and the muted headline line
  • Sonar #22d3ee The accent, the globe and the brackets
  • Deep cyan #06b6d4 The primary button and the hairlines
TYPEFACES
Display
Rajdhani 300, 400 and 500, set in capitals with tight tracking
Body
Inter 200 to 400, running text and the hero summary
Labels and data
JetBrains Mono 300 and 400, navigation, eyebrows and readouts
WHAT SHIPS WITH IT

Know what you’re getting.

A good-looking screenshot is the beginning. The details help you choose.

01 / THE PAGES

A view of the whole site.

Every release lists its page set, from the homepage to the article, author and category templates your project actually needs.

Page list with each release
02 / THE EXPERIENCE

Every screen matters.

Desktop and mobile layouts, navigation, focus states and interactions, checked at the widths people actually use rather than the one the screenshot was taken at.

How customisation works ↗
03 / THE HANDOVER

The details, before you buy.

Source files, installation requirements, licence and support terms are published on the theme page so you can decide before you spend anything.

Exact package with each release
PRICING

A clear price. A clear package.

Pick the design that fits your project. One licence covers one published website; building for clients is the studio licence.

INDIVIDUAL THEMES ON SALE

Find your fit.

€59 a theme

One licence, one published website. Work you deliver to clients is the studio licence: €399 for the whole collection, and a year of everything released after it.

A theme licence
One published project
Client work
Studio licence
Updates & support
Stated per theme
THIS THEME

Everything above, in one download.

Bathys, as the complete Astro source. Change anything, deploy it anywhere static, and keep it.

One published website. VAT included; the studio licence covers client work. 14 days to withdraw, until the first download.

ELSEWHERE IN THE COLLECTION

Three more directions.