INSTAR Lab visual system and public assets

Visual system

Blue, bright, legible, and grounded in research.

The Record Room uses the existing INSTAR identity with an official Bootstrap grid and component vocabulary. Dense archive navigation, evidence rules, and compact labels carry the information architecture; the visual language remains INSTAR.

System contract

Bootstrap 5.3

Container, row, card, table, badge, alert, and spacing utilities are the layout primitives used across this room.

Color tokens

Brand color mapped to a useful job.

Brand bluevar(--color-brand) / #1072baPrimary links, progress, and shell accents

Deep bluevar(--color-brand-deep) / #0d5d98Headings and high-contrast interactive text

Cool bluevar(--color-brand-cool) / #2dbee1Secondary highlights and data emphasis

Signal redvar(--color-accent) / #ec2227Attention and correction states

Layout anatomy

One sidebar, one responsive canvas.

Record nav

At smaller widths, the same navigation becomes an offcanvas panel while content remains in the document flow.

Type and rhythm

Raleway for structure; Roboto for reading; Lato for interface.

The record shell keeps the existing self-hosted fonts and uses Bootstrap spacing units so panels align predictably across viewports.

Spacing values below are the actual tokens used in the proposed layout, not a decorative scale.

Display

Raleway

Route titles and section headings

Reading

Roboto

Descriptions, table cells, and source notes

Interface

Lato

Labels, statuses, navigation, and metadata

Bootstrap spacing utilities used in the Record Room
Utility class	Root value	Pixels at 16px root	Record Room use
`p-1`	0.25rem	4px	tight label gap
`p-2`	0.5rem	8px	badge and inline control gap
`p-3`	1rem	16px	card body and mobile gutter
`p-4`	1.5rem	24px	panel padding and grid gutter
`mb-5`	3rem	48px	section rhythm at desktop

Component specimen

Every visual earns its place.

Cards, badges, tables, alerts, and progress bars provide the shared visual grammar for record evidence and data views. The specimen below is illustrative UI only; it is not a site measurement.

Data panel specimen

Evidence progress

Example only

Label slotValue slot

Accessible by default

Native links, table captions, visible focus, reduced-motion support, and no-JavaScript fallbacks are part of the Record Room baseline.

Read the accessibility statement

Asset contract

New Record pages use existing AVIF media with dimensions, alt text, and route context. Logos remain SVG. New JPG, JPEG, PNG, or WebP image references are not introduced.

Review the visual archive