Jsdaigle
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 those A.I. stuff that is getting faster.
Design
Vision
Workshop
System
TeachingI started by revamping my logo. A new mustache, new colors and some graphics to put everything into context.
Then, creating a design system in Figma to build quickly and edit my design in bulk if needed.
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 off.
Text and content. What is my writing style? What do I want to say? What do people want to hear?
The design system, in full
Colors, type, buttons, and icons — the actual tokens and components behind this site, not just a preview.
Colors
Primary (green)
brand-primary
--color-brand-primary
rgb(63, 98, 76)
brand-primary-dark
--color-brand-primary-dark
rgb(31, 53, 39)
brand-primary-light
--color-brand-primary-light
rgb(186, 197, 177)
brand-primary-hover
--color-brand-primary-hover
rgb(218, 84, 53)
Secondary (rust)
brand-secondary
--color-brand-secondary
rgb(218, 84, 53)
brand-secondary-dark
--color-brand-secondary-dark
rgb(191, 57, 34)
brand-secondary-light
--color-brand-secondary-light
rgb(204, 138, 117)
brand-secondary-hover
--color-brand-secondary-hover
rgb(31, 53, 39)
Third (navy) & Forth (sand)
brand-third
--color-brand-third
rgb(30, 70, 91)
brand-third-dark
--color-brand-third-dark
rgb(19, 61, 96)
brand-third-light
--color-brand-third-light
rgb(118, 140, 148)
brand-forth
--color-brand-forth
rgb(225, 178, 110)
Text
text-dark-text
--color-text-dark-text
rgb(72, 72, 72)
text-light-text
--color-text-light-text
rgb(233, 231, 219)
text-disabled
--color-text-disabled
rgb(86, 86, 84)
text-on-brand
--color-text-on-brand
rgb(31, 53, 39)
Surface & border
bg-canvas
--color-bg-canvas
rgb(244, 243, 235)
bg-surface
--color-bg-surface
rgb(216, 219, 200)
border-strong
--color-border-strong
rgb(163, 163, 163)
border-subtle
--color-border-subtle
rgb(228, 228, 228)
white
--color-white
rgb(255, 255, 255)
Feedback
feedback-error
--color-feedback-error
rgb(185, 56, 44)
feedback-info
--color-feedback-info
rgb(45, 121, 166)
feedback-success
--color-feedback-success
rgb(43, 122, 75)
feedback-warning
--color-feedback-warning
rgb(222, 145, 29)
Typography
Families
Fraunces
--font-heading
Hanken Grotesk
--font-body
JetBrains Mono
--font-mono
Scale
Good design is hard
text-xs — 12px
Good design is hard
text-sm — 14px
Good design is hard
text-base — 16px
Good design is hard
text-lg — 18px
Good design is hard
text-xl — 20px
Good design is hard
text-2xl — 24px
Good design is hard
text-3xl — 30px
Good design is hard
text-4xl — 36px
Good design is hard
text-5xl — 48px
Good design is hard
text-big-title — 96px
Weights
Good design is hard
thin — 100
Good design is hard
light — 300
Good design is hard
regular — 400
Good design is hard
medium — 500
Good design is hard
semibold — 600
Good design is hard
bold — 700
Good design is hard
extrabold — 800
Good design is hard
black — 900
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
Misc
