Design system

Darwin ships in two schemesLab (the default) and Green — swapped live on any product screen from the swatch row in the window bar (?border=lab / ?border=green). They share the type and the icon set; they differ in ground, line, accent, shadow and radius. Everything below is mirrored from static/css/workspace.css; every swatch is a live --ws-* token.

SchemeLabdefault SchemeGreen InterfaceSora DisplaySpace Grotesk WordmarkDRWN IconsLucide

Schemes

Two takes on the same interface. Lab is the “paper-stamp” instrument look — cream paper, ink frames, hard-offset shadows, a yellow do-this cue. Green is the calm baseline — white canvas, soft grey lines, one Pine accent. Same layout, type and icons; the tokens below are what differs.

Lab

default ?border=lab

The Galileo Viewer Kit’s “paper-stamp” language ported to Darwin. Cream paper instead of white, ink card frames, hard-offset (no-blur) “stamp” shadows, tight rectangles, mono uppercase micro-labels, and a yellow “do-this” cue over the green active accent.

GroundCream paper — #FFFDF5 canvas, #F4F1E1 chrome
LinesTranslucent-ink hairlines for separators; solid ink frames on cards and floating windows
AccentLab green #0E8646 (live / done) + yellow #F5C24E (do-this)
ElevationHard offset “stamp” shadows, no blur — 3px on cards, 6px on floats
RadiiTight — 5 / 6px
TypeMicro-labels re-cut to IBM Plex Mono, uppercase, tracked; icons render as ink stamps

Green

?border=green

The calm baseline. A white canvas and a soft grey line family, with the Pine green accent carrying everything actionable or live — one saturated colour on a neutral field.

GroundWhite canvas #FFFFFF, faint-grey sidebar #F1F1EF
LinesOne soft grey family; a neutral grey on floating windows and snippets
AccentPine green #2F6E52 (+ deep pine, pine tint)
ElevationSoft blurred shadow on floating cards
RadiiRounded — 6 / 12px
TypeSora / Space Grotesk throughout; Lucide icons, one weight

Colour

The two palettes, side by side. Each scheme is a small set of surfaces, lines, ink and one accent (Lab adds the yellow cue); the swatches sit on the scheme’s own paper so Lab’s translucent line tokens read as they do in the product.

Lab

default

Surfaces

#FFFDF5
Cream paper
--ws-main-bg
Main canvas, right panel
#F4F1E1
Warm cream
--ws-side-bg
Sidebar / chrome
#F3EFDF
Cream 2
--ws-user-bg
User message, hovers
#FBE9B5
Yellow tint
--ws-side-active
Selected session row

Lines

rgba(26,26,26,.24)
Ink 24%
--ws-sep
Structural separators
rgba(26,26,26,.14)
Ink 14%
--ws-line
Fine rules, header underline
rgba(26,26,26,.22)
Ink 22%
--ws-line-strong
Neutral control borders
#1A1A1A
Ink
--ws-line-float
Card + floating-window frames

Text

#1A1A1A
Ink
--ws-ink
Body text
#6A695F
Muted
--ws-muted
Captions, table headers
#43423D
Ink side
--ws-side-ink
Sidebar text
#8A8776
Muted side
--ws-side-muted
Sidebar labels

Accent · Lab green + yellow

#0E8646
Lab green
--ws-accent
Accent, dots, curve, cursor
#0D773E
Deep green
--ws-accent-strong
Option titles, pressed
#D8EFDF
Green tint
--ws-tint
Selected rows, callouts
#F5C24E
Yellow
--ws-yellow
Do-this: primary action, tab cap
#EDB22D
Yellow hover
--ws-yellow-hover
Hover on the yellow stamp

Warm companions

#E07A2A
Amber
--ws-warm
Clock playhead
#C8A21A
Gold
--ws-warm-2
Clock value dot

Green

Surfaces

