Foundations

The primitive tokens, scales, and shared language that every Halcyon component is built from.

Colors

Cool teal-biased neutral ramp, blue brand ramp, and a dedicated teal accent. Dark mode is the default; light mode is derived.

Neutral
50
100
200
300
400
500
600
700
800
900
950
Brand
50
100
200
300
400
500
600
700
800
900
Teal
100
300
500
700
900
background
{neutral.900}
surface1
{neutral.800}
surface2
{neutral.700}
surface3
{neutral.600}
text1
{neutral.50}
text2
{neutral.200}
text3
{neutral.300}
text4
{neutral.400}
accent
{brand.400}
accent-subtle
{brand.900}
success
{green.500}
error
{red.500}
TokenPrimitiveHex (dark)Role
--background{neutral.900}#0A1019Page background
--surface1{neutral.800}#121A23Cards, elevated containers
--surface2{neutral.700}#1B242EGrouped backgrounds
--surface3{neutral.600}#29333DInset areas
--text1{neutral.50}#F2F5F8Primary text
--text2{neutral.200}#C3CCD8Secondary text
--text3{neutral.300}#8E9AA9Tertiary text, placeholders
--accent{brand.400}#4680F5Primary accent
--accent-subtle{brand.900}#07162FTinted background
--teal{teal.500}#2FA7A3Secondary accent
--success{green.500}#5CB13EPositive states
--warning{amber.500}#E5A73BCaution states
--error{red.500}#E5484DDestructive states

Typography

Display and headings in Manrope (geometric sans-serif). Body in Inter. Code and data in JetBrains Mono.

Trace how decisions propagate
Manrope 500 · 64/1.05
Decision graph
Manrope 600 · 40/1.1
Impact analysis
Manrope 600 · 28/1.2
Change propagation
Manrope 600 · 20/1.3
Where a change started, what it touched, and where it settled. Halcyon traces the full dependency graph across your architecture.
Inter 400 · 15/1.5
Secondary context for engineering decisions and module dependencies.
Inter 400 · 13/1.45
3 changes propagated · 12 modules impacted
Inter 500 · 11/1.4
Decision Trace
Inter 600 · 12/1.3 · 0.04em
git log --graph --oneline
JetBrains Mono 400 · 13/1.5
TokenFontSizeLine heightWeight
displayManrope64px1.05500
h1Manrope40px1.1600
h2Manrope28px1.2600
h3Manrope20px1.3600
bodyInter15px1.5400
body-smInter13px1.45400
captionInter11px1.4500
labelInter12px1.3600
monoJetBrains Mono13px1.5400

Radii

Structured radii scale. Buttons use 8px (control), cards use 12px (component), modals use 20px (container). Only tags and badges get the full pill (999px).

Element4px
Control8px
Component12px
Container20px
Pill999px
TokenValueUse
--r-element4pxSmall controls, checkboxes, list items
--r-control8pxButtons, inputs, dropdown triggers
--r-component12pxCards, panels, canvases
--r-container20pxModals, sheets, popovers
--r-pill999pxTags, badges, nav pills

Elevation

Deep shadows for dark-mode depth. In light mode, shadows lighten automatically. Three levels from subtle card lift to full modal overlay, plus an accent glow.

Level 1
Card hover
Level 2
Menu / popover
Level 3
Modal / sheet
Accent
Primary CTA hover
LevelDark modeUse
0noneDefault card state (flat)
10 2px 8px rgba(0,0,0,0.3)Card hover, sticky nav
20 4px 16px rgba(0,0,0,0.4)Menus, popovers
30 8px 32px rgba(0,0,0,0.5)Modals, sheets
accent0 4px 16px rgba(70,128,245,0.25)Primary CTA hover

Spacing

8px base scale with increments for fine control. Used consistently across padding, gap, and margin throughout the system.

--space-2xs
2px
--space-xs
4px
--space-sm
8px
--space-sm+
12px
--space-md
16px
--space-md+
20px
--space-lg
24px
--space-xl
32px
--space-2xl
48px
--space-3xl
64px
--space-4xl
96px
TokenValueUse
--space-2xs2pxHairline gaps, icon nudges
--space-xs4pxTight padding, inline spacing
--space-sm8pxBase unit, small gaps
--space-md12pxControl padding, form gaps
--space-lg16pxComponent padding, list gaps
--space-xl24pxSection padding, card padding
--space-2xl32pxGroup spacing
--space-3xl48pxSection margins
--space-4xl96pxPage-level spacing

