Skip to main content

​
Sparki Settings Page Redesign — Business Learnings

​
Context

The Sparki settings page (my.sparki.tools/dashboard/settings) is the primary account management surface for all Sparki users. It handles profile editing, API key management, and third-party integrations. Despite being a high-traffic authenticated page, its visual design diverges significantly from the landing page and broader Sparki brand — undermining user trust and perceived product quality.

​
What was found

​
1. Brand disconnection between marketing and product

The landing page establishes Sparki as a premium, dark-themed CI/CD platform with a distinctive gold (#F4B400) accent colour, deep black backgrounds (#0F0F0F), and elevated card surfaces (#222222). The settings page ignores this entirely — it uses a generic light-mode design with slate/gray colours and blue (#2563EB) accents. A user transitioning from the landing page to the dashboard experiences a jarring brand identity shift. Business impact: Brand inconsistency signals an immature product. Users subconsciously associate visual polish with reliability — critical for a CI/CD tool that handles production deployments.

​
2. Two competing settings implementations

There are two separate settings page implementations:
  • /dashboard/settings/page.tsx — Tab-based settings with profile, API keys, and integrations (the page visible in the screenshot)
  • /settings/ — A separate sidebar-based settings layout with user, workspace, security, and integrations pages
This creates maintenance burden and user confusion if both are reachable.

​
3. Design system components exist but are underused

Sparki has a well-structured atomic design system (atoms/, molecules/, organisms/) and landing-specific UI components (LandingCard, LandingButton, GradientText, Badge). The settings page partially uses shared atoms (Card, Button, Input) but doesn’t leverage the design token system or the elevated visual language of the landing components.

​
4. Missing premium polish expected from top-tier SaaS

Compared to best-in-class SaaS settings pages (Vercel, Linear, Stripe), the current implementation lacks:
  • Subtle background gradients or textures
  • Consistent border treatments (cards use mixed border strategies)
  • Hover/focus micro-interactions
  • Section transitions and visual hierarchy through spacing
  • Proper dark-mode-first design (the landing page is dark-first; settings is light-first)

​
Impact

  • User trust: Settings pages are where users manage credentials and billing — visual quality directly affects perceived security.
  • Brand equity: The landing page investment is diluted when the product interior doesn’t match.
  • Developer velocity: Two competing settings implementations mean double the maintenance cost for any settings-related feature.

​
Recommendations

  1. Consolidate to one settings implementation — Choose the sidebar layout (/settings/) as the canonical one; it has better information architecture.
  2. Apply the dark theme as default — Match the landing page’s dark palette (#0F0F0F background, #222222 cards, #F4B400 gold accents).
  3. Use design tokens consistently — All colours, spacing, and typography should reference the centralized token system.
  4. Elevate card surfaces — Use the LandingCard patterns: subtle borders (white/5), elevated variants for key sections, gold highlights for active states.
  5. Add micro-interactions — Hover lifts on cards, smooth transitions on tab switches, subtle gold glow on primary actions.
  6. Audit all authenticated pages — The settings page is likely not the only one with brand inconsistency; a full dashboard audit is warranted.

​
Action Items

  • Redesign settings page to match Sparki dark theme and brand language
  • Deprecate duplicate /dashboard/settings/page.tsx in favour of /settings/ layout
  • Create dashboard-specific card variant that bridges landing LandingCard and app Card patterns
  • Full authenticated-surface brand audit across dashboard, projects, pipelines, builds, and deployments pages