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 |
a.def | beside a figure's label, links to the rule that works it out, an li with that id in a Definitions section at the end. Write the letter i; the house draws the circle |
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 |
form.fields | a form: each field a label holding its input or select; fields wrap into columns, labels above; a p for the hint, label.check for a checkbox, div.actions for the buttons. Style no controls yourself |
h1[data-short] | the headline in a few words, which small and row tiles show instead |
.glance | the block a grid tile shows, when it should not be the top, like a chart further down |
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.
A form is a form.fields: each label holds its input or select, every control has the same height, and the fields wrap into columns instead of running off the edge.
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 phone and on a desktop, in light and in dark, without setting its own width.
- On the scene grid a view is a tile that never scrolls: it shows the whole blocks that fit from the top, or the ones marked .glance, and opened it scrolls in full. So the answer comes first, and text is never cut short with an ellipsis.
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.
On the grid, a view shows its face
A cell on the scene grid is a tile, and a tile never scrolls. So a view in the house style shows as much of its top as fits whole: the title, the figures and the first rows of a table on a large tile, the title and the figures on a medium one, the first figure on a small one. A line is never cut in half and nothing ends in an ellipsis. Open the cell and the whole page scrolls.
A phone's scene grid in one invented brand: a large tile, a medium one, two small ones and a row, each showing the blocks that fit whole.
The agent writes one page for both places. It puts the answer at the top, gives the headline a short version in data-short for small tiles, and marks a block further down with .glance when that block should be the tile, a chart for example. Every tile's title starts on the same line, so a row of views lines up, and a link to the cell unfurls to the same face.
A view prints like a report
Print a view, or save it as a PDF, and it comes out on light paper whatever the reader works in, with page margins, the page number at the bottom of each page and, when the brand has a name, that name at the top. Headings stay with what follows, a table's rows never split across pages, and its header repeats on each one. Buttons and forms stay on the screen.
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. While you edit, the preview shows the brand on a scene's grid of example cells, on one cell opened, and on the link someone gets when you share it. 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. Unless a brand says otherwise, a view in dark sits on the same ground as the app's own cells. 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, page width or form controls, 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-20