Brand Guidelines
Manifest
Mission
Our mission is to push the boundaries of web design and democratize the understanding and appreciation of different styles of art and visual expression. We aim to make art accessible and engaging for everyone, using easy-to-understand explanations and rich visual content.
Vision
Artstyles.io is the leading online destination for educational and inspirational content about art history and visual expression. We are paving the way for a revitalized understanding and appreciation of art through innovative web design and modern technology.
Values
Inspiration
We strive to inspire our audience with the beauty and historical significance of classical artworks.
Inclusivity
We are committed to making our content accessible to all, ensuring that everyone, regardless of their background or level of prior knowledge, can appreciate the depth and beauty of art.
Innovation
We continuously push the boundaries of web design and technology to create engaging and interactive experiences that bring art to life.
Respect
We honor the legacy and cultural significance of classical artworks and their creators, ensuring that their stories are told with dignity and accuracy.
Voice & Tone
Our brand communicates in a way that is approachable, friendly, and light-hearted. We believe in creating a conversational and engaging experience for our audience, using a voice that’s both inviting and informative. Emojis are a key part of our language, adding a playful touch to our interactions and helping to convey our messages more effectively.
Clear and knowledgeable
Our voice is knowledgeable yet never overbearing, always ready to guide but never to dictate. We speak clearly and concisely, making sure our communication is easy to understand and relatable.
Warm and friendly
Our tone adapts to the context and platform but maintains a consistent foundation of warmth and friendliness. Our tone is optimistic and encouraging. We use emojis to lighten the mood and enhance the emotional connection with our audience.
Personal and direct
We don’t speak about the artists; rather, we provide a platform where they can express their own stories directly to you. This approach respects their unique voices and reinforces the authenticity of their work.
Typography
Our brand uses a combination of Bodoni Moda and Raleway to establish a distinctive and harmonious visual hierarchy, ensuring clarity and elegance. The choice of these typefaces reflects our commitment to modernity and sophistication.
Primary Typeface:
Bodoni Moda
Bodoni Moda is used primarily for headings and subheadings. Its strong serifs and sharp contrasts convey a sense of formality and elegance.
Secondary Typeface:
Raleway
Raleway is used for body text and captions. This sans-serif typeface complements Bodoni Moda with its clean and versatile appearance, enhancing readability for longer texts.
Philosophy
Kitty Kielland
Our philosophy upholds the importance of mastering the traditional methods and techniques, viewing art as a disciplined practice that requires rigorous training and an extensive understanding of historical styles. We value the teachings of the academies, which emphasize careful composition, meticulous detail, and the pursuit of idealized forms derived from the classical antiquity and Renaissance ideals. For us, the significance of a well-structured narrative and the portrayal of moral or historical themes is paramount.
Color Palette
Our color palette is thoughtfully designed to offer both consistency and flexibility to suit various artistic expressions and contexts. It comprises two distinct types: static colors and dynamic colors. This dual approach allows us to maintain brand identity while also embracing the individuality of each artwork and artstyle we present.
Static Colors
Static Colors serve as foundational elements of our visual identity.
hex: #1f242b
hex: #f5deb3
hex: #E5E4DA
hex: #FFF
Dynamic Colors
Our brand embraces a dynamic and innovative approach to color that reflects the diversity and creativity of the artists we showcase. Instead of adhering to a fixed color scheme, our color palette is fluid and responsive, automatically generated from the images associated with each piece of art.
Sanity CMS delivers a image metadata property. The population property refers to the number of pixels in an image that are of a certain color.
When an image is analyzed for its color palette, the colors are grouped into different categories such as darkMuted, lightMuted, darkVibrant, lightVibrant, muted, and vibrant. For each of these categories, the population property indicates how many pixels in the image fall into that category.
This information can be useful for various purposes, such as generating color schemes from images, creating visual effects based on the colors in an image, or making decisions about text color based on the background color.
| Name | Dark Muted | Light Muted | Dark Vibrant | Light Vibrant | Muted | Vibrant |
|---|---|---|---|---|---|---|
| Styles | ||||||
| Abstract Art | 7.33 #404652 Text | 7.68 #d0a495 Menu bg | 0.03 #80302b - | 7.08 #f4da9c - | 0 #6ca4a0 - | 0.16 #f3b717 - |
| Baroque | 0.17 #524d2d Text | 0 #6a532e Menu bg | 8.12 #6d4817 - | 0 #d7c2a2 - | 0.01 #868461 - | 6.16 #b0894c - |
| Renaissance | 4.16 #473e24 Text | 5.83 #cccaac Menu bg | 5.21 #654324 - | 3.57 #f0d2a5 - | 5.28 #b19053 - | 0.3 #ca8b30 - |
| Academic Art | 6.59 #454123 Text | 1.22 #b78878 Menu bg | 1.07 #a77018 - | 3.98 #d09e93 - | 3.74 #a28c60 - | 7 #aa7934 - |
| Naturalism | 6.07 #504324 Text | 7.41 #cfc290 Menu bg | 0.35 #54430a - | 0.14 #ece0a0 - | 2.37 #a0976c - | 1.17 #beb734 - |
| Post-Impressionism | 0.6 #3e4c3e Text | 1.38 #cbcaa0 Menu bg | 0.8 #584e2a - | 0 #d4caa5 - | 4.25 #738e85 - | 3.2 #756938 - |
| Romanticism | 1.19 #36485c Text | 4.55 #cdc1a6 Menu bg | 0.35 #0b3453 - | 3.89 #fceac4 - | 1.39 #618297 - | 0.03 #6598bd - |
| Rococo | 6.92 #5c5235 Text | 3.61 #c5b58e Menu bg | 1.83 #604a23 - | 0 #d5c4a4 - | 6.56 #988e68 - | 4.9 #907542 - |
| Realism | 2.79 #4f4725 Text | 2.35 #ccc9b0 Menu bg | 0.02 #893404 - | 0.33 #e7d0a4 - | 7.15 #907e52 - | 0.69 #bc8b3b - |
| Impressionism | 5.37 #51483e Text | 6.99 #c9c0b0 Menu bg | 0.04 #664a23 - | 0.52 #efd5b8 - | 5.63 #8e8270 - | 0.09 #bc9348 - |
| Cyberpunk | 5.97 #29455c Text | 6.1 #dcd2de Menu bg | 0.42 #127a92 - | 1.27 #d690b1 - | 5.96 #537291 - | 1.81 #bf2d60 - |
| Art Nouveau | 5.45 #716632 Text | 5.51 #b1a482 Menu bg | 1.65 #705e17 - | 5.01 #ceae54 - | 3.72 #93a253 - | 5.58 #bda34e - |
| Neoclassicism | 2.04 #543f31 Text | 5.67 #d4c6b4 Menu bg | 1.42 #6b211b - | 1.91 #cc8261 - | 6.5 #a37655 - | 0.01 #b48d3c - |