Identity ​

Tidemark sets the colors of its site, its charts, and its marks from one palette, which the package declares once in tidemark.identity, and this page sets out each color, the faces the site sets, and which mark belongs where. mise run docs:render writes every table on this page from that declaration, so a hex copied from here onto a slide, a poster, or a figure drawn outside the repository is the hex all three set. The audit fails a pull request where a table or a mark has drifted from the palette, and on the site, each hex opens on a swatch of its color. Every piece the site's widgets are built from, set out at work beside its source, sits on The Kit.

Color ​

Palette and Shades ​

The palette declares a small set of colors, and every other color the project sets is a shade mixed from one of them.

  • Toronto leads, the deep periwinkle blue the logo and the title draw the monogram in.
  • Cashmere is the second color, reading as dry sand against the blue.
  • The complements, Celadon, Ube, Chambray, Seacaller, and Heath, color the chart series, and Celadon, Ube, and Seacaller color the drawings as well.
  • The state colors, Apricot and Eureka, mark a failure and a warning.
  • The seasonal color, October, is the pumpkin of the jack-o'-lanterns that float on the front page's strip through October, its name taken from color-name-list.
  • The neutrals set the grounds, the grid, and the muted text, where Cararra and Emperor are the warm white and the dark gray of the Gulf of Maine Research Institute (GMRI).

A shade is a darker or a lighter form of its color, mixed toward black or white in the OKLCH color space. The first table below gives each declared color and what it is for, and the second gives each shade beside the color-mix expression that produces it, so a tool that cannot evaluate the expression still reaches the shade through its hex. Toronto Haze, the color of the title's letters, is the one shade that keeps less than all its chroma, taking half of Toronto Mid's, which a relative color writes as calc(c * 0.5).

Series hues
torontoToronto#5069ad
cashmereCashmere#e3c3a3
celadonCeladon#8cc5a3
ubeUbe#8a80cb
chambrayChambray#7db3e0
seacallerSeacaller#4b8488
heathHeath#c08597
State hues
apricotApricot#e8876f
eurekaEureka#e8c840
Seasonal hues
octoberOctober#c67533
Neutrals
groundCararra#f2f1ee
mutedMid Gray#999999
gridEmperor#535353
darkNear Black#1a1a1a
haze#8792ac
Toronto Haze
27% toward white · 50% chroma
On light
On dark
Set intitle.svg
BlackWhite
Every value as a table
TokenHexNamePurpose
toronto#5069adTorontoThe lead color, on the monogram in the logo and the title and on the title's water, on the favicon's monogram under the light scheme, on the touch icon's square, on the buttons and the badges under both schemes, and on a link under the light one
cashmere#e3c3a3CashmereThe second color and the sand, on fills and washes under either scheme, on words under the dark one alone, and on the datum and the shore in every drawing
celadon#8cc5a3CeladonThe cool complement and the success state, and the gauge and the distance it reads in every drawing
ube#8a80cbUbeThe violet below the lead, a chart series, the sensor's height in every drawing, and a citation on every page
chambray#7db3e0ChambrayA cool accent and a chart series
seacaller#4b8488SeacallerThe deep teal, a chart series, and the moment a reading is taken in every drawing
heath#c08597HeathThe shell's pink the docs label wears, and a chart series
apricot#e8876fApricotThe critical state, and the water's height above the datum and the pass in every drawing
eureka#e8c840EurekaThe warning state, on a line a coverage report finds partly covered
october#c67533OctoberThe pumpkin of the jack-o'-lanterns floating on the front page's strip through October
ground#f2f1eeCararraGMRI's warm white, the light ground, body text on the dark ground, and the touch icon's monogram
muted#999999Mid GrayThe rule dividing a page, a mark on the dark ground, and the base of quiet text there
grid#535353EmperorGMRI's dark gray, for the grid of every chart and quiet text on the light ground
dark#1a1a1aNear BlackThe dark ground on the site and on every chart, and body text on the light ground
TokenHexNameMix
apricot-ink#bb6c58Apricot Inkcolor-mix(in oklch, #e8876f, black 15%)
apricot-deep#8a4e3fApricot Deepcolor-mix(in oklch, #e8876f, black 32%)
cashmere-ink#7f6c59Cashmere Inkcolor-mix(in oklch, #e3c3a3, black 35%)
cashmere-deep#5c4e40Cashmere Deepcolor-mix(in oklch, #e3c3a3, black 48%)
celadon-ink#4c6d59Celadon Inkcolor-mix(in oklch, #8cc5a3, black 35%)
celadon-deep#364f40Celadon Deepcolor-mix(in oklch, #8cc5a3, black 48%)
ube-ink#5a5387Ube Inkcolor-mix(in oklch, #8a80cb, black 26%)
ube-lift#9e97d5Ube Liftcolor-mix(in oklch, #8a80cb, white 18%)
dark-lift#232323Near Black Liftcolor-mix(in oklch, #1a1a1a, white 5%)
dark-sink#0e0e0eNear Black Sinkcolor-mix(in oklch, #1a1a1a, black 25%)
ground-lift#f8f8f6Cararra Liftcolor-mix(in oklch, #f2f1ee, white 50%)
muted-ink#848484Mid Gray Inkcolor-mix(in oklch, #999999, black 10%)
muted-lift#a5a5a5Mid Gray Liftcolor-mix(in oklch, #999999, white 12%)
seacaller-lift#78a2a5Seacaller Liftcolor-mix(in oklch, #4b8488, white 25%)
toronto-deep#37497bToronto Deepcolor-mix(in oklch, #5069ad, black 22%)
toronto-haze#8792acToronto Hazeoklch(from color-mix(in oklch, #5069ad, white 27%) l calc(c * 0.5) h)
toronto-mid#7c91c4Toronto Midcolor-mix(in oklch, #5069ad, white 27%)
toronto-night#1f2a4bToronto Nightcolor-mix(in oklch, #5069ad, black 45%)
toronto-pale#9babd3Toronto Palecolor-mix(in oklch, #5069ad, white 45%)

