code-anything.com
Log inStart free
Portfolio

Halcyon

Halcyon is a confident, editorial portfolio built for senior product and interaction designers who lead with case studies. Its signature is a sticky left-rail index — name, role, availability, and a numbered "01 / 02 / 03" section list that highlights the active section as you scroll — set beside a wide content column of large, alternating case-study rows. Each project pairs a real photograph with a title, role, year and a row of outcome metrics, wrapped in generous whitespace, hairline rules and a refined serif-and-sans type hierarchy. A quiet halcyon-teal accent and a warm clay numbering motif thread an intro statement, selected work, a capabilities grid, an about block with portrait and testimonial, and a spare contact footer.

Calm, editorial and senior — a warm porcelain canvas where a sticky numbered index and big case-study rows do the talking.

halcyon-portfolio.code-anything.app
01Introduction

I design calm, considered software for teams doing consequential work.

For a decade I've led product and interaction design across fintech, healthcare and creative tools — the kind of products where clarity is not a nicety but the whole job. I work close to engineering, prototype in real code, and treat restraint as a feature.

10 yrs
Designing products
40+
Shipped features
4
Design systems built
02Selected Work

Four case studies, close-up.

Financial analytics dashboard on a laptop screen
Fintech · end-to-end product

Continuum

Rebuilt the core money-movement flow for a business banking platform — reducing a nine-step transfer down to three, and turning a spreadsheet-shaped ledger into a calm, glanceable timeline that a founder can trust at 6am.

Role
Lead Product Designer
Year
2025
+38%
Activation
−24%
Support tickets
3 wk
To ship
Read the case study
Mobile app interface design mockups laid out on a surface
Mobile · research & IA

Fieldnote

A field-research app for ecologists that had to work with cold hands and no signal. I led the offline-first interaction model and a gesture system tuned for gloves and glare, then prototyped it in the field over three seasons.

Role
Design Lead
Year
2024
2.1×
Daily actives
+19%
Week-4 retention
0ms
Offline latency
Read the case study
Designer sketching interface wireframes on paper
Care coordination · design systems

Northwind Health

Unified four legacy tools into a single care-team workspace for a hospital network. I built the accessible component library and the shift-handoff pattern that clinicians now rely on across 1,400 beds.

Role
Staff Product Designer
Year
2024
−41%
Task time
+22
Clinician NPS
AA
WCAG baseline
Read the case study
Analytics and product metrics on a laptop screen
Collaboration · 0→1

Cadence

Shaped a real-time tool for songwriters to draft together across timezones. I owned the interaction model for the shared timeline and multiplayer cursors, and design-engineered the first working prototype in React.

Role
Principal Designer
Year
2023
91%
Onboarding done
4.8
App Store
11
Countries live
Read the case study
03Capabilities

A full stack of design, end to end.

Product strategy

  • Problem framing
  • Roadmap shaping
  • North-star & metrics

Interaction design

  • Flows & IA
  • Motion & microcopy
  • Complex state

Design systems

  • Token architecture
  • Accessible components
  • Governance

Research

  • Discovery interviews
  • Usability testing
  • Field studies

Prototyping

  • High-fidelity flows
  • Motion studies
  • Concept validation

Design engineering

  • React / TypeScript
  • Figma → code
  • Prototype in prod
04About
Portrait of Nora Vance

I started in editorial design, which is where I learned that hierarchy is empathy — that where you put a thing tells someone what matters.

These days I lead design for products that carry real weight: payments people can't afford to fumble, clinical tools used on the worst day of someone's life. I partner tightly with engineering and research, prototype in code so the details survive the handoff, and I'd rather remove a screen than add one.

Outside of work you'll find me letterpress printing, sea swimming off the Lisbon coast, and mentoring designers through their first staff-level jump.

Nora is the rare designer who makes the whole team sharper. She held the standard on the smallest interaction and never lost the shape of the larger bet.
Marcus Adeyemi
Marcus Adeyemi
VP Product, Continuum
05Contact

Let's make something worth using.

I take on a small number of engagements each year — product leadership, design systems, or a focused 0→1 sprint. Tell me what you're building.

nora@halcyon.studio
© 2026 Nora Vance · Halcyon Studio

Design rules

The system, applied to any site

  • Anchor the whole page on a sticky left-rail index — name, role, availability and a numbered "01–05" section list whose active entry highlights as the reader scrolls — beside a single wide content column.
  • Structure the work as big, alternating case-study rows: a large real photograph on one side, and title, discipline, role, year and a row of outcome metrics on the other, flipping sides each project.
  • Keep the palette warm and quiet — a porcelain canvas with deep-ink text, a calm halcyon-teal accent for active states and links, and a single warm-clay accent reserved for the "01 / 02 / 03" numbering motif.
  • Pair a refined display serif (Newsreader) for statements and project titles with a crisp sans (Inter) for body and a system monospace for eyebrows, numerals and labels.
  • Carry meaning with whitespace and hairline 1px rules rather than boxes or heavy shadows; let large type and generous spacing signal seniority.
  • Write real, specific copy — plausible project names, roles and measurable outcomes — and degrade the sticky rail gracefully so it stacks above the content on narrow screens.

Ships with

Sticky left-rail index (name, role, availability, numbered active-section list)Intro / statement hero with headline statsSelected work — alternating case-study rows with metricsCapabilities gridAbout block with portrait and testimonialContact footer with email + socials

Design tokens

Palette

bg
surface
text
muted
accent
accent2
border

Headings

Newsreader

Body

Inter

Radius

8px

Explore palettes

More from the library

AuroraMarketing
Warm ArtisanMarketing
Sharp FadeBooking
CockpitDashboard

Make it yours in minutes.

Start from this template and describe your tweaks — content, sections, colours. The backend and deploy are handled.