Style guide

Palette

Three pinned colors and one coral. Every other color is a lightness step inside one of the three families, computed to hit a contrast target, not picked by eye.

The palette is cool on purpose: Harbor Coral is the only warm thing on the page, which gives it its force. A new pin is a decision for the client.

Field

Structure

Water

Light

The one coral

What each color is for

Translucent steps are written from the channel tokens, for example rgb(var(--seaglass-rgb) / 0.72). Sea Glass runs from 0.12 (borders) to 0.95 (halos); Midnight Hull from 0.72 to 0.96 for overlays. Functional labels never drop below 0.72.

• The Three Pins RuleThe palette derives from #061e45, #36454f and #c3e3eb, plus Harbor Coral. Reference colors through the tokens, never as raw hex.
• The One Coral RuleCoral marks the single most important action in a view, the Charter Smarter booking link. Never decoration, text or tags, and never two competing in one viewport: the floating bar hides itself while the closing section's coral button is on screen.

Two worlds and contrast

Every section is either navy with Sea Glass ink, or Canvas with navy and charcoal ink. There is no white section and no gray one.

The site has one color scheme (color-scheme: light). The two worlds do the work a theme would: navy for atmosphere (stats, destinations, the tour, booking), frost for detail and decisions (gallery, crew, layout, rates, availability).

Measured contrast

Computed from the shipped tokens, with a translucent ink composited over its field first, and rounded down so no pair is rounded up over a threshold. Text needs 4.5:1; large text and non-text marks such as the focus ring need 3:1.

Pairs that are never used

Recorded so that nobody reaches for them. Each has cost a bug before.

• The Two Worlds RuleEvery section is navy or light. Canvas is the one approved light surface; Sea Glass stays available as a panel fill that reads as a panel.
• The Photographic Field RuleA light section that carries a photograph (crew, rates) is still a Canvas section. It is washed with rgb(var(--canvas-rgb) / α), and α is solved so Chart Ink clears 4.5:1 over the photograph's darkest pixel: 0.74 on crew, 0.64 on rates. Harbor Steel, Chart Label and Slate Muted never sit on the wash; they get a Canvas panel. Re-measure when a photograph changes.
• The Calendar Legibility RuleEvery calendar day state clears 4.5:1, and state is never carried by color alone: each day has hidden text, and on-hold days keep their stripe.

Type system

A classical, high-contrast serif for voice, and one geometric sans in two voices: used light for everything you read or count, and tracked out in capitals like the lettering on an instrument panel.

That is everything in assets/fonts/, and CSS may ask for nothing else: a missing weight is silently drawn at the nearest one. The families are reached through --font-display, --font-body and --font-label. Both sans tokens are Jost; they stay separate so either voice can change face alone. Each stack leads with a metric-matched stand-in (Georgia at 88.4%, Arial at 92.8%) so the swap to the webfont moves no line break.

• The Logbook Voice RuleSerif for things you would say; tracked uppercase Jost for things you would annotate or press; light Jost, in sentence case, for everything you would read or count. Never a label in Cormorant, never a paragraph in tracked capitals, never a headline in Jost. Facts follow the reading voice: an inclusion, a discount, “per person, for the week” are light Jost, even inside a card whose name is serif.
• The One Weight Per Voice RuleThe serif is 400, the label voice is Jost 400 and body is Jost 300, on every page. On the inner pages, labels and serif fragments are named in two grouped rules beside .lede in pages.css. A new class joins the matching group.
• The Light Hand RuleBold is not part of the system. 500 is the ceiling, and only for short uppercase labels that must hold up over photography.
• The Heading Carries the Section RuleNo uppercase eyebrow sits above a heading. Uppercase strings are written in sentence case in the source and transformed by CSS, so assistive technology reads words, not letters.

Type scale

Roles are tokens, named for the job and not the value. Every size below is set live from its token.

• The Optical Size RuleCormorant's x-height is 0.386em to Jost's 0.460em, so the serif reads about a sixth smaller at the same pixel size. Serif running text is never set below Serif text (20px), which is what sits level with 17px Jost: Side by side: Jost 17 · Cormorant 20 · and Cormorant 17, which is lost
• The Heading Leads RuleA heading takes its space from above, so it binds to the block it introduces. --head-lead (1.25em) sits over a heading that follows content; --head-trail (0.4em) sits under every heading. Both are em, so a subhead leads by more than a title. A definition list cannot use a grid gap, which would put a term as far from its own explanation as from the next entry. The rule Clearing in The term hugs its own explanation and keeps its distance from the entry above. On a grid gap Clearing in One gap between every child, so the term floats and reads as the tail of what came before.
• The Dark Field RuleLight text on navy reads smaller and thinner than the same text on Canvas. Body copy there steps up to Body on navy (18px), and running text of 14px or smaller is never lighter than 400, which is why the footer sets 400. The 46px stats numerals keep 300: at that size the hairline is the point.
• The Plain Figures RuleFigures here are data. Cormorant's default old-style 1 and 0 read as letters, so body sets lining-nums site-wide and anything columnar adds tabular-nums beside it. The property is not additive: a rule that sets tabular-nums alone turns the old-style figures back on. $4,100 lining$4,100 old-style, never

