Components — Cabrillo Coast style guide

CONTROL SPECIMENSFIELDS / CHOICES / FEEDBACK / COMPOSITES

ORGANIZATIONRegistered operating name

QUERYSearch a bounded collection

RECORD IDExternally supplied value

ARCHIVE TARGETUnavailable in this state

CONTACT EMAILNotification address✕ INVALID / VALID ADDRESS REQUIRED

AUTHORIZATION TOKENPrivate credential

CAPACITYBounded scalar / 0–100

EFFECTIVE DATELocal calendar date

CYCLE STARTLocal wall-clock time

FIELD SCOPEOne bounded context

GROWTH PRESSUREBounded scalar / 42

COMPONENT AUTHORITY67 REGISTERED COMPONENTS / FIVE FAMILIES

STRUCTURAL COMPONENTS
ID / COMPONENT	STRUCTURE	PURPOSE	STATES
F-01 / Field	bounded surface	establish capacity	machine record
F-02 / Megaframe	2 px primary member	provide persistent global structure	fixed
F-03 / Service spine	complete rail	carry navigation, control, and connective service	available active
J-01 / Joint plate	enlarged force-derived plate	make transfer and replacement visible	free attached stressed
S-01 / Span	1–2 px between joints	carry alignment, load, or information	structural service
M-01 / Module	complete attached frame	hold replaceable content or capability	empty occupied active damaged
M-02 / Membrane	surface with visible anchors	filter view, access, or flow	open selective closed
P-01 / Pane	shared boundary and title bar	bound one work context	inactive active
P-02 / Inspector	attached key/value pane	explain selected structure and state	empty selection
P-03 / Event trace	time actor event rows	show transitions and reconciliation	live held
N-01 / Navigation item	hard underline or rail	move between durable territories	idle current focus
C-01 / Button	36 px hard frame	issue an operation	idle hover focus disabled
C-02 / Parameter control	label value control	perturb a model	idle focus changed
C-03 / Telemetry cell	shared frame label above value	report measured state	nominal warning failed
T-01 / Title	Iosevka 600 neutral	name a territory or proposition	neutral
T-02 / Body	Aile 400 high contrast	support sustained reading	lead standard dense
I-01 / Figure	frame title caption source	provide visual evidence or reference	reference specimen evidence
A-01 / Action link	underline. Diagonal arrow suffix only for an external destination	navigate or disclose	internal external hover focus
G-01 / Guide rail	persistent complete rail	navigate the guide	wide compact
G-02 / Section	rule plus registered grid	bound a guide territory	dark light
G-03 / Token table	record-color divisions and bold inverted title row	compare registered values	default
G-04 / Color swatch	color field plus role record	show a palette role and status	approved restricted reserve
G-05 / Type specimen	sample plus token record	show an approved type role	display body

CONTROL COMPONENTS
ID / COMPONENT	STRUCTURE	PURPOSE	STATES
C-04 / Form field	complete field frame. Legend in top rule. Instruction, control, and message use fixed order	bind one domain field name to its instruction, control, and state message	idle focus invalid disabled read-only
C-05 / Text input	48 px hard frame. Inset text. Visible focus	collect a short text, search, date, time, or numeric value	idle focus invalid disabled read-only
C-06 / Text area	hard frame. Vertical resize. Body text	collect sustained multi-line input	idle focus invalid disabled read-only
C-07 / Select	48 px native semantic select in hard frame	choose one option from a bounded list	idle focus invalid disabled
C-08 / Checkbox	24 px square control plus adjacent label	choose independent options	unchecked checked mixed focus disabled
C-09 / Radio	24 px circular control plus adjacent label	choose one option from a visible group	unchecked checked focus disabled
C-10 / Switch	48 by 24 px binary track with explicit label	change one immediate binary setting	off on focus disabled
C-11 / File input	hard native filename field and registered button	select a local file without implying upload	empty selected focus disabled
C-12 / Progress	hard 16 px track with signal fill	report operation completion	determinate indeterminate complete failed
C-13 / Meter	hard 16 px track with viable, warning, and risk ranges	report a scalar within a known range	nominal warning risk
C-14 / Disclosure	complete frame with summary title row	reveal optional detail in place	closed open focus
C-15 / Tabs	shared title row with one inverted selection	switch between peer panes without navigation	selected idle focus disabled
C-16 / Dialog	complete 2 px frame. UI-01 title/actions. B-02 body. Semantic action colors	request a bounded consequential decision	closed open modal
C-17 / Form message	mono UI text attached below its field	explain requirements, confirmation, or validation failure	help success error
C-18 / Data table	2 px outer/section rules. 1 px cell rules. Merged title fields. 8 px inset. Ink divisions inside light rows	compare aligned records without card separation	dense standard selected grouped disabled
C-19 / Toolbar	36 px complete bar. Every segment divider spans full height	group peer operations and scope controls	dark light active
C-20 / Status bar	36 px complete bar. Full-height segmented telemetry	report persistent scope and operational state	nominal warning failed
P-04 / Workbench	toolbar, shared panes, data tables, and status bar in one megaframe	combine a complex inspectable technical task	idle working held failed
C-22 / Scalar stepper	48 px native number field with two attached 36 px step buttons	adjust a bounded scalar with keyboard, entry, or explicit steps	idle focus changed invalid disabled
C-23 / Internal link preview	320 px complete frame. Neutral title band. Metadata and body excerpt	preview a same-origin reference without replacing the current page	loading ready unavailable dismissed

