---
name: field-notebook-ui
description: >
Use when the user asks to build a UI, interactive explainer, dashboard, visualizer,
diagram, reference tool, or any artifact that needs a consistent visual design system
in the "engineer's field-notebook" aesthetic. Trigger on: "build a UI for", "create an
interactive", "make a visualizer", "generate an artifact", "design a component",
"create a dashboard", "make an explainer", or any request to produce a React/HTML
artifact with content to display. Also trigger when the user says "make it look like
the field-notebook style" or references the warm stone-paper aesthetic.
when_to_use: >
User says: "build a UI for X", "create an interactive explainer", "make a visualizer",
"generate a React artifact", "design a dashboard", "create a reference tool",
"make it look like the field-notebook style", "use the warm stone-paper aesthetic",
or asks for any interactive component that should share a coherent design language
without re-specifying the token system each time.
argument-hint: '[what to build — e.g. "k8s glossary", "helm explainer", "auth flow diagram"]'
arguments: []
disable-model-invocation: false
user-invocable: true
allowed-tools:
- Read
- Write
- Bash
disallowed-tools: []
model: claude-sonnet-4-6
effort: medium
context: ''
agent: ''
hooks: {}
paths: []
shell: bash
metadata:
capability: creative-ui
tags:
- ui
- react
- design-system
- artifact
- creative
- interactive
updated-date: "2026-06-24"
---
# Field-Notebook UI Skill
Generates React artifacts in a warm "engineer's field-notebook" visual system.
Every artifact you produce using this skill must feel like a page from a physical technical
notebook — structured, readable, purposeful — translated to an interactive screen.
---
## Design token system
Copy these tokens verbatim into every artifact. Never invent replacements.
```js
const T = {
// Backgrounds
bg: "#ECE9DF", // stone-paper — the page itself
surface: "#E5E1D5", // slightly darker for cards / panels
surfaceB: "#DDD9CC", // code block background
// Text
ink: "#172423", // petrol-black — primary text
inkMid: "#3D4F4E", // secondary text
inkDim: "#6E7D7C", // captions, placeholders
rule: "#C8C3B4", // dividers, borders
ruleHair: "#B8B2A2", // hairline card borders
// Primary
green: "#0F6E56", // petrol-green — primary actions, success, structural
greenFill: "#0F6E5612", // low-alpha fill
greenBg: "#0F6E5620",
// Semantic accents (use 2–3 per view, never all at once)
rust: "#B94A2C", // errors, rollback, danger
rustFill: "#B94A2C14",
amber: "#C17D11", // warnings, overrides, caution
amberFill: "#C17D1114",
purple: "#5B3F8C", // model, template, AI concepts
purpleFill:"#5B3F8C12",
blue: "#1B5FA8", // agent, commands, informational
blueFill: "#1B5FA812",
};
```
---
## Typography
Three fonts, three distinct roles. Never swap them.
| Role | Font | Usage |
|---|---|---|
| Display | Space Grotesk | Headings, labels on cards, tab names |
| Body | Inter | Prose, descriptions, detail text |
| Mono | JetBrains Mono | Eyebrows, code, technical labels, metadata |
Always load via Google Fonts in a `useEffect`:
```js
useEffect(() => {
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap";
document.head.appendChild(link);
}, []);
```
### Eyebrow pattern
Every section opens with a spaced uppercase mono eyebrow, then a sentence-case Space Grotesk heading.
```jsx
// Eyebrow component
function Eyebrow({ children, color = T.green }) {
return (
{children}
);
}
// Usage: always eyebrow THEN heading
Chart structure
File anatomy
```
---
## Core components
### Card with colored left border
The standard content container. Hairline border, soft radius (0 on left to meet the accent stripe).
```jsx
function Card({ accent = T.green, fill, children, style = {} }) {
return (
{children}
);
}
```
### AirGap — the signature element
A dashed enclosure with a small corner label. Use this for Paragon-specific context,
important notes, security warnings, or any annotation that must stand apart.
This is the single most distinctive element of the design — use it deliberately, not on every card.
```jsx
function AirGap({ label = "note", children }) {
return (
╴{label}╶
{children}
);
}
```
### Code block
Left accent border in the relevant semantic color. Mono font, surfaceB background.
```jsx
function CodeBlock({ children, accent = T.blue }) {
return (
{children}
);
}
```
### Tab button
Active state: green background, white text. Inactive: transparent, dimmed mono label.
```jsx
function TabBtn({ active, onClick, children }) {
return (
);
}
```
---
## Interaction patterns
### Click-to-expand
Use for timeline steps, glossary terms, layered diagrams. Always show a ▼/▲ indicator.
Manage state with `useState({})` keyed by item id.
```jsx
const [expanded, setExpanded] = useState({});
const toggle = (id) => setExpanded(p => ({ ...p, [id]: !p[id] }));
// In render:
{expanded[item.id] &&
{item.detail}
}
```
### Hover transitions
All interactive elements: `transition: "background 0.15s, color 0.15s, border-color 0.15s"`.
Nothing else. No transforms, no shadows on hover.
### Keyboard focus
Every interactive element must have visible focus. Inject once via a style tag:
```jsx
useEffect(() => {
const style = document.createElement("style");
style.textContent = `
.nb-focus:focus-visible {
outline: 2px solid ${T.green};
outline-offset: 2px;
border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}
`;
document.head.appendChild(style);
return () => style.remove();
}, []);
```
Add `className="nb-focus"` to every `