Skip to content
design
Foundations

Border

Hairlines separate regions and never decorate. A colored border always carries a meaning.

On this page
ALARMAnchor drag · 38 m outside swing circle · since 21:02ACK
Depth8.4 m
TWS14.2 kn95 s old
HDG225°Last seen 8 min

ACK

Hairlines divide the readouts. The colored borders each mean something: an alarm, a stale reading, an invalid reading, and keyboard focus.
01Hairlines separateA 1px hairline divides regions: the rail from the panel, the panel from the page, one readout from the next. It is never drawn around content for decoration.
02Color means somethingA colored border is a signal: an alarm, a stale or invalid reading, keyboard focus. Because the rest of the UI has so few borders, these stand out.
03Focus is always visibleA focused control always shows where focus is: its independent focus ring, including when a field is invalid or a choice is selected. Focus is never removed.

Hairlines

Two contrast levels of hairline, with the same thin line weight. --border separates regions; --border-bright outlines controls and insets the raised active item.

TokenNightDuskDayBright
--border
Between regions and readouts
#3A2C16
#26272E
#D5D8DD
#C9CDD4
--border-bright
Control outlines, raised inset, key caps
#523D1E
#33353D
#B9BEC6
#AAB0B9
Rail
Panel
Header
Page
Hairlines between regions

Semantic borders

Each of these borders is the color of what it reports. They come from OpenBridge's alert and integrity roles and follow the theme.

BorderTokenMeans
Alarm outline--alert-alarm-outline-colorAn alarm or an emergency in the alert zone: act now. Its 2px ring flashes on the alarm clock until the alarm is acknowledged
Stale outline--alert-low-integrity-border-colorA reading is late; its value is dimmed and carries its age
Invalid outline--alert-invalid-border-colorA reading is lost; its last value is kept with how long ago it was seen
Focus ring--bk-focus-ring, --bk-focus-width, --bk-focus-offsetKeyboard focus, independently of selection or validation
Selection--bk-selected-indicatorThe chosen segment or step; it carries a label too
Field boundary--bk-field-* rolesThe field state; an invalid field has a dashed border in the text color (--bk-field-invalid-border), which stays while the focus ring is drawn outside it
TokenNightDuskDayBright
--alert-alarm-outline-color
Alarm outline
#E90F20
#E1000E
#AB0000
#7F0000
--alert-low-integrity-border-color
Stale outline
#433700
#8E6A00
#6B4F00
#8F6B00
--alert-invalid-border-color
Invalid outline
#A60000
#A60000
#7F0000
#FF4D47
--bk-focus-ring
Focus ring
#FFC878
#14B8A6
#0D645E
#0D645E
--bk-selected-indicator
Selection
#FFC878
#14B8A6
#0D9488
#0D9488

Choosing the boundary

RelationshipTreatment
Two regions already separated by spaceNo additional border unless the boundary needs to remain visible
Repeated rows or columnsOne shared hairline; avoid doubled edges between neighbors
Editable fieldThe component's field-border roles, including disabled and invalid states
Keyboard focusA separate focus ring that survives selection and invalid styling
Report categoryAn editorial accent with a written category name
Diagram service or groupThe diagram's service-line or neutral-line role

Border color and line weight are separate decisions. --border and --border-bright name colors, not widths. The document rule width is --bk-document-rule-width; keyboard focus has its own width and offset tokens. A diagram boundary can describe a service or a system without implying a hazard. Alert and integrity outlines remain reserved for their operational meanings.

Focus, clipping and layout

Use --bk-focus-ring, --bk-focus-width and --bk-focus-offset through the shared component. The field's invalid border and the focus ring can appear together. Do not replace one state with the other, or clip the ring with an ancestor's overflow. A border that grows on focus must not move adjacent content; reserve its space or use an outline. Check focus on the actual background in each theme and with forced colors.

Outlined labels need the surface behind the field, including a card or nested scope. Do not paint a Day-colored patch behind a label to hide a border in every theme. Use the component's label treatment and test it where the field is embedded.

Using borders

Do
DepthSOUNDER
8.4m
▲ +0.3 m / 10 min
True windMAST
14G22kn
TWD 214°
SOGGPS
0.4kn
COG 087°
Divide a row of readouts with hairlines. The values line up and the frame stays quiet.
Don't
Depth8.4 m
TWS14 kn
SOG0.4 kn
Don't box each readout in its own heavy frame. The borders outweigh the numbers they hold.
Do
TWS14.2 kn95 s old
Color a border only to report something. The yellow frame says this reading is late, and the badge says by how much.
Don't
Depth8.4 m
Don't use a colored border to decorate. An accent frame around an ordinary reading looks like a status that isn't there.