#FFFFFF
White
--ws-main-bg
Main canvas, right panel
#F1F1EF
Grey 50
--ws-side-bg
Sidebar
#F5F5F4
Grey 75
--ws-user-bg
User message, hovers
#EDEDEB
Grey 100
--ws-side-hover
Sidebar row hover

Lines

#CFCFCA
Sep grey
--ws-sep
Structural separators
#E2E2DE
Line
--ws-line
Fine rules, header underline
#DCDCD8
Line strong
--ws-line-strong
Controls, snippet frames
#C6C6C0
Line float
--ws-line-float
Floating-window frames

Text

#201F1D
Ink
--ws-ink
Body text
#6E6E6A
Muted
--ws-muted
Captions, table headers
#34332F
Ink side
--ws-side-ink
Sidebar text
#9A9A95
Muted side
--ws-side-muted
Sidebar labels

Accent · Pine

#2F6E52
Pine
--ws-accent
Accent, dots, curve, cursor
#244F3A
Deep pine
--ws-accent-strong
Option titles, pressed
#E9F1ED
Pine tint
--ws-tint
Selected rows, callouts
#2F6E5280
Pine glow
--ws-done-glow
“Done” pulse ring (50%)

Warm companions

#C15F3C
Clay
--ws-warm
Clock playhead
#B07A2E
Ochre
--ws-warm-2
Clock value dot

How each hangs together

One accent, warm against cool. Both schemes lead with a single green and keep an amber/clay warm pair for the rare second mark (the traffic clock). A lone warm highlight sits comfortably beside the cool green without a second theme.

Tint, don’t re-hue. For a surface that should read as the accent — a selected row, a callout — use the green tint, not a lighter green; it stays in the family and keeps the page calm.

Lab’s two-signal accent. Lab splits the job: green means live / done, yellow means do this (the primary snippet action, the cap on the selected tab, the rule under the session header). Green keeps to the one Pine accent for all of it.

Type

Space Grotesk for display (the DRWN wordmark, section titles, big numbers) and Sora for the interface and body — two geometric-grotesque faces on the brief simple shapes, readable, technology. Shown against the real product content. Both schemes share these faces; the Lab scheme additionally re-cuts its micro-labels (snippet titles, tab labels) to IBM Plex Mono, uppercase and tracked, for the instrument look.

Space Grotesk

Display · wordmark

+ Sora

Interface · body

Display carries identity and figures; Sora carries everything you read. Both load from Google Fonts in _base.html.

Display — Space Grotesk

DRWN

Urbanica

DRWN

Urbanica

Allocate parking across the parcels

Silk Combine · Malatia-Sebastia · block 01-007-0259

Interface — Sora

New session Properties Sessions Today
RegularDarwin reads the site plan
MediumDarwin reads the site plan
SemiboldDarwin reads the site plan
BoldDarwin reads the site plan

Six redevelopment options are on the table for the former Silk Combine. Darwin holds the 46 buildings, their estimated storeys and floor areas, and the zone plans per option, then answers questions about them in plain language — a working surface, not a slide deck.

Storeys, heights, floor areas and interior zones are estimates and are labelled as such throughout the interface.

46 buildings · 10 parcels · 24,600 m² display figures — Space Grotesk
40°09′32″N 44°28′11″E · +7.5% · 1234567890 interface figures — Sora, tabular

Display tells — Space Grotesk

a g e R Q G & 0 1 4 7 l I

Interface tells — Sora

a g e R Q G & 0 1 4 7 l I

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

The study — seven geometric-grotesque candidates

Brief: geometric grotesque, simple shapes, readable, technology, non-monospace. Each candidate on the real content — the wordmark on paper and on the dark canvas, a headline, a slice of UI, body copy, tabular numerals and the letters that give a geometric face away (a g e R Q G 1 4 0).

1

Space Grotesk

Geometric grotesque · technical

