Design
A view is the HTML an agent writes to show a cell: a weekly review, a meeting debrief, one shift's numbers from a production line. A view cell comes in the house style: Daslab applies one stylesheet, /widget/house.css, and the agent writes plain HTML against it. The agent decides what goes on the page and in what order; the stylesheet decides how it looks, in light and in dark, on a phone and on a desktop. Here is one, rendering live:
The numbers are invented. The frame renders with the stylesheet Daslab applies to views, and when the stylesheet improves, every view in the house style improves the next time it opens.
Views are plain HTML with a few named patterns
Headings, paragraphs, sections, lists and tables need no classes. For the handful of things HTML has no element for, the stylesheet has a name:
| Pattern | What it says |
|---|---|
p.kicker | one short mono line above the h1: what kind of page, and when |
p.dek | the sentence under the h1 that says what the page is for |
dl.stats | headline figures: the number in ink, its label, one line of context |
ul.items | things that each carry a few sentences, like people, sites or cases. A table whose cells are sentences is ul.items |
.state | a status word with a colored dot: .ok .info .warn .alert |
ol.steps | a numbered sequence |
div.split | two columns that stack on a phone |
table, td.num | tables are for numbers; td.num right-aligns a figure |
.bar | a bar for one value from 0 to 1, usually inside a table cell |
button.primary | the one main action |
The weekly review above is a p.kicker and an h1, a p.dek, a dl.stats with three figures, a table of sites using td.num and .bar, a ul.items of open issues with a .state on each, and a footer that says where the numbers came from. Its HTML has no style of its own.
Type, color and spacing follow the same rules in every view in the house style
- Hierarchy comes from size and weight, in sentence case; nothing is set in capitals.
- Space separates sections, and one hairline marks where a new one starts. No box around every block, no shadows, no gradients.
- Color marks state, as a dot beside a word. Figures stay in the text color.
- The accent is for links, the one main action and a single data series.
- Mono is for ids, code and times, and for the line saying where the data is from, which goes last.
- A view reads on a 390px phone and on a desktop, in light and in dark, without setting its own width.
Each one answers something agents did when they designed views on their own: capitals on every label, a box around every number, a different color for each figure, and a page that stayed dark when the viewer had chosen light.
A brand sets the colors, the faces and the corners
The rules stay; the brand fills in the rest. Set on the workspace, a brand covers every scene in it; set on a scene, that scene's own wins. In Settings, Design starts from what you already have: your website, socials and other links, and any logos, brand guide or screenshots you add. A model reads all of it and drafts the brand, and nothing changes until you save. You can also tell the agent your colors and fonts. The fields:
| Field | What it sets |
|---|---|
nametext | the name it goes by |
taglinetext | one line under the name |
voicetext | how its copy sounds, in a few words |
websiteURL | its website |
linksURLs | socials and other pages that speak for it |
logo{ light, dark, mark } URLs | the logo on light and dark grounds, and a square mark |
logoOnSharetrue or false | the logo on share pages and PDFs |
basepaper, white, stone or dark | the ground every color is read against; dark keeps views dark for every viewer |
accent#hex | links, the main action and one data series; its dark variant is derived |
displayface or font list | the face for titles and headline figures: Inter, Archivo, Fraunces, IBM Plex Sans, Cormorant Garamond, Space Grotesk or Instrument Serif |
textface or font list | the face for everything else: Inter, IBM Plex Sans, DM Sans or Source Sans 3 |
radius0 to 24 | corner radius in px: 0 square, 8 soft, 14 round |
fontsURL | a fonts.googleapis.com/css2 link for a face outside the list |
The grays, hairlines and panel colors are mixed from the ground and the ink, so any pair you pick holds together in light and in dark. The dark accent is derived from yours, and an accent that is hard to read on its ground is flagged with the nearest shade that reads. Exact colors and type settings are there for anyone who needs them. The same view in four invented brands:
Northside Clubs a wide heavy grotesk, cool white, ember, soft corners.
Halden Clinics soft serif titles, mint-white, deep teal, rounded.
Kessler Werk IBM Plex throughout, concrete grey, cobalt, almost square.
Maison Arlo Garamond titles, cream and espresso, terracotta, print-flat.
Agents are told what this page says
Every job carries a short design brief: write plain HTML in the patterns, bring no palette or fonts. The tool that writes views lists every pattern on this page, from the same source this page is generated from. When a view in the house style still sets its own palette, fonts, capitals or page width, the write comes back with a note naming each one, and the agent fixes the view in the same job.
The rules held on three models
We gave three tasks to Gemini 3.8 Flash, DeepSeek V4.1 Flash and Gemini 4 Argon: a meeting debrief from notes, a weekly review for four gyms, and one shift's numbers from a cable line. Then we rendered every view the jobs wrote.
| Brief | Views | Linked the stylesheet | Set labels in capitals | Own colors, median |
|---|---|---|---|---|
| Before the stylesheet | 13 | 0 | 13 | 19 |
| With the stylesheet | 23 | 22 | 1 | 0 |
The one view that ignored it came from a DeepSeek run, which wrote its own palette from scratch. Since then Daslab applies the stylesheet itself, so an agent no longer has to remember a link. On the next eight jobs, Gemini 3.8 Flash and DeepSeek V4.1 Flash kept all six reports in the house style, none with capitals or colors of its own, and made both party posters with a style of their own.
A cell can have a look of its own
Some views should not look like a report: a poster for a party, a game, a page in a client's own brand. The agent makes those cells with the style own. Then Daslab applies nothing and checks nothing, and the page is exactly what the agent wrote. Reports, dashboards and anything with figures stay in the house style.
A view in the house style can still bring its own CSS
The stylesheet sits in a cascade layer, so any rule a view writes wins over it. A map, a chart or a diagram writes its own CSS with the stylesheet's colors, var(--text), var(--border), var(--accent), var(--ok), var(--warn) and var(--alert), and it follows the brand and the viewer's light or dark with everything else.
Updated 2026-10-19