The Taskxio design system
One source of truth for every token and component that powers Taskxio — the same foundations, primitives and patterns used across the entire product.
Color
The Taskxio palette — a violet-forward brand system with warm accents, a calm neutral ramp and clear semantic states. Click any swatch to copy its hex.
Brand
Surfaces
Text & Borders
Semantic
Gradients
Typography
Set in Open Sans. Display sizes scale fluidly with the viewport; body copy stays a comfortable 18px. Tight tracking on large headings keeps them crisp.
Almost before we knew it
Almost before we knew it
Almost before we knew it
Almost before we knew it
Almost before we knew it
Almost before we knew it
The quick brown fox jumps over the lazy dog. Body copy is set at 18px with a 1.6 line-height for effortless reading across long-form content and dense dashboards alike.
Spacing
A consistent 4px-based rhythm underpins every margin, gap and padding value — keeping vertical flow predictable from tight chips to airy section breaks.
Border radius
Rounded, friendly geometry. Small radii for inputs and tags, a generous 20px for cards, and full pills for buttons and badges.
Elevation
A soft, low-alpha shadow ramp gives the interface depth without harshness — plus one intentional brand glow for hero moments.
Badges & chips
Eyebrows label sections; status pills communicate state; gradient text highlights key words. All share the pill radius and brand palette.
Form elements
Filled inputs with a soft focus ring, plus explicit validation, disabled and selection states — the same fields used on the Contact and Request-a-Demo forms.
Looks good!
Please enter a valid email address.
Cards
The gradient-ring card is the workhorse surface — paired with icon tiles, glass and the dark aurora for hero and CTA moments.
Gradient-ring card
Hairline gradient border, soft elevation and a hover lift. .card-ring
Soft-ring card
A quieter neutral border for dense or busy contexts. --soft
Aurora CTA card
Dark radial-mesh surface for premium calls to action. .cta-aurora
Alerts
Inline feedback in four semantic tones. Each pairs a tinted surface and hairline ring with a matching icon and clear copy.
Your subscription is now active. A receipt is on its way.
Your free trial ends in 3 days. Upgrade to keep your workspace.
We couldn’t save your changes. Please try again in a moment.
Let Taskxio draft your sprint plan automatically. Available today.
Table
A clean data table with a tinted header, hairline row dividers, status pills, avatars and inline progress — for dashboards and lists.
| Project | Owner | Status | Progress |
|---|---|---|---|
| Website revamp |  Robert Fox | Active | 82% |
| Mobile app v2 |  Guy Hawkins | In review | 47% |
| Brand refresh |  Jane Cooper | Blocked | 19% |
Iconography
A consistent 24px stroke icon set at 1.9px weight with rounded caps — presented plain, and inside the gradient icon-tile used throughout the product.
