Case Study · Featured Project
Halcyon Platform
A minimal, dark blue theme for VS Code, Sublime Text, Atom, iTerm, and more. Available on Visual Studio Marketplace, Package Control, Atom Package Manager, and npm.
Company
Halcyon Inc.
Live Site
halcyon.dev ↗Timeline
14 Weeks
Completed by
March, 2026
Category
Service
Status
Discontinued
Overview
About the Project
Halcyon needed a complete product overhaul. Their existing platform was a patchwork of legacy tools with no cohesive design language, an inconsistent codebase, and zero user retention mechanics. We embedded as a full-stack product team — UX research, UI design, frontend & backend engineering, and a blockchain-based rewards layer.
“Working with Saif’s team felt like having a co-founder who could build anything. They didn’t just execute specs — they shaped the product vision.”
— Alex Chen, CTO · Halcyon Inc.
Scope Breakdown
Tech Stack
Discovery
Requirement Analysis
Functional
- OAuth 2.0 + MFA auth
- Real-time dashboard
- Subscription system
- Plugin marketplace
- On-chain token rewards
Non-Functional
- <1.5s TTI target
- 99.9% uptime SLA
- WCAG 2.1 AA
- Horizontal AWS scaling
- GDPR + SOC 2
Design Requirements
- Dark-first language
- Developer aesthetic
- Unified component system
- Fully responsive
- Micro-interaction layer
Stakeholder / Persona Matrix
| Persona | Goal | Pain Point | Priority |
|---|---|---|---|
| Senior Dev | Fast plugin setup | Fragmented tools | High |
| Team Lead | Analytics & billing | No visibility | Medium |
Problem Space
Challenges
Legacy Architecture Lock-in
Migrating a jQuery/PHP codebase to Next.js without breaking production — like performing surgery on a live patient.
Legacy Architecture Lock-in
Migrating a jQuery/PHP codebase to Next.js without breaking production — like performing surgery on a live patient.
Approach
Our Solutions
Strangler Fig Migration Pattern
Wrapped legacy endpoints behind a new API gateway, migrating routes one-by-one with zero downtime via feature flags.
Atomic Design System from Day 1
Figma + Tailwind token sync via a Node.js script reading the Figma API — design and code always in perfect sync.
Abstracted “Magic Wallet” Web3 Layer
Custodial wallet abstraction for regular users, full wallet connect for power users. Gas fees subsidised via meta-transaction relayer.
Agile Sprints with Hard-Deadline Buffer
2-week sprints with a mandatory 2-week QA buffer before launch. Saved us when a key API auth scheme changed in week 11.
Design System
Style Guide
▹ Typography
Teko Bold
Teko · 600/700 · Headlines
DM Sans Regular
The quick brown fox jumps over the lazy dog.
DM Sans · 300–600
Roboto Mono 500
const x = () => ship();
0x1a2b3c4d
Roboto Mono · 300–600
▹ Color System
rgba(2, 12, 27, 1)
Hex — #020C1B
rgba(227, 182, 0, 1)
Hex — #E3B600
rgba(204, 214, 246, 1)
Hex — #CCD6F6
▹ Brand / Logo Guideline
Don’ts
- Don’t stretch
- Don’t change accent
- Min 120px wide
halcyon
Primary — Dark BG
halcyon
Reversed — Light BG
▹ Layout Standard
Grid System
- 12-col · 24px gutter
- Max width: 1280px
- Page padding: 24px / 48px
Spacing (8px base)
▹ Milestone
XP Points
Earned per action
Levels 1–50
Earned per action
Outcomes
Results & Impact
3x
User Engagement
98
Lighthouse Score
How We Got There
Process & Timeline
Week 1–2
Discovery & Research
Stakeholder interviews, user testing, competitive analysis, technical audit.
Week 3–4
IA & Wireframes
Information architecture, user flows, lo-fi wireframes.
Key Deliverables
- Figma design system (220+ components)
- Next.js 14 frontend application
- Node.js REST API + GraphQL gateway
- ERC-20 / ERC-5192 smart contracts
- WordPress headless CMS integration
- Full brand & style guide docs
- AWS infra + CI/CD pipelines
What's next?
Got a project in mind?
Whether you need a product built from scratch or want to level up an existing one — let's make it happen.