Design guidelines
How Tidewell looks, reads and moves. One file beside the code, so every screen a swimmer opens at dawn starts from the same quiet decisions.
Foundations
What Tidewell is, how it should feel on a cold morning, and the three rules we reach for when two good ideas pull apart.
The product
Tidewell tells sea swimmers when the water at their spot is good, and why. One reading of tide, wind and water temperature, clear enough to read with wet hands at the top of the beach steps.
The feel
- Cool
- Airy
- Unhurried
Cool, like a clear morning sea: blue-grey and white, nothing hot. Airy, because one reading needs room around it. Unhurried, and it wins every tie: we never rush a swimmer into the water.
Principles that decide ties
-
The sea comes first
The swim window and the tide take the top of every screen. Accounts, settings and history wait below until someone scrolls for them.
-
Readable at arm's length
If a choice is between one more fact and a bigger number, the number wins. A swimmer squinting in the wind should still see the time.
-
Say why, not just go
A verdict always comes with its reason: rising tide, wind offshore, water 14 °C. Swimmers decide for themselves; we only make the sea legible.
Mark
A soft square set beside the name, like a buoy on a calm surface. It signs the app; it never decorates a forecast.
This mark is a placeholder. Replace it with your own and keep the sizes and clear space.
The lockup
The mark sits left of the wordmark, centered on its height. The gap is a third of the mark's width and never changes, at any size.
Sizes
Below 32 px the mark stands alone, as the home screen icon and the tab icon. The full lockup starts at 32 px, where the serif wordmark stays crisp.
Backgrounds
On the deep blue the mark and the wordmark turn white. Never set the mark over a photo of the sea or a wave pattern.
Clear space
Keep clear space equal to a quarter of the mark's width on every side. Nothing crosses the dashed line: no forecast, no edge, no other logo.
Color
A cool morning white, one deep blue for action and a sea-glass green kept for the good swim window. Every color is a token, and every token has a night value.
Roles
Primary
Deep blue is for the one thing to do on a screen, Log a swim or Save spot, and for where you are in the app. Never a heading, never a wave drawn for decoration.
Accent
Sea-glass green marks the good swim window, the hours when tide and wind line up. Never a button, never a status.
Neutrals
Blue-tinted whites and greys carry the page, so the reading stands out like a buoy on flat water.
Tokens
Each chip shows the light value on the left and the dark value on the right, read from the tokens in this file.
Contrast, measured
Measured from the tokens when this page loads, with the WCAG 2 formula. Text needs 4.5:1; large text, icons and focus rings need 3:1.
| Pair | Needs | Light | Dark |
|---|
Typography
A soft newspaper serif for the readings and titles, a round sans for everything people tap, and a mono for times, heights and temperatures.
Faces
Display. The swim verdict, the high tide time, screen titles. Never below 23 px, never in bold.
Body. Labels, reasons, settings and messages: every word a swimmer reads or taps.
Mono. Tide times, heights in metres and water temperatures, anything that lines up in a column.
Scale
Good to swim from 06:10
Kestrel Bay this morning
High tide at 05:42, 4.1 m
The wind stays offshore until nine, so the bay is flat and the water clear. Go in from the north steps on the rising tide.
Forecasts update every hour from the nearest buoy.
Updated at 05:20
Reading
Most of what Tidewell says is short: a time, a height, a temperature. When it has to say more, it says it in one or two plain sentences, the way a friend on the beach would. Lines stay under sixty-five characters, a reason never runs past three lines, and every time, height and temperature is set in the mono face so the numbers line up from one hour to the next.
Spacing
Space steps in fours, and Tidewell leans on the big steps: a reading gets room on every side, so the screen feels like open water, not a dashboard.
Scale
space-1space-2space-3space-4space-6space-8space-12space-16
Inside a control, steps 1 to 3. Between controls, 4 and 6. Between the reading and everything else, 8 and up. Never a number off the scale.
Radii
radius-sm radius-md radius-lg radius-fullSmall for checkboxes and badges, medium for buttons and fields, large for the swim window card, sheets and dialogs. Full is for switches and the avatar only. Corners stay generous everywhere; nothing in Tidewell is sharp.
Elevation
shadow-smThe dawn alert switch thumbshadow-mdToasts, a lifted spot cardshadow-lgDialogs and bottom sheetsA shadow means something floats above the forecast. Cards rest flat on a hairline until a finger or a pointer lifts them.
Borders
border-width on color-border: dividers, cards, tablesborder-width-strong: focus rings, the selected tab, the current rowA hairline separates one hour from the next. The thicker line means focus or the selected day, and nothing else.
Iconography
Line icons on a 24 px grid with round ends, light enough to sit beside a serif without shouting.
The set
- Tide
- Wind
- Water temperature
- Sunrise
- Spot
- Swim alert
- Week
- Log a swim
Stroke 1.75 at 24 px, round caps and joins, no fills. Icons take the color of the text beside them and always come with a word, except in the tab bar where the word is the accessible label.
Components
Every control is built from the tokens above. Each one shows its states at rest, in the morning light and at night, so no state is drawn in a hurry later.
Primary button
The one action that matters on a screen: Log a swim, Save spot. One per screen, a verb and its object, never Go.
Secondary button
Every other action worth a box: change the spot, share the day, export a log. It sits beside the primary or stands alone.
Ghost button
The quiet way out: Not now, Skip, Close. It lives beside a primary or a secondary, never alone.
Text field
A visible label above, never a placeholder alone, so a cold thumb knows what it is typing. An error says what to do next, in words, beside an icon.
Select
For a short, known list: units, the alert time, the home spot. Two or three options read better as tabs.
Checkbox and switch
A checkbox is saved with the form, like the conditions an alert watches. A switch acts at once, like the dawn alert, so it never sits in a form with a save button.
Card
One spot, one card. The window leads, the spot follows, the reason closes, and the badge gives the verdict in a word. A card lifts only when it opens the day.
Table
For a day of tides. Times and heights in mono, the swim verdict as a dot and a word, the next tide marked by a bar.
| Time | Tide | Height | Swim |
|---|---|---|---|
| 05:42 | High | 4.1 m | Good |
| 11:58 | Low | 0.6 m | Shallow |
| 18:07 | High | 4.3 m | Good |
| 00:21 | Low | 0.8 m | After dark |
| Time | Tide | Height | Swim |
|---|---|---|---|
| 05:42 | High | 4.1 m | Good |
| 11:58 | Low | 0.6 m | Shallow |
| 18:07 | High | 4.3 m | Good |
| 00:21 | Low | 0.8 m | After dark |
Tabs
To move between views of the same spot: today, tomorrow, the week. The selected tab carries a bar, never only a color.
Selected, hover, focus, default and disabled, left to right.
Selected, hover, focus, default and disabled, left to right.
Dialog
Only to confirm what cannot be undone, like deleting the swim log. The title asks, the buttons answer in words.
Delete your swim log?
All 61 swims since March go, with their notes and water temperatures. This cannot be undone.
Delete your swim log?
All 61 swims since March go, with their notes and water temperatures. This cannot be undone.
Toast
Says what just happened in one line and leaves after six seconds. A failed update stays until it is dismissed.
Empty state
Says why the space is empty and offers the one next step. No illustration, no cheer.
No swims logged yet
Your first swim shows up here, with its tide and water temperature.
No swims logged yet
Your first swim shows up here, with its tide and water temperature.
Navigation
Four places, named with nouns: Today, Week, Spots, Settings. The current place is marked by its fill, and the mark always leads to Today.
Motion
Motion is slow and soft, like water settling. It shows where something came from and stops when the system asks for less motion.
Timing
motion-fastmotion-basemotion-sloweaseIn use
Fade and rise
A logged swim or a toast drifts up from just below, in the slow step.
Expand
An hour in the tide table opens in place to show wind and swell, in the base step.
Spinner
Only inside the button that started the wait, and only after half a second. The tide curve never animates.
With reduced motion set in the system, every animation on this page stops and every transition is instant.
Voice
Tidewell speaks like a calm friend at the top of the steps: plain, steady and kind.
Tone
- We give the time, the place and the reason, every time.
- We stay level when the sea turns, and say what to do instead.
- We use the words swimmers use on the beach, not the words a forecast model uses.
Do and don't
Good to swim from 06:10 to 07:50.
Epic conditions this morning, don't miss out.
Wind turning onshore after 09:00. Swim early or wait for tomorrow.
Hurry, the window is closing.
Forecast not updated. Check your signal and pull down to refresh.
Error 503: upstream data unavailable.
Log a swim
Go
Responsive
Tidewell lives on a phone held in a cold hand, and sometimes on a laptop the night before. The layout changes at three widths; the rules below never do.
Breakpoints
- 640 px
Below 640 the day is one column: the verdict, then the tide curve, then the hours. The tab bar sits at the bottom, in reach of a thumb.
- 900 px
From 900 the tide table sits beside the verdict, and the week shows as a strip of seven days.
- 1200 px
From 1200 the sidebar stays open with your spots, and the week opens beside today.
Rules that never change
- Every target is at least 24 by 24 px, and 44 on touch screens.
- Focus is always visible on every control: a ring in the focus color, set off from the edge.
- Text meets 4.5:1 and icons, large text and focus rings meet 3:1, in light and in dark, as measured in chapter 03.