rule
Text roles
One complete style per role, whatever the element: family, size, weight, leading, tracking and foreground. The compositions set the space between one role and the next.
design system // document register · surface treatments
Text roles, the space between them and the rails that carry depth; surfaces composed from three axes; disclosure and content emphasis. The owner demonstrates the rules it expects its consumers to follow — including on its own key pages.
rule // surface axes
A surface treatment is not one recipe. Attachment governs which corners are rounded. Elevation governs whether the reader should perceive the object as sitting above its backing. Material governs fill, blur, and the foreground that stays readable over it. They compose, and none silently determines another.
Every live surface composed against the page field or a canvas.
Diagram nodes and artifact-scaffold cards. They are rectangles, not surfaces, and they carry their own semantics.
example
A navigation drawer hanging from the top edge rounds only its free corners; its material is chosen separately. Whether it also casts a shadow is a separate choice, made for its role — its attachment settles its corners and says nothing about its depth.
counterexample
Giving that same drawer a full radius would round a joined edge and visually detach it from the surface it hangs from.
Same role and same context resolve to the same treatment. A different treatment must correspond to a named difference in role, context or approved profile — never to the pattern in which someone happened to implement it.
exclusions
This rule governs presentation. It owns no markup and no semantics: two semantic forms may share an appearance while sharing neither structure nor behavior.
Six objects compared across the catalog. Attachment predicted corner treatment in all six. One of the six carried a shadow — which describes the compared set, not a catalog-wide count, and a shadowless object is not thereby under-elevated.
A trigger may lead with the wordmark, which keeps its own mode pairing rather than the summary's color. Its keyboard focus is the same outline as every other trigger's, so focus never depends on the mark's color.
A button that states the region it controls takes the summary's label, indicator, hover and focus. Its host keeps the region and its surface, so a diagram's legend or a mounted inspector can open from its own state without becoming a details element.
rule // attachment
An attached surface rounds only its free corners. Each plane below takes the page material and flush elevation, so only its corners differ, and the line it touches marks the edge it is joined to. Attachment changes no fill, blur, edge or shadow. Pills belong to interactive elements; the chip plane shows that value's corners only.
surface-attach-free
Free-standing: every corner rounds.
surface-attach-top
Joined at its top edge, like a drawer hanging from it: the two bottom corners round.
surface-attach-bottom
Joined at its bottom edge, like a sheet rising from it: the two top corners round.
surface-attach-full-width
Joined along its full width: no corner rounds.
surface-attach-chip
A chip: pill corners.
The same attachment keeps its corners when the other two axes change. Both planes below hang from the top edge; one is flush on the page material, the other raised on the panel material.
page material · flush
The bottom corners round.
panel material · raised
The same corners, with blur removed and elevation raised.
composition // repeated collection
Every item has one anatomy: an operative label, the surface panel's title and supporting copy, and a row of compact actions. The shared rules set that anatomy, the space between items, the inset every item's content starts from and the place its actions take: at the item's end, so the items in one row of the grid show their actions along one bottom edge however long their copy is. Each row keeps its own height, and nothing is fixed or filled. The grid, how many columns it has, the order of the items and what they say belong to the consuming surface.
rule
One complete style per role, whatever the element: family, size, weight, leading, tracking and foreground. The compositions set the space between one role and the next.
rule
Material, attachment and elevation, chosen separately.
treatment
Persistent and assigned by role; never an interaction state.
treatment
Indentation that is structure, one rail per level. A grouped diagram declares its peer groups, which sit one line apart whatever their number, and each label sits on its lines.
Small uppercase labels carry a little extra space between their letters. There are exactly two settings. Each is fixed to its role and is never chosen per artifact; prose, headings and literal addresses keep their own spacing. The same phrase is shown under both.
step 2 of 3
Typewriter-style label // operative labels, metadata and status. 0.08em.
step 2 of 3
Regular-font uppercase caption // the Caption role. 0.14em.
Where a surface's material blurs, it blurs at 20px — the panels set on the page material here do. No second value serves the same role. Blur belongs to the material, not to every container: the disclosure takes the panel material, which does not blur, and this value does not reach it.
Hover these and Tab through them. Hover and keyboard focus share ONE treatment, because they mean the same thing — you are addressing this control. Their state logic stays independent: focus survives the pointer leaving, and a control that is both hovered and focused shows one edge, not two.
linked panel
The same language at panel scale, with its resting shadow kept under hover and focus rather than replaced by it.
Persistent, role-driven, and not interactive. None of the objects below is clickable, and none carries hover, press or animation behavior.
read this first
Apparent hard edge 1.50px in light and 1.00px in dark; bloom alpha 0.28 and 0.50. The two themes are deliberately not numerically equal, because equal numbers do not read as equal emphasis.
read this first
The same content as a bounded passage inside the reading flow. No perimeter, no halo, no second wash — a vertical accent rule and an inset. Use the least elaborate treatment that expresses the distinction.
assigned by role
Violet, where a consuming surface's content role assigns it.
assigned by role
Cyan, where a consuming surface's content role assigns it.
A short inert word inside a thin border: draft is read, never operated. The chips above use the same box, as does a review mark where a document adopts Review Semantics; only a governed meaning changes its color.
| status | item | owner |
|---|---|---|
| draft | A label at the start of the first column keeps its whole edge. | held |
A run of blocks one label governs: the scope rail in the margin begins beside the label and ends after the last block.
This second paragraph is inside the same range; neither paragraph moves.
| statement | owner |
|---|---|
draft A range in a table's first column. | the editor |
One whole list item can itself be the range: its marker and indentation stay, and its rail sits in the same lane.
The next item is a range of its own; the list keeps its spacing, and the two rails stay apart.
Exact words one label governs take one solid line under them, and keep their own color.
The hierarchy rail says "this belongs inside the level above." Below h3 the type stops changing: every deeper heading uses the h4 treatment, and a deeper level is that same section nested one step further inside the rail — heading and content together, to any depth. The same rail carries structured text whose indentation is structure, such as the lines that belong beneath a label in an outline or a definition list, so the levels inside a preformatted passage need no second treatment; the block itself stands behind the magenta block rail. The hierarchy rail is assigned by that relationship, not to every preformatted block; spaces that only align columns are not levels; and inside an emphasis rail it sits one inset further in, never on the same edge.
Body copy at the Body step, weight 200: the same metric as a plain paragraph.
The deep treatment, flush with its parent.
The same lettering as h4. Only its place in the structure differs.
The same treatment again, one rail further in.
level 7 // past h6
HTML stops at h6. The structure does not, so a deeper level declares its level instead.
level 8
No ceiling — the rail nests again.
Long headings wrap inside their column. They never shrink to fit.
Past h6 the structure declares its own level, and the heading still wraps
A deep heading at the eighth level of nesting that is long enough to wrap inside its rail at a narrow width
Where a preformatted passage's indentation is structure, each level is one more neutral hierarchy rail inside the same scroll box, and the whole block sits behind one magenta block rail. At a narrow width the block scrolls and says so; its lines and its text size stay as they are.
A grouped diagram declares its peer groups: each is a label with the lines beneath it, and successive groups sit exactly one line apart, whether there are two, five or ten. Inside a group nothing is set apart, so a label sits on its lines. The surface that knows the groups declares them from its own source; the register never reads a group from blank lines, capitals or spacing.
FOUNDATION
tokens >> roles that name what each value is for
role >> one complete text style per role
CONSUMER
markup >> classes that select a role, never a raw size
FLOW
--space-8 between sections
SECTION
--space-3 between a heading and its body
GROUP
--space-3 between the roles it relates
PROSE
--space-4 between paragraphs
LABELED
--space-2 between a label and its value
TITLE
H1, weight 400
SECTION TITLE
H2, weight 400
SUBSECTION TITLE
H3, weight 300
DEEP TITLE
Body, weight 500
BODY
Body, weight 200
LEDE
Body, weight 200
ENTRY TITLE
Body, weight 300
PREFORMATTED
Small, mono, weight 300
LABEL
Caption, mono, uppercase
METADATA
Caption, mono
ROLE
one class >> one complete text style
Outside declared groups, a blank source line keeps its slot. Here the blank between a request's headers and its body is content, so it stays.
REQUEST
method and path headers
body
A quotation, a preformatted block and an authorial callout are set apart from the reading flow, each as one unit, on one rail geometry: 2px, with the text inset by the same step. Every one of those outer rails is an emphasis accent, so each reads as a boundary in both themes, and the color says whose passage it is. A quotation is represented voice — words presented as someone's — so its rail is violet. The document's own thesis, posed question or contrast within its argument is an authorial callout, so its rail is magenta; one that frames a whole part is the section framing, below. A block's line structure is its content, so its rail is magenta too. Neutral is structure only: the hierarchy rail that structures a section, a list or a block. Who is speaking is the consuming surface's assignment, never the element, the font or a pair of quotation marks.
A short statement presented as someone else's words is a quotation, on the violet rail.
The document's own point, set apart from the prose around it:
An authorial callout states the document's thesis in its own voice, on the magenta rail, at the body step — even when it contains a phrase in "quotation marks".
a plain preformatted block >> one passage behind the magenta block rail
A code excerpt someone else wrote is quoted: the block sits inside the quotation and draws no second rail.
if (quoted) keep(oneRail, "violet");
A callout that introduces a block carries both as one unit:
the block draws no second rail
A framing states what a whole part will argue or ask before its sections do: the part's thesis, or the question space it opens. It takes the synthesis's composition unchanged — the flat panel, the chip and body-sized text — and differs in place and word: it opens the part, after its introduction, and its chip names the framing. It concludes nothing, and a thesis or question set apart inside the argument stays an authorial callout.
A part's introduction and its framing read as one opening.
thesis
A section framing is the synthesis's flat panel at the opening of a part, chipped for what the part will argue.
A synthesis states what the part before it comes to; a framing, above, states what the part after it will argue. A synthesis is larger in scope than a callout, so it is contained rather than railed, and every synthesis in a document takes the same composition whatever the status of its text. The chip names it; only the chip's border takes the accent, so the panel keeps its neutral perimeter and gains no bloom. The text stays at the body step, with its authored emphasis.
compression
A section synthesis is one flat panel: tinted, neutral at its edge, free at its corners, with body-sized text and no rail.
A contents list is structural navigation, not body text: mono at the Small step. Each entry composes surface-text-link: the partial magenta underline at rest, the full magenta underline on hover, and the module's own keyboard-focus underline. The rendered check proves each state under a real pointer and real Tab focus.
A table's cells take text roles, and the roles set type only. A dense table is
declared, not inferred: the consumer marks it table.doc-dense-table,
and its cells are tabular payload, mono at the Small step with tabular numerals. Any other table is
narrative, with document body in its cells. Both take the operative label for their headers, and code
inside a header keeps its own case.
The geometry is a separate composition, adopted by class:
table.doc-table directly inside a .doc-table-scroll
box. It draws the row rules and the spacing, aligns a numeric column on tabular figures, and scrolls a
table wider than its column inside its own box, with its header row in place. Nothing implies it —
not the dense marker, not a role on a cell — so a table without the class keeps its consumer's
geometry. Technical type is not a compact layout: a surface that needs a compact review density, or
rows that stack at a narrow width, keeps its own geometry and does not adopt this one.
a narrative table, in the composition
| item | disposition | detail |
|---|---|---|
colors_and_type.css | extended | --tracking-caption (0.14em) carries the Caption role's tracking, and .caption uses it |
surface-action.css · surface-text-link.css | conforming | the compact-action and textual-link roles, as described above |
patterns/surface-shell/ | specialized | its navigation panel keeps its own material for navigation composed over another surface: the --surface-glass-2 fill with a 14px blur |
patterns/_preview/ | generated | tools/gen-pattern-previews.mjs writes it from the canonical templates, and --check verifies it |
a dense table, in the composition
| role | family | weight | size / line-height | tracking |
|---|---|---|---|---|
| Display | Inter | 200 | 96 / 1.02 | -0.035em |
| H1 | Inter | 400 | 48 / 1.12 | -0.02em |
| H3 | Inter | 300 | 28 / 1.20 | -0.02em |
| Body | Inter | 200 | 24 / 1.45 | 0 |
| Small | Inter | 300 | 18 / 1.40 | 0 |
| Preformatted text | JetBrains Mono | 300 | 18 / 1.45 | 0 |
| Table-of-contents entry | JetBrains Mono | 300 | 18 / 1.20 | -0.02em |
headers that carry code and a link
| role | default-ASK |
AA-compliant |
|---|---|---|
| author // light | var(--ask-ui-accent-1) #8b79a2 | #7f6b99 |
| participant c | #c44fc4 | #c95fc9 |
| participant d | #a56bd4 | #a870d6 |
a dense table in its consumer's own geometry
| surface | state | pin |
|---|---|---|
| specimen owner | landed | 1a2b3c4 |
| specimen consumer | re-sync due | 5d6e7f8 |
An entry in a result list or record index opens one record. Its primary text is the entry title: Body's size, leading and tracking at 300, one weight step above the prose around the list, because it may be a short name or a full statement that wraps. It is not a heading and governs nothing beneath it, and it is not the panel's single-line label. The identifier and the supporting fields take the metadata role; the entry's element, interaction and row geometry stay the consumer's.
composition // main + inspector
Records in the main region, and an inspector for the one selected. Both regions keep one set of text roles: a role keeps its treatment wherever it occurs, and the inspector's prose stays at the Body step however narrow its region. A record's name is an entry title among the records and a subsection heading in the inspector, because there it governs the fields beneath it. The inspector is a separate surface chosen on the three axes: panel material, free corners and flush, with no shadow, as the section synthesis is.
A source address that stands as a field value is inline code on its own: mono at the Caption step, in its source case, wrapping inside its field. It declares no leading or tracking, so it stands only where its container sets none, never inside a label, whose tracking it would take. An identifier that names a record stays metadata. Which region sits where, the breakpoint, the inspector's scrolling, selection, the marker that says which record is selected and the way back belong to the consuming surface.
records
an access-consciousness account may connect consciousness constitutively to general reasoning, belief formation and rational control — making it potentially relevant to the capacities through which a source role could be EXERCISED
Hard determinism
Chesterman, "Artificial Intelligence and the Limits of Legal Personality"
Adversarial testing of global neuronal workspace and integrated information theories of consciousness
source link
Nature 642(8066):133-142; DOI 10.1038/s41586-025-08888-1; open-access copy at https://pmc.ncbi.nlm.nih.gov/articles/PMC12137136/ ; abstract independently corroborated at `https://research.birmingham.ac.uk/en/publications/adversarial-testing-…`
A decorative rule can simply stop at its label. A line that asserts a relation carries meaning, so its remedy has to keep that meaning — its ends, its direction and its path. Here the connector runs unbroken and the label takes its own row above it: one way to keep the relation, not the only one.
A 64-character digest, a deep repository path and a full URL, set in the roles that actually carry them. The path, and the URL as a source address, stand as field values in inline code on its own; the same URL inside running prose is a body link. None may force a horizontal scroll at 420px.
digest
path
apexSolarKiss/design-system-ASK/patterns/diagram-interactive-spine/diagrams-interactive-spine-engine.js