HELIOS UI · FOUNDATIONS Color Audited website palettes and semantic roles for light and dark mode.
Overview Color Typography Icons Miscellaneous icons Effects Spacing, radius & grids Website color system Audited BoardUI colors now drive the website. Action accents, chart series and status colors have separate roles. The Figma library and its recorded token snapshot remain unchanged.
Palettes Semantic roles
foreground-full var(--color-white)foreground-icon-primary var(--color-neutral-950)foreground-icon-hover var(--color-black)foreground-icon-secondary var(--color-neutral-500)foreground-icon-tertiary var(--color-neutral-400)foreground-icon-quaternary var(--color-neutral-300)foreground-icon-error var(--color-red-600)foreground-icon-disabled var(--color-neutral-300)foreground-disabled var(--color-neutral-400)foreground-disabled-danger var(--color-red-300)input-disabled-foreground var(--color-neutral-300)icon-button-disabled-foreground var(--color-neutral-300)button-primary-disabled-foreground var(--color-neutral-400)text-primary var(--color-neutral-950)text-secondary var(--color-neutral-500)text-tertiary var(--color-neutral-400)text-disabled var(--color-neutral-300)text-disabled-danger var(--color-red-300)text-placeholder var(--color-neutral-400)text-error-primary var(--color-red-500)text-destructive color-mix(in srgb, var(--color-red-700) 80%, var(--color-neutral-600))input-disabled-text var(--color-neutral-300)text-white var(--color-white)background-full var(--color-white)ticket-detail-surface var(--color-white)ticket-detail-low-background var(--color-indigo-200)ticket-detail-low-hover var(--color-indigo-300)ticket-detail-medium-hover var(--color-yellow-300)ticket-detail-high-hover var(--color-orange-300)ticket-detail-urgent-hover var(--color-rose-300)ticket-detail-low-text var(--color-indigo-800)ticket-detail-resource-background var(--color-blue-100)ticket-detail-resource-text var(--color-blue-600)ticket-detail-favorite #ffb83cproject-board-empty-panel rgb(242 242 242 / 0.8)project-board-empty-front #d9d9d9project-board-empty-middle #e5e5e5project-board-empty-back #edededproject-board-empty-detail var(--color-white)background-primary-default var(--color-white)background-inner-default var(--color-white)background-primary-hover var(--color-neutral-100)background-primary-active var(--color-neutral-200)background-primary-disabled var(--color-neutral-100)input-disabled-background var(--color-neutral-100)background-secondary-default var(--color-neutral-100)background-secondary-hover var(--color-neutral-200)background-tertiary-default var(--color-neutral-200)background-tertiary-hover var(--color-neutral-300)background-tertiary-error var(--color-red-100)background-recent-hire-role var(--color-neutral-100)avatar-neutral-background var(--color-neutral-300)background-quaternary-default var(--color-neutral-300)background-quaternary-hover var(--color-neutral-400)background-quaternary-error var(--color-red-200)file-upload-icon-background var(--color-neutral-300)file-upload-icon-foreground var(--color-neutral-400)file-upload-icon-foreground-hover var(--color-neutral-500)border-button-default var(--color-neutral-200)border-button-hover var(--color-neutral-300)border-button-active var(--color-neutral-400)border-button-white var(--color-white)border-error-default var(--color-red-500)border-checkbox-default var(--color-neutral-300)border-checkbox-hover var(--color-neutral-400)border-checkbox-active var(--color-neutral-400)border-checkbox-white var(--color-white)border-component-detail-container var(--color-neutral-200)border-ai-profile-card var(--color-neutral-200)border-table var(--color-neutral-200)border-button-group var(--color-neutral-200)border-sidebar-profile-hover var(--color-neutral-300)separator-border var(--color-neutral-200)separator-border-strong var(--color-neutral-200)border-focus-ring var(--color-accent-500)state-success-text var(--color-lime-800)state-success-base var(--color-lime-200)control-indicator-background var(--color-white)control-indicator-background-subtle var(--color-neutral-100)switch-off-chip-start var(--color-white)switch-off-chip-end var(--color-neutral-100)switch-on-chip-start color-mix(in oklab, var(--color-accent-500) 63%, var(--color-accent-600))switch-on-chip-end color-mix(in oklab, var(--color-accent-600) 16%, var(--color-accent-700))stat-card-icon-background var(--color-white)segmented-control-background var(--color-neutral-100)segmented-control-selected-background var(--color-white)theme-toggle-sidebar-background var(--color-neutral-200)theme-toggle-sidebar-selected-background var(--color-white)ai-chat-composer-add-background var(--color-neutral-100)ai-chat-composer-add-hover-background var(--color-neutral-200)composer-panel-tab-background var(--color-neutral-200)composer-panel-add-background var(--color-neutral-200)composer-panel-add-hover-background var(--color-neutral-300)composer-panel-tile-border var(--color-neutral-200)composer-panel-rail-background var(--color-neutral-100)questionnaire-key-background var(--color-neutral-100)questionnaire-key-hover-background var(--color-neutral-200)agent-progress-ring var(--color-neutral-700)button-ghost-background var(--color-accent-100)button-ghost-hover var(--color-accent-200)button-ghost-active var(--color-accent-300)button-ghost-disabled var(--color-accent-50)button-ghost-foreground var(--color-accent-700)button-ghost-disabled-foreground var(--color-accent-300)dropdown-item-hover-background var(--color-neutral-100)kbd-background var(--color-neutral-300)kbd-foreground var(--color-neutral-500)docs-file-chip-background var(--color-purple-50)docs-file-chip-border var(--color-purple-100)docs-file-chip-foreground var(--color-purple-500)docs-command-accent var(--color-purple-400)docs-code-background var(--color-background-primary-default)docs-install-rail var(--color-border-button-default)badge-neutral-background var(--color-neutral-200)team-menu-count-background var(--color-neutral-200)team-menu-count-foreground var(--color-neutral-500)badge-new-background var(--color-accent-100)badge-new-text var(--color-accent-600)tab-count-selected-background var(--color-accent-100)pill-tab-blue-selected-background var(--color-accent-50)pill-tab-blue-hover-background var(--color-neutral-100)notification-information-background var(--color-blue-100)notification-information-foreground var(--color-blue-600)notification-success-background var(--color-lime-100)notification-success-foreground var(--color-lime-600)notification-error-background var(--color-rose-100)notification-error-foreground var(--color-rose-600)notification-center-background var(--color-white)status-lime-background var(--color-lime-200)status-lime-text var(--color-lime-800)status-yellow-background var(--color-yellow-200)status-yellow-text var(--color-yellow-800)status-rose-background var(--color-rose-200)status-rose-text var(--color-rose-800)status-cyan-background var(--color-cyan-200)status-cyan-text var(--color-cyan-800)status-orange-background var(--color-orange-200)status-orange-text var(--color-orange-800)status-blue-background var(--color-blue-200)status-blue-text var(--color-blue-800)status-purple-background var(--color-purple-100)status-purple-text var(--color-purple-600)status-dot-green-halo var(--color-green-100)status-dot-yellow-halo var(--color-yellow-200)status-dot-indigo-halo var(--color-indigo-100)date-range-background var(--color-accent-100)date-range-edge-background var(--color-accent-300)calendar-event-blue-background var(--color-blue-100)calendar-event-blue-title var(--color-blue-700)calendar-event-blue-time var(--color-blue-700)calendar-event-pink-background var(--color-pink-100)calendar-event-pink-title var(--color-pink-700)calendar-event-pink-time var(--color-pink-700)calendar-event-purple-background var(--color-purple-100)calendar-event-purple-title var(--color-purple-700)calendar-event-purple-time var(--color-purple-700)calendar-event-lime-background var(--color-lime-100)calendar-event-lime-title var(--color-lime-800)calendar-event-lime-time var(--color-lime-700)calendar-event-emerald-background var(--color-emerald-100)calendar-event-emerald-title var(--color-emerald-800)calendar-event-emerald-time var(--color-emerald-700)text-error-placeholder var(--color-red-400)chart-track var(--color-neutral-200)chart-cursor var(--color-neutral-300)chart-neutral var(--color-neutral-300)chart-1 var(--color-teal-400)chart-1-active var(--color-teal-500)chart-2 var(--color-lime-400)chart-2-active var(--color-lime-500)chart-3 var(--color-pink-400)chart-3-active var(--color-pink-500)chart-4 var(--color-sky-400)chart-4-active var(--color-sky-500)chart-5 var(--color-purple-400)chart-5-active var(--color-purple-500)chart-6 var(--color-blue-400)chart-6-active var(--color-blue-500)chart-7 var(--color-emerald-400)chart-7-active var(--color-emerald-500)chart-8 var(--color-yellow-400)chart-8-active var(--color-yellow-500)chart-9 var(--color-indigo-400)chart-9-active var(--color-indigo-500)chart-agents-bar var(--color-purple-300)chart-agents-bar-active var(--color-purple-400)
186 source semantic declarations and151 dark overrides are preserved. Readable text uses adjacent audited ramp stops where the source’s small-text contrast is insufficient. Seven accent ramps are included; custom accents do not recolor data series.
Recorded Helios Figma token snapshot The original snapshot is retained as design evidence. It is not the active website palette.
Download unchanged Figma token snapshot
%22%2F%3E%0A%3Cpath%20d%3D%22M84.63%203C103.609%203%20118.995%2018.448%20118.995%2037.505V63.521C100.016%2063.521%2084.63%2048.073%2084.63%2029.016V3Z%22%20fill%3D%22%23EF756B%22%2F%3E%0A%3Cpath%20d%3D%22M3%2037.5049V64.3174C3%2080.7184%2016.2448%2094.0153%2032.5781%2094.0153H80.8646C103.766%2094.0153%20119%2094.3018%20119%20119.463V90.4945C119%2074.0934%20105.755%2060.8018%2089.4219%2060.8018H41.1302C30.7812%2060.8018%203%2061.0622%203%2037.5049Z%22%20fill%3D%22url(%23paint1_linear_41_503)%22%2F%3E%0A%3Cpath%20d%3D%22M83.4737%2095.0678C84.2446%2095.8126%2084.63%2096.7188%2084.63%2097.7917V153.974C87.6456%20153.974%2090.6091%20153.589%2093.5258%20152.802C96.4373%20152.021%2099.1977%20150.87%20101.812%20149.354C115.625%20113.193%2091.6821%2098.8074%2083.4737%2095.0678ZM20.1873%207.61984C22.7966%206.09901%2025.5571%204.95318%2028.4737%204.16672C31.3852%203.38547%2034.3539%202.99484%2037.3696%203.00005V57.0209C37.3696%2058.2136%2037.8227%2059.1823%2038.7393%2059.9376C30.557%2056.6303%205.01017%2043.1251%2020.1873%207.61984Z%22%20fill%3D%22url(%23paint2_linear_41_503)%22%2F%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22paint0_linear_41_503%22%20x1%3D%223%22%20y1%3D%223%22%20x2%3D%223%22%20y2%3D%22153.974%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%2314A794%22%2F%3E%0A%3Cstop%20offset%3D%220.55%22%20stop-color%3D%22%230C8F80%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23076E64%22%2F%3E%0A%3C%2FlinearGradient%3E%0A%3ClinearGradient%20id%3D%22paint1_linear_41_503%22%20x1%3D%223%22%20y1%3D%2237.5049%22%20x2%3D%22119%22%20y2%3D%2237.5049%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%234BD8BD%22%2F%3E%0A%3Cstop%20offset%3D%220.55%22%20stop-color%3D%22%2327C2A8%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2315A893%22%2F%3E%0A%3C%2FlinearGradient%3E%0A%3ClinearGradient%20id%3D%22paint2_linear_41_503%22%20x1%3D%2215.4648%22%20y1%3D%223%22%20x2%3D%2215.4648%22%20y2%3D%22153.974%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0A%3Cstop%20stop-color%3D%22%23034F46%22%20stop-opacity%3D%220.18%22%2F%3E%0A%3Cstop%20offset%3D%220.36%22%20stop-color%3D%22%23034F46%22%20stop-opacity%3D%220.6%22%2F%3E%0A%3Cstop%20offset%3D%220.64%22%20stop-color%3D%22%23034F46%22%20stop-opacity%3D%220.6%22%2F%3E%0A%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23034F46%22%20stop-opacity%3D%220.18%22%2F%3E%0A%3C%2FlinearGradient%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E){kind=small}