Iconography

Phosphor regular as the primary icon kit. Clean, geometric outlines that match Halcyon's structured aesthetic.

Icon kit Halcyon uses Phosphor Icons (regular weight) as its icon set. The geometric, clean lines align well with Manrope headings and the structured radius scale.
Sample glyphs (24px)
house
search
gear
bell
user
heart
star
folder
chat
calendar
lightning
check
Sizes
16px inline 20px button 24px navigation
PropertyValue
kitPhosphor
weightregular (1.5px stroke)
CDNunpkg.com/@phosphor-icons/web@2/.../regular/style.css
class prefixph ph-
default colorinherits from var(--text1)
sizes16px inline, 20px button, 24px nav

Actions

Interactive controls that trigger commands or navigate. Buttons, toggles, segmented controls, and dropdown menus.

Button

Primary actions, secondary options, ghost text buttons, and destructive actions in three sizes.

Primary
Secondary
Ghost
Destructive
Default
Hover
Focus
Active
Disabled
Loading
Default
Hover
Focus
Active
Disabled
Loading
Default
Hover
Focus
Active
Disabled
Default
Hover
Focus
Active
Disabled
Loading
Small
Medium
Large
PropertyValue
backgroundvar(--accent) #4680F5
border-radiusvar(--r-control) 8px
font-size15px
padding11px 20px
font-weight600

Icon Button

Compact square buttons for toolbar actions and icon-only controls in three variants and sizes.

Primary / SM
Primary / MD
Primary / LG
Secondary / SM
Secondary / MD
Secondary / LG
Ghost / SM
Ghost / MD
Ghost / LG
Default
Hover
Focus
Disabled
SizeDimensionsIcon size
sm32 x 32px16px
md40 x 40px20px
lg48 x 48px24px

Toggle Button

Two-state buttons for switching between views or modes, with on/off visual feedback.

Off
Off / Hover
On
On / Hover
Focus
Disabled
StateBackgroundBorderColor
offtransparentvar(--border-visible)var(--text2)
off / hovertransparentvar(--text3)var(--text1)
onvar(--accent-subtle)var(--accent)var(--accent)
on / hoverrgba(70,128,245,0.15)var(--accent)var(--accent)
disabledtransparentvar(--border-visible)var(--text2) 40%

Segmented Control

Mutually exclusive option group for switching between views or time ranges.

PropertyValue
backgroundvar(--surface1)
border1px solid var(--border)
border-radiusvar(--r-control) 8px
padding4px
item font-size13px
item padding6px 16px
selected backgroundvar(--accent) #4680F5

Inputs

Form controls for collecting user data. Text fields, selects, checkboxes, radios, switches, sliders, and date pickers.

Text Input

Single-line text fields with label, placeholder, validation, and icon variants.

Default
Email address
Hover
Email address
Focus
user@example.com
Filled
user@example.com
Disabled
Email address
Read-only
user@example.com
Error
invalid-email
Invalid email address
Success
user@example.com
Email verified
With Icon
Search...
With Clear
user@example.com
PropertyValue
backgroundvar(--surface2)
border1.5px solid var(--border)
border-radiusvar(--r-control) 8px
height40px
padding0 16px
font-size14px
focus bordervar(--accent) #4680F5
focus ring0 0 0 3px var(--accent-subtle)

Textarea

Multi-line text input for longer content like descriptions, comments, and notes.

Default
Write a description...
Focus
The quarterly report shows a 15% increase in active users across all regions. Mobile engagement continues to outpace desktop.
Disabled
Write a description...
Error
Too short
PropertyValue
backgroundvar(--surface2)
border1.5px solid var(--border)
border-radiusvar(--r-control) 8px
padding12px 16px
min-height96px
font-size14px

Select

Dropdown selection control for choosing one option from a list, with open and closed states.

