About this website
All resources (fonts, technologies, and inspirations) used on this website are documented on this dedicated page.
Last updated on December 19, 2023
About this website
All resources (fonts, technologies, and inspirations) used on this website are documented on this dedicated page.
Last updated on December 19, 2023
About this website
All resources (fonts, technologies, and inspirations) used on this website are documented on this dedicated page.
Last updated on December 19, 2023
About this website
All resources (fonts, technologies, and inspirations) used on this website are documented on this dedicated page.
Last updated on December 19, 2023
Colophon
Find here all the details about the typefaces and their fonts used on my website, including the initial thinking and decisions behind these choices, the type system, and more information about the foundries.
Style
Foundry
Typeface
Subfamily
Weight
Preview
Display 1
Black Foundry
Bluu Suuperstar
-
Black
Display 2
Grilli Type
GT America
Expanded
Black
Heading 1
Black Foundry
Bluu Suuperstar
-
Black
Heading 2
Black Foundry
Bluu Suuperstar
-
Black
Heading 3
Grilli Type
Bluu Suuperstar
-
Black
Emphasis
Grilli Type
GT America
Standard
Light
Button
Grilli Type
GT America
Standard
Medium
Body M
Grilli Type
GT America
Standard
Medium
Body S
Grilli Type
GT America
Standard
Light
Label M
Grilli Type
GT America
Standard
Medium
Label S
Grilli Type
GT America
Standard
Light
Subheading
Grilli Type
GT America
Mono
Medium
Secret
Grilli Type
GT America
Mono
Medium
Aa
Metric
≤ 809 px
≥ 810 px
≥ 1440 px
Size
-
px
-
px
-
px
Leading
-
px
-
px
-
px
Kerning
-
px
-
px
-
px
-
GT America
Through the years, I accumulated books and collection of works of great designers through Standards Manual, The Brand Identity, Counter Print, and others.
Like many designers, I was greatly inspired by the work of Massimo and Lella Vignelli, especially their work for the NYC Transit Authority / Metropolitan Transportation Authority. In addition to the NYCTA Graphics Standards Manual + Objects, I spent hours browsing through Parks, Grid Systems, NASA Graphics Standards Manual, Swiss Federal Railways Design Manual, Dieter Rams Complete Works, Big Type, and the four volumes of The Process.
Through all these works, I knew that what I was looking for was a typeface that had a strong presence, condensed proportions, and the robustness of American Gothics, while embracing the simplicity, legibility, and geometric shapes of European Neo-Grotesque typefaces.
GT America was the best contender for this role. Its expanded family perfectly matched what I had in mind for my noticeboard, while also performing excellently for the copy and small indications on all pages.
Foundry
Grilli Type
Designers
Noël Leu, with Seb McLauchlan. Script extensions by Grilli Type with Tania Chacana. Consulting by Maria Doreuli (Cyrillics), Vassilis Georgiou (Greek), Donny Trương (Vietnamese).
Release
2016
Bluu Suuperstar
Since my earliest memories, I have been captivated by blackletter designs. One particular example that immediately caught my attention was The New York Times masthead logo. It was when I stumbled upon Bluu Superstar in Black Foundry's catalog that I knew it will be the perfect match about four years ago.
I was searching for a serif typeface that could convey a lot of energy. With its sharp edges and broken strokes resembling bolts of electricity, this brutalist typeface greatly enhanced the visual impact of each page of this website. As a result, Thunderstorm became an even more fitting name.
Additionally, its tall x-height made it particularly well-suited for display elements and headings, I couldn't have found a better ally.
Foundry
Black Foundry
Designers
Jean-Baptiste Morizot and Gaëtan Baehr
Release
2017
Technologies
Not an exhaustive list of my current stack but just some of the apps and librairies that helped me in bringing this website to life.
Framer
As someone who loves spending as much time on a canvas as inside a code editor, portfolios and personal websites have always been great excuses to learn new tools and techniques.
I had prior experiences with Framer X and Bridge in 2018 and immediately loved the idea of using production-ready React components where designers are involved. I always kept an eye on Framer, and since their pivot with Sites, the temptation was growing mont after month.
Framer Awards SOTY 2022 were the last signal I needed to give this promising new tool a try. So I tried Framer Sites, and I basically never went back since. One thing that I love is the ability to use code when I want to, play with external APIs, bring dynamics and advanced interactions to my layouts, while keeping things simple with the implementation part.
Its true power lies in the leverage of the React ecosystem, allowing designers to bridge the gap between their ideas and their implementation, while still having the option to code if they want to.
Framer Motion
Used inside both design and code components, for entrance and scroll animations for each of my pages. I'm a big fan of their Spring function for the parts of my website that needs an electrical effect.
Rive
The state machine is so powerful that it’s now hard to think about an animation — interactive or not, without thinking about using Rive. Really impressive tool.
By the way, did you find the easter egg on my homepage hero yet? Let me know on Twitter if you’re interested in learning how to create this kind of puzzle.
Inspirations
Find here all the details about the typefaces and their fonts used on my website, including the initial thinking and decisions behind these choices, the type system, and more information about the foundries.
Colophon
Find here all the details about the typefaces and their fonts used on my website, including the initial thinking and decisions behind these choices, the type system, and more information about the foundries.
Style
Foundry
Typeface
Subfamily
Weight
Preview
Display 1
Black Foundry
Bluu Suuperstar
-
Black
Display 2
Grilli Type
GT America
Expanded
Black
Heading 1
Black Foundry
Bluu Suuperstar
-
Black
Heading 2
Black Foundry
Bluu Suuperstar
-
Black
Heading 3
Grilli Type
Bluu Suuperstar
-
Black
Emphasis
Grilli Type
GT America
Standard
Light
Button
Grilli Type
GT America
Standard
Medium
Body M
Grilli Type
GT America
Standard
Medium
Body S
Grilli Type
GT America
Standard
Light
Label M
Grilli Type
GT America
Standard
Medium
Label S
Grilli Type
GT America
Standard
Light
Subheading
Grilli Type
GT America
Mono
Medium
Secret
Grilli Type
GT America
Mono
Medium
Aa
Metric
≤ 809 px
≥ 810 px
≥ 1440 px
Size
-
px
-
px
-
px
Leading
-
px
-
px
-
px
Kerning
-
px
-
px
-
px
-
GT America
Through the years, I accumulated books and collection of works of great designers through Standards Manual, The Brand Identity, Counter Print, and others.
Like many designers, I was greatly inspired by the work of Massimo and Lella Vignelli, especially their work for the NYC Transit Authority / Metropolitan Transportation Authority. In addition to the NYCTA Graphics Standards Manual + Objects, I spent hours browsing through Parks, Grid Systems, NASA Graphics Standards Manual, Swiss Federal Railways Design Manual, Dieter Rams Complete Works, Big Type, and the four volumes of The Process.
Through all these works, I knew that what I was looking for was a typeface that had a strong presence, condensed proportions, and the robustness of American Gothics, while embracing the simplicity, legibility, and geometric shapes of European Neo-Grotesque typefaces.
GT America was the best contender for this role. Its expanded family perfectly matched what I had in mind for my noticeboard, while also performing excellently for the copy and small indications on all pages.
Foundry
Grilli Type
Designers
Noël Leu, with Seb McLauchlan. Script extensions by Grilli Type with Tania Chacana. Consulting by Maria Doreuli (Cyrillics), Vassilis Georgiou (Greek), Donny Trương (Vietnamese).
Release
2016
Bluu Suuperstar
Since my earliest memories, I have been captivated by blackletter designs. One particular example that immediately caught my attention was The New York Times masthead logo. It was when I stumbled upon Bluu Superstar in Black Foundry's catalog that I knew it will be the perfect match about four years ago.
I was searching for a serif typeface that could convey a lot of energy. With its sharp edges and broken strokes resembling bolts of electricity, this brutalist typeface greatly enhanced the visual impact of each page of this website. As a result, Thunderstorm became an even more fitting name.
Additionally, its tall x-height made it particularly well-suited for display elements and headings, I couldn't have found a better ally.
Foundry
Black Foundry
Designers
Jean-Baptiste Morizot and Gaëtan Baehr
Release
2017
Technologies
Not an exhaustive list of my current stack but just some of the apps and librairies that helped me in bringing this website to life.
Framer
As someone who loves spending as much time on a canvas as inside a code editor, portfolios and personal websites have always been great excuses to learn new tools and techniques.
I had prior experiences with Framer X and Bridge in 2018 and immediately loved the idea of using production-ready React components where designers are involved. I always kept an eye on Framer, and since their pivot with Sites, the temptation was growing mont after month.
Framer Awards SOTY 2022 were the last signal I needed to give this promising new tool a try. So I tried Framer Sites, and I basically never went back since. One thing that I love is the ability to use code when I want to, play with external APIs, bring dynamics and advanced interactions to my layouts, while keeping things simple with the implementation part.
Its true power lies in the leverage of the React ecosystem, allowing designers to bridge the gap between their ideas and their implementation, while still having the option to code if they want to.
Framer Motion
Used inside both design and code components, for entrance and scroll animations for each of my pages. I'm a big fan of their Spring function for the parts of my website that needs an electrical effect.
Rive
The state machine is so powerful that it’s now hard to think about an animation — interactive or not, without thinking about using Rive. Really impressive tool.
By the way, did you find the easter egg on my homepage hero yet? Let me know on Twitter if you’re interested in learning how to create this kind of puzzle.
Inspirations
Find here all the details about the typefaces and their fonts used on my website, including the initial thinking and decisions behind these choices, the type system, and more information about the foundries.
Colophon
Find here all the details about the typefaces and their fonts used on my website, including the initial thinking and decisions behind these choices, the type system, and more information about the foundries.
Style
Foundry
Typeface
Subfamily
Weight
Preview
Display 1
Black Foundry
Bluu Suuperstar
-
Black
Display 2
Grilli Type
GT America
Expanded
Black
Heading 1
Black Foundry
Bluu Suuperstar
-
Black
Heading 2
Black Foundry
Bluu Suuperstar
-
Black
Heading 3
Grilli Type
Bluu Suuperstar
-
Black
Emphasis
Grilli Type
GT America
Standard
Light
Button
Grilli Type
GT America
Standard
Medium
Body M
Grilli Type
GT America
Standard
Medium
Body S
Grilli Type
GT America
Standard
Light
Label M
Grilli Type
GT America
Standard
Medium
Label S
Grilli Type
GT America
Standard
Light
Subheading
Grilli Type
GT America
Mono
Medium
Secret
Grilli Type
GT America
Mono
Medium
Aa
Metric
≤ 809 px
≥ 810 px
≥ 1440 px
Size
-
px
-
px
-
px
Leading
-
px
-
px
-
px
Kerning
-
px
-
px
-
px
-
GT America
Through the years, I accumulated books and collection of works of great designers through Standards Manual, The Brand Identity, Counter Print, and others.
Like many designers, I was greatly inspired by the work of Massimo and Lella Vignelli, especially their work for the NYC Transit Authority / Metropolitan Transportation Authority. In addition to the NYCTA Graphics Standards Manual + Objects, I spent hours browsing through Parks, Grid Systems, NASA Graphics Standards Manual, Swiss Federal Railways Design Manual, Dieter Rams Complete Works, Big Type, and the four volumes of The Process.
Through all these works, I knew that what I was looking for was a typeface that had a strong presence, condensed proportions, and the robustness of American Gothics, while embracing the simplicity, legibility, and geometric shapes of European Neo-Grotesque typefaces.
GT America was the best contender for this role. Its expanded family perfectly matched what I had in mind for my noticeboard, while also performing excellently for the copy and small indications on all pages.
Foundry
Grilli Type
Designers
Noël Leu, with Seb McLauchlan. Script extensions by Grilli Type with Tania Chacana. Consulting by Maria Doreuli (Cyrillics), Vassilis Georgiou (Greek), Donny Trương (Vietnamese).
Release
2016
Bluu Suuperstar
Since my earliest memories, I have been captivated by blackletter designs. One particular example that immediately caught my attention was The New York Times masthead logo. It was when I stumbled upon Bluu Superstar in Black Foundry's catalog that I knew it will be the perfect match about four years ago.
I was searching for a serif typeface that could convey a lot of energy. With its sharp edges and broken strokes resembling bolts of electricity, this brutalist typeface greatly enhanced the visual impact of each page of this website. As a result, Thunderstorm became an even more fitting name.
Additionally, its tall x-height made it particularly well-suited for display elements and headings, I couldn't have found a better ally.
Foundry
Black Foundry
Designers
Jean-Baptiste Morizot and Gaëtan Baehr
Release
2017
Technologies
Not an exhaustive list of my current stack but just some of the apps and librairies that helped me in bringing this website to life.
Framer
As someone who loves spending as much time on a canvas as inside a code editor, portfolios and personal websites have always been great excuses to learn new tools and techniques.
I had prior experiences with Framer X and Bridge in 2018 and immediately loved the idea of using production-ready React components where designers are involved. I always kept an eye on Framer, and since their pivot with Sites, the temptation was growing mont after month.
Framer Awards SOTY 2022 were the last signal I needed to give this promising new tool a try. So I tried Framer Sites, and I basically never went back since. One thing that I love is the ability to use code when I want to, play with external APIs, bring dynamics and advanced interactions to my layouts, while keeping things simple with the implementation part.
Its true power lies in the leverage of the React ecosystem, allowing designers to bridge the gap between their ideas and their implementation, while still having the option to code if they want to.
Framer Motion
Used inside both design and code components, for entrance and scroll animations for each of my pages. I'm a big fan of their Spring function for the parts of my website that needs an electrical effect.
Rive
The state machine is so powerful that it’s now hard to think about an animation — interactive or not, without thinking about using Rive. Really impressive tool.
By the way, did you find the easter egg on my homepage hero yet? Let me know on Twitter if you’re interested in learning how to create this kind of puzzle.
Inspirations
Find here all the details about the typefaces and their fonts used on my website, including the initial thinking and decisions behind these choices, the type system, and more information about the foundries.
Colophon
Find here all the details about the typefaces and their fonts used on my website, including the initial thinking and decisions behind these choices, the type system, and more information about the foundries.
Style
Foundry
Typeface
Subfamily
Weight
Preview
Display 1
Black Foundry
Bluu Suuperstar
-
Black
Display 2
Grilli Type
GT America
Expanded
Black
Heading 1
Black Foundry
Bluu Suuperstar
-
Black
Heading 2
Black Foundry
Bluu Suuperstar
-
Black
Heading 3
Grilli Type
Bluu Suuperstar
-
Black
Emphasis
Grilli Type
GT America
Standard
Light
Button
Grilli Type
GT America
Standard
Medium
Body M
Grilli Type
GT America
Standard
Medium
Body S
Grilli Type
GT America
Standard
Light
Label M
Grilli Type
GT America
Standard
Medium
Label S
Grilli Type
GT America
Standard
Light
Subheading
Grilli Type
GT America
Mono
Medium
Secret
Grilli Type
GT America
Mono
Medium
Aa
Metric
≤ 809 px
≥ 810 px
≥ 1440 px
Size
-
px
-
px
-
px
Leading
-
px
-
px
-
px
Kerning
-
px
-
px
-
px
-
GT America
Through the years, I accumulated books and collection of works of great designers through Standards Manual, The Brand Identity, Counter Print, and others.
Like many designers, I was greatly inspired by the work of Massimo and Lella Vignelli, especially their work for the NYC Transit Authority / Metropolitan Transportation Authority. In addition to the NYCTA Graphics Standards Manual + Objects, I spent hours browsing through Parks, Grid Systems, NASA Graphics Standards Manual, Swiss Federal Railways Design Manual, Dieter Rams Complete Works, Big Type, and the four volumes of The Process.
Through all these works, I knew that what I was looking for was a typeface that had a strong presence, condensed proportions, and the robustness of American Gothics, while embracing the simplicity, legibility, and geometric shapes of European Neo-Grotesque typefaces.
GT America was the best contender for this role. Its expanded family perfectly matched what I had in mind for my noticeboard, while also performing excellently for the copy and small indications on all pages.
Foundry
Grilli Type
Designers
Noël Leu, with Seb McLauchlan. Script extensions by Grilli Type with Tania Chacana. Consulting by Maria Doreuli (Cyrillics), Vassilis Georgiou (Greek), Donny Trương (Vietnamese).
Release
2016
Bluu Suuperstar
Since my earliest memories, I have been captivated by blackletter designs. One particular example that immediately caught my attention was The New York Times masthead logo. It was when I stumbled upon Bluu Superstar in Black Foundry's catalog that I knew it will be the perfect match about four years ago.
I was searching for a serif typeface that could convey a lot of energy. With its sharp edges and broken strokes resembling bolts of electricity, this brutalist typeface greatly enhanced the visual impact of each page of this website. As a result, Thunderstorm became an even more fitting name.
Additionally, its tall x-height made it particularly well-suited for display elements and headings, I couldn't have found a better ally.
Foundry
Black Foundry
Designers
Jean-Baptiste Morizot and Gaëtan Baehr
Release
2017
Technologies
Not an exhaustive list of my current stack but just some of the apps and librairies that helped me in bringing this website to life.
Framer
As someone who loves spending as much time on a canvas as inside a code editor, portfolios and personal websites have always been great excuses to learn new tools and techniques.
I had prior experiences with Framer X and Bridge in 2018 and immediately loved the idea of using production-ready React components where designers are involved. I always kept an eye on Framer, and since their pivot with Sites, the temptation was growing mont after month.
Framer Awards SOTY 2022 were the last signal I needed to give this promising new tool a try. So I tried Framer Sites, and I basically never went back since. One thing that I love is the ability to use code when I want to, play with external APIs, bring dynamics and advanced interactions to my layouts, while keeping things simple with the implementation part.
Its true power lies in the leverage of the React ecosystem, allowing designers to bridge the gap between their ideas and their implementation, while still having the option to code if they want to.
Framer Motion
Used inside both design and code components, for entrance and scroll animations for each of my pages. I'm a big fan of their Spring function for the parts of my website that needs an electrical effect.
Rive
The state machine is so powerful that it’s now hard to think about an animation — interactive or not, without thinking about using Rive. Really impressive tool.
By the way, did you find the easter egg on my homepage hero yet? Let me know on Twitter if you’re interested in learning how to create this kind of puzzle.
Inspirations
Find here all the details about the typefaces and their fonts used on my website, including the initial thinking and decisions behind these choices, the type system, and more information about the foundries.