Text Boxes — Platform Visual Standard

Nothing erodes trust in a product faster than every screen having a different text field — one with a gray background, another with square corners, another that does not even signal focus. In DATTA, every text box follows a single standard, inherited from the home screen's search bar: you recognize the field, you know where focus is and you type with the same experience on any page — from Chat to the administration consoles.

Canonical standard

Every text box in DATTA (text input, textarea, select) follows the visual of the platform's search bar — the box on the chat home screen, whose canonical class is .chat-input-container:

Property	Value	M3 token
Background	`var(--bg2)`	`--md-surface-container-low`
Border	`1px solid var(--border)`	`--md-outline-variant`
Corners	`var(--radius)` (12px)	`--md-shape-md`
Text	`var(--text)`	`--md-on-surface`
Placeholder	`var(--text3)`	`--md-outline`
Focus	`border-color: var(--accent)` + ring `box-shadow: 0 0 0 3px var(--accent-soft)`	`--md-primary`
Transition	`border-color .15s, box-shadow .15s`	—

css

.exemplo-input{background:var(--bg2);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);transition:border-color .15s,box-shadow .15s}
.exemplo-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.exemplo-input::placeholder{color:var(--text3)}

Where the standard is applied

Global baseline: the platform's base stylesheet (m3-overrides.css, inputs section) styles input[type=text|email|password|number|search|url], textarea, select, .field-input and .key-input on every page that imports the standard theme (theme.css). A new page with no local input CSS is compliant from birth — consistency for free.
Cluster Console: it uses its own copy of the same stylesheet — when you change the baseline, keep the copy in sync.
Page-local CSS: local rules may add layout (width, flex, padding, mono font for technical inputs), but the visual-identity properties (background, border, corners, focus) MUST repeat the canonical standard.

Accepted variants

Highlighted "hero" bar (the central search on the chat and upload welcome screens): border-color: var(--border2) + box-shadow: var(--shadow-md) on top of the base — the same identity, with more presence.
Inline title/rename editors (renaming a dashboard, a pipeline or a conversation — e.g. .pb-title-input, .pipeline-name-input, .conv-rename-input): transparent or compact background with an underline/accent border — these are not form text boxes.
Technical inputs (Cypher/DATTAX/JSON/R): the JetBrains Mono font is kept; the rest of the visual follows the standard.

Worked example

When creating a new page with a form:

Import the platform's standard theme in the <head> — the input, textarea and select fields already come out with the canonical visual, with no extra CSS.
Type into the field and watch the focus: the border takes the accent color and a soft ring appears around it — that is the expected behavior across the whole platform.
If the field is technical (a DATTAX expression, for instance), add only font-family: 'JetBrains Mono' — nothing else changes.

Anti-patterns (reject in review)

Background var(--bg) (the page ground), var(--bg3)/var(--bg4) or a hardcoded color on a text box. The correct background is var(--bg2) (--md-surface-container-low): --bg is no longer equal to --md-surface, and an input painted with it disappears into the ground, with no error at all.
border-radius: var(--radius-sm)/var(--radius-xs)/fixed px on a text box.
:focus without an accent ring (border change only) or with a hardcoded ring (rgba(59,130,246,...)).
Styling a new input from scratch instead of inheriting the baseline from the platform's stylesheet.