Default
Select a country...
Hover
Select a country...
Focus
Select a country...
Disabled
Select a country...
Error
Select a country...
Open
Select a country...
Germany
France
United Kingdom
Japan
PropertyValue
backgroundvar(--surface2)
border1.5px solid var(--border)
border-radiusvar(--r-control) 8px
height40px
chevronph-caret-down, 16px, var(--text3)
open rotationrotate(180deg)

Checkbox

Binary selection controls for forms and settings, with checked, indeterminate, and group layouts.

Unchecked
Checked
Indeterminate
Hover
Focus
Disabled
Option A
Option B
Option C
PropertyValue
size18 x 18px
border1.5px solid var(--border-visible)
border-radiusvar(--r-element) 4px
checked backgroundvar(--accent) #4680F5
check icon12px #FFFFFF
label font-size14px

Radio Group

Mutually exclusive option selection with dot indicator for single-choice form fields.

Small
Medium
Large
Custom
PropertyValue
size18 x 18px
border1.5px solid var(--border-visible)
border-radius50%
selected bordervar(--accent) #4680F5
dot size8 x 8px
label font-size14px

Switch

Toggle switches for binary settings with on/off states and sliding thumb animation.

Off
Notifications
Off / Hover
Notifications
On
Notifications
On / Hover
Notifications
On / Focus
Notifications
Disabled Off
Notifications
Disabled On
Notifications
PropertyValue
track size44 x 24px
thumb size20 x 20px
off backgroundvar(--surface3)
on backgroundvar(--accent) #4680F5
thumb color#FFFFFF
border-radiusvar(--r-pill) 999px

Slider

Continuous value selection with track fill, thumb, and optional range mode with two handles.

Default (50%)
Hover
Active
Focus
Disabled
Range (25%–75%)
PropertyValue
track height4px
track backgroundvar(--surface2)
fill colorvar(--accent) #4680F5
thumb size16 x 16px
thumb border2px solid var(--accent)
thumb background#FFFFFF

Date Picker

Inline calendar for date selection with today highlight, selected state, range highlight, and navigation.

April 2026
Mo
Tu
We
Th
Fr
Sa
Su
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
PropertyValue
backgroundvar(--surface1)
border-radiusvar(--r-component) 12px
padding16px
width280px
day font-size13px
today colorvar(--accent) #4680F5
selected bgvar(--accent) #4680F5
range bgvar(--accent-subtle)

Combobox

Searchable dropdown that filters options as you type, with empty state for no results.

Closed
Search frameworks...
Open / Filtered
re
React
Remix
Redwood
No Results
xyz
No results found
PropertyValue
width280px
inputstandard cl-input (40px height)
dropdown offset4px below input
max-height200px (scrollable)
empty state13px var(--text3) centered

Data Display

Components for presenting information. Cards, avatars, badges, tags, data tables, and loading skeletons.

Card

Content containers for grouping related information with optional image, hover lift, and selection states.

Default
API Integration
Connect your services with our REST API. Full documentation available.
Hover
Dashboard
Monitor your metrics in real-time with customizable widgets.
Focus
Analytics
Deep insights into user behavior and performance trends.
Selected
Deployment
One-click deploy to production with automatic rollbacks.
Image Card
Featured Project
A comprehensive overview of project milestones and deliverables.
PropertyValue
backgroundvar(--surface1)
border-radiusvar(--r-component) 12px
padding20px
shadow (hover)var(--shadow-l2)

Avatar

User representation in three sizes with image, initials, or icon variants, plus grouped stacking.

Image SM
Image MD
Image LG
Initials SM
DM
Initials MD
DM
Initials LG
DM
Icon SM
Icon MD
Icon LG
Group
SizeDimensionsFont size
SM24px11px
MD32px13px
LG48px18px

Badge

Status indicators and labels in semantic color variants for inline metadata.

Neutral Default
Info New
Success Active
Warning Pending
Error Failed
VariantBackgroundColor
Neutralvar(--surface2)var(--text2)
Infovar(--accent-subtle)var(--accent)
Successvar(--success-bg)var(--success)
Warningvar(--warning-bg)var(--warning)
Errorvar(--error-bg)var(--error)

Tag

