Two palettes for the Signal style: Clay (coral on warm clay, the default) and Sage & Sand. Each has one key color and its own neutrals, and both share six category colors that tell things apart without saying good or bad. Switch palettes at the top of the page. Components only read the semantic tokens, which change with the theme. Each swatch shows the text color that passes WCAG AA on it, and its contrast ratio.

Onest for everything you read, Gabarito for the big headings, JetBrains Mono for code. Use the role tokens (--ep-font-heading-lg, --ep-font-body-md) instead of picking a size and weight.

Surfaces rise in steps: the canvas, the sheet on it, raised cards on the sheet, then overlays that float above everything. In dark mode the surface color does most of the lifting, with a brighter edge instead of a bigger shadow.

Every margin, padding and gap is a step on this 4px-based scale. Small steps are for the inside of components; page layout uses multiples of 8px. Full rules in docs/layout.md.

Pages sit on a 4, 8 or 12 column grid. The columns, page margin, gutter and section gap change at each breakpoint by themselves, so a page written once adapts. Resize the window to watch this one change.

Most screens share one shell: a top bar, side navigation from lg (a drawer below it), then a page header and sections. The wireframe below responds to its own width with a container query, the way a reusable layout should.

Interactions are fast, quiet and predictable. Motion only explains a change: a state changing, something entering or leaving, where something moved, or that work is in progress. Nothing in a component runs longer than 300ms, only opacity and transform animate, and reduced motion keeps the fades but drops the movement. Turn on Reduce motion below to compare. Full policy in docs/motion.md.

Starts an action. Use one primary button per view. Works with forms through type="submit" and type="reset".

A square button with only an icon. The label is required and is what screen readers announce. Hover or focus for the tooltip.

A single-line input with a label, helper text and error message. Takes part in forms like a native input.

Multi-line text. Set maxlength to show a character count.

Picks one option from a list. Built on the native select, so it uses the phone's own picker and works with every screen reader.

Turns one option on or off, or picks several from a list. Supports an indeterminate state for "select all".

Picks exactly one option. Tab moves into the group, arrow keys move between options.

A setting that takes effect straight away.

Type a date in your locale's order or pick it from the calendar. The value is always YYYY-MM-DD. In the calendar, arrows move by day and week, and Page Up and Page Down change the month.

A short, non-interactive status or count. The text always says what the status is, so it never relies on color.

A keyword, category or active filter. Removable tags have their own button, so they work by keyboard.

A person's picture, falling back to initials and then an icon. Always round, even with sharp corners.

Groups related content. Three styles: outlined, elevated and filled. Media, header actions and footer are optional.

Generated artwork for course tiles and empty states, in a category color. The same seed always draws the same picture, so give each course its own. It is decorative and hidden from screen readers.

One headline number with its label and an optional note or chart. Use a few in a row at the top of a dashboard.

A trend with no axes, as a line, a line with an area, or bars. The last value is marked. Always give it a label.

A circular completion indicator with the percentage in the middle. Always determinate.

Overlapping avatars that collapse into a count past max.

A rounded square holding an icon in a category tone: the identity mark for a subject, a team or a calendar.

Styles a native <table> you write, so any cell content works. A button in a header plus aria-sort makes a sortable column; aria-selected on a row highlights it. It scrolls sideways on narrow screens.

Icons from Tabler (over 5,000 available). They size to the text and use its color. The components ship with the set below; apps can register any other Tabler icon.

Collapsible sections for long pages where people look for one part, like an FAQ. Up and Down arrows move between headers.

What to show when a list or page has nothing in it yet. Say why it's empty and offer the next step.

Placeholders in the shape of content that is loading, so the page doesn't jump. Mark the loading region with aria-busy="true".

The frame every screen sits in: a sticky top bar, the side navigation and the content area, spaced as the page structure describes. From 1024px the navigation sits beside the content; below that it moves into a drawer that the top bar's menu button opens. The shell adds the skip link, the <main> landmark, the page margin and the content width cap. See it full screen in Storybook.

<ep-app-shell>
  <ep-top-bar slot="top-bar">
    <a slot="brand" href="/">Eduport Teach</a>
    <ep-icon-button slot="actions" icon="bell" label="Notifications"></ep-icon-button>
  </ep-top-bar>
  <ep-side-nav slot="nav">
    <ep-side-nav-item href="/" icon="home">Home</ep-side-nav-item>
    <ep-side-nav-item href="/courses" icon="book" current>Courses</ep-side-nav-item>
  </ep-side-nav>

  <ep-page-header heading="Courses">
    Everything you teach this term.
    <ep-button slot="actions">New course</ep-button>
  </ep-page-header>
  <!-- sections -->
</ep-app-shell>

Switches between views in the same place. Arrow keys move between tabs, Home and End jump to the ends.

Where the page sits in the app, with a link to each level above. The last item is the current page.

Moves between pages of a long list. Listen for change and load the page in page. In narrow containers the numbers collapse to "Page 4 of 12".

A list of actions that opens from a button. Arrow keys move, typing a letter jumps, Escape closes. For picking a value in a form, use a select.

An inline message about a page or section. Each variant has its own icon, so meaning never depends on color alone.

A brief notification in the corner of the screen. Screen readers announce it, and its timer pauses while you hover or focus it.

How far a task has got. Leave out value when the amount of work isn't known.

A short wait of unknown length. Set label="" when nearby text already says what's happening.

A short label on hover or focus. Escape closes it, and you can move the pointer onto it without it disappearing.

Interactive content anchored to a button, like a filter form. It doesn't block the page; clicking outside or pressing Escape closes it.

A dialog for a focused task or a decision. Focus stays inside while it's open and goes back to the button when it closes.

Every Eduport logo as an SVG file. Start with the orange wordmark on light backgrounds and the white one on orange or dark backgrounds. Keep clear space of half the wordmark's height around it, don't go below 80 px wide (24 px for the symbol), and never recolor, stretch or add effects. Each file can be downloaded.