Light and Dark Roles ​

A role is one use of color on a page, such as body text, a link, or the page's own ground, and each names the color it takes under the light scheme and under the dark. The site's tokens, the drawings, the charts, and both coverage reports read the same roles. Each kind of role below holds a contrast WCAG 2.2 sets against every ground a page sets it on:

  • A role that sets words holds the 4.5:1 contrast of text.
  • A hue's shown step sets a pin, a trace, or any other shape a drawing draws in the hue, and holds the 3:1 contrast of a graphical object.
  • A hue's text step sets words in the hue, such as the word a stamp frames, and holds the contrast of text.

A translucent role, such as rule, sheer, or tint, lays a share of another color over whatever sits beneath it, which the table writes as the color and its share under each scheme.

1 of 12 · cite
citetext

The hue a citation takes, meaning the staff its numbers fly on, the cloth beneath them, and the fill a number takes while the pointer rests on it or a reader jumps to its entry, beside the label and the staff a list of sources flies from and the arrow back to the citation a reader followed.

lightAaube-ink6.15:1
darkAaube-lift6.49:1
Every value as a table
RoleMeaningLightDark
citeThe hue a citation takes, meaning the staff its numbers fly on, the cloth beneath them, and the fill a number takes while the pointer rests on it or a reader jumps to its entry, beside the label and the staff a list of sources flies from and the arrow back to the citation a reader followedube-ink #5a5387ube-lift #9e97d5
deepThe color a link takes while the pointer rests on it, and the color of a link on a tinted groundtoronto-deep #37497btoronto-pale #9babd3
elevatedA surface floating above the page, such as a card or a menuground #f2f1eedark-lift #232323
inkBody textdark #1a1a1aground #f2f1ee
linkA link at resttoronto-deep #37497btoronto-pale #9babd3
pageThe page's own groundground #f2f1eedark #1a1a1a
quietText set back from the body, such as a caption, a comment, or a line numbergrid #535353muted-lift #a5a5a5
raisedA surface set one step off the page, such as a header band or a card's faceground-lift #f8f8f6dark-lift #232323
ruleA line dividing one part of a page from the nextmuted #999999 at 40%muted #999999 at 30%
sheerThe surface each widget and the list of sources on the front page lay over the water, which lets the water show through beneath their words and marksraised #f8f8f6 at 75%raised #232323 at 75%
sunkenA surface set below the page, such as the sidebarground-lift #f8f8f6dark-sink #0e0e0e
tintThe link's color laid thin behind a tip, a badge, or a highlighted linelink #37497b at 14%link #9babd3 at 16%
apricot-shownA pin, a trace, or another shape set in Apricotapricot-ink #bb6c58apricot #e8876f
cashmere-shownA pin, a trace, or another shape set in Cashmerecashmere-ink #7f6c59cashmere #e3c3a3
celadon-shownA pin, a trace, or another shape set in Celadonceladon-ink #4c6d59celadon #8cc5a3
muted-shownA pin, a trace, or another shape set in Mid Graymuted-ink #848484muted #999999
october-shownA pin, a trace, or another shape set in Octoberoctober #c67533october #c67533
seacaller-shownA pin, a trace, or another shape set in Seacallerseacaller #4b8488seacaller-lift #78a2a5
toronto-shownA pin, a trace, or another shape set in Torontotoronto-deep #37497btoronto-mid #7c91c4
ube-shownA pin, a trace, or another shape set in Ubeube-ink #5a5387ube-lift #9e97d5
apricot-textWords set in Apricotapricot-deep #8a4e3fapricot #e8876f
cashmere-textWords set in Cashmerecashmere-deep #5c4e40cashmere #e3c3a3
celadon-textWords set in Celadonceladon-deep #364f40celadon #8cc5a3
ube-textWords set in Ubeube-ink #5a5387ube-lift #9e97d5

Chart Series ​

