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.