Design System 6.0
Trustori Nexus
The unified design language and component library for Trustori Enterprise interfaces.
Color System
Primary Blue Scale
Blue 100#001438
Blue 90#002563
Blue 70 (Brand)#0047BA
Blue 50 (Accent)#2A7DE1
Blue 30#7FB0FF
Blue 0#F2F8FF
Neutral Slate Scale
Slate 90 (Text)#24272A
Slate 70#5D666E
Slate 50#97A1AB
Slate 20#E1E5E9
Slate 10#F0F2F5
Slate 0#F9FAFB
Accent Orange Scale
Orange 70#B03805
Orange 50 (CTA)#FF671D
Orange 30#FFB68C
Orange 0#FFF9F5
Typography System
Desktop
1280px+Trusted Custodian
Tablet
768px+Trusted Custodian
Phone
<768pxTrusted Custodian
Element / Property
Desktop
Tablet
Phone
H1 Display
72px / 1.1 / -0.04em
60px / 1.1 / -0.04em
48px / 1.1 / -0.04em
H2 Section
48px / 1.2 / -0.04em
36px / 1.2 / -0.03em
30px / 1.2 / -0.02em
H3 Subsection
30px / 1.3 / -0.02em
24px / 1.3 / -0.02em
20px / 1.3 / Normal
H4 Component
18px / 1.4 / Normal
18px / 1.4 / Normal
16px / 1.4 / Normal
Body Large
20px / 1.75 / Normal
18px / 1.6 / Normal
18px / 1.6 / Normal
Body Base
16px / 1.6 / Normal
16px / 1.6 / Normal
14px / 1.5 / Normal
Body Small
14px / 1.5 / Normal
13px / 1.5 / Normal
13px / 1.4 / Normal
Caption
12px / 1.4 / Normal
12px / 1.4 / Normal
11px / 1.4 / Normal
Overline
12px / 1.0 / 0.05em
11px / 1.0 / 0.05em
10px / 1.0 / 0.05em
Grid & Dimensions
Desktop
1280px+1280px Max Width
Tablet
768px+100% Width (32px Px)
Phone
<768px100% Width (24px Px)
Element / Property
Desktop
Tablet
Phone
Container Width
1280px (Max)
100%
100%
Page Margin
48px - 64px
32px
24px
Grid Gutter
24px
24px
16px
Section Padding
96px
64px
48px
Input & Forms
Desktop
1280px+Tablet
768px+Phone
<768pxPlease enter a valid email address.
Input Dimensions
Element / Property
Desktop
Tablet
Phone
Input Height
48px
44px
44px
Padding X
16px
16px
16px
Font Size
14px
14px
16px (No Zoom)
Data Visualization
Scan Activity
Authentication Rate
85%
Global Reach
Asia Pacific62%
Europe24%
Americas14%
Element / Property
Desktop
Tablet
Phone
Chart Height
320px
280px
240px
Bar Width
Flexible
Flexible
Flexible
Label Size
12px
11px
10px
Status & Feedback
Desktop
1280px+Tablet
768px+Phone
<768pxSuccess
Your verification scan was completed successfully.
Authentication Failed
This product code could not be verified in our system.
Element / Property
Desktop
Tablet
Phone
Alert Padding
16px
16px
12px
Icon Size
20px
20px
16px
Text Size
14px
14px
13px
Card Patterns
Desktop
1280px+Tablet
768px+Phone
<768pxElement / Property
Desktop
Tablet
Phone
Card Padding
48px (Feature)
32px
24px
Corner Radius
2px
2px
2px
Border Width
1px
1px
1px
Tabs & Segments
Desktop
1280px+Active Tab
Inactive
Tablet
768px+Active Tab
Inactive
Phone
<768pxActive
Inactive
Underline Tabs
Segmented Control
Element / Property
Desktop
Tablet
Phone
Tab Height
48px
44px
40px
Active Border
2px
2px
N/A (Pill)
Text Size
14px
14px
13px
Data Tables
| Product Name | Batch ID | Status | Scans |
|---|---|---|---|
| Premium Serum 30ml | #8829-A | Verified | 1,204 |
| Night Cream 50g | #8829-B | Verified | 856 |
| Eye Contour Gel | #8830-A | Pending | 142 |
Element / Property
Desktop
Tablet
Phone
Row Height
56px
48px
Auto (Stacked)
Header Text
12px / Uppercase
11px / Uppercase
11px / Normal
Cell Padding
px-6 py-4
px-4 py-3
px-4 py-3
Loaders & Skeletons
Skeleton Loading
Circular Loaders
Element / Property
Desktop
Tablet
Phone
Skeleton Color
Slate 10
Slate 10
Slate 10
Animation Duration
1.5s (Pulse)
1.5s
1.5s
Loader Border
2px / 4px
2px / 4px
2px / 3px
Iconography
Icons are built on a 24px grid with a 1.5px or 2px stroke. They are clean, geometric, and use rounded caps/joins to match the brand's approachable yet technical feel.
Element / Property
Desktop
Tablet
Phone
Base Grid
24px
24px
24px
Stroke Width
1.5px - 2px
1.5px - 2px
1.5px
Touch Target
40px
44px
48px
Motion & Depth
Shadow Elevations
SM
MD
LG
XL
Timing Curves
Standard (Ease-in-out)
Entrance (Out-Expo)
Element / Property
Desktop
Tablet
Phone
Shadow Color
Blue 70 / 10%
Blue 70 / 10%
Blue 70 / 8%
Standard Ease
0.4, 0, 0.2, 1
Same
Same
Entrance Ease
0.16, 1, 0.3, 1
Same
Same