{"id":25255,"date":"2025-02-04T18:55:11","date_gmt":"2025-02-04T17:55:11","guid":{"rendered":"https:\/\/2budesign.com\/?page_id=25255"},"modified":"2026-08-19T15:47:20","modified_gmt":"2026-08-19T13:47:20","slug":"basic-modules","status":"publish","type":"page","link":"https:\/\/2budesign.com\/en\/brand-guidelines\/basic-modules\/","title":{"rendered":"Basic Modules"},"content":{"rendered":"
\n
\n
\n

BRAND GUIDELINES<\/h4><\/div><\/div>\n\n

Basic Modules<\/h1><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n
\n
\n
\n

Colours<\/h2>\n<\/div><\/div>\n\n

Colours convey brand values, but they also organise content and guide the user. A good colour scheme distinguishes between primary colours (brand colours), secondary colours (complementary accents) and colours used for interactions and confirmations, such as for buttons, error messages or success messages. Consistent use ensures clarity in user guidance and a strong visual identity.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

Primary Colours<\/h3>\n

The deliberate interplay of the primary colours creates a distinctive colour scheme that clearly defines our visual communication. Depending on the combination, they establish a clear association with the brand at the colour level alone. In conjunction with other design elements, they play a decisive role in shaping the characteristic look and feel of our brand identity.<\/span><\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n
<\/span><\/div>

Avocado Skin (main colour)
<\/strong>#00313c<\/p>\n

Dark backgrounds, background post slider, top menu<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n

\n
<\/span><\/div>

Lemon Sobet (Highlight)
<\/strong>#c1fb69<\/p>\n

Headings, hover buttons, hover icons, hover\/active navigation, breadcrumb, links<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n

\n
<\/span><\/div>

Pumpkin Spice (Call to Action)<\/strong>
#fa6e43<\/p>\n

Call to action, button, icons, shopping basket and search icons, crossed-out price, filter criteria, H4<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n

\n
<\/span><\/div>

Sage Butte (troublemaker)<\/strong>
#92aca0<\/p>\n

Promotional items, special offers<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n
<\/span><\/div>

Pink Grapefruit (accent)<\/strong>
#ffb3ab<\/p>\n

another accent<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n

\n
<\/span><\/div>

Cashew Cream (light background)<\/b>
#f6f0d8<\/p>\n

Light-coloured backgrounds<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n

\n
<\/span><\/div>

Black Sesame (Lyrics)<\/strong>
#212322<\/p>\n

Body text<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n

\n
<\/span><\/div>

Icing Sugar<\/strong>
#ffffff<\/p>\n

Page background<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

Secondary Colours<\/h3>\n

The secondary colours are used specifically in the design of infographics, diagrams and illustrations. In other areas of brand communication, their use is deliberately avoided.<\/span><\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n
<\/span><\/div>

Accent<\/strong>
#000000<\/p>\n

Body text<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n

\n
<\/span><\/div>

Light-coloured background<\/b>
#f7f3ec<\/p>\n

Light-coloured backgrounds<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n

\n
<\/span><\/div>

Black<\/strong>
#000000<\/p>\n

Body text<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n

\n
<\/span><\/div>

White<\/strong>
#ffffff<\/p>\n

Page background<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

Interaction & Validation Colours<\/h3>\n

Colours used for interactions such as hover, click or focus, as well as for validation states (e.g. success, error, warning), help users to navigate and provide feedback. They ensure intuitive operation and improve accessibility. Your application follows set rules to ensure consistency and recognisability in the digital space.<\/span><\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n
<\/span><\/div>

Success<\/strong>
#000000<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n

\n
<\/span><\/div>

Warning<\/b>
#f7f3ec<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n

\n
<\/span><\/div>

Error<\/strong>
#d64228<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n

\n
<\/span><\/div>

Note<\/strong>
#ffffff<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n
<\/span><\/div>

Lines<\/strong>
#e6e6e6<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n

\n
<\/span><\/div>

Fields<\/b>
#f8f8f8<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n

<\/div>\n\n
<\/div>\n<\/div>\n\n
\n
\n

rgba(210,218,228,0.38)<\/p>\n

Background (Hero et al.)
Colour code: #eef1f5<\/p>\n<\/div><\/div>\n\n

- without -<\/p>\n

Menu: Background (overall)<\/p>\n<\/div><\/div>\n\n

- without -<\/p>\n

Menu text, level 1 background<\/p>\n<\/div><\/div>\n\n

#5f6264<\/p>\n

Menu text, level 1 selected<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

#ffffff<\/p>\n

Second-level menu background<\/p>\n<\/div><\/div>\n\n

- Divi Standard -<\/p>\n

Menu text, level 2 background<\/p>\n<\/div><\/div>\n\n

- without -<\/p>\n

Menu text \u2013 Level 2 selected<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

- without -<\/p>\n

Menu: Jewellery item (complete)<\/p>\n<\/div><\/div>\n\n

#5f6264<\/p>\n

Menu text, level 1 :hover<\/p>\n<\/div><\/div>\n\n

- without -<\/p>\n

Menu text, level 1 selected, background<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

#5f6264<\/p>\n

Level 2 menu: Separator\/Line colour<\/p>\n<\/div><\/div>\n\n

- Divi Standard -<\/p>\n

Menu text, level 2 :hover<\/p>\n<\/div><\/div>\n\n

- without -<\/p>\n

Menu text, 2nd level selected, background<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

#5f6264<\/p>\n

Menu text, level 1<\/p>\n<\/div><\/div>\n\n

- without -<\/p>\n

Menu text, level 1: :hover background<\/p>\n<\/div><\/div>\n\n

#5f6264<\/p>\n

Hamburger<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

#5f6264<\/p>\n

Second-level menu text<\/p>\n<\/div><\/div>\n\n

- Divi Standard -<\/p>\n

Second-level menu text :hover background<\/p>\n<\/div><\/div>\n\n

#5f6264<\/p>\n

Navigation menu, Product price<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n

Typography<\/h2>\n<\/div><\/div>\n\n

The main typeface forms the typographical backbone of the \u2013 brand identity; it ensures consistency, legibility and recognisability across all media. It is complemented by an accent typeface, which is used specifically for particular content, such as quotations. <\/span>The font hierarchy organises content in a clear and visually intuitive way: it distinguishes between headings, body text, subheadings, etc. \u2013 and guides users intuitively through the content.<\/span><\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

Text<\/span><\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

4Topline H4 \u2013 Roboto Condensed Demi Bold 13 px\/2 em 1.2 px<\/h4>\n

Headline H1 \u2013 Roboto Condensed Medium
63 px\/1.0 em<\/h1>\n

Headline H2 \u2013 Roboto Condensed Medium
39 px\/1.4 em<\/h2>\n

Headline H3 \u2013 Roboto Condensed Medium
24 px\/1.4 em<\/h3>\n

Cross-heading H5 \u2013 Roboto Condensed Bold
16 px \/ 1.6 em<\/h5>\n
Caption H6 \u2013 Roboto Condensed Regular 14 px\/2 em<\/h6>\n

Copy \u2013 Roboto Condensed Regular 16 px\/1.8 em Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor Hyperlink.<\/a> Even if the mountains were to give birth, with the aid of their companions, their ancestral spirits and the great gods, a ridiculous mouse would be born. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.<\/p>\n

\n

Quote \u2013 Georgia 24 px\/1.4 em Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<\/p>\n<\/blockquote>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

Call to Action<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

Your title<\/h3>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<\/p>\n<\/div><\/div>

Button<\/a><\/div><\/div>\n<\/div>\n\n
\n

Your title<\/h3>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<\/p>\n<\/div><\/div>

Button<\/a><\/div><\/div>\n<\/div>\n<\/div>\n\n
\n
\n

Blurb\/Information text<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n
<\/span><\/div>

Title<\/h4>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.<\/p>\n

Even if the mountains were to give birth, with the aid of their companions, their ancestral spirits and the great gods, a ridiculous mouse would be born. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec.<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n

\n
<\/span><\/div>

Title<\/h4>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.<\/p>\n

Even if the mountains were to give birth, with the aid of their companions, their ancestral spirits and the great gods, a ridiculous mouse would be born. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec.<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n\n

\n
<\/span><\/div>

Title<\/h4>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.<\/p>\n

Even if the mountains were to give birth, with the aid of their companions, their ancestral spirits and the great gods, a ridiculous mouse would be born. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec.<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n

Imagery<\/h2>\n<\/div><\/div>\n\n

Images, product photos, illustrations and videos are used strategically to enhance content visually. In image galleries or video sliders, they serve to evoke an emotional response and convey information. <\/span>Product photographs, for example, can be visually emphasised through the use of shadows. General images, on the other hand, remain shadowless but can be accentuated by decorative elements such as frames \u2013 a principle that also applies to illustrations.<\/span><\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

Image<\/p>\n<\/div><\/div>\n\n

<\/span><\/div>\n<\/div>\n\n
\n

Product<\/p>\n<\/div><\/div>\n\n

<\/span><\/div>\n<\/div>\n\n
\n

Illustration<\/p>\n<\/div><\/div>\n\n

<\/span><\/div>\n<\/div>\n<\/div>\n\n
\n
\n

Gallery Slider<\/p>\n<\/div><\/div>\n\n

\"\"<\/span><\/a><\/div><\/div>
\"\"<\/span><\/a><\/div><\/div>
\"\"<\/span><\/a><\/div><\/div>
\"\"<\/span><\/a><\/div><\/div><\/div><\/div>\n<\/div>\n\n
\n

Gallery Grid<\/p>\n<\/div><\/div>\n\n

\"\"<\/span><\/a><\/div>
gallery-coffee-image-5<\/h6><\/div>
\"\"<\/span><\/a><\/div>
gallery-coffee-image-1<\/h6><\/div>
\"\"<\/span><\/a><\/div>
gallery-coffee-image-2-1<\/h6><\/div>
\"\"<\/span><\/a><\/div>
coffee-image-9<\/h6><\/div><\/div>
<\/div><\/div>\n<\/div>\n<\/div>\n\n
\n
\n

Video Slider<\/p>\n<\/div><\/div>\n\n

\n