Axon

01Colors

• Canvas white#FFFFFFBackground · 58.9% · WhiteMain content area, top bar, cards, inputs, active nav pill and active tab.
• Sidebar mist#F5F5F5Surface · WhiteSidebar and the segmented-tab track. The dashed Add connector card is a lighter #F9F9F9.
• Ink#111114Text · BlackPage title, card names, active tab and nav label, sidebar count badges, the Axon wordmark.
• Graphite gray#686868Muted text · GraySubhead, account lines, usage metrics. A lighter ladder follows: nav labels #858585, group labels #A1A1A1, timestamps and breadcrumb parent #AFAFAF.
• Hairline#EDEDEDBorder · 40.7% · WhiteCard borders and input outlines (#E6E6E6); in-card dividers are #E9E9E9; the dashed add-card border is #E1E1E2. The presentation backdrop is the same #EDEDED.
• Axon blue#1B8CE8CTA · 0.4% · BlueBottom stop of a vertical gradient from #4AACFC on the Add connector and Reconnect buttons and the logo tile. Flat versions mark the active nav icon (#1886DE), the add plus and the "Why did this happen?" link (#4A8EE6).
• Connected green#17976AStatus · Green"Connected" chip text and check-circle icon on a pale mint tint (about #F3FCF8).
• Expired red#D63A42Status · Red"Expired" chip text and alert-circle icon on #FFF1F1. The failing Gmail card also gets a pink border, #EEC4C8.
• Rate-limit amber#C99208Status · Yellow"Rate limited" chip (clock icon) on #FFFBF1. The alert banner uses the same family: cream #FFFBF0 fill with a #EDDFB2 border.
• Paused slate#626671Status · Gray"Paused" chip (pause-bars icon) on #F7F8FA. The same cool slate sets the inactive tab labels and the current breadcrumb.

Cool, almost achromatic chrome: white canvas, #F5F5F5 sidebar, #EDEDED hairlines, #111114 ink and a ladder of four grays for secondary text. One brand blue (#1B8CE8, with a light-top gradient from #4AACFC) is rationed to the logo, the two primary buttons, the active nav icon, the add plus and one link. Each of the four status hues comes as a pair of saturated text on a roughly 5% tint of the same hue: green Connected, red Expired, amber Rate limited, slate Paused. Most of the remaining color comes from the third-party logos (Gmail red, Slack aubergine, NetSuite navy, Salesforce cyan, HubSpot orange, Zendesk dark teal, Stripe violet, QuickBooks green, Sheets green, Drive multicolor, Jira blue), and the gray chrome leaves room for them. The palette is mono in structure and multi-hue only where it signals something. Small inconsistency: some secondary text is a cool slate (#5A5D66 breadcrumb, #686D78 inactive tabs) while the rest is pure neutral gray. The #EDEDED backdrop around the window is presentation, not UI.

02Typography

Specimens use a stand-in face of the same class and weight.

Pairing

One family at effectively one weight. Inter regular sets the title, body, buttons, chips and numbers. Only the wordmark and two phrases in the banner step up a weight. Color does the differentiating (ink, four grays, four status hues, one blue), not size or weight. The result is coherent and quiet, but the page title has almost no presence. The double-story a without a tail and the spurred G point to Inter; SF Pro Text is the nearest lookalike at this resolution.

Hierarchy