The mark

One mark, in two inks: its own colors over light grounds, and Sea Glass on navy.

The file is assets/Celestine-Logo.svg. Its two blues (#1f2b5b and #1e5c9f) belong to the asset and sit outside the token set. On navy the same file becomes a mask over a Sea Glass fill, so the ink is the token itself. Never tint it with a CSS filter chain: iOS Safari does not clamp between steps, and drew the mark cyan.

background: var(--seaglass);
mask: url("Celestine-Logo.svg") center / contain no-repeat;   /* with the -webkit- twin */
object-position: -999px 0;   /* the img's own pixels, out of the box */

Beside it

The favicon (assets/icon.svg) sets the mark on a rounded field of Celestine Navy, the pages' theme-color. tools/build-icons.py rasterizes every other icon from it; the touch and manifest icons are square to the edge, because the platform cuts its own corners. Paradise Yacht Management's mark sits beside Celestine's in the footer at the same 46px. The Charter Smarter mark appears once, on the homepage's booking card, where it says where the coral button leads.

Grid and measure

A nine-column page grid: 1040px at most, a 32px gutter, and everything else derived from those two numbers.

Nine is chosen for the editorial 3 + 6 and 4 + 5 splits it allows; it is deliberately not a twelve-column utility grid. The grid governs page-level placement only. Components subdivide freely inside their span, because the page's natural groupings (four stats, two destinations, seven days) do not divide by nine.

One column is 87px. The widths above are worked out from the tokens by tools/build-docs.py.

Margins and rhythm

Vertical rhythm goes lower on a phone, not higher.

Breakpoints

• The Column Span RuleA new container takes a span token, never a hand-picked pixel width. If a block needs a width the scale does not offer, the scale is wrong: fix the tokens, not the block.
• The One Margin RuleThe horizontal page margin comes from --section-x and nothing else. A full-bleed escape is written calc(-1 * var(--section-x)), so it tracks the margin.
• The Shrinkable Track RuleA single-column grid is written minmax(0, 1fr), never a bare 1fr, which cannot shrink below its content. With a pannable chart inside, a bare track once ran a 390px phone page to 734px. When checking a phone layout, confirm that innerWidth equals the width you asked for.

Layouts

The compositions the pages are built from, drawn on the nine columns. Every split sums to nine, so edges land on the same column lines from section to section.

Blue blocks are photographs, navy blocks are charts, gray blocks are type, outlined blocks are Canvas panels. Below 1224px these go fluid, and on a phone each is a single column in source order.

Buttons and controls

Square, tracked and quiet. Small, widely tracked uppercase labels with generous padding and a color swap on hover.

Every button is a link: the site has no form. An external one says so in its accessible name (“Book with Charter Smarter (opens in a new tab)”). These are the real .btn classes from pages.css; the homepage draws the same buttons with inline styles.

On Canvas: .btn-primary, .btn-dark, and the focus ring in Steel Blue

On navy: the closing section's actions. .btn-sky, .btn-ghost, and the ring in Sea Glass

The floating action bar, over photography. Dark is 92% so it holds on any frame

On hover every filled button swaps to a Sea Glass fill with Midnight Hull ink over 0.25s; the ghost firms its outline and takes a 10% fill. In the closing section the three actions share a 236px minimum width, so none reads as the runt.

Icon controls

Round is reserved for controls that are only an icon. Anything on imagery carries the Control shadow.

Carousel arrow 52px · lightbox arrow 56px · close 48px · counter chip · chart pin 24px · a 24px mark inside its 44px hit area

The divider knob (40px) and the map opener (34px) share this vocabulary; both are live on the inset under Components.

• The Hit Area RuleA small target keeps its drawn size and grows an invisible 44px hit area from an ::after with a negative inset: the destination cards' text links, the footer's 24px social marks, the closing section's brochure link. The footer's contact links grow to 28px beside the address, and to 44px on a phone. Chart pins stay at their drawn size, because each has a full-height row in the key that does the same thing, and padded pins on a crowded chart would steal each other's taps.
• Promise only what worksNo role="button" with a guarded handler, and no “Tap” hint under a mouse. The plate zoom is available at every width, never enlarges past the source's own pixels, and words its hint for the pointer in use.

Components

Sections sit flat. Only what floats over content gets a shadow, and only contained cards get a radius.

Corners: none on buttons and section edges; 2px on mats and frames; 14 to 16px on contained panels such as the crew cards; fully round for icon-only controls and portraits.

The polaroid mat, carrying a chart inset

Sea Glass Light wraps the plate on three sides and deepens into a lip that carries the caption. Photographs sit square, never tilted. On the destination pages the same mat carries a chart inset, which can be swapped for a photograph. This one is lifted from usvi.html and is live: drag the divider, or focus it and use the arrow keys.

9

1 nm

Badge

A short Standout label on a square Midnight Hull plate. One vocabulary for the hero's line, the “Most popular” tag and the photo band's caption. Never coral, never a pill.

Navigation

Uppercase Jost at 13px with 2px tracking. The link for where you are carries a 1px hairline 8px below the label, drawn as a pseudo-element so that it stops at the last letter. On the homepage it follows a reading line two fifths of the way down the viewport and draws in over 0.35s; inner pages mark Destinations, their parent.

Planning pictograms

The thirteen pictograms the crew's printed itineraries use, in assets/icons/tags.svg. They fill with currentColor: Chart Label on frost, Shallow Water on navy. In a log they stand alone at 24px, each named by its title and an accessible label; only the legend gives them visible names.

• Beach chairs
• Beach time
• Dive / SCUBA
• Dock available
• Hiking
• Island tour
• Jumping
• Lobster specialty
• Notable bar
• Paddleboarding
• Secluded
• Snorkeling
• Swimming

Gauges

“How the week leans”: relative emphasis from a charter's planning sheet, on a scale ruled in quarters. These are the seven-night passage's. Each fill runs once, from the left, when the block enters view.

• Snorkeling
• Beach time
• Sailing time

Calendar days

The availability grid's six states. An open day that touches a booking or a hold is a turnaround day: it is computed, never entered, and draws exactly as unavailable. Pointing at an open window above the grid inks its days.

The months drawn run only as far as the blocks are maintained. A date with no block reads as open, so an unmaintained month would advertise weeks nobody has checked.

Charts

The inner pages draw real nautical charts; they do not decorate with them. One asset carries the geography, and every chart on the site is a viewBox crop of that one drawing.

This is the seven-night plan chart and the first two entries of its log, lifted from itineraries.html. Point at an entry, or tab to a pin, and its leg lights while the others fall to 28%. The satellite view is the same window, in register; the passage stays plotted on both.

1Norman Island2The Baths3North Sound4Anegada5Cane Garden Bay6Jost Van Dyke7Cruz Bay8Charlotte Amalie

Numbered by legNot for navigation

Drag the chart to pan

1. 1Day 1
   Saturday

   Charlotte Amalie to Norman Island

   1 h under sail

   Welcome to the Virgin Islands. After everyone is aboard, we hold a short safety briefing and set sail for Norman Island: snorkeling at the Caves, then an evening at the Willy T, the floating bar in the Bight.
2. 2Day 2
   Sunday

   Norman Island to The Baths, Virgin Gorda

   3 h under sail

   We head for the Baths for light swimming and a hike through the granite boulders, then on to Spanish Town for dinner ashore at CocoMaya.

Anatomy

x = (lon + 65.12) × 1000        y = (18.80 − lat) × 1054.35        1 nautical mile = 17.57 units

The divider

A role="slider" whose value text names the share of satellite. Only the knob and the line take a drag, never the whole plate, because on a phone the chart already pans sideways and the page has to scroll past it.

Where the divider rests and how high the knob rides are chosen by hand per chart to clear its pins and labels, the same license a label's side has.

• The Chart Truth RuleChart geometry is data, never drawn by eye: coastlines come from the asset, positions from coordinates, the scale bar from the projection. A pin is where the yacht lies (the mooring field, not the beach or the town), and the generator's check_afloat() names any pin or track that touches land. A satellite plate is emitted only at the chart's exact viewBox, so imagery is never shown out of register.

Overlays and dialogs

Four overlays, one behavior. Each is a real dialog, and each gives the keyboard back exactly where it took it.

The contract: role="dialog" and aria-modal; the element that had focus is remembered; the page stops scrolling behind; Tab wraps inside; Escape closes; focus returns to where it came from. A closed overlay is visibility: hidden as well as transparent, because pointer-events: none alone leaves its links in the tab order.

The implementations are openOverlay(), closeOverlay() and onOverlayKeys() on the homepage, and toggleMenu(), onMenuKeys(), openMap() and mapKeys() in pages.js; see the JavaScript reference.

Motion

Slow and calm. Things arrive once, over most of a second, on one soft curve, and then stay put.

--ease-reveal: cubic-bezier(0.22, 0.61, 0.36, 1)

Every animation has its counterpart in the prefers-reduced-motion block at the foot of each stylesheet, and a new one needs a line there. Adding ?static to an inner page's URL resolves every entrance at once, for screenshots and print.

CSS tokens

Every custom property on :root, with its value read from the source.

The set is written twice, in assets/home.css and assets/pages.css. The two must agree, and tools/build-docs.py reports any that do not. Descriptions come from the @token tags in pages.css.

Component properties

A few custom properties are scoped to a component. They carry a measurement from the generator or from script, never a design decision.

Code reference

The source comments are the documentation. The reference pages are generated from them.

After changing a doc comment, a token or this page, run the builder and commit what it writes:

python3 tools/build-docs.py            # writes docs/ and updates this page
python3 tools/build-docs.py --check    # writes nothing; exits 1 if anything is out of date