Fabian Theis
Principal investigator
Brand
Identity and design system
One set of tokens drives this site, the wiki, slides and posters. This page is generated from them, so it always shows the system as it is.
Plate I
The cover plate
The home page is one plate: the lab's myeloid differentiation network, simulated live as a Waddington landscape, engraved in ink on paper and drawn in light at night. Every section of the site opens with a plate in the same language.
Plate specimens
Logo
Mark and wordmark
The mark draws a lineage as dots: one progenitor, a short trunk and two fates, one in the signal colour. Both are interim until the lab's own logo files arrive.
Theis LabTheis Lab
- Mark, adapts to the colour schememark.svg
- Mark on papermark-ink.svg
- Mark on nightmark-paper.svg
- Wordmark on paperwordmark-ink.svg
- Wordmark on nightwordmark-paper.svg
Brand kit
Downloads
Templates for slides and posters in the same identity, generated from the tokens at every build. The PowerPoint files also open in Keynote and Google Slides; the LaTeX templates compile with XeLaTeX, LuaLaTeX or pdfLaTeX. Install the open fonts Newsreader, Geist, Geist Mono for the full look; without them the templates fall back to common fonts.
- Usage guide, one pagepage, prints on A4
- Slide template, 16:9PowerPoint
- Poster template, A0 portraitPowerPoint
- LaTeX: Beamer theme and A0 postersZIP of text files
- Design tokensJSON
- Mark, adapts to the colour schemeSVG
- Mark on paperSVG
- Mark on nightSVG
- Wordmark on paperSVG
- Wordmark on nightSVG
Colour
Paper and night
Every colour has a value for each mode. The ratio is the contrast against the page background; text pairs meet WCAG 2.2 AA in both modes.
Surfaces
bg
#FAF9F6#07090D
page background; the hero canvas is cleared to it
surface
#FFFFFF#0D1016
1.1:11.0:1
raised areas: dialogs, cards, the sticky header
sunken
#F1EFEA#040508
1.1:11.0:1
code blocks, wells, the footer
Ink
ink
#0E1218#EDEFF3
17.8:117.3:1
primary text
ink-muted
#48515E#A7AFBC
7.6:19.0:1
secondary text, ledes
ink-subtle
#636C78#7F8898
5.1:15.6:1
metadata, captions, placeholders
Lines
line
#E2E0D9#1C212A
1.3:11.2:1
hairline rules between blocks
line-strong
#C6C3BA#2C333F
1.7:11.6:1
emphasised rules, panel tops
line-control
#868379#5E6676
3.6:13.5:1
outline of inputs and controls (3:1 against their background)
Signal
accent
#D9381E#FF6A4D
4.4:17.0:1
graphics and large marks; never a large background fill
accent-ink
#B42E17#FF8A70
6.0:18.7:1
accent text and links in an active state
accent-soft
#FBE9E4#2A1410
1.1:11.1:1
tint behind an accent element, text selection
focus
#2F5BEA#8FB0FF
5.2:19.3:1
keyboard focus outline
Data: fates and categories
stem
#1B2330#E9EDF5
15.0:117.0:1
progenitor cells in the hero; neutral data
data-1
#2F5BEA#6F9BFF
5.2:17.4:1
categorical data and fates, blue
data-2
#6D43E0#9E84FF
5.7:16.8:1
categorical data and fates, violet
data-3
#B833C4#DB7BEA
4.6:17.6:1
categorical data and fates, magenta
data-4
#D6336C#FF7A9C
4.4:18.1:1
categorical data and fates, rose
data-5
#E8590C#FF8F5E
3.4:18.9:1
categorical data and fates, orange
data-6
#B7791F#FFC65C
3.5:112.8:1
categorical data and fates, amber
data-7
#0B8F7A#56DCC6
3.8:111.8:1
categorical data and fates, teal
data-8
#3D7EA6#7CC4F0
4.2:110.4:1
categorical data and fates, steel
Data: sequential ramp
ramp-1
#1F2F86#2B3A8F
11.0:12.0:1
sequential scale (pseudotime), start
ramp-2
#5B34B8#6A4BC4
7.6:13.2:1
sequential scale
ramp-3
#B02C9E#C255B8
5.4:15.0:1
sequential scale
ramp-4
#E0523A#FF7A6B
3.7:17.8:1
sequential scale
ramp-5
#C98A12#FFD27A
2.8:114.0:1
sequential scale, end
Type
Three families
Newsreader for display and reading, Geist for the interface, Geist Mono for labels, numbers and code. Self-hosted, variable, with metric-matched fallbacks.
- Newsreaderserif · weights 200 800
- Geistsans · weights 100 900
- Geist Monomono · weights 100 900
display-1 · serif · 320
Cells become what they are
display-2 · serif · 340
Cells become what they are
h2 · serif · 380
Cells become what they are
h3 · serif · 450
Cells become what they are
lead · serif · 380
Cells become what they are
body · sans · 400
Cells become what they are
prose · serif · 400
Cells become what they are
small · sans · 400
Cells become what they are
micro · mono · 450
Fig. 1 | one lab, seven lineages
plate · serif · 320
Cells become what they are
cover · serif · 330
Cells become what they are
plate-name · serif · 400
Cells become what they are
numeral · serif · 300
Cells become what they are
Space, shape, motion
Quiet structure
A 4 px base, hairlines instead of shadows, small radii, and motion that eases out quickly.
- space-10.25rem
- space-20.5rem
- space-30.75rem
- space-41rem
- space-51.5rem
- space-62rem
- space-73rem
- space-84rem
- space-96rem
- space-108rem
- space-1112rem
Components
Controls
Button and link
Tag and topic
NeutralOpen positionPreprintFate 1Fate 4Fate 7Single-cell genomicsSpatial transcriptomicsCell atlasesGenerative models
Segmented control
Fields
Pagination
Components
Records
Stat
- 14Members
- awaiting data syncCitations
- 1,234Example
Avatar
Person card
Theme item
Single-cell and spatial atlases
Placeholder summary about building reference maps of cells and tissues.
4 topics · 5 people · 7 publications · 14 tools
Software card
Activity item
Placeholder news item about the website preview
Placeholder summary. This item shows how a news item looks on the news page and in the activity stream.
Meta list
Components
Reading
Prose
Long text is set in Newsreader at a comfortable measure. Links are underlined in the signal colour, code such as pnpm gen sits on a sunken tint, and lists keep a quiet marker.
- Hairlines instead of shadows.
- One signal colour, used sparingly.
A quotation is set in italic with a thin rule in the signal colour.