Brand Colors
In the beCSS root, the first thing we find is the Brand Color Scheme, where you can define the brand colors of the design to be made.
/* Brand Color Scheme */
--brand-color:#1abc9c;
--dark-shades:#1d2a35;
--dark-accent:#737373;
--light-shades:#cae7e4;
--light-accent:#C8E6C9;
--dark-dark: #222222;
--marked-text: #ffe066;
--black: #000000;
--white: #ffffff;
Flat UI Color Scheme
Later there is the Flat UI Color Scheme, which support the entire design, and which contains a total of 20 colors. These colors are converted into classes to be used in buttons, divs and other elements.
/* Flat UI Color Scheme */
--turquoise: #1abc9c;
--green-sea: #16a085;
--emerald: #2ecc71;
--nephritis: #27ae60;
--peter-river: #3498db;
--belize-hole: #2980b9;
--amethyst: #9b59b6;
--wisteria: #8e44ad;
--wet-asphalt: #34495e;
--midnight-blue: #2c3e50;
/* up to twenty */
Fonts
Finally we have the font families and sizes.
/* Font Families */
--font-type-1: "Helvetica", sans-serif;
--font-type-2: Verdana, Arial, Helvetica, sans-serif;
--font-type-3: Tahoma, sans-serif;
--font-type-4: "Open Sans", "Trebuchet", "sans-serif";
/* Fonts size */
--body-font-size: 1em;
--footer-font-size: 1em;
--blockquote-font-size: 1em;
--caption-font-size: .9em;
--muted-font-size: .8em;
--h1-font-size: 2.5em;
--h2-font-size: 2.2em;
--h3-font-size: 1.9em;
--h4-font-size: 1.6em;
--h5-font-size: 1.3em;
--h6-font-size: 1.1em;
Branding your Style Sheet
When it comes to selecting the elements of a website that should carry the brand color, there are several key elements to consider:
Logo: The brand logo is the most important visual element that represents the company's identity. Therefore, it is essential for the logo to always carry the brand colors.
Header and footer: The header and footer are fixed areas on a web page that are displayed on every page of the site. These sections often contain elements such as the logo, company name, navigation menu, and contact links. To maintain visual consistency, these elements should carry the brand colors.
Call-to-action buttons: Call-to-action buttons like "Buy Now," "Sign Up," or "Learn More" are crucial for directing users towards desired actions. It is recommended to use the brand colors on these buttons to make them stand out and directly associate with the company's identity.
Navigation elements: Navigation elements, such as links in the main menu and secondary links, are a fundamental part of the user experience on a website. Using the brand colors on these elements will help users quickly identify navigation options and maintain a consistent appearance throughout the site.
Titles and headings: Titles and headings are key elements for the structure and hierarchy of content on a web page. By using the brand colors on these elements, the importance of information can be emphasized, and a consistent appearance with the visual identity of the company can be maintained.