Very flat. The page title is about 18px against roughly 15px body, both at 400. Card names and account lines are the same size and differ only in ink versus gray. Tertiary information recedes through lighter grays (timestamps #AFAFAF, group labels #A1A1A1). Lines are short: card text stays under 30 characters, and only the subhead and banner run to about 80. The alert banner, with its bold fragments and blue button, outranks the page title.

03Layout

One app window floats on a flat #EDEDED backdrop as a white panel with a radius of about 16px and a soft, wide drop shadow. There is no browser chrome. Inside is a two-pane shell: a #F5F5F5 sidebar of about 320px (logo row plus three nav groups) and a white main area. The logo row and the top bar share one height and one hairline, so the header reads as a single band across both panes. The main column stacks a breadcrumb top bar, a page header (title and subhead left, two buttons right), a full-width alert banner, a toolbar row (segmented tabs left, search and category filter right) and a 4-column card grid.

Alignment

left

Density

balanced

Width

framed

Corners

rounded

Depth

hairline

Grid

The sidebar takes about 17% of the window and the main column the rest. The card grid is 4 equal columns × 3 rows: 11 connector cards plus 1 dashed add card, with gutters of about 22px. Each card is a 3-row mini layout: identity (logo tile, name, account, more menu), status row (chip left, time right), and footer metrics under a divider.

Spacing

About 24px of content padding and about 36px between the page header, banner, toolbar and grid. Cards have about 20px of inner padding. Sidebar rows are about 42px tall, with about 20px gaps and hairline dividers between groups. Chips are about 28px tall and buttons about 40px. Everything sits on a steady 4/8px rhythm.

04Sections 10

1. 01
   Sidebar: brand

   Blue gradient app tile and the "Axon" wordmark in a header cell that matches the top bar height, with a hairline below that continues across the main pane.

2. 02
   Sidebar: Workspace group

   Overview, Workflows, Templates (count 180), Workflow Builder, AI Configuration, Test Run, Review Queue, Analytics. Gray outline icons with gray labels and no backgrounds.

3. 03
   Sidebar: Operations group

   Runs & Logs, Exceptions, Connectors (active: white raised pill, ink label, blue link icon), Data Sources. A hairline separates it from the groups above and below.

4. 04
   Sidebar: Administration group

   Team & Permissions, Notifications (count 78), Usage & Billing, Audit Log, System Settings.

5. 05
   Top bar

   Breadcrumb on the left (grid icon, muted "Operations", chevron, darker "Connectors"). On the right: a wide global search input ("Search...."), a bordered Help button and an illustrated avatar in a bordered tile.

6. 06
   Page header

   Title "Connectors" with the gray status subhead below. Right-aligned: an outlined "Request an app" button with a chat-bubble icon and the blue gradient "Add connector" button with a plus.

7. 07
   Alert banner

   Full-width cream strip with an amber hairline: Gmail logo tile, then "Gmail · finance@acme.com — token expired 14 min ago. 23 runs are waiting." The link "Why did this happen?" and a blue "Reconnect" button sit on the right.

8. 08
   Tabs

   Segmented control in a #F5F5F5 track: "Connected 12" (active white pill), "Available 140+" and "Custom API 3", each with its count in a lighter gray.

9. 09
   Filters

   Right-aligned on the same row as the tabs: a "Search apps" input with a magnifier, and an "All categories" dropdown with a layers icon and chevron.

10. 10
    Card grid

    Twelve cells: Gmail (Expired, red border), Slack, NetSuite, Salesforce, HubSpot (Rate limited), Zendesk, Stripe, QuickBooks, Google Sheets, Google Drive, Jira (Paused), then a dashed "Add connector" card reading "140+ apps, or any REST API".

05Components 24

• Window shell

  White rounded panel (about 16px radius) with a soft, wide shadow on a flat gray backdrop. No browser chrome or window dots.

• Brand mark

  About 36px app tile with a blue vertical gradient (#4AACFC to #1A8CE9) and a white geometric A built from two strokes, followed by the "Axon" wordmark in ink.

• Sidebar nav item

  About 16px gray outline icon and gray label (#858585) on #F5F5F5, with no hover background shown.

• Active nav item

  White pill (about 8px radius) with a hairline border and a faint shadow. The label turns ink and the icon turns blue.

• Sidebar group label

  Sentence-case light gray (#A1A1A1) text, not uppercase. Groups are separated by full-width hairlines.

• Count badge

  Small white rounded box (about 6px radius) with a hairline border and ink numerals ("180", "78"), right-aligned in the nav row.

• Breadcrumb

  Four-square grid icon, muted parent "Operations", chevron, then the current page in a darker cool gray.

• Search input

  White field with a hairline border, about 10px radius, magnifier icon and light-gray placeholder. A global version sits in the top bar and a scoped "Search apps" version in the toolbar.

• Ghost button

  "Help": white with a hairline border, gray text, same height as the search field.

• Avatar

  Illustrated black-and-white portrait inside a bordered rounded-square tile, top right.

• Primary button

  Blue vertical gradient (#4AACFC to #1B8CE8), white label with a leading icon (plus for "Add connector", link for "Reconnect"), about 10px radius and a soft blue-gray drop shadow.

• Secondary button

  "Request an app": white with a hairline border, gray label and a chat-bubble outline icon.

• Text link

  "Why did this happen?" in a lighter blue (#4A8EE6), no underline, placed directly before the fix button.

• Alert banner

  Cream #FFFBF0 fill, amber hairline #EDDFB2 and about 12px radius. It holds a brand logo tile, one sentence with bold fragments, and a link plus a primary button on the right.

• Segmented tabs

  #F5F5F5 track with an about 10px radius. The active segment is a white raised pill with a hairline. Each label has its count in lighter gray after it.

• Category dropdown

  "All categories" in a bordered white field with a stacked-layers icon on the left and a chevron on the right.

• Connector card

  White, 1px #EDEDED border, about 12px radius and about 20px padding. Logo tile, name in ink, account or workspace in gray, three-dot menu, status row, hairline divider, then a footer with two metrics.

• Error card variant

  The Expired Gmail card swaps its border for a red-tinted #EEC4C8, so the failing item stands out from across the grid.

• Logo tile

  About 40px white rounded square with a hairline border and soft shadow, holding a full-color brand mark. The repeated tile makes mismatched logos read as one set.

• Status chip

  Tinted fill, about 6px radius, 14px outline icon and a label in the status hue: Connected (check circle, green on mint), Expired (alert circle, red on pink), Rate limited (clock, amber on cream), Paused (pause bars, slate on cool gray).

• Relative timestamp

  Light-gray, right-aligned on the status row: "just now", "14 min ago", "1 h ago", "2 d ago".

• Usage metrics

  Icon and gray text pairs: a workflow-hierarchy icon with "3 workflows" and a line-chart-in-square icon with "4.8k calls".

• More menu

  Horizontal three-dot button in gray, top right of every card.

• Dashed add card

  #F9F9F9 fill with a dashed #E1E1E2 border. A centered white tile holds a blue plus, with "Add connector" in ink and "140+ apps, or any REST API" in gray below.

06Graphics 6/14

• Dashboard / product UI

  Yes. One full app screen: the Connectors page of an automation platform, with sidebar, top bar, page header, alert banner, tabs, filters and a 4×3 grid of integration cards.

• Illustration

  Only the user avatar: a black-and-white, hand-drawn portrait of a man with a cap and beard in the top bar.

• Icons

  Outline icons throughout, with rounded caps and joins and about a 1.5px stroke at 16–18px. They are consistent with Hugeicons Stroke Rounded: grid, workflow hierarchy, note, AI-in-square, folder search, chart-in-square, alert triangle, link, database, user group, bell, card, gear, chat bubble, layers, plus, chevrons and more-dots. Chips add alert-circle, check-circle, clock and pause-bars glyphs. Icons are gray by default; blue appears only on the active nav item, the add plus and the button icons.

• Logo cloud

  Eleven full-color third-party brand marks serve as connector icons, each in an identical white rounded tile: Gmail, Slack, NetSuite, Salesforce, HubSpot, Zendesk, Stripe, QuickBooks, Google Sheets, Google Drive and Jira. Gmail repeats in the alert banner. The product mark is a blue gradient tile with a white geometric A.

• Avatars / people

  One avatar in the top bar: an illustrated monochrome portrait in a bordered rounded-square tile.

• Gradients

  A subtle vertical gradient (#4AACFC to #1A8CE9) on the Axon logo tile and both blue buttons, which also carry a soft blue-gray shadow. Everything else is flat.

Not usedCharts & data viz · Photography · 3D renders · Texture, grain or pixel · Grid lines / patterns · Device or browser frames · Cursors / pointers · Maps

07Motion

SubtleFrom stills; motion is inferred from cues

• implied
  Segmented tab switch

  The white active pill on a gray track is the usual setup for a sliding indicator between Connected, Available and Custom API.

• implied
  Hover and active states

  The active nav item is a raised white pill with a blue icon, which implies matching hover states for the other rows, the cards and the dashed add card.

• implied
  More-menu dropdown

  The three-dot button on every card implies a popover menu (rename, pause, disconnect).

• implied
  Live status refresh

  Relative times ("just now", "1 min ago") and the banner count of waiting runs imply data that updates in place.

• implied
  Reconnect flow

  The Reconnect button implies an OAuth popup, a loading state, and the chip changing from Expired to Connected as the banner dismisses.

08Copy

Connectors

12 connected apps · 1 needs attention · credentials encrypted with your KMS key

Tone

Plain, operational and specific: counts, account names and relative times. The banner gives cause, age, impact and fix in one line ("token expired 14 min ago. 23 runs are waiting."), and the subhead adds a security reassurance (KMS key).

09Style

A calm, trustworthy admin tool: quiet gray chrome lets the brand logos and four status colors do the talking, and the one problem on the page is impossible to miss.

Accessibility

Contrast is the main weakness. Timestamps and the breadcrumb parent (#AFAFAF on white, about 2.2:1), sidebar group labels (#A1A1A1 on #F5F5F5, about 2.4:1) and even the nav labels (#858585 on #F5F5F5, about 3.4:1) all fall below 4.5:1. The amber "Rate limited" text (about 2.7:1 on its tint) and the green "Connected" text (about 3.6:1) are weak at chip size, and the red "Expired" is borderline at about 4.2:1. White on the blue gradient button is about 3.5:1 at the bottom and lower at the lighter top. Status is never color-only: every chip pairs an icon with a word, and the banner states the problem in text. Type is small but not tiny (about 14–15px). No focus states are shown.

10Takeaways