Color
Anchored on Shyft blue
#329af0 and Shyft charcoal #212529. Brights are reserved for data viz, category tags, and per-app accents in the app switcher — never primary UI chrome.Primary scales
BluePrimary brand. Use 500 for buttons and active states; 600 for hover; 700+ for high-contrast text on tints.
25--blue-25
50--blue-50
100--blue-100
200--blue-200
300--blue-300
400--blue-400
500--blue-500
600--blue-600
700--blue-700
800--blue-800
900--blue-900
CharcoalNeutral chrome. 25 → page backgrounds. 900 → primary text. The original Shyft black is 900.
25--charcoal-25
50--charcoal-50
100--charcoal-100
200--charcoal-200
300--charcoal-300
400--charcoal-400
500--charcoal-500
600--charcoal-600
700--charcoal-700
800--charcoal-800
900--charcoal-900
Data viz / category palette
GreenSuccess, approved, healthy budget.
300--green-300
500--green-500
700--green-700
OrangeWarning, pending review, attention.
300--orange-300
500--orange-500
700--orange-700
PinkDanger, denied, destructive actions.
300--pink-300
500--pink-500
700--pink-700
PurpleCategory color. Internet & Phone.
300--purple-300
500--purple-500
700--purple-700
YellowHighlight, drafts, low-priority callout.
300--yellow-300
500--yellow-500
700--yellow-700
Semantic tokens
Always reference these in components — never the raw scale values. The semantic layer is what makes light/dark mode + per-app accents possible.
--bgcharcoal-25Page background
--bg-elev#ffffffCard / panel surfaces
--bg-subtlecharcoal-50Hover, table header, secondary surfaces
--bg-sunkencharcoal-100Recessed wells, dropzones
--bordercharcoal-100Default 1px hairlines
--border-strongcharcoal-200Inputs, buttons, focusable controls
--textcharcoal-900Primary text
--text-mutedcharcoal-600Secondary text, descriptions
--text-subtlecharcoal-500Captions, metadata, placeholders
--accentblue-500Primary action, links, focus
--accent-softblue-tintActive nav, accent badges, focus rings
--successgreen-700Approved, healthy, completed
--warnorange-500Pending, caution
--dangerpink-700Denied, destructive, error
Typography
Two faces. Sora for display moments — page titles, stat values, hero headlines. Geometric and slightly rounded, it echoes the S2 mark. Inter for everything else — buttons, body, table rows. Numbers use the JetBrains Mono tabular set so columns align without forcing equal-width layouts.
Display 40
Sora · 600
Reimbursements made effortless
Display 28
Sora · 600
Pending review queue
Title 22
Sora · 600
9 awaiting decision
Heading 17
Sora · 600
Stipend categories
Subtitle 16
Inter · 500
Submit a new stipend request
Body 14
Inter · 400
Quarterly stipend programs let employees expense wellness, learning, and home-office needs.
Label 12.5
Inter · 500
Annual budget per employee
Caption 11.5
Inter · 400
FY 2026 · resets Apr 1, 2027
Mono 13
JetBrains Mono · 500
$4,180.00 · REQ-5031 · 2026-05-08T10:14
Spacing & radii
Spacing on a 4 pt base — eight named steps cover 95% of cases. Radii follow a parallel scale so cards, buttons, and inputs nest cleanly.
Space scale
s-14pxinline icon padding
s-28pxbetween inline elements
s-312pxtight group
s-416pxbetween fields, default gap
s-520pxcard padding
s-624pxsection dividers
s-832pxpage padding
s-1248pxsection spacing
s-1664pxhero / large breathing room
Radii
r-sm
tags, kbd, tiny chrome
r-md
buttons, inputs, nav items
r-lg
category icon tiles
r-xl
cards, tables
r-2xl
modals, dialogs
r-full
pills, avatars
Elevation
Three layers. The system is mostly flat — shadows are a last resort, after color and border. Everything above shadow-2 should be temporary (popovers, modals, drag).
shadow-1
Default cards, table wraps, stat tiles
shadow-2
Hover lift, dropdowns
shadow-3
App switcher, command palette
shadow-pop
Modals, drag preview
Logo & marks
The S2 monogram is the system's primary mark — used in app chrome, favicons, and small surfaces. The SHYFT SOLUTIONS lockup is the formal corporate identity, used in marketing and on the login screen.
Clearspace & sizing
Always keep clearspace equal to the height of the “S” stem around the entire mark. Smaller, and the mark stops reading; tighter, and it competes with adjacent UI.
1x
22 / nav28 / brand block40 / login64 / heroDo's & don'ts
A few rules. They mostly come down to: respect the two-tone treatment, don't squish, don't recolor the mark to fit a context.
DO — Two-tone, original colors
Always use the mark in its native split — Shyft charcoal #212529 + Shyft blue #329af0.
DON'T — Single-color fill
Never collapse to one fill. The two-tone treatment is the brand identity, not decoration.
DO — Maintain aspect ratio
The mark is square. Always scale uniformly.
DON'T — Stretch or distort
Never stretch, skew, or rotate. Get a bigger asset slot instead.
DO — On solid surfaces
Place on solid backgrounds — white, charcoal-900, or our blues. Both tones survive.
DON'T — On busy imagery
If you must place over imagery, add a solid backplate first.
Voice & tone
Internal tools. Be useful before being friendly. Direct verbs in titles, sentence case in body, never apologize for product behavior the user didn't cause.
DO
- “Submit request”
- “9 awaiting decision”
- “Over your remaining budget”
- “Reset Apr 1, 2027”
- “Nothing here yet — when someone submits a request, it'll show up here.”
DON'T
- “Submit Your Awesome Request! ✨”
- “You have 9 pending items that need your attention”
- “Oops! That's over budget 😬”
- “Resets on April 1st, 2027 at 12:00 AM UTC”
- “No requests found. Please try a different filter.”
Inputs
38 px tall (32 px in compact). Same radius as buttons. Focus uses a 3-px ring at the accent hue / 22% opacity — never thicker.
$
Radio cards
Segmented control
Badges & tags
Pills carry one piece of state — never two. Tags are softer, used for category and metadata.
Status pills
PendingApprovedCompletedDenied
Category tags (full palette)
📚 Learning🏋️ Wellness🖥️ Equipment📡 Internet🧠 Mental Health🤝 Team
Neutral tags
REQ-5031TaxableNon-tax receipt.pdf
Stat tiles
The hero number reads in Sora; supporting numbers stay in mono. Use deltas sparingly and only when comparison is requested.
Pending review
9
Reimbursed YTD
$28,510
Days until reset
324
Tables
Header is 11.5 px, all-caps, sticky. Rows are 48 px in comfortable mode, 40 px in compact. Numbers right-aligned, in JetBrains Mono.
| Employee | Category | Description | Amount | Status |
|---|---|---|---|---|
MP Maya Patel REQ-5031 | 🏋️ Wellness | $349.00 | Pending | |
JC Jordan Chen REQ-5030 | 📚 Learning | $299.00 | Approved | |
RP Riley Park REQ-5029 | 🖥️ Equipment | $420.00 | Pending |
Cards & tiles
Three card types. Stat card for single metrics (above). Content card for grouped content with a header. Action card for items in a grid.
Content card
With header, body, and actions
Card body content goes here. The header is sticky inside scrollable cards; the body uses 20 px padding by default.
Wellness & Fitness
$600 annual
Gym, classes, meditation apps
40%
Modals
Use sparingly. Modals are for confirmations, single-task forms, and content that doesn't deserve its own page. The footer is on a subtle background to anchor the primary action.
Empty states
Center content, hint the next action, never apologize. Icon → title → one sentence → action.
No pending requests
When someone submits a request, it'll show up here.
Nothing matches
Try clearing the filter or expanding the date range.
App shell
Every internal app uses the same shell — fixed left sidebar with the S2 mark, app switcher, and nav; sticky topbar for breadcrumbs and global actions. The shell is shared. The content is yours.
Page header
Title in Sora, subtitle in Inter muted, primary action right-aligned. Title and primary action share a baseline.
My requests
12 requests this year — track approvals and payout status here.
Login screen
A split layout — brand on the left in dark, sign-in on the right in light. The only place the full corporate lockup appears inside a product surface.