Team design style: Difference between revisions
No edit summary |
No edit summary |
||
| Line 6: | Line 6: | ||
The design style of our team is not merely a selection of colors; it is a philosophy rooted in the understanding of the importance of visual perception. We strive to ensure that every design element is both functional and aesthetically pleasing, creating a cohesive and professional appearance that reflects our values and aspirations. | The design style of our team is not merely a selection of colors; it is a philosophy rooted in the understanding of the importance of visual perception. We strive to ensure that every design element is both functional and aesthetically pleasing, creating a cohesive and professional appearance that reflects our values and aspirations. | ||
{| class="wikitable" | {| class="wikitable" | ||
|+ | |+ | ||
| Line 21: | Line 20: | ||
| #434343 | | #434343 | ||
|67, 67, 67 | |67, 67, 67 | ||
| <div style="width: 20px; height: 20px; background-color: #434343;"></div> | | <div style="width: 20px; height: 20px; background-color: #434343; display: flex; align-items: center; justify-content: center;"></div> | ||
|- | |- | ||
| Charcoal Gray | | Charcoal Gray | ||
| #2c2c2c | | #2c2c2c | ||
|44, 44, 44 | |44, 44, 44 | ||
| <div style="width: 20px; height: 20px; background-color: #2c2c2c;"></div> | | <div style="width: 20px; height: 20px; background-color: #2c2c2c; display: flex; align-items: center; justify-content: center;"></div> | ||
|- | |- | ||
| Deep Black | | Deep Black | ||
| #1b1b1b | | #1b1b1b | ||
|27, 27, 27 | |27, 27, 27 | ||
| <div style="width: 20px; height: 20px; background-color: #1b1b1b;"></div> | | <div style="width: 20px; height: 20px; background-color: #1b1b1b; display: flex; align-items: center; justify-content: center;"></div> | ||
|- | |- | ||
| rowspan="2" | Selection Colors | | rowspan="2" | Selection Colors | ||
| Line 37: | Line 36: | ||
| #ffe400 | | #ffe400 | ||
|255, 228, 0 | |255, 228, 0 | ||
| <div style="width: 20px; height: 20px; background-color: #ffe400;"></div> | | <div style="width: 20px; height: 20px; background-color: #ffe400; display: flex; align-items: center; justify-content: center;"></div> | ||
|- | |- | ||
| Vivid Orange | | Vivid Orange | ||
| #ff8000 | | #ff8000 | ||
|255, 128, 0 | |255, 128, 0 | ||
| <div style="width: 20px; height: 20px; background-color: #ff8000;"></div> | | <div style="width: 20px; height: 20px; background-color: #ff8000; display: flex; align-items: center; justify-content: center;"></div> | ||
|- | |- | ||
| rowspan="2" | Additional Text Colors | | rowspan="2" | Additional Text Colors | ||
| Line 48: | Line 47: | ||
| #d9d9d9 | | #d9d9d9 | ||
|217, 217, 217 | |217, 217, 217 | ||
| <div style="width: 20px; height: 20px; background-color: #d9d9d9;"></div> | | <div style="width: 20px; height: 20px; background-color: #d9d9d9; display: flex; align-items: center; justify-content: center;"></div> | ||
|- | |- | ||
| Soft Gray: | | Soft Gray: | ||
| #e9eae9 | | #e9eae9 | ||
|233, 234, 233 | |233, 234, 233 | ||
| <div style="width: 20px; height: 20px; background-color: #e9eae9;"></div> | | <div style="width: 20px; height: 20px; background-color: #e9eae9; display: flex; align-items: center; justify-content: center;"></div> | ||
|- | |- | ||
| rowspan="2" | Transitional Colors | | rowspan="2" | Transitional Colors | ||
| Line 59: | Line 58: | ||
| #8c8c8c | | #8c8c8c | ||
|140, 140, 140 | |140, 140, 140 | ||
| <div style="width: 20px; height: 20px; background-color: #8c8c8c;"></div> | | <div style="width: 20px; height: 20px; background-color: #8c8c8c; display: flex; align-items: center; justify-content: center;"></div> | ||
|- | |- | ||
| Warm Beige: | | Warm Beige: | ||
| #ffc387 | | #ffc387 | ||
|255, 195, 135 | |255, 195, 135 | ||
| <div style="width: 20px; height: 20px; background-color: #ffc387;"></div> | | <div style="width: 20px; height: 20px; background-color: #ffc387; display: flex; align-items: center; justify-content: center;"></div> | ||
|- | |- | ||
| Title Color | | Title Color | ||
| Line 70: | Line 69: | ||
| #FFFFFF | | #FFFFFF | ||
|255, 255, 255 | |255, 255, 255 | ||
| <div style="width: 20px; height: 20px; background-color: #FFFFFF; border: 1px solid #000;"></div> | | <div style="width: 20px; height: 20px; background-color: #FFFFFF; border: 1px solid #000; display: flex; align-items: center; justify-content: center;"></div> | ||
|} | |} | ||
</div> | </div> | ||
Revision as of 16:40, 5 November 2024
Like any respectable team, we have our own design style that reflects our uniqueness and approach to work. We prefer to use deep gray shades, such as #434343, #2c2c2c, and #1b1b1b, as our team often works during the night, and bright light can be distracting and uncomfortable during this time. These colors create a calm and focused atmosphere conducive to the creative process and productive work.
Our design style not only shapes the visual perception of our projects but also serves as the foundation for building a cohesive brand. Bright accents, such as #ffe400 and #ff8000, are employed to highlight important elements, adding energy and dynamism to our work. Meanwhile, additional shades like #d9d9d9 and #e9eae9 provide balance, enhancing text readability and creating harmony in the overall perception.
Transitional colors, including #8c8c8c and #ffc387, act as connecting elements, establishing smooth transitions between various design components. At the same time, the pure white used for titles (#FFFFFF) adds clarity and modernity, drawing attention to key messages.
The design style of our team is not merely a selection of colors; it is a philosophy rooted in the understanding of the importance of visual perception. We strive to ensure that every design element is both functional and aesthetically pleasing, creating a cohesive and professional appearance that reflects our values and aspirations.
| Color Palette | ||||
| Category | Color Name | HEX code | RGB Code | Example View |
| Main Colors | Dark Gray: | #434343 | 67, 67, 67 | |
| Charcoal Gray | #2c2c2c | 44, 44, 44 | ||
| Deep Black | #1b1b1b | 27, 27, 27 | ||
| Selection Colors | Bright Yellow | #ffe400 | 255, 228, 0 | |
| Vivid Orange | #ff8000 | 255, 128, 0 | ||
| Additional Text Colors | Light Gray | #d9d9d9 | 217, 217, 217 | |
| Soft Gray: | #e9eae9 | 233, 234, 233 | ||
| Transitional Colors | Medium Gray | #8c8c8c | 140, 140, 140 | |
| Warm Beige: | #ffc387 | 255, 195, 135 | ||
| Title Color | Pure White | #FFFFFF | 255, 255, 255 | |
