space-6 · 24px
radius · 0px
Business Plus
Scale securely
More seats, a larger token allowance and governance for growing teams.
- Up to 20 user accounts
- Annual billing and usage reporting
Card title
1px border
Brand Attributes18 Slides DeckFrosted Glass Texture
1-TO-X Design System Handoff
The official brand attribute guidelines featuring semi-translucent frosted glass surfaces, optical blur refractions, two-tone logo versions, colors, typography, UI components, and visual treatments.
Slide 01 / 18
Slide 01·Logo
Frosted Glass1920 × 1080
1. Logo
Slide 02·Logo versions
Frosted Glass1920 × 1080
2. Logo versions
Full logo · 1·to·X·ai
Short wordmark · 1·to·X
Symbol
Minimum sizes
- Full logo
- 32px high · 28mm wide
- Short wordmark
- 24px high · 18mm wide
- Symbol
- 16px screen · 6mm print
- Clear space
- ½ symbol height on every side
The full logo and short wordmark are interchangeable — use the full logo when there's room, the short one in tight headers.
Slide 03·Favicons
Frosted Glass1920 × 1080
3. Favicons
Browser favicons
16×16
32×32
48×48
iPhone / iPad home screen
180×180
Android / PWA
192×192
PWA splash, installation
512×512
Slide 04·Colors
Frosted Glass1920 × 1080
4. Colors
Primary
Signal orange
#FF6D29
RGB 255 109 41 · C0 M57 Y84 K0
Electric blue
#0151F7
RGB 1 81 247 · C100 M67 Y0 K3
Neutrals
Night
#18181C
Dark gray
#3A3A40
Gray
#8A8A90
Paper
#F7F7F5
White
#FFFFFF
Slide 05·Color tokens
Frosted Glass1920 × 1080
5. Color tokens
Brand
Identity, one highlight and information-led moments.
Signal orange
--c-brand-orange
Night · 6.3 AA
100
80
60
20
10
#FF6D29 · #FF8A54 · #FFA77F · #FFE2D4 · #FFF0EA
Orange strong
--c-brand-orange-dark
White · 5.5 AA
100
80
60
20
10
#B8430F · #C6693F · #D48E6F · #F1D9CF · #F8ECE7
Orange light
--c-brand-orange-light
Night · 8.3 AAA
100
80
60
20
10
#FF9663 · #FFAB82 · #FFC0A1 · #FFEAE0 · #FFF5EF
Electric blue
--c-brand-blue
White · 6.0 AA
100
80
60
20
10
#0151F7 · #3474F9 · #6797FA · #CCDCFD · #E6EEFE
Neutrals
Structure, readable type, borders and quiet canvas.
Night
--c-brand-black
White · 17.7 AAA
100
80
60
20
10
#18181C · #464649 · #747477 · #D1D1D2 · #E8E8E8
Ink
--c-brand-ink
White · 15.7 AAA
100
80
60
20
10
#232327 · #4F4F52 · #7B7B7D · #D3D3D4 · #E9E9E9
Dark gray
--c-brand-dark-gray
White · 11.3 AAA
100
80
60
20
10
#3A3A40 · #616166 · #89898C · #D8D8D9 · #EBEBEC
Gray
--c-brand-gray
Night · 5.2 AA
100
80
60
20
10
#8A8A90 · #A1A1A6 · #B9B9BC · #E8E8E9 · #F3F3F4
Paper
--c-brand-paper
Night · 16.5 AAA
100
80
60
20
10
#F7F7F5 · #F9F9F7 · #FAFAF9 · #FDFDFD · #FEFEFE
Mist
--c-brand-cream
Night · 15.4 AAA
100
80
60
20
10
#EFEFEC · #F2F2F0 · #F5F5F4 · #FCFCFB · #FDFDFD
Surfaces
Section fields, cards and layered interface areas.
Muted
--c-surface-muted
Night · 14.7 AAA
100
#EAEAE7
Stage
--c-surface-stage
Night · 13.6 AAA
100
#E2E2DF
Portrait
--c-surface-portrait
Night · 12.0 AAA
100
#D5D5D1
Mint
--c-surface-mint
Night · 16.0 AAA
100
#EEF5F4
Carbon
--c-surface-carbon
White · 16.4 AAA
100
#1F1F23
Control
--c-surface-control
Night · 14.2 AAA
100
#E6E6E3
Neutral card
--c-surface-neutral-card
Night · 12.5 AAA
100
#D9D9D5
Peach card
--c-surface-peach-card
Night · 10.7 AAA
100
#FFB8A4
Orange card
--c-surface-orange-card
Night · 7.6 AAA
100
#FF8A55
Accents
Illustration details only; never compete with orange.
Lime
--c-brand-lime
Night · 14.3 AAA
100
#D4F53C
Violet
--c-brand-violet
Night · 5.3 AA
100
#C65BFF
Semantic
Feedback states with a lighter supporting background.
Success
--c-state-ok
White · 5.0 AA
100
15
#1A7F52 · #DDECE5
Warning
--c-state-warn
White · 5.0 AA
100
15
#B45309 · #F4E5DA
Danger
--c-state-danger
White · 5.6 AA
100
15
#C62A1B · #F6DFDD
Slide 06·Color gradient
Frosted Glass1920 × 1080
6. Color gradient
Lime#D8E35A
Blush#FFB9A6
Apricot#F7AE7C
Signal orange#FF6D29
- Backgrounds, visual banners and campaign art only.
- Never behind body text or on buttons and controls.
- Keep the lime end small — it is a highlight, not a field.
Slide 07·Typeface
Frosted Glass1920 × 1080
7. Typeface
Onest
Google Fonts · weights 400–800 · no italic — use weight, not slant, for emphasis.
Regular — AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTt
Medium — AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTt
SemiBold — AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTt
Bold — AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTt
ExtraBold — AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTt
Slide 08·Typography
Frosted Glass1920 × 1080
8. Typography
RoleSpecSample
Display
76.3px / 600 / 0.98 / -4.5%
Build with architecture.
H2
61px / 500 / 1.02 / -4%
Transparent pricing
Card title
48.8px / 500 / 1 / -4.5%
Deploy in one click
H3
39.1px / 500 / 1.08 / -3.5%
Turn words into apps
Body
18px / 400 / 1.55 / 0%
AI agents translate a functional target into a technical structure.
Body small
16px / 400 / 1.55 / 0%
Security anchored in the framework, not in prompts.
Label
12.8px / 500 / 1.5 / 1%
Company license · annual billing
Slide 09·Spacing & radius
Frosted Glass1920 × 1080
9. Spacing & radius
Spacing scale · base 4px
space-14px
space-28px
space-312px
space-416px
space-624px
space-832px
space-1248px
space-1664px
space-2496px
Control radius
0px
Card radius
0px · square
space-2 · 8px gap
space-3 · 12px y
Slide 10·UI components (Placeholder-Will be modified based on final alignment on brand identity)
Frosted Glass1920 × 1080
10. UI components (Placeholder-Will be modified based on final alignment on brand identity)
Slide 11·Key components
Frosted Glass1920 × 1080
11. Key components
Actions
Forms & input
Navigation
Data display
LiveReviewFailedNewBetaAPI
MarketingSalesFinance
DREMJA
Build progress64%
| Project | Status |
|---|---|
| Sales enablement | Live |
| Campaign planner | Review |
| Partner portal | Failed |
Feedback
Scheduled maintenance on Sunday, 02:00–03:00 CET.
Deployment finished successfully.
The database password could not be rotated.
Deploying to ISO/IEC 27001 servers…
Action cards
Secure by default
Security in every app
Deployment
Deploy in one click
● LiveSlide 12·Illustration
Frosted Glass1920 × 1080
12. Illustration
Style rules
- Line diagrams, not pictures: nodes, containers and connectors explain a system.
- 1.2–1.6px strokes in Ink; dotted lines for data paths.
- Signal orange marks the active node or primary action — once per diagram.
- Sharp corners, flat solid fills, no gradients or shadows.
- Labels in the brand typeface at 11px, sentence case.
Slide 13·Visual treatment · Source photo
Frosted Glass1920 × 1080
13. Visual treatment · Source photo
Slide 14·Visual treatment · Pixel overlay
Frosted Glass1920 × 1080
14. Visual treatment · Pixel overlay
Pixel overlay
Full artwork · never crop
The grid blocks carry the orange, lime and Night palette into photography.
- Snap blocks to a consistent square grid.
- Protect faces, hands and essential context.
- Use one bold headline, anchored to an open area.
Slide 15·Visual treatment · Grid cut-out
Frosted Glass1920 × 1080
15. Visual treatment · Grid cut-out
Grid cut-out
Full artwork · never crop
Paper grid and cut-out photography create a precise editorial composition.
- Keep the paper grid visible as the base.
- Use orange and blue as isolated blocks.
- Cut on grid lines; never crop the delivered example.
Slide 16·Visual treatment · Data-line diagram
Frosted Glass1920 × 1080
16. Visual treatment · Data-line diagram
Data-line diagram
Full artwork · never crop
Labelled data lines explain systems on a Night field.
- Orange marks the active line; blue and accents separate data types.
- Labels are mono, uppercase and boxed.
- Lines converge with purpose—avoid decorative tangles.
Slide 17·Visual banner
Frosted Glass1920 × 1080
17. Visual banner
Hero banner
Web · native ~3:1 ratio · never crop
- Centered message panel on a quiet mist background.
- Data lines enter from the left; the gradient beam exits right.
- One primary action. Headline second line in signal orange.
- Photos stay minimal — use the source photo only with a pixel or grid treatment.
Slide 18·Icons
Frosted Glass1920 × 1080
18. Icons
ArrowRight
CalendarCheck
Check
ChevronDown
Menu
X
Search
Plus
Download
Copy
Lock
ShieldCheck
Network
Database
Route
Workflow
Bot
Braces
Rocket
Sparkles
Globe
Building2
Quote
Zap
Sizes
16
20
24
32
48
Rules
Lucide, outline only. 1.5–2px stroke, Night by default, signal orange for the one active or primary icon. Pair with a label unless the action is universal.