Welcome to Pyxis
You’ve landed on Hornetsecurity design system
🚧 : Work In Progress
🔜 : Not planned for this quarter
☑️ : Done in a previous quarter
⏩️ : Finally postponed
⛔️ : Finally cancelled
Roadmap Q2 2025
|
Components / Design tokens |
Design assets Figma |
UI Kits Storybook |
|---|---|---|
|
New components |
|
|
|
White-labelling theme |
🚧 |
🚧 |
|
Selectable card |
☑️ |
✅ |
|
Timeline vertical |
☑️ |
🚧 |
|
Side Panel |
✅ |
🚧 |
|
Full Page Layout |
✅ |
🚧 |
|
Code block |
☑️ |
🚧 |
|
Table / Data Table |
🚧 |
🔜 |
|
Accordion |
🚧 |
🔜 |
|
Clickable Card |
🚧 |
🔜 |
|
Page Title |
🚧 |
🔜 |
|
Header Section |
🚧 |
🔜 |
|
Improvements |
|
|
|
Modal with 2 action buttons |
☑️ |
✅ |
|
Stepper (new ui) |
☑️ |
✅ |
|
Compact Toggle button |
☑️ |
✅ |
|
Read only Toggle button |
☑️ |
✅ |
|
Tab without background |
☑️ |
🚧 |
|
Content box with background image |
🚧 |
🔜 |
Roadmap Q1 2025
|
Components / Design tokens |
Design assets Figma |
UI Kits Storybook |
|---|---|---|
|
New components |
|
|
|
Top bar |
✅ |
✅ |
|
Modal |
✅ |
✅ |
|
Avatar group |
✅ |
✅ |
|
Dropdown |
✅ |
✅ |
|
Timeline |
✅ |
⏩️ |
|
Stepper |
✅ |
✅ |
|
Code block |
✅ |
⏩️ |
|
Content box |
✅ |
✅ |
|
Search bar |
⛔️ |
⛔️ |
|
Selectable cards |
✅ |
🔜 |
|
Side panel |
⏩️ |
🔜 |
|
Table (Research/MVP) |
⏩️ |
🔜 |
|
Full page layout |
⏩️ |
🔜 |
|
Improvements |
|
|
|
Inactive avatar |
✅ |
✅ |
|
Neutral button |
✅ |
✅ |
|
Compact toggle button |
✅ |
🔜 |
|
Read only toggle button |
✅ |
🔜 |
|
Tab Without Background |
✅ |
🔜 |
|
Text input transparent |
✅ |
✅ |
|
Contextual menu in Select item |
✅ |
✅ |
|
Stepper (new ui) |
✅ |
🔜 |
|
Navigation |
✅ |
✅ |
|
Modal with 2 action buttons |
✅ |
⏩️ |
2024
Roadmap Q4 2024
The main objective of this quarter is to continue working on framework agnosticism in order to have the Angular & Vue UI Kits.
|
Components / Design tokens |
Design assets Figma |
UI Kits Storybook |
|---|---|---|
|
New components |
|
|
|
Side navigation |
✅ |
✅ |
|
Notification |
✅ |
✅ |
|
Top bar |
✅ |
V1 ✅ - V2 ⏩️ |
|
Modal |
✅ |
⏩️ |
|
Avatar list |
✅ |
⏩️ |
|
Dropdown |
✅ |
✅ |
|
Code block |
⏩️ |
🔜 |
|
Timeline |
✅ |
⏩️ |
|
Segmented button |
✅ |
✅ |
|
Improvements |
|
|
|
Compact size for inputs |
✅ |
✅ |
|
Neutral color for counter |
✅ |
✅ |
|
Compact avatar |
✅ |
✅ |
|
Inactive avatar |
✅ |
⏩️ |
|
Neutral button |
✅ |
⏩️ |
Roadmap Q3 2024
The main objective of this quarter is working on framework agnosticism in order to have the Angular & Vue UI Kits.
|
Components / Design Tokens |
Design asset Figma |
UI Kits Storybook |
Documentation Supernova |
|---|---|---|---|
|
New Components |
|
|
|
|
Paging |
✅ |
✅ |
✅ |
|
Contextual menu |
✅ |
✅ |
✅ |
|
Scope selector |
✅ |
🔜 |
⏩️ |
|
Navigation (Side nav + Top bar) |
✅ |
⏩️ |
⏩️ |
|
Filter bar |
⏩️ |
🔜 |
⏩️ |
|
Table |
⏩️ |
🔜 |
⏩️ |
|
Code block |
⏩️ |
🔜 |
⏩️ |
|
Search bar |
⏩️ |
🔜 |
⏩️ |
|
Avatar list |
⏩️ |
🔜 |
⏩️ |
|
Components from Hornet kit |
|
|
|
|
Divider |
✅ |
✅ |
✅ |
|
Breadcrumb |
✅ |
✅ |
✅ |
|
Alert |
✅ |
✅ |
✅ |
|
Notification |
✅ |
🔜 |
⏩️ |
|
Stepper |
✅ |
🔜 |
⏩️ |
|
Timeline |
✅ |
🔜 |
⏩️ |
|
Dialog |
⏩️ |
🔜 |
⏩️ |
|
Content modal |
⏩️ |
🔜 |
⏩️ |
|
Assignments |
⏩️ |
🔜 |
⏩️ |
|
Group select |
⏩️ |
🔜 |
⏩️ |
|
Fade content |
⏩️ |
🔜 |
⏩️ |
|
Improvements |
|
|
|
|
Compact size for inputs |
✅ |
⏩️ |
⏩️ |
|
Neutral color for counter |
✅ |
⏩️ |
⏩️ |
Roadmap Q2 2024
|
Components / Design Tokens |
Design asset Figma |
UI Kit Storybook |
Documentation Supernova |
|---|---|---|---|
|
Components |
|
|
|
|
Avatar |
✅ |
✅ |
✅ |
|
Sidenav |
⏩️ |
⏩️ |
⏩️ |
|
Icon |
✅ |
✅ |
✅ |
|
Text |
✅ |
✅ |
✅ |
|
Contextual menu |
✅ |
⏩️ |
⏩️ |
|
Paging |
✅ |
⏩️ |
✅ |
|
Table |
⏩️ |
⏩️ |
⏩️ |
|
Code block |
⏩️ |
⏩️ |
⏩️ |
|
Search bar |
⏩️ |
⏩️ |
⏩️ |
|
Design Tokens |
|
|
|
|
Hornet theme |
✅ |
✅ |
⏩️ |
|
Improvements |
|
|
|
|
Tabs as molecule |
⏩️ |
⏩️ |
⏩️ |
Roadmap Q1 2024
|
Components / Design Tokens |
Design asset Figma |
UI Kit Storybook |
Documentation Supernova |
|
Components |
|
|
|
|
Tab |
✅ |
✅ |
✅ |
|
Chips |
✅ |
✅ |
✅ |
|
Text |
⏩️ |
⏩️ |
⏩️ |
|
Popover |
✅ |
✅ |
✅ |
|
Paging |
✅ |
⏩️ |
⏩️ |
|
Contextual menu |
✅ |
⏩️ |
⏩️ |
|
Avatar |
✅ |
⏩️ |
⏩️ |
|
Improvements |
|
|
|
|
Dynamic input (multi entries) |
✅ |
✅ |
✅ |
|
Warning inputs/textarea |
✅ |
✅ |
✅ |
|
Button with counter |
✅ |
✅ |
✅ |
|
Counter (disable and inactive status) |
✅ |
✅ |
✅ |
|
Badge (inactive status) |
✅ |
✅ |
✅ |
|
Counter with number management |
N/A |
N/A |
N/A |
2023
Roadmap Q4 2023
|
Components / Design Tokens |
Design asset Figma |
UI kit Storybook |
Documentation Supernova |
|
Components |
|
|
|
|
Counter |
✅ |
✅ |
✅ |
|
Chips |
✅ |
⏩️ |
⏩️ |
|
Sub menu |
✅ |
✅ |
✅ |
|
Text area |
✅ |
✅ |
✅ |
|
Text (input and number) |
✅ |
✅ |
✅ |
|
Dynamic input |
✅ |
✅ |
✅ |
|
Tab |
✅ |
⏩️ |
⏩️ |
|
Paging |
✅ |
⏩️ |
⏩️ |
|
Pop over |
✅ |
⏩️ |
⏩️ |
Roadmap Q3 2023
|
Components / Design Tokens |
Design asset Figma |
UI kit Storybook |
Documentation Supernova |
|
Foundation |
|
|
|
|
Colors |
✅ |
✅ |
✅ |
|
Border |
✅ |
✅ |
✅ |
|
Border radius |
✅ |
✅ |
✅ |
|
Font |
✅ |
✅ |
✅ |
|
Font size |
✅ |
✅ |
✅ |
|
Shadow |
✅ |
✅ |
✅ |
|
Spacing |
✅ |
✅ |
✅ |
|
Content (UX writing) |
✅ |
not applicable |
✅ |
|
|
|
|
|
|
Components |
|
|
|
|
Badges |
✅ |
✅ |
✅ |
|
Button |
✅ |
✅ |
✅ |
|
Counter |
✅ |
✅ |
✅ |
|
Checkbox |
✅ |
✅ |
✅ |
|
Link |
✅ |
✅ |
✅ |
|
Radio button |
✅ |
✅ |
✅ |
|
Loader button |
✅ |
✅ |
✅ |
|
Number input |
✅ |
✅ |
✅ |
|
Select |
✅ |
✅ |
✅ |
|
State indicator |
✅ |
✅ |
✅ |
|
Sub-menu |
✅ |
✅ |
✅ |
|
Toggle button |
✅ |
✅ |
✅ |
|
Tooltip |
✅ |
✅ |
✅ |
|
Text input |
✅ |
✅ |
✅ |
© 2025 Vade.