The Gallas Company
Logo
Content coming soon: This section is awaiting expert edits by Mark (writer) and will be enhanced with detailed updates shortly.
Logotype
Our typographic signature features custom letterforms that reflect the unique identity of The Gallas Company. Each detail is carefully designed to embody our brand’s character and professionalism.
The logotype can only be used on three background colors: white, grey and black.
Clear space
To allow our logotype to stand out, do not place any objects such as graphics or text in the clear space shown.
Minimum sizes
The logotype should always be legible. Never use it at sizes smaller than specified.
General positioning
This general guidance applies to digital or print applications, including both portrait and landscape orientations.
When creating a composition, place the logo in one of the four corners, or center it on the central vertical axis. Take advantage of the space and make the logo as large as possible. Remember: Be bold, be proud, make it big!
Avoid using the logotype at sizes smaller than one-third of the canvas width.
Rotation
Typically, we place our logotype flat on a 0° angle. Horizontal is our default rotation state. Examples include use in our app, on our website, and most advertising formats.
Occasionally, we rotate our logotype 90° to make the best use of space with unusual formats. By rotating the logo vertically, we are able to display it at a larger scale. Examples include vertical ad spaces such as “skyscraper” banner ads, physical banners/flags, and playful applications like merchandise or stationery.
Please don't...
- Change the color of the logo.
- Squash the logo.
- Recreate the logo using a different font.
- Outline the logo.
- Fill the logo with images.
- Place the logo over a busy background.
- Skew the logo. Accepted rotations are 0° and 90°.
- Fill the logo with gradients.
- Change the logo's spacing or proportions.
Icon
Icons are an essential visual element that helps convey information quickly and effectively.
Icon
Since The Gallas Company’s presence is primarily online, the consistent appearance of our logo is essential in helping our audience recognize our brand across various platforms. In many cases, this symbol is the first introduction people have to The Gallas Company.
Avatars
Our logo represents our identity on social accounts, keeping The Gallas Company’s professionalism front and center. It can be safely used at a variety of sizes, including as small as 16px for our favicon.
In cases where the avatar is displayed in a square frame (with or without rounded corners), the edges of the logo should align with the left and right sides of the frame. When displayed in a circular frame, there should be space between the logo and the edge on all sides.
Typography
Content coming soon: This section is awaiting expert edits by Mark (writer) and will be enhanced with detailed updates shortly.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Roboto 600
Roboto 600 is the typeface we use for headlines, when we want to shout out and get noticed. It’s bespoke to TGC, so no one else can use it. But let’s make sure that we use it nicely!
Usage
We use Roboto for both headers and body text.
- Avoid long sentences and always left-align the text.
- Use lowercase, except for names of people and places.
- Never use fully justified text or hyphenation.
h1 {
font-size: 72px
font-weight: 600
Line height: 1em
}
h2 {
font-size: 36px
font-weight: 600
Line height: 1.3em
}
h3 {
font-size: 28px
font-weight: 600
Line height: 1.3em
}
h4 {
font-size: 24px
font-weight: 600
Line height: 1.3em
}
h5 {
font-size: 22px
font-weight: 600
Line height: 1.3em
}
h6 {
font-size: 20px
font-weight: 600
Line height: 1.3em
}
p {
font-size: 18px
font-weight: 600
Line height: 1.3em
}
DIN Next Rounded
Din Next Rounded is our typeface for longer sections of text. We also use it in our marketing if the headline is 10 words or longer.
Usage
We use DIN Next Rounded for headlines longer than 10 words, subheadings, and all body copy.
Set leading to 140%. Exceptions can be made for large headings above 40pt in print applications and 40px onscreen. In these situations, you can reduce leading as the text size increases.
Set tracking to 0. Set kerning to 0, optical.
Never use below 14pt in print or 14px onscreen.
Type is usually left-aligned or centered. Never use fully justified.
Text should never be hyphenated.
Hierarchy
To achieve a harmonious relationship between our logotype and headlines, use DIN Next Rounded to ensure there’s a contrast in weight and scale.
DIN Next Rounded should be used in a light weight when paired with our logotype.
When using DIN with the logo, the ideal scale is 1.5 times the x-height of the logotype. A scale of 2 times the x-height is the maximum allowed.
Combining typefaces
When using Roboto
Always align left.
Roboto 600 for the headers and Roboto 400 for paragraphs.
Typesetting 'Duolingo'
When using the Feather Bold, “Duolingo” should be set in lowercase. Typing a tilde (~) in Feather Bold will trigger a replacement character of our entire logotype — use this if possible as its kerning is slightly different.
When using the DIN Next Rounded, “Duolingo” should be set in sentence case.
Substitute font, Nunito
In circumstances in which you do not have access to the brand fonts, use the substitute font Nunito. Nunito is a free Google font already available in Google Docs, Sheets, and Slides. It shares visual similarities with DIN Next Rounded with rounded caps and friendly characteristics.
Please don't...
- Combine Roboto and other fonts in the same sentence.
- Use Roboto in multiple secondary colors.
- Have type running off the display area.
Color
Content coming soon: This section is awaiting expert edits by Mark (writer) and will be enhanced with detailed updates shortly.
Core brand colors
Content coming soon: This section is awaiting expert edits by Mark (writer) and will be enhanced with detailed updates shortly.
Secondary colors
Content coming soon: This section is awaiting expert edits by Mark (writer) and will be enhanced with detailed updates shortly.
Neutrals
Neutrals are used to provide utility and hierarchy without competing with our core and secondary colors.
Duo's palette
This general guidance applies to digital or print applications, including both portrait and landscape orientations.
When creating a composition, place the logo in one of the four corners, or center it on the central vertical axis. Take advantage of the space and make the logo as large as possible. Remember: Be bold, be proud, make it big!
Avoid using the logotype at sizes smaller than one-third of the canvas width.
Imagery
Content coming soon: This section is awaiting expert edits by Mark (writer) and will be enhanced with detailed updates shortly.
Illustration
Content coming soon: This section is awaiting expert edits by Mark (writer) and will be enhanced with detailed updates shortly.
Image Border
All images should feature a subtle border to distinguish them from the background.
Border thickness: 1px
Border Color: #F5F5F5
Shape and Aspect Ratio
Images should be either rectangular or circular, with consistent aspect ratios to maintain a uniform look across all platforms.
Recommended aspect ratios:
- 16:9 for banners
- 1:1 for profile images
- 4:3 for content images.
Corners
Use sharp corners (0px) for a modern look.
For circular images, ensure a 100% border-radius is applied.
Shadows
Add a subtle shadow to create depth, making images stand out from flat backgrounds.
Color: rgba(0, 0, 0, 0.32)
Horizontal: 0
Vertical: 0
Blur: 10
Spread: 0
Hover Effects
On hover, images should have a slight zoom or opacity change to indicate interactivity.
Zoom: Scale the image up by 1.05 for a subtle effect.
Opacity: Change opacity to 90% on hover to give a “faded” effect.
Overlays
Add shadow to image or text overlays on image:
Shadow settings:
Blur: 10
Color: rgba(0, 0, 0, 0.73)
Horizontal: 0
Vertical: 0
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Adipisci deleniti, vero veniam sapiente, imperdiet aenean magnis litora! Vivamus nam, magni, aenean pharetra, illo egestas ad quidem temporibus tenetur voluptas cumque, ut consequatur, scelerisque eum voluptate gravida suscipit lacus, est ipsam sapien, dolorem? Montes beatae anim dignissim dignissim conubia nunc nihil. Adipisci deleniti, vero veniam sapiente, imperdiet aenean magnis litora! Vivamus nam, magni, aenean pharetra, illo egestas ad quidem temporibus tenetur voluptas cumque, ut consequatur, scelerisque eum voluptate gravida suscipit lacus, est ipsam sapien, dolorem? Montes beatae anim dignissim dignissim conubia nunc nihil. Adipisci deleniti, vero veniam sapiente, imperdiet aenean magnis litora! Vivamus nam, magni, aenean pharetra, illo egestas ad quidem temporibus tenetur voluptas cumque, ut consequatur, scelerisque eum voluptate gravida suscipit lacus, est ipsam sapien, dolorem? Montes beatae anim dignissim dignissim conubia nunc nihil.
Alignment
Align images right side or left side with the surrounding content to create visual harmony.
For images in blog content you can add “image-default” css class with the following properties:
.image-default {
transition: transform 0.3s ease;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.32);
border: solid 1px #F5F5F5;
}
.image-default:hover {
opacity: 90%;
transform: scale(1.05);
}
Filters
Apply consistent image filters (e.g., grayscale, brightness adjustments) to unify the tone and mood.
For brand imagery: Consider lightening or desaturating images if the focus should be on text overlays.
Image Quality
Always use high-resolution images for both web and print to ensure clarity.
For web: Optimize images to balance quality and performance. Aim for under 100KB for small images and under 500KB for large banners.
Captioning
If images require captions, use a small, italic font directly beneath the image left side.
Caption color: #1B1B1B that complements the image without distracting.
Line height: 1.6
Button
Content coming soon: This section is awaiting expert edits by Mark (writer) and will be enhanced with detailed updates shortly.
Design
Our buttons features rounded corners to reflect our modern, approachable image. The design should be minimal yet effective, drawing attention without overwhelming the interface.
Color
Primary buttons use the brand’s dominant color to emphasize key actions. Secondary buttons are styled in neutral tones or lighter variations of the primary color, maintaining a clear hierarchy of actions.
Typography
Button text is always concise and direct. For primary buttons, use 500 weight, uppercase letters to ensure visibility and impact. Text should be easy to read with sufficient contrast against the button background.
Hover Effects
On hover, buttons should visually respond to indicate interactivity. Subtle changes such as a color shift or shadow can enhance user experience without being disruptive.
Border Radius
The button corner radius is set to 30px on all sides, creating a smooth and consistent appearance across all buttons.
Size and Spacing
Buttons should be appropriately sized to maintain readability and clickability. Ensure there is adequate padding inside the button and consistent spacing between multiple buttons to avoid clutter.
Disabled State
When buttons are not actionable, they should appear muted with reduced opacity and have no hover effects. This signals clearly to users that the option is unavailable.
Links
Content coming soon: This section is awaiting expert edits by Mark (writer) and will be enhanced with detailed updates shortly.
Color
Links should be styled using the primary brand color. This helps maintain visual consistency and makes links easily identifiable.
Hover State
On hover, links should have a subtle yet noticeable change, such as a color shift or underline, indicating interactivity. Ensure the hover effect enhances user experience without being too aggressive.
Visited Links
To maintain a cohesive design, visited links should have a slightly different shade of the primary color to indicate they’ve been clicked, without breaking the flow of the user interface.
At The Gallas Company, we prioritize innovation and client success. To learn more about our services, explore our case studies, or view our latest blog posts, visit the respective sections of our website. If you’re interested in collaborating, feel free to contact us for more information. Stay updated by following us on social media.
Active and Focus States
Links should visually respond when active (clicked) or focused (using keyboard navigation). Use subtle changes like darkening the color or adding a border to indicate these states.
At The Gallas Company, we prioritize innovation and client success. To learn more about our services, explore our case studies, or view our latest blog posts, visit the respective sections of our website. If you’re interested in collaborating, feel free to contact us for more information. Stay updated by following us on social media.
Disabled Links
When a link is inactive, it should appear muted with reduced opacity and have no hover effects. This signals clearly to users that the link is non-functional.
At The Gallas Company, we prioritize innovation and client success. To learn more about our services, explore our case studies, or view our latest blog posts, visit the respective sections of our website. If you’re interested in collaborating, feel free to contact us for more information. Stay updated by following us on social media.
Accessibility
Ensure sufficient contrast between link color and background for readability, meeting accessibility standards. Links should also have descriptive text to explain their destination or purpose.
Pop-Ups & Modals
Links are fundamental to navigating The Gallas Company’s digital presence. They should be clear, consistent, and easily distinguishable to ensure seamless user interaction. Use the following guidelines to style links effectively:
Design
Pop-ups and modals should feature clean, minimalistic layouts with a clear focal point. Use our brand’s primary and secondary colors for headings, buttons, and accents to maintain consistency.
Here’s where you can reach us…
Size and Spacing
Desktop/Tablet: Modals should be appropriately sized, taking up no more than 60% of the screen width.
Mobile: Modals can take up to 90% of screen width.
There should be sufficient padding around the content to avoid a cluttered appearance.
Overlay
A subtle, semi-transparent dark overlay (value: #000000CC) should appear behind the pop-up to bring focus to the modal and prevent distractions from the rest of the page.
Close Functionality
Every modal must have a clear and accessible close button (typically an “X” in the top-right corner). Users should also be able to close the modal by clicking outside of it or pressing the “Escape” key.
Animation
Entrance: Fade in
Exit: Fade out
Animation Duration: 0.5
Content
Keep modal content concise and focused. If used for forms, ensure all fields are easy to navigate and understand. Avoid overwhelming the user with too much information or too many actions.
Mobile Responsiveness
Ensure modals are fully responsive, adjusting to smaller screens by scaling appropriately and maintaining ease of interaction on mobile devices.
- Why nobody can find your website
- What your competitors are doing about this that you aren't
- How you can start working on your website's SEO and grab lead after lead after lead
Frequency
Avoid overusing pop-ups and modals. They should appear only when necessary, such as for critical actions, notifications, or user engagement points (e.g., sign-ups or confirmations).
Section Divider
Clear and consistent section divisions are crucial for creating a well-organized and user-friendly experience on The Gallas Company’s digital platforms. Section dividers help break up content, improve readability, and guide users through different areas of a page. Follow these guidelines for dividing sections effectively
Design
Section dividers should be simple and clean, adding tilted division, The design should align with the overall visual tone of the page without overwhelming the content.
Color
Dividers can use neutral or muted tones from the brand’s color palette. This ensures they are functional without drawing too much attention. Strong colors should only be used when emphasizing a transition between major content areas.
Spacing
Ensure there is sufficient padding and margin around each section divider to create visual breathing room. Sections should not feel crowded, and spacing should be consistent across the website.
Consistency
Section dividers should follow a uniform style across all pages and platforms to maintain visual cohesion and ensure a seamless user experience.
Footer Call to Action Banner
The footer call to action (CTA) banner is a key element in engaging users and driving them toward important actions, such as signing up for a newsletter or exploring additional services. It provides a final opportunity to capture user interest before they leave the page. Follow these guidelines to design an effective and visually appealing footer CTA banner:
Design 1
The footer CTA should stand out while remaining aligned with the overall page design. Use bold typography and contrasting colors to ensure the banner catches attention without overwhelming the footer content.
Design 2
In case the header of white box is short, we put the text beside it.
Design 3
In case the header of white box is too long, we wrap the text below it.