Version history

The two example pages now look like real product screens

The project management and analytics pages were rebuilt with the details a real product would have. Each has a side navigation, a top bar with a search field that has an icon, placeholder text and a line of helper text, notifications, the signed-in person, a breadcrumb and a page title with action buttons that carry icons. The metric cards show a trend line and say in words whether a change is good. The analytics page adds tabs, a date range with a hint, an information panel and a line chart with a text version for screen readers.

The work items table also grew: it has a search field and a status filter, a count of the results, an owner with initials, status chips with an icon and words, a menu for each row, paging, and an empty state that tells people what to try. In the Figma file each group of pages now has its own diamond symbol: atoms, molecules, organisms and templates.

Rewrote the site texts and sorted the colour page

The landing page now says plainly what this project is: a design system built as a work sample, connected to a Figma file that holds the UI kit, the components and the tokens. The descriptions on the Foundations, Getting started and component pages were shortened and written in simpler language. The landing page and the Getting started page also link to the Figma UI kit, and say that changes are designed in Figma first and then copied into the code by hand.

The Colors page is now divided into raw values and semantic values. The semantic colours are grouped by purpose: content, surfaces, actions, borders, focus and status. Gradients have their own section at the end.

There were too many oranges and near-black shades, and it was not clear which to use where. The palette now has two oranges (a bright one for fills and icons, a darker one for text and hover) and three charcoals (ink, a raised dark surface, and a quiet grey for body text and hints). The other shades were removed from the code and from Figma, and every remaining colour has a short note about what it is for.

The gradients were cut from thirteen to the four that buttons actually use: ink and white for the primary button, and two oranges for its hover state. A few colours that nothing used were removed, and the colour pages now have a small "on this page" list on the right, which the other token pages and the component pages have too.

The component pages are now organised by Atomic Design. Atoms are the smallest parts (icons, buttons, form controls), molecules are small groups of them (form fields, links and tabs, date picker, notifications, form progress) and organisms are larger sections (navigation, cards, table, multi-step form). The two example screens are the pages. The old page addresses still work and lead to the new ones, and the Figma file is organised the same way.

A new Layout & grid page lists the breakpoints, a 4, 8 and 12 column grid with its gutters and margins, and maximum widths: 800px for body text, 600px for short intros, 640px for a one-column form and 1440px for the page. These are now CSS variables, and the documentation pages use them instead of their own widths. The Typography page also got a paragraph width table that shows how wide a line can be for a comfortable number of characters. Every type value, such as clamp(22px, 2.4vw, 32px) / 1.1 / 800, now has a plain-language reading under it, and a short key at the top of the page explains what size, line height, weight and letter spacing mean.

The documentation now has main sections along the top (Getting started, Principles, Foundations, Components and Pages), and the left side lists the pages of the open section. On a phone one Menu button opens both. A new Design principles page sets out five principles with what each means in design and in code and where it shows in this system. Getting started now has a short guide for designers, one for developers and one for product owners. The landing page is now a single screen: the title and the explanation of why the system was built are on the left, and the map is on the right, a little smaller so that it fits without scrolling. The sections below it and the footer were removed. The landing page no longer has a top navigation. It opens with the logo above the title, and a map of how the parts of the system fit together is the way in: every box with an arrow opens that part of the documentation, and the example applications open the example pages. The map shows: design tokens, guidelines, the UI kit in Figma, the reference site, the component library, and the applications that use it. It is drawn on the same 32px grid as the page background, with dashed lines between the parts, and on a phone it becomes a short list. The primary button on a light surface turns the darker orange on hover, with white text, because white text on the brighter orange does not have enough contrast, and every hover fades in softly instead of switching at once. The darker orange is used only for text on light surfaces and never on dark backgrounds, and the dark preview of every component was checked so that text stays readable. The Light and Dark switch on the examples now has a sun and a moon icon, and a bug that made the code samples on the developer guide unreadable is fixed. The Shape & elevation and Spacing pages now draw their values as examples (rounded corners, shadows and spacing bars) with a plain explanation of each shadow. Every principle now names its professional term next to the plain one (for example accessibility and semantic tokens). The component pages, the role guides and the principles were later rewritten as fuller paragraphs instead of short bullet lists, so that each text explains the idea in more detail. The principles page also lists the systems I learn from, including the University of Helsinki design system team I worked with. The principles and the guides were then rewritten in plain English with short sentences, and Getting started has a short list of the words used in these pages (token, role, atom and so on).

