Logo
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Main Logo
Softwareseni main logo consist of logogram and logotype with horizontal layout, in the white/clear background. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Up Next
LOGO
Logo Components
LOGO
Primary Color
Logo Components
The logo consists of logogram and logotype. The logotype using Ubuntu Font in medium format. The rule as follows:
1. We are allowed to use only logogram in any visual application
2. We are NOT allowed to use only logotype. The use of logotype should be followed by the logogram as the main identity of Softwareseni.
1. We are allowed to use only logogram in any visual application
2. We are NOT allowed to use only logotype. The use of logotype should be followed by the logogram as the main identity of Softwareseni.
Do
Allowed to use only logogram.
Don'ts
NOT allowed to use only logotype.
Up Next
LOGO
Clear Space
LOGO
Primary Color
Clear Space
Make sure to always surround the logo with a protective space approximately a half of the logo height.
Do
Giving enough space around the logo.
Don'ts
Placing any elements too close to the logo.
Up Next
LOGO
Logo Components
LOGO
Logo Components
Minimum Size
Softwareseni logo can be sized down to a minimum width of 91 pixel or about 32mm and 14 pixel or 5mm height.
Up Next
LOGO
Logo Components
LOGO
Logo Components
Logo Versions
Softwareseni logo can be sized down to a minimum width of 91 pixel or about 32mm and 14 pixel or 5mm height.
FULL COLOR
Use this version of logo when you need to apply it on the light-colored background.
WHITE-TYPED LOGO
Use this version of logo when you need to apply it on the dark-colored background.
BLACK LOGO
When you need the black and white version of logo and it needs to be applied on the light-colored background, use this one.
WHITE LOGO
When you need the black and white version of logo and it needs to be applied on the dark-colored background, use this one.
Up Next
LOGO
Logo Components
LOGO
Logo Components
Logo Do's & Don'ts
Softwareseni logo can be sized down to a minimum width of 91 pixel or about 32mm and 14 pixel or 5mm height.
Do
Make sure to use the correct logo version to be applied on specific background.
Don'ts
Risking our eyes by placing the ‘wrong’ logo on high contrast or vibrant color or certain background.
Do
We have our own color combination. Use this approved color and the original logo file.
Don'ts
Adjusting the logo file and combining, adding, or using any colors as you want.
Do
Use a clean background and make sure to use correct logo version.
Don'ts
Use ‘busy’ logo as a background. This makes our logo illegible.
Do
Use a clean background and make sure to use correct logo version.
Don'ts
Use ‘busy’ logo as a background. This makes our logo illegible.
Do
Use a clean background and make sure to use correct logo version.
Don'ts
Use ‘busy’ logo as a background. This makes our logo illegible.
Do
Use a clean background and make sure to use correct logo version.
Don'ts
Use ‘busy’ logo as a background. This makes our logo illegible.
Up Next
LOGO
Logo Components
LOGO
Headlines
Color
Color brings emotion that will attracts audiences. As an identity of the brand, our own color palettes and combination should be reflected on all of our platforms, tools, departments, sub-brands, and products. Consistent use of color would strengthens our brand awareness and communication. Now, let’s talk about our color identity and how to use it.
Principles
Softwareseni’s color palettes should become our guidance when we want to design everything related to visual communication. Always remember to use the right color and composition. Below is our color principles.
HIERARCHICAL
As a part of communcation, color indicates which elements are interactive, how they relate to other elements, and their level of importance regarding the message.
LEGIBLE
All important visual elements, especially text, should meet legibility standards when appearing on colored background.
EXPRESSIVE
Show brand colors at memorable moments that reinforce Softwareseni’s style.
Up Next
LOGO
Logo Components
LOGO
Logo Components
Brand Color
Softwareseni’s color pallette reflects brand personality. Here is the compositions.
Primary Color
Primary colors help audience to quickly identify a brand, our core identity. Softwareseni’s primary colors are incorporated into company’s logo. The detail as follows.
Softwareseni Navy
HEX
#10405A
RGB
16, 64, 90
CMYK
96, 71, 43, 32
PANTONE
302 C
Softwareseni Turquoise
HEX
#00AFAA
RGB
0, 175, 170
CMYK
76, 6, 39, 0
PANTONE
2398 C
Softwareseni Green
HEX
#7BC794
RGB
123, 199, 148
CMYK
53, 0, 55, 0
PANTONE
346 C
Secondary Color
Primary colors help audience to quickly identify a brand, our core identity. Softwareseni’s primary colors are incorporated into company’s logo. The detail as follows.
Fresh Yellow
HEX
#F4CD0C
RGB
244, 205, 12
CMYK
5, 16, 99, 0
PANTONE
109 C
Dark Navy
HEX
#07324A
RGB
7, 50, 74
CMYK
98, 76, 47, 43
PANTONE
2965 C
Grey
HEX
#F4F4F4
RGB
244, 244, 244
CMYK
3, 0, 1, 0
PANTONE
663 C
Up Next
LOGO
Logo Components
LOGO
Logo Components
Illustrations
Illustrations are an important visual component of any brand. They reflect a certain feel and mood, and give a better position to a company.
Style
Softwareseni’s illustration is flexible and uses fun illustrations. Each illustration has its own style which is according to our needs.
Flat style
Simple illustration so it will looks clear. No gradient, no shadow effect.
Hand-drawn style
Sketch style which is creating our hand drawing and convert it to digital.
3D style
Complex illustration to give looks more formal, profesional, and business.
Up Next
LOGO
Logo Components
LOGO
Primary Color
Character
Softwareseni’s illustration is flexible and uses fun illustrations. Each illustration has its own style which is according to our needs.
Face & Head
Face is one of ‘point of view’ for illustration characteristic. We have eyes, nose, mounth and ears for the anatomy. Eyebrow is optional to use.
This the face characteristic we use:
This the face characteristic we use:
Front Face
3/4
Side Face
Body Proportion
The proportion of humans can be measured in many ways. Eventually, all proportions are relative in their sense. In particular, we use a ratio of 1: 2: 5 (9 head units) in our illustrations so we didn't follow general proportion of human.
Up Next
LOGO
Logo Components
LOGO
Primary Color
Element
Our illustrations are made by mixed many shape. Which is always keep brand identity lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Bracket
This bracket is made for representative of our logo. We use it as one of the unique elements of our illustration.
Front Face
3/4
Planets
One of our mandatory element in our hero/main illustration. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Shapes
We use basic shape and coumpound it by combining two of the basic shapes together.
Up Next
LOGO
Logo Components
LOGO
Primary Color
Spot Illustration
A spot illustration is the simplest concept. It’s used to help showcase a small feature or explain an experience. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Do
Simplify the concept and use plenty of white space around illustrations.
Don'ts
Make images large to the rest of the content
Up Next
LOGO
Logo Components
LOGO
Primary Color
Color Palette
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Libero ultrices arcu euismod risus in. Habitant nisi, sit lacus neque.
Main Color
Following our primary color so the audience can be familiar with SoftwareSeni’s brand.
Navy
#10405A
Turquoise
#05AFAA
Green
#7BC794
Yellow
#F4CD0C
Other Colors
We're flexible with using other colors as long as they look good, yummy, and not leaving our value! ✨
Black
#24272D
White
#FFFFFF
Nude
#EFC1B8
Soft Green
#F4F9F9
Grey
#E0E0E0
Soft Grey
#F4F4F4
Do
Use brand identity color
Don'ts
Use ‘extreme’ color
Up Next
LOGO
Logo Components
LOGO
Primary Color
Iconography
Iconography provides a shortcut way to communicate. Over time an icon can become an easy way to describe a large idea in a very abbreviated way. In ac auctor metus, vitae posuere justo. Nullam a lectus congue, egestas arcu ac, tempus enim.
Icon Resources
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum odio at erat lacinia, vitae vulputate nunc commodo.
Iconify
We use Iconify Plugin for helping us to explore more icon in SVG files. We can import Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji and many other icons (more than 60 icon sets containing over 50,000 icons) to Figma document as vector shapes.
Want to get the icon?
Nullam a lectus congue, egestas arcu ac, tempus enim. Phasellus eget fermentum lacus.
Go to Iconify Website
Noun Project
In ac auctor metus, vitae posuere justo. Nullam a lectus congue, egestas arcu ac, tempus enim. Phasellus eget fermentum lacus. Aliquam dignissim augue vel dui varius pharetra. Interdum et malesuada.
Want to get the icon?
Nullam a lectus congue, egestas arcu ac, tempus enim. Phasellus eget fermentum lacus.
Flaticon
In ac auctor metus, vitae posuere justo. Nullam a lectus congue, egestas arcu ac, tempus enim. Phasellus eget fermentum lacus. Aliquam dignissim augue vel dui varius pharetra. Interdum et malesuada.
Download photo using our Premium account
Do
Using icons pack that have same family style too keep it consistent
Don'ts
Using icons pack that have different family style
Up Next
LOGO
Logo Components
LOGO
Primary Color
Creating an Icon
If our icon resources doesn’t have the icon we need, then create our own. For the priciple, basically we are following Material.io as our guide. Ut vestibulum odio at erat lacinia, vitae vulputate nunc commodo. Phasellus vehicula, nunc et sodales commodo, mi nisi condimentum libero.
Grid & Keyline
Systeam icons are displayed as 24 x 24 px box.
Live and Trim Areas
Live area is the space for create the icon layout. Trim Areas is 2px of the empty space that makes up the padding surrounding the 20px x 20px live area.
Keyline Shapes
Keyline shape are based on gid. By using these core shapes as a baseline, you can maintain consistent visual proposrtions throught you product icons.
Square Keyline
Height: 18 px
Width: 18 px
Width: 18 px
Circle Keyline
Diameter: 20 px
Vertical Keyline
Height: 20 px
Width: 16 px
Width: 16 px
Horizontal Keyline
Height: 16 px
Width: 20 px
Width: 20 px
Icon Metrics
1. Stroke terminal
2. Corner
3. Counter area
4. Stroke
5. Counter stroke
6. Bounding area
2. Corner
3. Counter area
4. Stroke
5. Counter stroke
6. Bounding area
Icon design templates
Create your own icons with these adobe Illustrator files including these Adobe Ilustrator files including the 24dp icon grid.
Download Icon Design Tempalate
Available under Apache 2.0. By downloading this file, you agree to the Google Terms of Service. The Google Privacy Policy describes how data is handled in this service. (source: Material.io/design)
Up Next
LOGO
Logo Components
LOGO
Primary Color
Icon Treatment
Basically we are following Material.io as our guide.
Do
Use an Icon in a small size
Don't
Crop icon and scale it too large
Do
2D shape
Don't
3D shape
Do
Stretch the icon
Don't
Stretch the icon
Do
Using one color/flat color
Don't
Using multiple color/gradient
Do
Use flat icon
Don't
Give shadow
When to use an icon
Icons help a page more readable and drive a customer to take action. The different between icon and spot illustration.
Icon
- Lorem ipsum dolor sit
- Amet, consectetur
- A dipiscing elit.
- Vestibulum odio at erat
- Vitae vulputate nunc commodo.
- Amet, consectetur
- A dipiscing elit.
- Vestibulum odio at erat
- Vitae vulputate nunc commodo.
Spot Illustration
- Lorem ipsum dolor sit
- Amet, consectetur
- A dipiscing elit.
- Vestibulum odio at erat
- Vitae vulputate nunc commodo.
- Amet, consectetur
- A dipiscing elit.
- Vestibulum odio at erat
- Vitae vulputate nunc commodo.
Do
Use icons with text label
Don't
Single icons without label can be unclear
Do
Use single icons for UI
Don't
Use many icon for UI
Up Next
LOGO
Logo Components
LOGO
Primary Color
Photography
We use photography to tell our stories and to provide a face for our technology. In ac auctor metus, vitae posuere justo. Nullam a lectus congue, egestas arcu ac, tempus enim. Phasellus eget fermentum lacus. Aliquam dignissim augue vel dui varius pharetra. Interdum et malesuada.
Need our Internal Photo?
Nullam a lectus congue, egestas arcu ac, tempus enim. Phasellus eget fermentum lacus.
Go to Photo Resource
Up Next
LOGO
Logo Components
LOGO
Primary Color
Portrait
Using black and white or monochrome filter. In ac auctor metus, vitae posuere justo. Nullam a lectus congue, egestas arcu ac, tempus enim. Phasellus eget fermentum lacus. Aliquam dignissim augue vel dui varius pharetra. Interdum et malesuada.
Do
Use Greyscale and Monochrome
Don'ts
Use fullcolor
Do
Choose a photo with professional look for our published product
Don'ts
Choose a photo with playful look for our published product
Mixing illustration and photo
In ac auctor metus, vitae posuere justo. Nullam a lectus congue, egestas arcu ac, tempus enim. Phasellus eget fermentum lacus. Aliquam dignissim augue vel dui varius pharetra. Interdum et malesuada.
Up Next
LOGO
Logo Components
LOGO
Headlines
External Resources
If our photo stock doesn't have the image we need, we can download at freepik.com using our premium account or download copyright-free images at pexels.com, unsplash.com, and etc. Please make sure the images are copyright free.
Download photo using our Premium account
or
Download photo using from free resource
Do
Use purchased Image to get the license or get premium account
Don'ts
Use image haven’t free copy-right and not purchased license
Do
Use image that presentative with our brand image
Don'ts
Use image that evoke negative emotions
Do
Use image with natural lighting
Don'ts
Use image with color filter or stylized
Up Next
LOGO
Logo Components
LOGO
Headlines
Brand Application
In ac auctor metus, vitae posuere justo. Nullam a lectus congue, egestas arcu ac, tempus enim. Phasellus eget fermentum lacus. Aliquam dignissim augue vel dui varius pharetra. Interdum et malesuada.
Website
Design for Softwareseni’s website in dekstop and mobile version. Phasellus eget fermentum lacus. Aliquam dignissim augue vel dui varius pharetra. Interdum et malesuada.
Favicon
The Softwareseni favicon graphic is a smaller representation of the brand for the browser and for the mobile interfaces.
Take into account that the favicon is not the brand logo and should never replace the logo. It can be used as 32x32px.
Take into account that the favicon is not the brand logo and should never replace the logo. It can be used as 32x32px.
Up Next
LOGO
Logo Components
LOGO
Primary Color
Stationery
In ac auctor metus, vitae posuere justo. Nullam a lectus congue, egestas arcu ac, tempus enim. Phasellus eget fermentum lacus. Aliquam dignissim augue vel dui varius pharetra. Interdum et malesuada.
Letterhead
Design for SoftwareSeni’s letterhead
Envelope
Design for SoftwareSeni’s envelope
Business Card
Design for SoftwareSeni’s business card
Up Next
LOGO
Logo Components
LOGO
Primary Color
Email Signature
Design for Softwareseni’s email signature in dekstop and mobile version.In ac auctor metus, vitae posuere justo. Nullam a lectus congue, egestas arcu ac, tempus enim. Phasellus eget fermentum lacus. Aliquam dignissim augue vel dui varius pharetra. Interdum et malesuada.
Up Next
LOGO
Logo Components
LOGO
Primary Color
Merchandise
Design for Softwareseni’s merchandise. In ac auctor metus, vitae posuere justo. Nullam a lectus congue, egestas arcu ac, tempus enim. Phasellus eget fermentum lacus. Aliquam dignissim augue vel dui varius pharetra. Interdum et malesuada.
Up Next
LOGO
Logo Components
LOGO
Primary Color