Florian Karsten, 2018 · OFL · 300–700 · a proportional redraw of Space Mono; overtly technical, distinctive digits.

DRWN

Urbanica

DRWN

Urbanica

Allocate parking across the parcels

Silk Combine · Malatia-Sebastia · block 01-007-0259

New session Properties Sessions Today
RegularDarwin reads the site plan
MediumDarwin reads the site plan
SemiboldDarwin reads the site plan
BoldDarwin reads the site plan

Six redevelopment options are on the table for the former Silk Combine. Darwin holds the 46 buildings, their estimated storeys and floor areas, and the zone plans per option, then answers questions about them in plain language — a working surface, not a slide deck.

Storeys, heights, floor areas and interior zones are estimates and are labelled as such throughout the interface.

46 buildings · 10 parcels · 24,600 m²catalogue totals
40°09′32″N 44°28′11″E · +7.5% · 1234567890coordinates · deltas · lining figures

The geometry tells

a g e R Q G & 0 1 4 7 l I

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

2

Sora

Geometric · technology

Jonny Pinhorn, 2020 · OFL · 100–800 · drawn as a brand face for technology products; even, low-contrast.

DRWN

Urbanica

DRWN

Urbanica

Allocate parking across the parcels

Silk Combine · Malatia-Sebastia · block 01-007-0259

New session Properties Sessions Today
RegularDarwin reads the site plan
MediumDarwin reads the site plan
SemiboldDarwin reads the site plan
BoldDarwin reads the site plan

Six redevelopment options are on the table for the former Silk Combine. Darwin holds the 46 buildings, their estimated storeys and floor areas, and the zone plans per option, then answers questions about them in plain language — a working surface, not a slide deck.

Storeys, heights, floor areas and interior zones are estimates and are labelled as such throughout the interface.

46 buildings · 10 parcels · 24,600 m²catalogue totals
40°09′32″N 44°28′11″E · +7.5% · 1234567890coordinates · deltas · lining figures

The geometry tells

a g e R Q G & 0 1 4 7 l I

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

3

Manrope

Geometric grotesque · UI

Mikhail Sharanda, 2018 · OFL · 200–800 · semi-condensed, tuned for interfaces; the readable workhorse.

DRWN

Urbanica

DRWN

Urbanica

Allocate parking across the parcels

Silk Combine · Malatia-Sebastia · block 01-007-0259

New session Properties Sessions Today
RegularDarwin reads the site plan
MediumDarwin reads the site plan
SemiboldDarwin reads the site plan
BoldDarwin reads the site plan

Six redevelopment options are on the table for the former Silk Combine. Darwin holds the 46 buildings, their estimated storeys and floor areas, and the zone plans per option, then answers questions about them in plain language — a working surface, not a slide deck.

Storeys, heights, floor areas and interior zones are estimates and are labelled as such throughout the interface.

46 buildings · 10 parcels · 24,600 m²catalogue totals
40°09′32″N 44°28′11″E · +7.5% · 1234567890coordinates · deltas · lining figures

The geometry tells

a g e R Q G & 0 1 4 7 l I

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

4

Plus Jakarta Sans

Geometric grotesque

Tokotype, 2020 · OFL · 200–800 · geometric core with a few humanist tells; confident at display size.

DRWN

Urbanica

DRWN

Urbanica

Allocate parking across the parcels

Silk Combine · Malatia-Sebastia · block 01-007-0259

New session Properties Sessions Today
RegularDarwin reads the site plan
MediumDarwin reads the site plan
SemiboldDarwin reads the site plan
BoldDarwin reads the site plan

Six redevelopment options are on the table for the former Silk Combine. Darwin holds the 46 buildings, their estimated storeys and floor areas, and the zone plans per option, then answers questions about them in plain language — a working surface, not a slide deck.

Storeys, heights, floor areas and interior zones are estimates and are labelled as such throughout the interface.