GRAPHIC COMPONENTS
ID / COMPONENT	STRUCTURE	PURPOSE	STATES
C-24 / Chart frame	complete frame. Attached title, plot, readout, and source bands	bind a quantitative view to its title, units, scope, and source	static hover focus selected live
C-25 / Chart mark	neutral datum. Base0A on hover, focus, or selection	encode one observation or related series	neutral hover focus selected live
C-26 / Chart legend	attached label register with line or fill samples	identify series only when direct labels are insufficient	static selected
C-27 / Chart annotation	UI-02 label attached by a neutral leader	explain a consequential point without obscuring the plot	note threshold exception
C-28 / Chart readout	36 px attached band. Selected mark label and exact value	report the exact value of the inspected mark	idle hover focus
C-29 / Graph frame	complete frame. Attached title, relation field, readout, and scope band	bind entities and directed relations to a declared system boundary	static hover focus selected live
C-30 / Graph node	hard rectangular entity with direct stable label and optional type line	represent one identified software, state, or control entity	neutral hover focus selected failed
C-31 / Graph edge	directed neutral line with arrowhead and optional relation label	represent one typed directed relation between identified nodes	neutral hover focus live failed
C-32 / Graph port	4–8 px attached terminal on a node boundary	name the exact attachment point for a relation or signal	input output bidirectional live
C-33 / Graph cluster	complete secondary frame with attached scope label	declare a subsystem, trust boundary, or ownership boundary	collapsed expanded selected
C-34 / Graph readout	36 px attached band with exact node or edge identity and relation	report the inspected graph entity without a floating card	idle hover focus
C-35 / Inspection popup	bounded record surface. Exact identity/value. No shadow	show the exact chart datum or graph entity at the inspection point	hidden pointer focus
C-36 / Series crosshair	vertical inspection guide. Line-attached exact-value boxes. No shadow	show every series value at one shared x coordinate without obscuring series identity	hidden pointer focus keyboard cycle
C-46 / Hinton diagram	chart frame with signed area marks	compare signed matrix magnitude by square area	positive negative zero missing selected
C-47 / Automatic graph projection	graph frame with derived deterministic layout	project a domain-neutral graph model without manual coordinates	layered radial selected failed
C-49 / Neural Hinton network	one outer figure frame containing individually framed and border-labelled neural layers	represent a multilayer neural system with Hinton area/sign encoding and explicit L0–L3 structure	positive activation negative activation zero missing compact scroll

OPERATIONAL COMPONENTS
ID / COMPONENT	STRUCTURE	PURPOSE	STATES
C-37 / Alarm annunciator	44 px minimum row. Light record. Priority marker owns color	identify one condition with redundant priority, source, age, state, and required action	warning caution advisory unknown
C-38 / Alarm priority marker	bounded semantic fill with ink text and explicit priority word	give priority a stable text, shape, and color cue without tinting the whole record	warning caution advisory unknown
C-39 / Alarm ledger	complete 2 px table frame with deterministic priority, lifecycle, quality, and acknowledgment columns	project typed alarm records without accepting arbitrary notes, banners, or prose slots	normal load multiple priority request pending history
C-40 / Operating envelope	neutral framed scale with current value, target range, limit, trend, unit, and quality	show a typed observed value in relation to its acceptable range, limit, direction, unit, quality, and observation time	normal approaching limit outside limit stale
C-41 / Data quality badge	bounded text badge. Neutral or alarm-role border. Never color alone	state whether operational evidence is current and authoritative enough to act on	valid stale held estimated failed
C-48 / Command review	bounded four-field review with explicit intent, authority, precondition, and lifecycle status	separate proposed control intent from observed state and expose only authority, precondition, and lifecycle fields	ready blocked completed rejected

PUBLIC COMPONENTS
ID / COMPONENT	STRUCTURE	PURPOSE	STATES
C-42 / Server runtime unit	attached framed chassis. Stable identity, role, state, load, work count, and live route	show the bounded compute service that executes the active transformation field without implying authority from appearance	active held suspended failed
C-43 / Computational light hero	scroll field with one sticky viewport and one bounded route-selected computational canvas	state the route proposition while a randomly seeded, route-specific complex-system model supplies a decorative computational field	entry transition expanded reduced motion held offscreen unavailable
C-44 / Guide summary	full-width light summary membrane over the continuing reaction–diffusion field	state guide purpose, authority, coverage, verification, and limits over the continuing light computational field	wide narrow
C-45 / Page navigation bar	machine-colored horizontal service bar with page links and one current-page state	navigate only between public documents; delegate navigation within a document to the service spine	wide compact horizontal overflow current page

Action and interaction contract.

ACTION VOCABULARYREGISTERED DICTIONARY / ARRAY

ACTION VOCABULARY
PATH	VALUE
cancel.color	neutral machine surface with primary neutral text
cancel.keyboard	Escape has the same meaning when the surface can close safely.
cancel.label	CANCEL
cancel.meaning	Dismiss the current transient surface and discard only uncommitted changes within that surface.
cancel.mustNot	Undo saved state or an external effect.
cancel.placement	First or left of the committing action.
commit.color	selection accent for a non-destructive commit. Risk accent for a destructive commit
commit.label	domain-specific imperative
commit.meaning	Apply the named effect.
commit.mustNot	Use generic CONFIRM when a precise verb such as RELEASE, SAVE, APPLY, or DELETE is available.
commit.placement	Last or right.

INTERACTIONREGISTERED DICTIONARY / ARRAY

INTERACTION
PATH	VALUE
destructiveSurface	risk
disabledSurface	inert
focusFrame	selection
hoverSurface	selection
hoverText	ink