Xima Brand Guidelines
The Xima Logo
The full Xima logo is composed of a symbol and name set in a customized Nunito Font.
The Xima Logo Alternatives
The full Xima logo is composed of a symbol and name set in a customized Nunito Font.
Backgrounds
There are different logos used when changing the background color. Please use these as reference.
Special Use Cases
You probably won’t need to use these but we like to cover all the bases.
Logo Symbol
The logo symbol should only be used on its own for Favicons and images smaller than 100x100px.Â
Usage
Avoid similiar color logo and background.
Do not add a drop shadow to the logo.
Do not use symbol on its own.
Do not use colored logo on dark background.
Do not overlay logo on image without altering opacity of image.
Do not rotate the logo in any way.
Typography
Type Stack
Our brand fonts consist of Questrial and Nunito. The usage is laid out in in the table below.
Headlines
We use Questrial as our headline font. For headings on the web, use bold and use title case. For headings on print collateral, use .25pt outline to achieve bold in Questrial.
H1
Customer Connections, Simplified
Questrial Bold
Line Spacing: 1em
H2
Customer Connections, Simplified
Questrial Bold
Line Spacing: 1em
H3
Customer Connections, Simplified
Questrial Regular
Line Spacing: 1em
Content
For Print: We use Nunito (Light)
For Web: We use Nunito (Regular)
Colors
Xima Teal
#166293
Nice Blue
#29ABFF
Excite Yellow
#FAA500
Nice Green
#17A58A
Light Grey
#F8F8F8
Evening Blue
#00547E
Color Rules
- Avoid using Orange and Green as stand alone colors without any blue.
- Evening Blue is to be used only as a background or Icon color.Â
- Do not color block more than 25% of screen or page with Excite Yellow.
Iconography
Icon Style
Our iconography at Xima Software is designed to be clear and visible at any pixel size. We use a more rounded style for our icons to match our overall design language, ensuring a cohesive and harmonious look across all our products and platforms.
Fill
Icon should be filled with 1 object being outlined if needed for clarity.
Sizing
Icons should be understandable at 50×50 px. They should be simple with no more than 2 objects in them.
Color
Icons can be made gradients but must remain within the same hue. In general, icons should be white when on a colored background and solid color when on white or grey background.
Shapes
Main Shapes
Our shapes feature soft corner radiuses and are designed to work seamlessly on a grid.
Designers have the flexibility to choose the best shape for the application’s needs. When using cutouts, it’s best to avoid circles. Instead, consider framing images with a rectangle or a long pill shape for a more cohesive and visually appealing result.
Rounded Rectangle
Pinched Pill
Pinched Rectangle
- Illustrator – Corner Radius 50px
- Web – Corner Radius 20px
- Same rounded corners as above with opposite ends set to 0px rounding.
Imagery
What imagery do we use?
At Xima Software, our imagery is light and vibrant, capturing subjects in a natural and relaxed state. We prioritize showcasing the user experience over the technology itself. When selecting images, avoid those that overly emphasize technology in the contact center, such as headsets and keyboards. Focus instead on images that convey a sense of ease and human interaction.
Lifestyles
Our lifestyles focus on the subject and portrays ease-of-use.Â
Things to Avoid:
- Frustrated or Angry Subjects
- Overly complicated images
- Collage style images
Subject is clear and focused.
Avoid using images with filters and dark tones.
Agent is not looking at the camera and is in a natural pose.
Avoid using collage style images with complicated overlays.
Cutouts
Xima uses cutouts in limited cases. Agent and customer image cutouts are used when combining abstract UI elements and imagery.Â
Things to Avoid:
- Full body cutouts
- Do not leave any part of background
- Frame cutouts within one of our brand shapes
Agent is not looking at the camera and is in a natural pose.
Ensure the full upper body of the subject is visible and not cropped.
Abstract UI
Stylized UI Elements
Across our marketing materials, including landing pages, social posts, videos, decks, and more, we use Slack UI screens to demonstrate how Xima Software functions and how it simplifies, enhances, and boosts productivity in work environments. It is crucial to maintain accuracy in portraying our product. While abstracting items to draw focus or scaling up items for legibility is acceptable, we must not introduce functions, features, or behaviors that do not actually exist in our product.
Abstracted UI
Abstracted UI screens simplify complex ideas or concepts by using simplified visual representations of our product’s UI. They are designed to quickly convey brand recognition, especially in contexts where space or time is limited.
- When creating abstracted UI, focus on one product component to highlight the central idea, feature, or message.
- Remove non-essential details based on the message or concept being conveyed, and
- Keep the copy minimal or omit it altogether.
