00ConcreteEditorial system / product primitives
Concrete is a design system for labs that ship
An editorial voice for serious tools: crisp type, soft controls, dense product surfaces, and one primitive kit underneath every page.
npm
npm install @rubriclab/concrete01FoundationsType / color / space / motion / icon
One language, many pressures.
Foundations are strict enough for product density and expressive enough for published research. Pressure is creative direction, not a universal primitive prop.
01.01Typography3 families / 12 sizes / 5 weights
Rubric is a lab
that ships
120 / .92ConcreteDisplay / Fraunces 300
72 / .95Hero headlineDisplay / Fraunces 400
48 / 1.05Section titleH1 / Jakarta 800
15 / 1.45
UI body. The default for most running copy.
Body / Jakarta 40001.02Colorink / sky / three signals
ink-9text / fillsink-8hover fillink-7bodyink-6secondaryink-5mutedink-4softink-3strong lineink-2hairlineink-1faint line
sky-1selection bgsky-2soft pillsky-3data tintsky-4data activeskyfocus / linksky-strongpressed
terminalrunning
ultrafeatured
errorcritical
01.03Pressure and density4 contexts / one grid
01.04Space, radius, elevation4px base / strict meaning
xs4icon gapssm8control gapsmd12row paddinglg16card paddingxl24groups2xl32figures3xl48sections4xl64chapters
BorderRaisedFloatingOverlay
01.05Motion, focus, texturestate only / always visible
FadeMoveRevealDismiss
01.06IconographycurrentColor / typed registry
Stroke1.75pxViewBox24 x 24Sizes12 / 14 / 16 / 20ColorcurrentColor
searchfiltersettingsmessage-circleactivityfile-textgit-branchbar-chart-3checktriangle-alertcodesparkles
02Primitives44 atoms / registry-backed specs
Small parts, clear roles.
Each card shows a real exported primitive centered in a sunken stage. The full card opens the typed primitive page with states, props, and render routes.
Canonical field hierarchy for dense product forms.
Use lowercase letters and hyphens.
Upload filesDrag or choose a research artifact.
Q2_report.pdf2.4 MB
Environment variables
Advanced settings
Tree branch
Choose a workspace.
Default
Border only. The canonical surface.
Raised
One step of elevation over canvas.
Sunken
Recessed. Code, quotes, wells.
inkqueuedpointer
LiveFeaturedBlocked
AgentsDocsconcrete
AKRLC
Agent memory architecture
Context structuring experiment
Evaluation dataset
Concrete keeps conversational UI crisp.
Ship the primitive set.
ConcretePressureTypeScript
const signal = concreteSignalSchema.parse("terminal")metricTrace184ms
codeHydrate
statusReady
noteConstraint
⌘K↵
No matches
Try a broader keyword, or clear the filters applied to this view.
Use one short sentence.
Runs14.8k
18.6%-2.4%0.0%
Direct
47%
Referral
28%
Agentic
18%
RunningQueuedFailed
Eyebrow
body
Footer
03Components33 compositions / built from primitives
Components declare density.
Components assemble primitive contracts into agentic interaction, AI-native transcript, and form workflows. They can own deterministic local behavior, but product policy stays in the application.
Atomic toolbar with quiet icon controls, optional chip appearance, tooltip shortcuts, roving arrow-key focus, selected state, and pressed feedback.
Searchable action and navigation listbox with grouped items, keyboard navigation, shortcuts, loading, and empty states.
Compact single-line command input with removable scope tokens, keyboard hint, action slots, and optional menu slot.
Canonical form container with title hierarchy, metadata, action slots, body spacing, status border, and sticky-feeling footer.
Review required
Resolve the listed fields before saving the workflow.
- OwnerAssign a responsible operator.
- Budget limitEnter a value between 1 and 100.
- Reference packetTwo files are attached.
Top-level form feedback with status icon, field-linked items, compact copy, and optional action slot.
Dense settings form composed from shell, sections, rows, and slotted primitive controls.
Inline or fixed modal form surface using FormShell inside a dimmed stage.
Inline or fixed side-sheet form surface for inspect-and-edit workflows.
Text input composition with secure visibility toggling and field validation chrome.
Design systemAI native
Tags are removable and options stay source-of-truth controlled by value.
Tag-backed option picker with local filtering, disabled options, max selection, and removable values.
MonTueWedThuFriSatSun
Single-date picker with calendar panel, month navigation, min/max bounds, and controlled value support.
MonTueWedThuFriSatSun
Range picker for start/end ISO dates with calendar selection and in-range treatment.
Compact HH:mm picker with interval-generated options and controlled value support.
Inline numeric input with decrement/increment controls, min/max, and step support.
Two-thumb range adjustment with an aligned filled rail and controlled tuple value.
Upload filesDrop PDFs, images, or source packets.
Q2_report.pdf2.3 MB - 72%
Local upload queue composition with dropzone, file validation, progress rows, and remove actions.
Upload imagesDrop images here or choose from disk.
![](data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"%3E%3Crect width="80" height="80" fill="%23eef3fb"/%3E%3Cpath d="M18 56 34 36l10 12 8-10 10 18H18Z" fill="%231f6fd4"/%3E%3Ccircle cx="55" cy="25" r="6" fill="%23a9c6ef"/%3E%3C/svg%3E)
interface-reference.png820 KBImage-specific upload composition with previews, accept filtering, and avatar/grid variants.
Eval healthLive
14,842
Accepted agent runs across production workspaces.
Intervention rateWatch
4.2%
KPI tile composed from Stat, Delta, Sparkline, Indicator, and Concrete surface primitives.
72%
58%
Progress summary card that composes Concrete linear and ring progress primitives.
Agent runs
Agent run volume with accepted output overlay.
Agent runsAccepted
Multi-series trend chart with Concrete grid, endpoint, target, and legend language.
Execution trend
Agent runsAccepted
Soft filled trend chart for volume, confidence, and generated UI previews.
Capability score
RouterMemoryToolsEval
Categorical comparison chart with optional comparison bars and horizontal rails.
Run composition
SearchReasoningTools
Composition chart for small category stacks across time or groups.
Workload split
64%Router
Router52Memory38Tools44Eval31
Part-to-whole ring summary with controlled center metric and thickness.
Run intensity
MonTueWedThuFriAMMidPM
Two-axis intensity grid for compact activity and density summaries.
Execution trend
Accepted runs and total executions.
Agent runsAccepted
Backward-compatible discriminated union wrapper for every focused chart component.
Evaluation runs
Typed cells stay compact while still supporting signals and microvisuals.
| Router contract | Shipping | Arihan | +18.6%7d | 184 | |||
| Memory recall | Review | Jordan | +0.8%7d | 92 | |||
| Tool router | Featured | Tom | +9.2%7d | 138 | |||
| Policy eval | Blocked | Dexter | -4.4%7d | 211 |
Dense typed table with sortable columns, selection, search, filters, pagination, and rich cells.
Agent execution flow
A compact map of context, planning, tool execution, and final synthesis.
Routed node and edge diagram for agent plans, systems, memory flows, and tool pipelines.
Request flow
Editorial explainer graph for request routing, context, model synthesis, and streamed output.
Interactive explainer canvas with DOM nodes, supporting items, SVG edges, pan, zoom, fit, and minimap.
The eval runner is failing during schema hydration. I found one stale fixture and a missing tool permission edge.
Role-aware message wrapper with avatars, plain or bubble surfaces, metadata, and subtle action toolbars.
Thinking3 stepsMapped failing logs to the evaluation fixture, checked schema boundaries, and isolated the change needed before rerunning.
Context loaded
Read the transcript, active scopes, and the command surface state before touching code.
Tool plan selected
Selected the smallest local tools needed to verify behavior and avoid product policy drift.
Running focused action
Applying the focused interface change and keeping the final answer hierarchy stronger.
Subdued expandable reasoning line for visible agent progress, scoped steps, and streaming state.
workspace checksuccess1.8s
ts
bun run check7 tests passed. TypeScript clean.
Collapsible tool execution artifact with status, duration, optional input code, and output.
arihan/eval triage-v2router-v2.ts · 3.2 KB
Agentic message input with token chips, mentions, commands, attachments, formatting, keyboard submission, and deterministic value output.
04APIstable public package surface
Contracts stay small.
Concrete ships one public React package, one registry, one schema boundary, and one render contract for DOM and screenshots.
Package exports
@rubriclab/concrete@rubriclab/concrete/components@rubriclab/concrete/primitives@rubriclab/concrete/styles.css@rubriclab/concrete/registry@rubriclab/concrete/icons@rubriclab/concrete/schemasRender routes
Skill contract
Use primitives for controls and surfaces. Use registry metadata for docs and screenshots. Choose pressure before composing, never as a universal primitive prop.
Smoke sample
Exportsclean
⌘K