A chart colors its series in the order below and leaves out the two state colors, so that no series reads as an alarm. Every chart is drawn on Near Black, so a series set on a light ground, such as a slide's, needs each hue's contrast checked first, since Cashmere on Cararra reads at only 1.48:1.

-2 m-1 m0 m+1 m+2 m

Typefaces ​

The site sets the faces Faces in tidemark.identity.values declares once.

  • A page loads each face through its Fontsource package.
  • A preview card and the title set their words in the Regular file tidemark ships under src/tidemark/identity/fonts/, beside the SIL Open Font License each face is published under.

SWOT against Maine’s tide gauges

Body text@fontsource-variable/literata
Every value as a table
FaceSetsSite Package
Young SerifDisplay text, titles, and the wordmark@fontsource/young-serif
LiterataBody text@fontsource-variable/literata
JetBrains MonoCode@fontsource-variable/jetbrains-mono

Marks ​

Every mark is drawn as outlined paths, rather than as text, so each one renders the same, whether or not a reader's machine holds Young Serif. The name renders from title.svg as well, since text set in the face would show the face's own m where the monogram belongs.

Every value as a table
MarkCarriesAppears OnColors
docs/assets/logo.svgThe monogram alone, its ink centered in the fileThe navigation bar of every page, where it stands for the site's nametoronto #5069ad
docs/assets/title.svgThe name with the monogram as its m, the monogram on a fine horizon along the foot of its letters above the short dashes its light breaks into on the water, with pale glints among themThe front page, the README, and the base preview cardtoronto #5069ad, toronto-haze #8792ac, toronto-pale #9babd3
docs/assets/touch.svgThe monogram alone in Cararra, centered on a square of Toronto that a phone roundsThe home screen of a phone the site is added to and a browser's favorites, as the apple-touch-icon.png the build draws from it at 180 pixelsground #f2f1ee, toronto #5069ad
docs/public/favicon.svgThe monogram alone, centered in a square, in Toronto Pale under a dark color schemeThe browser tabtoronto #5069ad, toronto-pale #9babd3

The title draws the water the site's preview cards show, the image a page carries wherever a link to it is shared. A page in a section takes the section card, its monogram lit on a night horizon in the section's color, and every other page takes the base card, the title over a chart of the coast⁠12⁠ and its gauges⁠345⁠, whereas a page the sandbox builds for one visual takes that visual's own card. tidemark.identity.marks declares that water once for the title and the section cards alike, as the short dashes the monogram's light breaks into. The dashes pack close under the horizon and open toward the viewer, each on whole pixels where the front page sets the title 512 pixels wide and a section card sets its monogram 150 pixels wide. The title keeps the rows nearest its horizon, while the section cards keep them all. The logo, the touch icon, and the favicon each set the monogram alone, its own ink centered in its box.

  • The title splits the monogram at the middle of its stem span, its left half beneath the letters and its right half over them, so the left tail runs under the e, and the right crest crosses the bowl of the a. It stands the monogram on a fine horizon along the letters' foot, with the dashes and their pale glints beneath the monogram alone. The base preview card sets the title in its own tones, whereas the team's disk stamps the name in its own two with the monogram alone as its m.
  • The logo draws the monogram 96 units tall in Toronto, centered in a box 144 units tall, which the navigation bar sets at its logo height.
  • The touch icon sets it in Cararra on a square of Toronto left unrounded, since a phone rounds the corners itself.
  • The favicon sets it in Toronto, and in Toronto Pale under a dark color scheme.

Title Measurements ​

The title sets the word Tidemark in Young Serif and puts the monogram, the lowercase serif m whose three stems end in wave crests, in place of the face's own m. Each length below is measured from title.svg itself in its own units, which set the face at a type size of 200. The drawing leaves the water beneath the monogram behind, so each guide reads against the name alone:

106.2146.421.820.542.018.8165.224.01023 × 244
1 of 9 · Monogram height
106.2

The monogram is drawn in Toronto and scaled to the height of the face's own m, while the other letters take Toronto Haze.

  1. 1Statistics Canada 2021 Provinces/Territories, Cartographic Boundary File, 2021 Census https://www12.statcan.gc.ca/census-recensement/2021/geo/sip-pis/boundary-limites/files-fichiers/lpr_000b21a_e.zip↩︎

  2. 2U.S. Census Bureau 2024 2024 Cartographic Boundary File (SHP), State and Equivalent Entities for United States, 1:500,000 https://www2.census.gov/geo/tiger/GENZ2024/shp/cb_2024_us_state_500k.zip↩︎

  3. 3Gulf of Maine Research Institute & Brown University 2026 NERACOOS ERDDAP Northeastern Regional Association of Coastal Ocean Observing Systems. https://data.neracoos.org/erddap/↩︎

  4. 4United States Geological Survey 1994 USGS Water Data for the Nation https://doi.org/10.5066/F7P55KJN↩︎

  5. 5NOAA CO-OPS 2026 CO-OPS Data Retrieval API and Metadata API https://tidesandcurrents.noaa.gov/web_services_info.html↩︎