Silvi Atlas · the design system

The glass stays. A map-forward interface should feel in the map, so hierarchy comes from a glass that grows smoother, not darker, an ink ladder that recedes, a type scale with room in it, and cells that carry the structure. Sections 01 to 09 are the book's optics as ruled on 24 October, drawn by design-v2.css, the sheet the book was cut from; the proofs move, so open a step, change a tab, or point at the land-types bar. From 10 on is everything around the book, drawn by the app's own components and stylesheets with every value read from tokens.css: the mark, colour, the land's paint, the plan on the land, icons, shape and motion, the chrome and its states, the question, a fault, the land's cards, the takeover, a zone drawn and named, the run line, and the ring and the record over time. The reproductions beneath the first primitives are rendered from other systems' published tokens, never screenshots. Change the ground above and every pane changes with it.

01 · The pane reading glass · 56 · forest .70 dark · paper .82 light · no halo · cells

Two kinds of glass, named. Chrome glass is the keys, the legend, the whisper, the camera: 32px, the halo, unchanged. Reading glass is the book, a roster, the takeover: 56px of blur, a scrim tinted toward the forest floor and a step heavier in the dark (.70 against the chrome's .48), and field paper at .82 in the light, no halo, cells inside. In the dark the cells are lighter steps of the glass; in the light they lift toward white, as a grouped list does, because a darker tint turned the frost to mud. The pane floats on a soft shadow. The doctrine was written for the first; a 500px reading surface is the second.

02 · Type and ink six sizes · three weights · three inks · the contrast through the pane

Room in the scale, and a muted that is muted. Six sizes, 12 · 13 · 14 · 16 · 20 · 24, at 500 and 600, with 700 kept for the one display role; Montserrat throughout, as the brand kit asks. The table prints each ink's contrast through the reading glass over sand, snow and canopy, composited as the browser composites it. WCAG asks 4.5 for small text and 3 for large and for controls; measured on a cell over the forest scrim at .70, ink-2 at 79 in the dark and 74 in the light carries a row's line over 4.5 on every ground, snow included, and ink-3 at 56 keeps a chevron over 3.

03 · The row lead · title over line · trail — the one list item

One row, everywhere. One shape with three slots. A lead is a glyph, a swatch or a count, or nothing. The title and its line are stacked, never inline, so a long line wraps under itself. The trail is a value in tabular figures, a chevron, or both. Forty-four pixels tall. Hover is a fill and nudges the chevron; open turns the chevron and unfolds in place; selected washes the row green and lights its lead. Swatches carry a hairline ring, so the darkest land type still reads on a dark cell.

04 · The group a cell with rows in it · an eyebrow or a head · nested one surface up

Containment is the hierarchy. A group is one cell of rows, hairlines inset to the title's x between them, and a hovered or opened row takes its hairline with it. A group is named one of two ways: an eyebrow above it, for a legend or a list; or a head row inside it, for a step that opens. A face's steps are one group, and an open step unfolds in place: what it holds continues inside the same cell, on the title's x, between hairlines, with no new surface.

05 · Verbs primary · secondary · ghost · icon · link — and their states

One family, four clothes. The pill for the one decision; a filled quiet control with no border for a secondary act; words that act as a ghost, with a + leading an ask; a glyph in a square seat; and the underline only for going somewhere.

06 · Field · chip · badge · glyph the small parts on the new inks

The small parts follow the surface ladder. A field, a secondary verb and a chip share one control fill, legible on any cell, with no border; a chip is that fill at caption size; the count is the ink's disc; the step glyphs keep their shapes and take the three inks, so done, in hand, open and locked read at a glance.

07 · A figure in a cell the land types bar · a climate strip · the section

A figure sits in containment too. Each figure is a cell under an eyebrow, with a 12px caption for its key, so the page's rhythm holds whether a section is rows or a drawing.

08 · States loading · empty · error · busy · confirmed

Every surface has every state. Loading is the shape of what is coming, never a spinner in the content. Empty teaches the next act. An error names what failed and the way back, in the wait's gold, as a failed step is. A verb that is working says so in its own words, and a confirmation offers its undo.

09 · The composed proof the card at rest · the Land face · the Plan face with a planting open

The whole, composed. The card at rest, the Land face and the Plan face at their widths. The card at rest: the name at display, the ident line, the five steps as one group, the one verb. The Land face: the lede, the bar in a cell, the steps as one group with one open. The Plan face: the ladder, three sections, the nested cell with the mix. The card opens into the book: a step on it opens the panel at that step's face, and the panel's way back folds it home. Both panels are working prototypes: their tabs move between all five faces, Land, Strategy, Plan, Tasks and Monitoring, the new face arriving from the side its tab sits on; a step opens in place; a rung names its stage; a land type lights its band, and a species its plants.

10 · The mark the wordmark · the mark alone · drawn in the ink of the glass beneath

One drawing, in the ink. The mark and the word are one vector, traced from the brand's raster and filled with the ink, so the wordmark follows the glass as every glyph does. The top bar wears it at 32px. The mark alone, the ringed tree of Silvi's favicon, is drawn the same way.

11 · Colour the registers · the inks · the glass and its cells · lines · each value read from tokens.css as the page loads

One chroma, and ink on glass. Green is the one chroma: the primary act, what is chosen, and life Silvi has verified. Amber is money's alone. The wait's gold marks what is in flight, what failed and what is owed. Red is kept for an alarm, and nothing wears it yet. Everything else is the ink on the glass, in steps that recede, and the cells the glass holds.

12 · The land's paint land types · the classifier's classes · soil · the plan's planes · the map's marks · the same under either glass

Paint, not chrome. The land's inks never change with the glass. Land types wear ESA WorldCover's hues, drained for glass and laid over the imagery at a third, so judge them here over the ground you choose; each tile is the ink as the land shows it, its dot the ink itself. The plan's planes are five-step ramps at .55. The map's own marks are few: white to draw a line, the ink to case it, green for verified life.

13 · The plan on the land chalk over an ink casing · rows · practices · earthworks · the plan's glyphs · its pins · species

Kind by mark, never by hue. The plan draws in chalk over an ink casing, so a mark reads on sand and on canopy alike: a planting's rows, a practice's dash, an earthwork's cased line, done thinner and fainter than planned. Each kind of work has its glyph; a check the plan asks for stands in a ring that fills as it falls due. Species are the one exception to chalk: each keeps its ink on the page and on the land, sixteen to a plan, never amber. Every number here is the map's own (map/plan-style.ts, map/glyphs.ts).

14 · Icons one family · 24 viewBox · one stroke · three sizes by word · the outcomes · a step's state

One primitive draws them all. Every glyph the chrome draws passes through one component: currentColor, no fill, its stroke and size from the tokens, medium unless a surface earns another. The eight outcomes each take a glyph and a hue, read like a game's stats. A step's state is a shape, so five steps read at a glance and none by colour alone.

15 · Shape, space, depth and motion the radius ladder · the 4px grid · the structural numbers · blur · elevation · two speeds for the chrome, two for the book

Every number named once. Six radii and nothing else. One 4px grid, where the gap between groups is a step larger than the gap within them. The numbers a surface is placed by are tokens too, and the camera reads the same ones. The glass separates by blur, so only what floats casts a shadow. Motion answers a press at once and settles; nothing waits to begin.

16 · The chrome at rest the top bar · the dock and a roster · the account menu · the camera · the status line · the attribution · the whisper · the pill

The chrome keeps its own glass. The keys, the bar, the camera and the whisper wear the chrome glass: 32px of blur and the halo, as clear as legibility allows. A roster and the account menu are read, so they take the popover's heavier glass; the menu says whom you act as. With nothing selected the one primary act is the pill. Each specimen from here on is the app's own stylesheets, standing where the app puts them.

17 · A site in hand the lineage in the bar · the layers and their switches · the site on the land · the scrim · the land's key

The land answers the selection. A selected site wears the map's trio, a soft shadow, a white halo and an ink core, and the world outside it dims to a third. The bar's centre gives way to the site's lineage, each name a control that frames that region. The Layers key opens its switches, the native checkbox painted green when on. The land's key says what the land is wearing. The pill steps away, since the book now holds the one primary act; the book in its seat is the composed proof, 09.

18 · The question one at a time · centred over the veiled app · its letters choose · its progress on the glass's edge

One question owns the screen. A question stands centred over the whole app, everything behind it veiled at .55 and held as it was. Its glass is solid, so nothing behind is read through it. The question is the display size; each choice answers to its letter; the progress runs along the glass's top edge, and the words say it too. Green names the one way on.

19 · A fault a card that could not be drawn · held to its own space

What stands around it stands. A card that throws keeps its seat and its close, says so, gives the error in its own words, and offers to draw it again, while the map and the chrome carry on. A page of the book that throws does the same inside the book, whose head and tabs stand: "This page could not be drawn."

20 · The land's cards a patch of a land type · a tree · a part of the plan · each on its stem

The card is the legend. A small thing on the land gets a small card on a dashed white stem: the patch a press picks, a tree, a part of the plan. Its swatch or glyph is the one the land wears, so the card and the land never disagree. A species name wraps and is never cut; health is said in words, and only verified life is green.

21 · The chrome's states at rest · under the pointer · pressed and on · focused · disabled · the search open

The glass passes more light. Under the pointer a chrome control lays no film on the glass: the glass beneath it brightens, and a key blooms into its name. Pressed and on take the press wash, focus is the one green ring, and disabled is the one 38%. Each state is the app's own rule, pinned on here by a class so a still page can hold it; a real pointer and a real key bring the same. The search blooms into its field the same way, the lineage gives way to it, and its results stand beneath on the popover's glass, the keyboard's pick outlined in green.

22 · The takeover a roster at full size · over the chrome glass · the sheet's radius · the popover's shadow

The roster, when the work is tabular. A roster opened in full takes the page over: the chrome glass laid across everything, and the list as a table on a sheet that floats on the popover's shadow. Escape and the cross close it alone; the row in hand is lit as it is in the roster.

23 · A zone drawn and named the armed pill · the drawing cursor · the naming moment on the land

The verb holds while you draw. Pressed, the pill lets go of its green and becomes glass held down, saying how the draw is worked; the pointer becomes a white dot ringed dark that breathes where the next point will fall. The line itself is Terra Draw's, drawn on the map, and is not reproduced here: it has no life away from the land. Closed, the zone is outlined and the world veiled as a selected site is, and the naming moment stands over it on a stem, the one question that keeps its place on the land: the name Silvi suggests is the title, the pencil beside it, its size and its way around beneath.

24 · The run line a reading in flight · queued · not being observed · a section waiting · failed

One leaf for work in flight. Wherever a run is under way, the book says it in one line in the wait's gold: the run's own sentence, its clock, and Stop waiting, since nothing here stops the work. When the stream has gone quiet the line says the run is not being observed and offers Check. A section waiting breathes its own words; one whose run failed offers its act again with the run's words beside it. The land's reading counts its parts as they land, a part that came back empty marked not read.

25 · The ring and the record over time a task's ring in each of its states · the record's lanes, spans and ticks

Time, said plainly. A task's ring is the chrome's mirror of the ask pin's ring on the land: hollow while planned, an arc for the share of its window gone once it is dated, a heavy ring in the wait's gold when overdue, filled when done, dashed when skipped or waiting on another. The record over time gives each source its lane, Silvi's logs, the sample plots, the readings and what you added, as spans and ticks on one axis to today, never bars of a distribution.

The earlier gallery at /design.html stays as the record of what stood before these optics.