Design System
Semantic color tokens, a responsive type scale (Desktop · Tablet · Phone) and every reusable component used across the Fio site.
01
Colors
Background/Primary
#FAFAFA
Background/Secondary
#EDEDED
Background/Tertiary
#E3E3E3
Background/Elevated
#FFFFFF
Surface/Inverse
#0F0F0F
Surface/Inverse Raised
#1E1E1E
Surface/Inverse Muted
#2E2E2E
Text/Primary
#0F0F0F
Text/Secondary
15,15,15 · 60%
Text/Tertiary
15,15,15 · 35%
Text/Inverse
#FAFAFA
Text/Inverse Secondary
250,250,250 · 60%
Border/Primary
15,15,15 · 10%
Border/Strong
15,15,15 · 20%
Border/Inverse
250,250,250 · 12%
Accent/Primary
#00FFD0
Accent/Primary Hover
#00E6BB
Accent/Secondary
#F6D84D
Accent/On Accent
#0F0F0F
02
Typography
Display
Your atelier, beautifully operated.
Heading 1
Five agents, one studio.
Heading 2
A digital studio for your atelier.
Heading 3
Studio
Heading 4
Approve
Heading 5
Who approves the information?
Body/Large
Fio is software with five AI agents that learn your atelier.
Body/Medium
From one collection to a complete Digital Atelier.
Body/Small
Bring brand notes, garment images and policies together.
Label/Mono
Explore the agents
Label/Tag
Digital Atelier
UI/Button
Get started
UI/Nav
Examples
03
Components
Button · 6 variants + hover
Icon Button · Tag · Logo
Block Tile (dark surface)
Cards
Atelier knowledge
Bring your atelier’s identity and collection stories together.
Studio
A digital studio shaped around your atelier.
Digital Atelier
Illustrative example
Bring your atelier’s information together in one place.
The agents
Five agents, one Digital Atelier.
Fio brings your atelier’s knowledge together in one digital studio.
01
Brand
AI agent · example
02
Garment
AI agent · example
03
Capability
AI agent · example
04
Commercial
AI agent · example
05
Operations
AI agent · example
06
Digital Atelier
Connected studio
07
Fio
Software
AI agent · example
Brand
Organises identity, voice and collection stories.
AI agent · example
Garment
Structures garments, materials and construction details.
AI agent · example
Capability
Records owner-confirmed production capabilities.
AI agent · example
Commercial
Organises approved pricing, lead times and policies.
AI agent · example
Operations
Organises enquiries, approvals and order workflows.
Connected studio
Digital Atelier
Brings the five agents’ knowledge together.
Software
Fio
Your atelier, beautifully operated.
A digital studio for your atelier
Fitting policies
Brand profile
Collection stories
Garment catalogue
Materials
Capabilities
Permitted changes
Pricing
Lead times
Consultations
Order workflows
Deposits
Example
Agents, connected
Example
Owner approval
01
Atelier first
Stat Card · FAQ
AI agents
5
AI agents
5
What is a Digital Atelier?
What is a Digital Atelier?
A digital studio that brings your atelier’s knowledge together with support from five AI agents.
Navigation · Timeline Player · Footer
00:01.25 / 00:12
Dur
5s
sec
Autoplay on
0s
1s
2s
3s
4s
5s
6s
7s
8s
04
Brand Assets
Favicon (light tab · dark tab) · Apple touch icon
Social share image · 1200 × 630
Digital Atelier
Your atelier with AI agents.
Five AI agents that learn your atelier, build your digital studio and help run your business.