Two templates were added: a dashboard layout and a form page layout. Navigation links now have three clear statuses: default, active and disabled. The side navigation used to show its inactive links in pale grey, because it used a style made for dark backgrounds on a light one. That is fixed, and the two link styles it came from (muted and inverse) were removed.

The system now has a Figma file that matches it

DS by Berit now exists in Figma as well as in code. The Figma file has the same colours, type, spacing, shape and shadows, with names that match the tokens used here, and a page for each component with every mode labelled in a Light and a Dark theme. It also includes a few patterns the code does not have yet, such as notifications, a date picker and multi-step forms, so they can be designed before they are built.

The Getting started page and the project README now link to the Figma file, and the Figma file links back to this site and to the code. The code remains the source of truth for the tokens: where the Figma file has something this project does not, it is a proposal rather than a decision. Linking the Figma components to the code components, so that the code shows up when a designer inspects a component, needs a Figma plan that supports Code Connect and has not been set up.

The same day, the new design was brought into the code. The focus ring is now yellow with a dark edge so it shows on any background, the orange is brighter on dark surfaces, and buttons have rounder corners and a soft gradient instead of a flat colour. Buttons and inputs can carry icons, form fields can be marked required or optional and show an error state, and there are new components: notification panels and toasts, a date picker with a calendar, and the pieces of a multi-step form (introduction, sections, progress and the buttons at the bottom). Each has its own documentation page.

A fifth component family, and the parts of a table cell

The system now has form controls: a text input, a select, a checkbox and a radio, plus a Field that wraps any of them with a label, a hint and an error. They share one control shape and one set of modes — default, hover, active, focus, disabled and loading — the same six the button already used, so a form reads as part of the same system rather than as something bolted on. Their chevron and error mark are drawn inline rather than loaded from an icon font, because a control that says the word "expand_more" when a font fails to load is not a control anyone wants to ship.

A table cell can now carry an icon before or after its text, a line of supporting text underneath, or a form control instead of plain text. The Table page documents each of those shapes separately, so it is clear which parts are available before anyone starts improvising inside a cell.

Tabs and breadcrumbs used to sit in one example, which made them look like two versions of the same idea. They are now two examples with their own explanations: breadcrumbs say where you are in a hierarchy, tabs switch between peer views of one thing. Breadcrumbs also became a real component instead of markup written by hand on the page. The muted link had the same problem in miniature — it was almost indistinguishable from the default one, so it is now lighter in weight as well as in colour, and the inverse link is shown on the dark surface it was designed for.

Three colours that the previews had been using without naming are now tokens, which means the Light and Dark preview blocks no longer contain a single loose hex code. Dark mode moved off the near-black charcoal onto a flatter #222222. The site also has a favicon at last: the same flower mark as the logo. And the button gained a focus mode, so the focus ring can be seen in the documentation without anyone having to tab to it.

Named every variant and stopped repeating colour values

Examples used to show several versions of a component side by side without saying which was which. You had to read the code tab to find out that the first button was the primary one. Every variant now carries its name above it, set in IBM Plex Mono so it reads as a label about the example rather than as part of it. Where the name was previously written inside the preview, such as a card whose only text was "Hover state", the preview now shows realistic content instead and the label does the naming.

The Light and Dark preview panels were defining their colours by repeating hex codes that already existed as variables a few lines above, and the code behind the panels repeated the same list a third time. Both now point at the variables. Nothing changed on screen; the values simply live in one place now. Four colours that were in use but undocumented were added to the token reference, and the spacing and shape pages now show their semantic tokens the way the colours page already did.

The system also had two names. It is called DS by Berit, but an earlier name, Fieldwork, was still sitting in the landing page, the foundations intro, this page and a few examples. The pages that talk about the system now say DS by Berit. In the mock-ups, where the old name was only ever standing in for a customer's product, it has been replaced with ordinary sample content.

Wrote the project rules

Added AGENTS.md, defining how the system is built: folder structure, the spacing scale, the rule against hardcoding values that exist as variables, accessibility requirements, and what needs checking before it gets changed. Until now these rules existed only in the code itself, which meant every session started by guessing them.

Read through the system and fixed what did not match. Removed a font that was being loaded but never used, corrected spacing values that fell outside the documented scale, and added README files explaining the components and token folders.

Established the documentation system

Created the standalone Next.js project, token foundation, documentation shell, landing page, Getting started flow, Foundations catalog, Components index, and four accessible component families: Navigation, Buttons, Cards, and Table.

Added practice pages for project management and analytics, responsive desktop/mobile mock-ups, component modes, compound table parts, navigation micro-components, code tabs, Light/Dark previews, accessibility improvements, and color-token swatches.