27 · Live interface

Components: navigation, tables and alerts

The components that organize information and notify the user. Alerts are the most delicate case in a brand without color: here they are solved with shape and text.

Preview

Tabs

Content of “Overview”.

Top navigation

The link for the current page has a 2 px underline and aria-current="page". It is not distinguished by color alone.

Tables

Sample invoices
Client	Date	Amount	Status
Sample client A	02/11/2026	Bs. 1.250,00	Paid
Sample client B	30/10/2026	Bs. 8.400,50	Pending
Sample client C	15/10/2026	Bs. 320,00	Overdue

Fictitious data. Figures are right-aligned with tabular figures; status always carries an icon and a word.

Alerts

InformationWe are doing scheduled maintenance today. We will let you know when it is done.

DoneWe saved your change.

NoticeThis module is in testing. Check the totals before using them.

Could not saveCheck your connection and try again.

Type	Icon	Border	ARIA role
Information	Circle with i	1 px, 4 px bar	status
Success	Circle with check	1 px, 4 px bar	status
Notice	Triangle	Dashed, 4 px bar	status
Error	Circle with X	2 px, 6 px bar	alert

Code

<div class="nt-alert nt-alert--error" role="alert">
  <svg ... aria-hidden="true">...</svg>
  <div><b>Could not save</b>Check your connection and try again.</div>
</div>

<table class="nt-table">
  <caption class="sr">Invoices</caption>
  <thead><tr><th scope="col">Client</th><th scope="col" class="num">Amount</th></tr></thead>
  ...
</table>

The variables and full CSS are in Components: buttons, fields and cards.