Design system
The palette, type and components this site is built from. Switch the theme with the button at the top to see the other half.
Palette
From FreeSurfer's overlay colours, as in the logo: the cool end of the scale, blue to teal, is the accent for links and buttons; the heat end, orange, is kept for the brand and the focus ring and is never text on a light page. Code sits on the logo's black in both themes.
Neutrals
--paper#f7f5f0 · #0d0f12--surface#fffdf9 · #15181c--sunken#ece8df · #1d2126--ink#17191d · #ebe7de--muted#575b63 · #a3a7ae--rule#dcd6ca · #2b3036
Accent
--accent#15627c · #63b9d2--accent-strong#0e4a5e · #8fd0e2--accent-soft#e1edf0 · #142c35--on-accent#fbfaf7 · #0d0f12
Heat
--brand#ff7a1c · #ff7a1c--heat#c4520a · #ff7a1c
Callouts
--tip#1c6a50 · #5ccaa5--tip-bg#e0efe8 · #11281f--warn#9a4700 · #ffa35a--warn-bg#fbe9d9 · #2c1c0e
Code
--code-bg#101317 · #050608--code-ink#e8e4da · #e8e4da--code-muted#949ba4 · #949ba4--syntax-keyword#ff8a3d · #ff8a3d--syntax-string#3cc3a2 · #3cc3a2--syntax-number#ffb14e · #ffb14e--syntax-function#72a9ef · #72a9ef
Other
--poster-bg#000000 · #000000--on-poster#ffffff · #ffffff
Contrast
Every pairing the site paints, measured in both themes. Text needs 4.5:1 (WCAG AA); the focus ring needs 3:1 against what it sits on. A test holds the stylesheet to this table on every run.
| Sample | Pairing | Used for | Light | Dark | Needs |
|---|---|---|---|---|---|
| Aa | --ink on --paper | body text | 16.15 | 15.55 | 4.5 |
| Aa | --ink on --surface | text on a raised panel | 17.32 | 14.43 | 4.5 |
| Aa | --ink on --sunken | inline code | 14.39 | 13.11 | 4.5 |
| Aa | --muted on --paper | captions, the footer, secondary text | 6.25 | 7.95 | 4.5 |
| Aa | --muted on --surface | secondary text on a raised panel | 6.71 | 7.37 | 4.5 |
| Aa | --muted on --sunken | secondary text on a sunken panel | 5.57 | 6.70 | 4.5 |
| Aa | --accent on --paper | links and secondary buttons | 6.28 | 8.59 | 4.5 |
| Aa | --accent on --surface | links on a raised panel | 6.73 | 7.97 | 4.5 |
| Aa | --accent on --sunken | links on a sunken panel | 5.59 | 7.24 | 4.5 |
| Aa | --accent-strong on --paper | a link on hover | 8.92 | 11.23 | 4.5 |
| Aa | --accent-strong on --accent-soft | a secondary button on hover | 8.14 | 8.53 | 4.5 |
| Aa | --accent on --accent-soft | the current page in navigation, links in a note | 5.72 | 6.52 | 4.5 |
| Aa | --muted on --accent-soft | "Previous" and "Next" on a hovered page link | 5.70 | 6.03 | 4.5 |
| Aa | --on-accent on --accent | primary button text | 6.55 | 8.59 | 4.5 |
| Aa | --on-accent on --accent-strong | primary button text on hover | 9.32 | 11.23 | 4.5 |
| Aa | --ink on --accent-soft | the body of a note | 14.73 | 11.81 | 4.5 |
| Aa | --tip on --tip-bg | the label of a tip | 5.48 | 7.75 | 4.5 |
| Aa | --ink on --tip-bg | the body of a tip | 14.82 | 12.63 | 4.5 |
| Aa | --accent on --tip-bg | links in a tip | 5.76 | 6.98 | 4.5 |
| Aa | --warn on --warn-bg | the label of a warning | 5.42 | 8.31 | 4.5 |
| Aa | --ink on --warn-bg | the body of a warning | 14.88 | 13.30 | 4.5 |
| Aa | --accent on --warn-bg | links in a warning | 5.78 | 7.35 | 4.5 |
| Aa | --code-ink on --code-bg | code | 14.67 | 15.97 | 4.5 |
| Aa | --code-muted on --code-bg | comments, R output, the language label | 6.64 | 7.22 | 4.5 |
| Aa | --syntax-keyword on --code-bg | keywords and operators in code | 7.94 | 8.64 | 4.5 |
| Aa | --syntax-string on --code-bg | strings in code | 8.44 | 9.19 | 4.5 |
| Aa | --syntax-number on --code-bg | numbers and constants in code | 10.33 | 11.25 | 4.5 |
| Aa | --syntax-function on --code-bg | function names in code | 7.66 | 8.34 | 4.5 |
--heat on --paper | the focus ring | 4.23 | 7.36 | 3 | |
--heat on --surface | the focus ring on a raised panel | 4.53 | 6.83 | 3 | |
--heat on --sunken | the focus ring on a sunken panel | 3.77 | 6.20 | 3 | |
--heat on --code-bg | the focus ring inside a code block | 4.04 | 7.77 | 3 | |
| Aa | --on-poster on --poster-bg | the home page viewer's button on the poster | 21.00 | 21.00 | 4.5 |
--heat on --poster-bg | the focus ring on the poster and the 3D viewer | 4.56 | 8.05 | 3 |
Type
Newsreader, the logo's wordmark, for headings. IBM Plex Sans for text, and IBM Plex Mono for code, where most of a docs page's attention goes. All three are served from this site.
Vertex-wise statistics
Heading one, the page title
Heading two, a section
Heading three, a subsection
Heading four, a run-in label
A lead paragraph opens a page in a larger, quieter voice.
Body text is set in Plex Sans at 17px on a 1.65 line, held to a measure of about 75 characters. It has strong and emphasised words, alink within the page, and inline code such asqdecr_fastlm() or n_cores = 4. Press Tab to see the focus ring.
Small, muted text: captions, the footer, secondary detail.
Buttons and links
Buttons lead to the site's own pages. Links that leave the site carry an arrow, or are an icon.
Callouts and badges
0.9.0stableGPL-3
Code
Highlighted by Shiki at build time into classes the stylesheet colours, so nothing is written inline. The copy button leaves R's output lines behind.
library(QDECR)
# Cortical thickness against age and sex, left hemisphere
vw <- qdecr_fastlm(qdecr_thickness ~ age + sex,
data = pheno,
id = "subject",
hemi = "lh",
n_cores = 4)
mean(c(2.4, 2.6))
#> [1] 2.5# FreeSurfer's environment, before starting R
export FREESURFER_HOME=/usr/local/freesurfer
source "$FREESURFER_HOME/SetUpFreeSurfer.sh"Tables and figures
| Argument | Default | What it sets |
|---|---|---|
fwhm | 10 | Smoothing, in mm |
mcz_thr | 0.001 | Cluster-forming threshold |
cwp_thr | 0.025 | Cluster-wise p threshold |