Categorization labels with optional remove action, accent and teal variants, and disabled state.

Default Design
Accent Frontend
Teal Backend
Removable React
Removable (X hover) React
Disabled Legacy
PropertyValue
backgroundvar(--surface2)
border-radiusvar(--r-pill) 999px
padding4px 12px
font-size13px

Data Table

Structured tabular data with sortable columns, row selection, hover highlighting, and inline badges.

 Name Status Role Last active
Sarah ChenActiveEngineer2h ago
Marcus JohnsonActiveDesigner5h ago
Aiko TanakaAwayPM1d ago
David ParkOfflineEngineer3d ago
Elena MoralesSuspendedAdmin1w ago
PropertyValue
header backgroundvar(--surface1)
row height48px
border-bottom1px solid var(--border)
hover backgroundvar(--surface1)
selected backgroundvar(--accent-subtle)

Skeleton

Loading placeholders that mimic content layout before data arrives with shimmer animation.

Text
Circle
Card
Table rows
TypeDimensions
Text line100% x 12px
Circle48px x 48px
Card280px x 160px
Table row100% x 40px

Navigation

Wayfinding components. Tabs, breadcrumbs, pagination, nav menus, and links.

Tabs

Horizontal tab navigation in underline and pill variants with active, hover, focus, and disabled states.

Underline
Pill
Focus
PropertyValue
tab padding8px 16px
font-size14px
active indicator2px solid var(--accent)
pill border-radiusvar(--r-pill)

Feedback

System responses and status indicators. Alerts, toasts, progress bars, spinners, and empty states.

Alert

Contextual banners for info, success, warning, and error messages with optional dismiss action.

New version available

A new version of the platform is ready. Update now to get the latest features.

Changes saved successfully
API rate limit approaching

You have used 85% of your monthly quota.

Connection failed

Unable to reach the server. Check your network and try again.

PropertyValue
border-radiusvar(--r-component) 12px
padding16px
icon size20px
gap12px

Toast

Transient notification messages for background events with optional action links.

Deployment started View
File uploaded successfully
Storage 90% full
Payment failed Retry
PropertyValue
backgroundvar(--surface2)
border-radiusvar(--r-component) 12px
padding12px 16px
shadowvar(--shadow-l2)

Progress

Horizontal progress bars, indeterminate loading animation, and circular SVG ring indicator.

0%
25%
50%
75%
100%
Indeterminate
Ring 67%
67%
PropertyValue
track height6px
track backgroundvar(--surface2)
fill colorvar(--accent)
border-radiusvar(--r-pill)
ring size64px, stroke-width 4

Spinner

Animated loading spinners in three sizes for inline and overlay loading states.

Small
Medium
Large
SizeDimensionsBorder width
SM16px2px
MD24px2.5px
LG36px3px

Empty State

Placeholder content for screens with no data, guiding users toward their first action.

Default
No projects yet
Create your first project to get started with Halcyon.
PropertyValue
icon size48px
title font-size18px / 600
desc font-size14px
text-aligncenter
gap12px

Overlays

Layered UI that appears above the page. Modals, popovers, tooltips, and accordions.

Popover

Floating panels anchored to trigger elements with arrow pointer and dropdown-style content.

Default
Edit profile
Preferences
Sign out
PropertyValue
backgroundvar(--surface2)
border-radiusvar(--r-component) 12px
padding4px
shadowvar(--shadow-l2)
arrow size8px

Tooltip

Small informational labels that appear on hover in four directional placements.

More info
More info
More info
More info
PropertyValue
backgroundvar(--surface3)
border-radiusvar(--r-element) 4px
padding6px 10px
font-size12px
arrow size4px

Accordion

Collapsible content sections with expand/collapse chevron, hover, and disabled header states.

Default
What is Halcyon?
Halcyon is a reasoning platform for engineering teams that lets you trace how decisions propagate across a codebase.
How does it work?
Connect your repository and Halcyon maps the dependency graph, showing you the blast radius of any change.
Is it open source?
Not yet, but we plan to open-source the core engine in Q3 2026.
PropertyValue
header padding16px 0
content padding0 0 16px 0
border-bottom1px solid var(--border)
chevron size16px
font-size15px / 600