46 buildings · 10 parcels · 24,600 m²catalogue totals
40°09′32″N 44°28′11″E · +7.5% · 1234567890coordinates · deltas · lining figures

The geometry tells

a g e R Q G & 0 1 4 7 l I

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

5

Poppins

Geometric · circular

Indian Type Foundry, 2014 · OFL · 100–900 · pure circles and clean joints; friendly, highly legible.

DRWN

Urbanica

DRWN

Urbanica

Allocate parking across the parcels

Silk Combine · Malatia-Sebastia · block 01-007-0259

New session Properties Sessions Today
RegularDarwin reads the site plan
MediumDarwin reads the site plan
SemiboldDarwin reads the site plan
BoldDarwin reads the site plan

Six redevelopment options are on the table for the former Silk Combine. Darwin holds the 46 buildings, their estimated storeys and floor areas, and the zone plans per option, then answers questions about them in plain language — a working surface, not a slide deck.

Storeys, heights, floor areas and interior zones are estimates and are labelled as such throughout the interface.

46 buildings · 10 parcels · 24,600 m²catalogue totals
40°09′32″N 44°28′11″E · +7.5% · 1234567890coordinates · deltas · lining figures

The geometry tells

a g e R Q G & 0 1 4 7 l I

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

6

DM Sans

Geometric · low contrast

Colophon / Google, 2019 · OFL · 100–1000 · quiet and even; excellent down to small UI sizes.

DRWN

Urbanica

DRWN

Urbanica

Allocate parking across the parcels

Silk Combine · Malatia-Sebastia · block 01-007-0259

New session Properties Sessions Today
RegularDarwin reads the site plan
MediumDarwin reads the site plan
SemiboldDarwin reads the site plan
BoldDarwin reads the site plan

Six redevelopment options are on the table for the former Silk Combine. Darwin holds the 46 buildings, their estimated storeys and floor areas, and the zone plans per option, then answers questions about them in plain language — a working surface, not a slide deck.

Storeys, heights, floor areas and interior zones are estimates and are labelled as such throughout the interface.

46 buildings · 10 parcels · 24,600 m²catalogue totals
40°09′32″N 44°28′11″E · +7.5% · 1234567890coordinates · deltas · lining figures

The geometry tells

a g e R Q G & 0 1 4 7 l I

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

7

Red Hat Display

Geometric · technology

MCKL for Red Hat, 2019 · OFL · 300–900 · an open-source tech-brand face; has a Text sibling for body.

DRWN

Urbanica

DRWN

Urbanica

Allocate parking across the parcels

Silk Combine · Malatia-Sebastia · block 01-007-0259

New session Properties Sessions Today
RegularDarwin reads the site plan
MediumDarwin reads the site plan
SemiboldDarwin reads the site plan
BoldDarwin reads the site plan

Six redevelopment options are on the table for the former Silk Combine. Darwin holds the 46 buildings, their estimated storeys and floor areas, and the zone plans per option, then answers questions about them in plain language — a working surface, not a slide deck.

Storeys, heights, floor areas and interior zones are estimates and are labelled as such throughout the interface.

46 buildings · 10 parcels · 24,600 m²catalogue totals
40°09′32″N 44°28′11″E · +7.5% · 1234567890coordinates · deltas · lining figures

The geometry tells

a g e R Q G & 0 1 4 7 l I

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz

Decision 2026-09-16 · applied to the mockups

Sora for the interface, Space Grotesk for display and the wordmark

The interface moved from Manrope to Sora, and the DRWN wordmark from Big Shoulders Display to Space Grotesk (also the display face for titles and big numbers).

Manrope was the closest single-family fit — a geometric grotesque readable from a 2 rem headline down to an 11 px label, semi-condensed so it fits more building names per line. Space Grotesk is the strongest technology signal and the most distinctive; best as the display/identity face, echoing the condensed wordmark. Sora and Red Hat Display read more overtly “tech” for the interface itself; Plus Jakarta Sans adds personality inside the grotesque lane; Poppins and DM Sans are the safe, friendly geometrics but read a touch generic.

