From caf6791333db772ae58de0f787e382134a5f07fd Mon Sep 17 00:00:00 2001 From: Daan Date: Wed, 2 Oct 2024 20:27:17 +0200 Subject: [PATCH 01/10] Update README.md --- README.md | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 30f9993..05a8277 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,30 @@ # kermit-visual-identity -the style guide for kermit + +``` + +░▒▓█▓▒░░▒▓█▓▒░ ░▒▓████████▓▒░ ░▒▓███████▓▒░ ░▒▓██████████████▓▒░ ░▒▓█▓▒░ ░▒▓████████▓▒░ +░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░ +░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░ +░▒▓███████▓▒░ ░▒▓██████▓▒░ ░▒▓███████▓▒░ ░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░ +░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░ +░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░ +░▒▓█▓▒░░▒▓█▓▒░ ░▒▓████████▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░ + +``` + +The visual identity of Kermit + +# Colours + +... + +# Fonts + +... + +# Tools + +... + +# Various + From de1b4d3d0f8ffb5d9616bc19fafe4729e9f18bd5 Mon Sep 17 00:00:00 2001 From: Daan Date: Wed, 2 Oct 2024 20:38:40 +0200 Subject: [PATCH 02/10] Update README.md --- README.md | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 05a8277..8cff3d3 100644 --- a/README.md +++ b/README.md @@ -16,15 +16,34 @@ The visual identity of Kermit # Colours -... +Regarding colours, we suggest to use the [Catpuccin theme](https://catppuccin.com/). + +An easy installable option for Python users can be found [here](https://github.com/catppuccin/python). + +🚧️ UNDER CONSTRUCTION 🚧️ + +ports for Julia are not available atm. # Fonts -... +🚧️ UNDER CONSTRUCTION 🚧️ + + +# Logo + +🚧️ UNDER CONSTRUCTION 🚧️ + # Tools -... +- [Excalidraw](https://excalidraw.com/) is a virtual whiteboard for sketching hand-drawn like diagrams and schemas. +- [Inkscape](https://inkscape.org/) is an open-source vector drawing program. + +# Usage in presentations and documents + +🚧️ UNDER CONSTRUCTION 🚧️ + # Various +If you are in need of some more inspiration, you can check out the [Economist group brand guide](https://design-system.economist.com/documents/The_Economist_Group_brand_style_guide-Nov-2017.pdf) or the [Economist visual style guide](https://design-system.economist.com/documents/CHARTstyleguide_20170505.pdf). From c7155eb09db13841ef5acb7df41fd12e103c5246 Mon Sep 17 00:00:00 2001 From: Daan Date: Wed, 2 Oct 2024 20:43:41 +0200 Subject: [PATCH 03/10] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 8cff3d3..4c053d6 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,8 @@ ports for Julia are not available atm. # Usage in presentations and documents +If you are in need to pimp your presentations with some Catpuccin-inspired backgrounds or wallpapers, see [this repository](https://github.com/zhichaoh/catppuccin-wallpapers). + 🚧️ UNDER CONSTRUCTION 🚧️ From 008915721506ac1d9c880952d033077bc8bafbfb Mon Sep 17 00:00:00 2001 From: Daan Date: Wed, 23 Oct 2024 11:03:28 +0200 Subject: [PATCH 04/10] add napkin ai --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 4c053d6..88a2655 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,7 @@ ports for Julia are not available atm. - [Excalidraw](https://excalidraw.com/) is a virtual whiteboard for sketching hand-drawn like diagrams and schemas. - [Inkscape](https://inkscape.org/) is an open-source vector drawing program. +- [Napkin.ai](https://www.napkin.ai/) is a tool to generate `business` visuals: flowcharts, funnels, etc from text to spice up your presentation. Figures can be downloaded as a whole (both png, svg as well as pdf), but also the individual components can be stored. # Usage in presentations and documents From 24d3b071d984b23af0f56a9fa2830975c1aca57f Mon Sep 17 00:00:00 2001 From: Daan Date: Fri, 6 Dec 2024 11:54:01 +0100 Subject: [PATCH 05/10] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 88a2655..882d3df 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ The visual identity of Kermit # Colours -Regarding colours, we suggest to use the [Catpuccin theme](https://catppuccin.com/). +Regarding colours, we suggest to use the [Catpuccin theme](https://catppuccin.com/). The Latte variant has the most saturated colours and will be the best choice for plots. An easy installable option for Python users can be found [here](https://github.com/catppuccin/python). From 30b86e0615a5f1d250a2404604243bfa16a7592b Mon Sep 17 00:00:00 2001 From: Daan Date: Fri, 6 Dec 2024 11:56:55 +0100 Subject: [PATCH 06/10] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 882d3df..85d5781 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,8 @@ The visual identity of Kermit Regarding colours, we suggest to use the [Catpuccin theme](https://catppuccin.com/). The Latte variant has the most saturated colours and will be the best choice for plots. +For gradients make sure to use a colourblind friendly, perceptually uniform colour scheme, see e.g. [matplotlib colours](https://matplotlib.org/stable/users/explain/colors/colormaps.html#sequential). + An easy installable option for Python users can be found [here](https://github.com/catppuccin/python). 🚧️ UNDER CONSTRUCTION 🚧️ From 7f1caeee617870841682283c86352a21be0ee4d4 Mon Sep 17 00:00:00 2001 From: Daan Date: Fri, 6 Dec 2024 12:00:12 +0100 Subject: [PATCH 07/10] Update fonts in readme --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 85d5781..c2af7bf 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,10 @@ ports for Julia are not available atm. # Fonts -🚧️ UNDER CONSTRUCTION 🚧️ + +- font: [Roboto](https://fonts.google.com/specimen/Roboto) +- monospace: [Roboto mono](https://fonts.google.com/specimen/Roboto+Mono) or [IBM plex mono](https://fonts.google.com/specimen/IBM+Plex+Mono) +- tex-compatible: [TeX Gyre Heros](https://ctan.org/pkg/tex-gyre-heros?lang=en) # Logo From 79b5797861957fcdb3f986c1fa619ac16ede3b22 Mon Sep 17 00:00:00 2001 From: Daan Date: Fri, 6 Dec 2024 12:10:20 +0100 Subject: [PATCH 08/10] Update README.md --- README.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c2af7bf..323e02b 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,18 @@ The visual identity of Kermit +# The philosophy of visualisation and plots at Kermit: what how and why + +First start here with reading these documents: the [Economist group brand guide](https://design-system.economist.com/documents/The_Economist_Group_brand_style_guide-Nov-2017.pdf) or the [Economist visual style guide](https://design-system.economist.com/documents/CHARTstyleguide_20170505.pdf). + +Now, let us apply this to the Kermit identity. + +The 12 commandments of KERMIT plotting + +1. Make it clear from the plot itself what message you want to convey (if a line going up is positive, that should be clear without additional text). +2. + + # Colours Regarding colours, we suggest to use the [Catpuccin theme](https://catppuccin.com/). The Latte variant has the most saturated colours and will be the best choice for plots. @@ -54,4 +66,4 @@ If you are in need to pimp your presentations with some Catpuccin-inspired backg # Various -If you are in need of some more inspiration, you can check out the [Economist group brand guide](https://design-system.economist.com/documents/The_Economist_Group_brand_style_guide-Nov-2017.pdf) or the [Economist visual style guide](https://design-system.economist.com/documents/CHARTstyleguide_20170505.pdf). +... From d689685af4495cb5442e07c37c72c7bea36e315d Mon Sep 17 00:00:00 2001 From: Daan Date: Fri, 6 Dec 2024 12:30:07 +0100 Subject: [PATCH 09/10] colors update --- README.md | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/README.md b/README.md index 323e02b..cf4ebde 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,56 @@ For gradients make sure to use a colourblind friendly, perceptually uniform colo An easy installable option for Python users can be found [here](https://github.com/catppuccin/python). +Colours from the logos (extracted using https://coolors.co/): + +``` +kermit cold + +YInMn Blue +4E598C +229, 44, 55 +229, 28, 43 +78, 89, 140 +44, 36, 0, 45 +39, 10, -30 + +Sunset +F9C784 +34, 47, 98 +34, 91, 75 +249, 199, 132 +0, 20, 47, 2 +83, 10, 40 + + +kermit warm + +cerulean blue +0080A6 +194, 100, 65 +194, 100, 33 +0, 128, 166 +100, 23, 0, 35 +50, -16, -28 + +Light yellow +FDFCDC +58, 13, 99 +58, 89, 93 +253, 252, 220 +0, 0, 13, 1 +98, -5, 15 + +Bittersweet +F07167 +4, 57, 94 +4, 82, 67 +240, 113, 103 +0, 53, 57, 6 +63, 48, 29 +``` + + 🚧️ UNDER CONSTRUCTION 🚧️ ports for Julia are not available atm. From aee18baaeca114c4e59b9b9d0a69fd33cebad167 Mon Sep 17 00:00:00 2001 From: Michiel Stock Date: Wed, 11 Dec 2024 15:42:09 +0100 Subject: [PATCH 10/10] Update README.md added commandments and AD --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index cf4ebde..ef678d6 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,10 @@ Now, let us apply this to the Kermit identity. The 12 commandments of KERMIT plotting 1. Make it clear from the plot itself what message you want to convey (if a line going up is positive, that should be clear without additional text). -2. +2. Slightly ticker lines (in plots) are preferred. +3. One plot = one message for the reader. +4. A complex plot can often be replaced by a table. +5. # Colours @@ -105,7 +108,8 @@ ports for Julia are not available atm. - [Excalidraw](https://excalidraw.com/) is a virtual whiteboard for sketching hand-drawn like diagrams and schemas. - [Inkscape](https://inkscape.org/) is an open-source vector drawing program. -- [Napkin.ai](https://www.napkin.ai/) is a tool to generate `business` visuals: flowcharts, funnels, etc from text to spice up your presentation. Figures can be downloaded as a whole (both png, svg as well as pdf), but also the individual components can be stored. +- [Napkin.ai](https://www.napkin.ai/) is a tool to generate `business` visuals: flowcharts, funnels, etc, from text to spice up your presentation. Figures can be downloaded as a whole (both png, svg as well as pdf), but also the individual components can be stored. +- [Affinity Designer](https://affinity.serif.com/en-us/designer/) is a great alternative to Inkscape. It is professional software that requires a single fee. # Usage in presentations and documents