jsdaigle.com
The world is changing. It was time for a refresh and a few statements.
Can I still do things from end to end? Yeah, why not.
So I've set myself on a quest to redo my portfolio. Logos, icons, design system, texts, and all that AI stuff that keeps getting faster.
Design
Vision
Workshop
System
TeachingI started by revamping my logo. A new moustache, new colours and some graphics to put everything into context.
Then I built a design system in Figma, so I could move fast and edit in bulk.
Finding the right tool to convert from Figma to Web. And oh boy! The industry does not have a winner yet. It's all about trade-offs.
Text and content. What is my writing style? What do I want to say? What do people want to hear?
The icon family
The design system, in short
Colors, type, buttons and icons: the essentials behind this site.
Colors
Green
#3F624C
Primary
Forest
#1F3527
Footer and contrast
Rust
#DA5435
Accent and buttons
Navy
#1E465B
Supporting colour
Sand
#E1B26E
Highlights
Canvas
#F4F3EB
Background
Typography
Families
Fraunces
--font-heading
Hanken Grotesk
--font-body
JetBrains Mono
--font-mono
Scale
Good design is hard
text-5xl: 48px
Good design is hard
text-3xl: 30px
Good design is hard
text-xl: 20px
Good design is hard
text-base: 16px
Buttons
Hover any button to see its state transition. "Light" is the outline variant used against dark backgrounds, like the footer CTA.
Icons
Approach
Services
AI
Misc
Credits
- Design, content and code
- Jean-Sébastien Daigle · Independent