%20--%3e%3cdefs%3e%3cstyle%3e%20.st0%20{%20fill:%20%23fff;%20}%20.st1%20{%20fill:%20%232a7de1;%20}%20.st2%20{%20fill:%20%230047ba;%20}%20.st3%20{%20fill:%20%23ff671d;%20}%20%3c/style%3e%3c/defs%3e%3cg%20id='Layer_1-2'%3e%3cg%3e%3cg%3e%3cpath%20class='st2'%20d='M58.3,96.5l-10.3-6c-1.2-.7-2.7-.7-3.8,0L7.8,111.5l-5.8,3.3c-2.7,1.6-2.7,5.4,0,7l5.8,3.3.7.4,7.9,4.5c2.6,1.5,5.8,1.5,8.4,0l33.5-19.3c1-.6,1.7-1.7,1.7-2.9v-8.5c0-1.2-.6-2.3-1.7-2.9'/%3e%3cpath%20class='st1'%20d='M88.8,114.1l-10.6-6.1-7.6-4.4-1.2-.7c-1.8-1-4,.3-4,2.3v48.3c0,3,1.6,5.8,4.2,7.3l8.4,4.9,6,3.5c2.7,1.5,6-.4,6-3.5v-49.3c0-1-.5-1.8-1.3-2.3'/%3e%3cpath%20class='st1'%20d='M67.5,91.5c6.7-3.8,13.3-7.7,20-11.6,0,0,0,0,0,0l1.8-1c.5-.3.7-.8.7-1.3V16.2c0-3-1.6-5.8-4.2-7.3l-8.2-4.7-6.2-3.6c-2.7-1.5-6,.4-6,3.5v57.1c0,1.1-1.2,1.8-2.2,1.3l-3.3-1.9-40-23.1-6.2-3.6c-2.7-1.5-6,.4-6,3.5v17.6c0,2.6,1.4,5,3.6,6.2l41.8,24.1,6.8,3.9c1.4.8,2.8,1.6,4.2,2.4.3.1.7.3,1.3.3,1,0,1.7-.4,1.9-.6'/%3e%3cpath%20class='st2'%20d='M154.3,48.4l-6.1-3.5-1.3-.8-.4-.2-6.6-3.8c-2.6-1.5-5.8-1.5-8.4,0l-34.7,20c-.8.5-1.2,1.3-1.2,2.2v8.7c0,1.5.8,3,2.2,3.7l9.7,5.6c1.2.7,2.6.7,3.8,0l5.3-3.1,30-17.3.4-.2,7.4-4.3c2.7-1.5,2.7-5.4,0-7'/%3e%3cpath%20class='st1'%20d='M143.8,108.9l-33.6-19.4-3.3-1.9-4.3-2.5c-1.1-.6-2.2-1.3-3.3-1.9-.6-.3-1.2-.7-1.8-1-.1,0-.5-.3-1-.3-.5,0-.8.2-.9.3l-22.4,12.9c-.3.2-.5.5-.5.9,0,.6.5.8.5.8,1.5.9,3,1.8,4.5,2.6l7.6,4.4h0l4.8,2.8,5.4,3.2,39.7,22.9,6.4,3.7c3.1,1.8,6.9-.5,6.9-4v-15.1c0-3.5-1.9-6.7-4.9-8.4'/%3e%3c/g%3e%3cg%3e%3cpath%20class='st0'%20d='M228.1,79.7c0-4.1.8-7.6,2.3-10.5,1.5-2.9,3.6-5.1,6.3-6.6,2.7-1.5,5.8-2.2,9.2-2.2,5.2,0,9.2,1.6,12.2,4.8,2.9,3.2,4.4,7.7,4.4,13.4v53.5h24.6v-57.9c0-7.2-1.3-13.5-3.9-18.6-2.6-5.2-6.3-9.2-11-12-4.7-2.8-10.3-4.2-16.6-4.2s-14.2,2.1-19.1,6.4c-3.8,3.2-6.9,7.5-9.3,12.8l-.2-17.9h-23.6v91.3h24.7v-52.4h0Z'/%3e%3cpath%20class='st0'%20d='M539,91.9c0,4.1-.8,7.6-2.3,10.5-1.5,2.9-3.6,5.1-6.3,6.6-2.7,1.5-5.8,2.2-9.2,2.2-5.2,0-9.2-1.6-12.2-4.8-2.9-3.2-4.4-7.7-4.4-13.4v-53.5h-24.6v57.9c0,7.2,1.3,13.4,3.9,18.6,2.6,5.2,6.3,9.2,11,11.9,4.7,2.8,10.3,4.1,16.6,4.1s14.2-2.1,19.1-6.4c3.8-3.2,6.9-7.5,9.3-12.8l.2,17.8h23.6V39.5h-24.7v52.4h0Z'/%3e%3cpath%20class='st0'%20d='M629.3,77.4l-16.5-3.3c-4.2-.8-7.1-2-8.9-3.6s-2.7-3.5-2.7-5.8,1.3-5,4-6.7c2.7-1.8,6.1-2.6,10.2-2.6s8,1,10.7,3.1c2.7,2.1,4.4,4.7,5.2,8l22.1-3.1c-.9-5.2-3-9.8-6.2-13.6-3.3-3.9-7.6-6.8-13-8.9-5.4-2.1-11.8-3.1-19.2-3.1s-14.5,1.1-20.2,3.5c-5.8,2.3-10.2,5.6-13.4,9.8-3.2,4.2-4.8,9.2-4.8,15s2.2,12.5,6.6,16.9c4.4,4.3,11,7.4,19.8,9.2l15.8,3.2c3.9.8,6.9,2,8.8,3.5,2,1.5,2.9,3.4,2.9,5.8s-1.3,5-4,6.8c-2.7,1.8-6.4,2.7-11.1,2.7s-8.9-1.1-11.9-3.2c-3-2.2-5-5.3-6-9.5l-23.2,3.2c.9,5.8,3.2,10.8,6.8,14.9,3.6,4.2,8.3,7.3,14,9.5,5.8,2.2,12.4,3.2,19.8,3.2s15-1.2,21.2-3.8c6.2-2.5,11-6,14.5-10.5,3.5-4.5,5.2-9.7,5.2-15.7s-2.2-11.9-6.5-15.9c-4.3-4.1-10.9-7-19.9-8.8'/%3e%3cpolygon%20class='st0'%20points='470.8%2039.9%20445.6%2039.9%20429%2066.1%20412.4%2039.9%20387.1%2039.9%20416.4%2086%20387.1%20132.1%20412.4%20132.1%20429%20105.9%20445.6%20132.1%20470.8%20132.1%20441.6%2086%20470.8%2039.9'/%3e%3cpath%20class='st0'%20d='M380.2,65.7c-1.7-5.4-4.2-10.3-7.7-14.5s-7.8-7.6-13-10c-5.2-2.4-11.4-3.6-18.4-3.6s-13.8,1.3-19.2,4c-5.4,2.7-9.9,6.3-13.3,10.8-3.5,4.6-6,9.7-7.7,15.4-1.7,5.7-2.5,11.6-2.5,17.7s.9,11.9,2.6,17.5c1.7,5.6,4.4,10.6,8,15.1,3.6,4.4,8.2,7.9,13.8,10.4s12.2,3.7,19.9,3.7,9.8-.5,14-1.5c4.1-1,8.1-2.5,11.9-4.6,3.8-2.1,7.6-4.9,11.5-8.3l-11.3-13.7c-3.5,3.4-7.3,6-11.5,7.6s-8.8,2.4-13.9,2.4-12.6-1.9-17-5.7-6.9-9.4-7.4-16.6h63.2c.2-1.6.4-3.2.5-4.8,0-1.6,0-2.8,0-3.7,0-6.2-.8-11.9-2.5-17.4h0ZM318.6,76.5c.4-3.8,1.5-7.4,3.2-10.6,1.8-3.3,4.3-5.9,7.6-8,3.3-2.1,7.3-3.1,12.1-3.1s6.5.6,9.2,1.8,5,2.7,6.8,4.6,3.2,4.1,4.2,6.6c.9,2.5,1.4,5.1,1.4,7.8s0,.7,0,1.1h-44.5Z'/%3e%3crect%20class='st3'%20x='666.1'%20y='106.9'%20width='23.9'%20height='23.9'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
Trustori Nexus
The unified design language and component library for Trustori Enterprise interfaces.
Color System
Cobalt Blue
Neutral
Tangerine Orange
Typography
Hanken GroteskTrusted Custodian
The primary typeface is Hanken Grotesk. It conveys modernism, clarity, and trust. Use it for impactful headlines.
Type Scale
Responsive Grid
Fluid Container / 12-Column SystemMobile
4 Column Grid
Tablet
8 Column Grid
Desktop
12 Column Grid
Spacing Scale
Grid & Dimensions
12 Column SystemContainer Widths
| Screen | Width | Gutter |
|---|---|---|
| Desktop (xl) | 1400px | 48px |
| Laptop (lg) | 1024px | 48px |
| Tablet (md) | 768px | 32px |
| Mobile (sm) | 100% | 24px |
Spacing Tokens
Motion & Depth
Cubic Bezier / ShadowsEasing Curves
Iconography
24px Grid / 1.5px StrokeLucide Icons / Stroke 1.5px
Sizes
Accessibility & Inclusion
Accessibility is not a feature; it's a requirement. We design for everyone, ensuring our platform is perceivable, operable, and robust for all users.
Color Contrast
Focus States
Interactive elements must have clearly visible focus indicators for keyboard navigation.
Inputs & Forms
Please enter a valid email address.
Feedback & Modals
Confirm Deletion
Warning
This action cannot be undone. This will permanently delete the selected project.
Success
Changes saved successfully.
Info
New update available.
Card Patterns
Portfolio Overview Card
Standard pattern for object previews with metadata and actions.
Analytics Widget
Focus on data density and quick visualization for dashboard metrics.
Data Display
Avatars
Status Badges
Tooltip
<div class="card">
<h1>Nexus</h1>
<p>System</p>
</div>