diff --git a/README.md b/README.md index 30f9993..ef678d6 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,123 @@ # kermit-visual-identity -the style guide for kermit + +``` + +░▒▓█▓▒░░▒▓█▓▒░ ░▒▓████████▓▒░ ░▒▓███████▓▒░ ░▒▓██████████████▓▒░ ░▒▓█▓▒░ ░▒▓████████▓▒░ +░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░ +░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░ +░▒▓███████▓▒░ ░▒▓██████▓▒░ ░▒▓███████▓▒░ ░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░ +░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░ +░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░ +░▒▓█▓▒░░▒▓█▓▒░ ░▒▓████████▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░ + +``` + +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. 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 + +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). + +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. + +# Fonts + + +- 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 + +🚧️ 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. +- [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 + +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 🚧️ + + +# Various + +...