1.
A bit of history
Albert Casado Celma
@albertcasado
• Barceloneta Theme (2015)
• Pastanaga UI (2017)
• Pastanaga Icons (2017)

2.
A bit of history
Late 2017

3.
A bit of history
2018

4.
Albert:
“The truth is that I only wanted to update Volto’s logo,
somehow I ended up creating Quanta as well 😂”

5.
A bit of history
2020

6.
What’s a style guide?

7.
Why a style guide matters?
Faster deliverables
Design consistency
One-stop guide to reference
New team members first stop
Code and design linked
Standardize code
DRY

8.
Design systems

9.
Design systems
Pre-built blocks
Ranging from basic to complex
Can be reused and combined
They play well with each other
Standardize code
DRY

10.
Works extremely well with
Plone 6 blocks model

11.
Design system
Style guide
+

12.
AND Design System

13.
New times, new workflows
How is it going
Figma
Sketch
Zeplin
Adobe XD
How it started
PDF files
Image files
Adobe PhotoShop
Adobe Illustrator

14.
quanta.pastanaga.io
Living Style Guides
Storybook
StyleGuideDist

15.
Style Guide driven development

16.
Storybook driven development
Unit Test Code StoryBook
Acceptance Test

17.
docs.voltocms.com/storybook

18.
docs.voltocms.com/storybook

19.
docs.voltocms.com/storybook
HELP!

20.
Quanta
Universal Rules
Foundamentals
Builders
Text
Form
Code
Bits
Knobs
Controls
Fields
Indicators
Panels
Dialogs
Modules
Base Ground Activatable Modules

21.
PastanagaUI and Quanta fundamentals
Simplify and focus
Don’t make the user think
Let the user go with the flow
Happy path action
Structured visual hierarchy as building blocks
Earn the user trust every day
Make the user feel understood
Treat the user as a person

22.
Strategy
Theme CMSUI