Components
Reusable parts every Ascern screen is built from, grouped by what they do.
Actions
Button
A button starts an action: saving, adding, importing, sending. If it takes you somewhere, it's a link.
Button group
Two or three related buttons set 8px apart, with the one primary last. It holds dialog and form footers, page actions and the toolbar's actions.
Split button
A primary action with a caret beside it. The label runs the usual choice in one click; the caret opens the other ways to do the same thing.
Link
Text that takes you somewhere: another page, a setting, a site outside Ascern. Brand green and always underlined, so it reads as a link without colour alone.
Dropdown menu
A list of actions or options that opens from a button: every More menu, row menu and View option. It acts on something already on screen.
Context menu
The row menu, opened with a right-click, a long press or Shift+F10. It holds the selection bar's actions for the rows it opened on, plus Open and Copy link for one row.
Record actions menu
The More button on every record page and peek. Everything you can do to the record that isn't its one primary action.
Undo control
Undo is how Ascern recovers from a write: an Undo on the toast that confirms it, ⌘Z for the newest one, and an inline Undo on a receipt or activity line for changes Flo made.
Kbd
A keyboard key, shown wherever a shortcut can be learned: tooltips, menus, the search field and the shortcuts sheet. One chip per key.
Inputs and forms
Form
The parts every form is built from: field, label, messages, choice controls, larger inputs, and the settings layout that holds them.
Code input
Six boxes for a one-time code: two-step sign-in, and the step-up check before a sensitive change. It reads as one field; typing or pasting fills the boxes in order.
Date time picker
A day and a start time as two fields side by side: the date picker and the time picker. Meetings use it, with the length beside it; times are in the agency's time zone.
Time picker
A time of day, typed or picked from a 15-minute list in the date picker's popover look. 24-hour, in the agency's time zone.
Timezone picker
The agency's time zone, picked once in Settings from every zone with its offset today. Today, due dates, reports and the calendar all read from it.
Time presets menu
A short list of named times that act on one click: snooze a thread, or remind me if they haven't replied. Pick a date opens the calendar for anything else.
Rich text editor
One line of a CV, edited in place. Bold and links only: the CV template owns every other part of the look.
Voice input
Talk to Flo instead of typing. The mic dictates into the box to check before sending; holding ⌘⇧Space talks and letting go sends. Words stream into the box as they are heard.
Color swatch picker
Picks a colour from a fixed set, for a mail tag or a select option. People pick a hue to tell things apart; they never type a hex.
Field types
Every value type a record can hold, as it reads in a 36px table cell, in the details rail and in a form. A type looks the same everywhere (C463). Each opens one of six shared editors, drawn below.
Import wizard
Adds records from a spreadsheet in one dialog: choose the file, pick the header row, match columns, preview each row, then import with Undo for 14 days.
Selection
Choice card
One choice from a short list, where each option needs a line to explain it. A radio group drawn as full-width cards; the whole card is the target.
Lozenge dropdown trigger
A stage lozenge that opens the stage menu. You change an Application's stage where you read it, in the cell or on the record.
Filter builder
Filter opens a searchable field list. A field opens its conditions and a value editor for its type. Each filter then shows as a chip in the toolbar; filters combine with and.
Command palette
The ⌘K box. Search every record, run an action, go to a page or ask Flo, from anywhere. It grows out of the Ask bar and folds back into it.
Display menu
One popover for how a View reads: Sort, Group and Fields, each opening its own page, then the shared View actions.
Data display
Avatar
A person's photo or initials. People are round. Companies are square and use Company logo.
Avatar group
Several people in one slot: up to three overlapping avatars, then a +N count. The names are one hover away.
Badge
A count beside a label: unread mail, Applications in a stage, tasks due today. Only numbers go in a badge. A status is a lozenge and a label is a tag.
Company logo
A company's mark on a square: its logo, else its site's favicon, else its first letter. Every company reference starts with one.
Date label
A date written the way people say it: words near today, a short date this year, month and year before that. In the agency's time zone and date order.
Icon tile
A 16px icon on a 32px rounded tile. It is how Ascern shows an icon larger than 16px: in empty states, setup steps and rule templates.
Lozenge
A status: where a record stands right now. Stages, Job status, Do not contact, meeting status. Soft fill with dark text of the same hue, so it reads at a glance without shouting.
Tag
Descriptive metadata someone chose: Inbox tags, skills, sectors, guests on a meeting. An outlined chip with a colour dot. It labels a record; it never says where the record stands.
Tag group
Tags on one line: as many as fit, then +N with the rest in a tooltip. The row never wraps and never grows.
Record chip
Every reference to a record, in a cell, the details rail, a card or Flo's text. The mark says what the record is; the name says which one.
Record title
The record's name at the top of its page and its peek: the mark, the name you can rename in place, its status, and one line of facts.
Metric tile
One number for the period, how it moved against the previous period, its target, and a small chart of the period. The Dashboard's headline grid is six of them.
Chart
Three plain SVG shapes, each drawn from numbers the page already shows: a line over the period, an ordered split as one bar, and a few months as bars. A chart never disagrees with the figure above it.
Value diff
A field's value before and after a change: the old value struck through, an arrow, the new one. Values draw as the table draws them, so a stage stays a pill and money stays money.
Attachment chip
A file in one compact chip: its type, name and size. Under an email it opens and downloads; in the Flo composer it shows the upload and can be removed.
Truncated text
One line that ends in an ellipsis when it runs out of room. The full text shows in a tooltip, and only while the line is clipped.
Activity timeline
A record's history, newest first: who did what, with the before and after values, plus its emails, notes and meetings in one list.
Item
A row in a list with no columns: Inbox threads, Needs you, tasks, connected accounts, search results. A leading slot, a title, an optional second line, and a trailing slot.
Tables and views
Table
The record grid: every list of Companies, Contacts, Jobs and Applications. 36px rows, a 40px header, hairlines both ways. Names in ink, everything else subtle.
Table toolbar
The 44px bar above every grid. Filter and its chips on the left; search, the save controls and Display on the right.
Bulk action bar
While rows are selected, a 44px bar covers the toolbar: how many are selected, the actions that apply to all of them, then Clear.
Calculation footer
A sticky row under the grid: the record count first, then one calculation per column, picked from that column's menu and saved with the View.
Draft row
The last row of every grid. "+ New candidate" turns it into a row you type into, cell by cell, as in a spreadsheet. Enter saves it; Escape cancels it.
Group row
In a grouped View, each group opens with a full-width row naming the field, the value and how many records it holds.
Pagination
A 36px line under the grid: how many records the filters hide, a way to clear them, and Next page when more rows wait.
Add column and field editor
+ at the end of the header row creates a custom field and adds it to this View. Settings › Fields uses the same form.
Save view bar
When someone changes a shared View's filters, sort, group, columns or search, Discard changes and Save for everyone appear in the toolbar until they choose.
View tabs and view menu
Saved Views sit as tabs in the page header, Archived last, then + to save the current table as a new View. Rename, delete and restore live in Display.
View change notice
A quiet line above a table saying what its View lost when a field was archived or deleted. Said once, on the first load that shows it.
Kanban board
A job's candidates as columns by stage, from CV sent to Placed. Drag a card to move it, or use its Move to menu. Earlier stages fold into one column.
Period controls
The bar under a report's header that picks which numbers the page shows: a preset period, a typed range, and whose numbers. Every change reloads every figure on the page.
Navigation
Sidebar
The workspace navigation: 200px, folding to a 52px icon rail. Only its edge moves, and labels fade before the edge reaches them.
Side panel
The Flo panel's frame: docked on the right, the page still working beside it. Its body slides in over 200ms, out over 150ms, and the edge resizes it.
Breadcrumbs
One step back up, in the page header of a detail page: the list it came from, a slash, then this page's name as its heading.
Tabs
Switch between views of the same thing: a record's sections, a page's lists. One style everywhere, an ink underline under the current tab.
Settings navigation
In Settings the sidebar becomes the settings list: Back to app, a search box, then Your account and Agency. Typing swaps the groups for matching pages and settings.
Workspace and account menu
The Agency name at the top of the sidebar. It opens one menu: who you are signed in as, the Agencies you can switch to, settings, bug reports and sign out.
Phone bar
The bottom bar on phones, 640px wide and below. Home, the Ask field, New and Menu replace the sidebar and the floating Ask bar.
Progress tracker
The steps of a guided task, with where you are and what is done. Job setup lists them down the left; CV out stacks them as numbered sections.
Skip link
The first thing Tab reaches on every page. It jumps past the sidebar to the page's content, and stays hidden until it has focus.
Keyboard shortcuts sheet
A side sheet listing every shortcut, grouped by where it works. Press ? or ⌘ / from anywhere in the workspace, or click Keyboard shortcuts in the sidebar.
Overlays
Modal dialog
A short, focused task over the page: create, edit, or one step that needs an answer. The page waits under a 10% black blanket until you finish or cancel.
Confirm dialog
Asks once before an action that can't be undone or costs something. It says what will happen, and the button repeats the verb.
Drawer (side sheet)
A panel from the right that shows one record while the list stays in view. Used for application peeks, the review sheet and meetings.
Popup
A floating panel tied to the button that opened it: a short form, a picker, a filter. It closes on Escape or a click outside, and the page stays live around it.
Record peek
A record opened beside the list it came from: an application, a target pursuit, a meeting. The list stays live; the address carries the record, so the peek can be shared and Back closes it.
Hover preview card
A record's summary when you rest on its name, so you can check who someone is without leaving Flo's answer or the page you're on.
Tooltip
A short label that appears on hover or focus: the name of an icon button, its shortcut, or the full text of something clipped. It never holds anything the person must read to finish a task.
Feedback
Banner
A full-width strip for a state that covers everything below it: the whole app when you are offline, or a whole record when it is archived or must not be contacted. The largest of three message levels.
Section message
A message about one part of a page, placed at the top of that part. Middle of three levels: a banner speaks for the whole app, an inline message for one control.
Inline message
One short line next to the control it is about: a field, or a table cell. The smallest of three levels, under the section message and the banner.
Toast
A short note, bottom right, that something just happened: a save, a move, an archive. It states the fact in the past tense and offers Undo when the action can be reversed.
Empty state
What a list or page shows when there is nothing in it: why it is empty and the one next step. First run, no match, not connected yet, or failed to load.
Error boundary
What shows when a page can't: a crash, a missing page, no access, offline, signed out or the database out of reach. The failure stays inside the smallest part that broke, keeps a way out, and is reported on its own.
Spinner
A small turning mark for a short wait inside one control: a button that is saving, a step Flo is filling. Whole pages and regions use a skeleton instead.
Skeleton
The page's frame at its real sizes, with grey shapes where the data will go. Every route shows one while it loads, so a click answers at once.
Progress bar
A thin bar for work that takes longer than a moment and runs while you keep working: reading a mailbox, finding people, importing a file.
Saving status
Edits save as you make them. A small dot says a change is still on its way; words appear only when a save takes long or fails.
Duplicate notice
A row that appears under a Company you just saved when Ascern finds one that looks the same. It points it out and never blocks the save.
Environment badge
Marks a sandbox Agency on every screen, so nobody mistakes practice data for real candidates. It sits in the sidebar under the Agency name.
Connection status
Whether Ascern can still read a member's mail, calendar or meetings, when it last did, and the one thing to do about it. A row in Settings, a dot in the account menu, a banner across the app while it needs action.
Content
Accordion
Sections that open and close in place, so a long rail or checklist shows its titles first and the detail on demand.
Separator
A 1px hairline in the border colour that splits groups inside a menu, a toolbar or a rail. It never carries meaning on its own.
Visually hidden
Text a screen reader reads but the screen doesn't show. It names icon buttons, code inputs and phone headers that are clear by sight alone.
Needs you list
The list on Home of what is waiting on you today, and the sections of the morning brief. Every row is one thing, with the one action that clears it.
Task row and task form
A Task is a row: what to do, who it is about and when it is due, with one way to complete it. A new Task is a draft row in the Tasks table, never a dialog.
AI
Ask bar
The one floating way into Flo and search on every page. It opens a search that asks Flo when nothing matches, and carries the review count and the mic.
Flo composer
The one box for talking to Flo: a rounded island with the message, the files, attach, the mic and a round Send that turns into Stop while Flo answers.
Flo thread
The Flo conversation: a column of turns that stays pinned to the newest while Flo writes, Latest once you scroll up, and What should Flo do? with suggested asks when it's empty.
Flo message
One turn in the Flo chat: your message in a soft bubble, Flo's reply without one under a single Flo line, with Copy and thumbs on hover and a shimmering line while Flo works.
Flo approval
The changes Flo proposed in one turn, for you to approve or deny together: N changes for you, Deny and the green Approve, the rows, then the outcome with Undo.
Plan card
One approval for a big change: an import from the member's files, or a list of target companies. Every row shows before anything is written; the member leaves rows out, approves once, and can undo the lot for 14 days.
Proposed change row
A change Flo proposed, waiting for the member. The same row everywhere it shows: Today, a record's Next, the Inbox rail, a chat and Tasks › To review. Nothing applies until someone approves it.
Question card
Flo asks you to choose before it carries on. Each answer, your own words or Skip go back to Flo as your next message.
Typed object card
What Flo shows in a chat besides words: a table, a pick list, what it changed, a draft. One card per object type, through loading, ready and acted on. A card never moves the screen.