Icons

Lucide: a strict 24 px / 2 px grid, the stroke width is a CSS property (so the whole set thins in one line), and it ships as SVG — paste the path into a template or let lucide.createIcons() replace the tags at load. Both schemes use the same set; in the Lab scheme the icon buttons pick up its ink frame and hard stamp shadow, so the glyphs read as paper stamps. The 37 glyphs the Darwin screens need:

Lucide

ISC · 1,500+ icons · 24 px grid, 2 px stroke (any stroke width) · SVG, one weight

<i data-lucide="panel-left"></i>
<script src="…/lucide.min.js"></script>
lucide.createIcons()   // or paste the SVG
sidebar
back
forward
send
expand
switch
pin
new
search
settings
check
close
attach
folder
file
map
building
car
calendar
clock
user
people
alerts
more
copy
delete
edit
download
open
refresh
filter
layers
grid
list
info
warning
working

Stroke weight is a CSS value, not a separate font — the whole set thins in one line (svg { stroke-width: 1.5 }).

2.0
1.5
1.25
1.0

Duotone (proposed): the icon's own path as a low-opacity fill, stroked line on top — automatic for closed shapes, no second asset.

The study — Lucide vs Phosphor vs Tabler

Phosphor

MIT · 1,200+ icons × 6 weights (thin, light, regular, bold, fill, duotone) · 256 px grid · web font or SVG

<i class="ph ph-sidebar-simple"></i>
<i class="ph-light ph-sidebar-simple"></i>
<link href="…/@phosphor-icons/web/src/regular/style.css">
sidebar
back
forward
send
expand
switch
pin
new
search
settings
check
close
attach
folder
file
map
building
car
calendar
clock
user
people
alerts
more
copy
delete
edit
download
open
refresh
filter
layers
grid
list
info
warning
working

Same set in the light weight:

sidebar
back
forward
send
expand
switch
pin
new
search
settings
check
close
attach
folder
file
map
building
car
calendar
clock
user
people
alerts
more
copy
delete
edit
download
open
refresh
filter
layers
grid
list
info
warning
working

Duotone (native weight): ph-duotone, one colour, secondary at 20 %.

Two real colours: ph-fill tone under ph line.

Tabler

MIT · 5,900+ icons · 24 px grid, 2 px stroke · outline + filled · web font or SVG

<i class="ti ti-layout-sidebar"></i>
<link href="…/@tabler/icons-webfont/dist/tabler-icons.min.css">
sidebar
back
forward
send
expand
switch
pin
new
search
settings
check
close
attach
folder
file
map
building
car
calendar
clock
user
people
alerts
more
copy
delete
edit
download
open
refresh
filter
layers
grid
list
info
warning
working

Duotone (proposed): as SVG (not the webfont), the icon's own path as a low-opacity fill under the outline — the same trick as Lucide. The webfont here ships no fills.

Decision: Lucide

The cleanest geometry of the three, a strict 24 px / 2 px grid that sits naturally next to the Bauhaus primitives, and the stroke width is a CSS property, so the whole set lightens to 1.5 px for the paper themes without changing library. Largest ecosystem of the three, so it carries into implementation.

Phosphor is the alternative for a genuinely lighter line — its thin and light weights are beautiful, and duotone gives a second colour for state — at the cost of a web font per weight and rounder forms. Tabler has by far the most domain glyphs (buildings, parking, maps, zoning) on the same grid as Lucide; the two mix without a seam, so it is the fallback for a glyph Lucide lacks rather than the base set.

Duotone. Only Phosphor ships it as a weight; for two real colours, stack ph-fill under ph. Delivered as SVG, Lucide and Tabler each get duotone free — the icon's own outline doubles as a filled silhouette (a low-opacity fill under a stroke), automatic for closed shapes.