Finding Your Way Around

DevStride's interface uses colour to tell you where you are and what you are working on. Each area of the app has its own colour, the dialog you are working in glows in its colour while the page behind it dims, and anything to do with AI carries a slowly moving rainbow. This page is a tour of those cues. To change the overall light or dark palette, see Themes & Appearance.

The sidebar

The left sidebar lists every area you can reach, drawn with thin line icons. Collapse or expand it with the control at its top; collapsed, only the icons remain.

Admin areas appear only to roles that may use them. Each area has its own colour: the item you are on shows a glowing bar along its edge in that colour, and the bar glides to the next item when you move. Hovering an item previews its colour. The colours come from your theme's palette, so they shift a little between themes but stay in the same family.

Each page wears its area's colour

Open an area and its colour follows you onto the page:

• The page title and icon at the top use the area's colour and the same icon as the sidebar, at one standard height on every page.
• A soft wash of the colour sits on the frame around the content, behind the top bar and down the gutters, while the content itself stays neutral.
• Page tabs (an item's tabs, Service Desk's tabs, My Account's tabs) show the active tab's label in the page's colour over a faint wash, with a thin underline.
• Solid buttons in the header row take the colour too, and glow gently when you hover.
• In Settings and Measure Performance, each section of the side menu has its own colour; the active item is a solid block of it.

Pages that belong to no sidebar area, such as a cycle or My Account, use your theme's primary colour.

Dialogs glow, the page dims

When you open a dialog, the page behind it dims and the dialog lights up with a soft glow in its own colour: filters are purple, options green, sort teal, the quick search blue, and every other dialog has a colour of its own. Open a picker on top of a dialog and the picker takes over the glow, so the dialog underneath goes quiet until you return to it. There is never any doubt which window will take your next keystroke.

The item drawer behaves like a dialog: it dims the page, glows along its edge, and washes its header in the item's colour. Its sidebar fields have no boxes around them until you hover one, so a long drawer reads more like a document and less like a form. Explore the Workspace tours the drawer itself.

On a board, the card under your pointer or keyboard focus glows and lifts slightly, so you can see which card a key press will act on.

Item numbers carry the item's colour

Everywhere an item number appears next to its title (cards, the Map, table rows, column headers, the relationship dialog, the item picker, Gantt rows) the number is drawn in the item's own colour, so a glance tells you the type of each row. A number on its own, with no title beside it, keeps the theme's primary colour.

The AI rainbow

Anything that calls on AI is marked with a slowly moving rainbow: the round AI Assistant button and the top edge of its panel, the Generate Description bubble in the corner of the description editor, and the border of a prompt box while you type in it. If you see the rainbow, an AI model will read what you send. Where your organization has not switched the assistant on, you see none of it.

Loading and the signed-out screens

Every page load shows one loader: a small turning ball over a slowly drifting backdrop, which glides into the DevStride logo once the app is ready.

Sign in and Sign up share one screen. The sign-up link sits under the logo for everyone, and moving between the two keeps the same scene: the form fades, the panel resizes, and the other form fades in. The Privacy Policy and Terms of Use linked from the sign-up form open as dialogs over it, showing the text published on www.devstride.com, so you never leave the page. Creating Your Account walks through signing up.

The public request forms people outside your organization fill in (and DevStride's own Support form) look like any other dialog, with a coloured strip, a glowing edge and Powered by DevStride at the bottom.

Motion

Every animation on this page honours your operating system's reduce motion setting: the backdrop holds still, the AI button changes without the morph, and highlights move without gliding. The colour cues stay.