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.
LOGO FULL COLOR
LOGO FOR DARK BACKGROUND
LOGO BLACK VERSION
LOGO WHITE VERSION
Logo Full Color
Logo Full Color
Logo For Dark Background
Logo For Dark Background
Logo Black Version
Logo Black Version
Logo White Version
Logo White Version
Logo Mark Full Color
Logo Mark Full Color
Logo Mark Black
Logo Mark Black
Logo Mark White
Logo Mark White

Fonts

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.
Ubuntu
Roboto

Illustrations

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.
LOGO FULL COLOR
LOGO FOR DARK BACKGROUND
LOGO BLACK VERSION
LOGO WHITE VERSION
Illustration V1 - 01
Illustration V1 - 01
Flat-Style
Illustration V1 - 02
Illustration V1 - 02
Flat-Style
Illustration V1 - 03
Illustration V1 - 03
Flat-Style
Illustration V1 - 04
Illustration V1 - 04
Flat-Style
Illustration V2 - 01
Illustration V2 - 01
Hand-Drawn / Sketch
Illustration V2 - 02
Illustration V2 - 02
Hand-Drawn / Sketch
Illustration V2 - 03
Illustration V2 - 03
Hand-Drawn / Sketch
Illustration V3 - 01
Illustration V3 - 01
3D Style
Illustration V3 - 02
Illustration V3 - 02
3D Style

Photography

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.

Iconography

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.

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.
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.
HEX
#10405A
RGB
123, 199, 148
CMYK
53, 0, 55, 0
PANTONE
346 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
#7BC794
RGB
123, 199, 148
CMYK
53, 0, 55, 0
PANTONE
346 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:
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.
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
Circle Keyline
Diameter: 20 px
Vertical Keyline
Height: 20 px

Width: 16 px
Horizontal Keyline
Height: 16 px

Width: 20 px
Icon Metrics
1. Stroke terminal
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.
Spot Illustration
- Lorem ipsum dolor sit
- 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.
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
CONTENTS

Color Palette

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 Colors
Dark Navy
#113F59
Teal
#05AFAA
Green
#6CDB9A
Secondary Colors
Yellow
#F4CD0C
White
#FFFFFF
Soft Green
#F4F9F9
Up Next
LOGO
Logo Components
LOGO
Primary Color

Grid System

Our grid system is composed of 8 flexible columns with a gutter between columns of 20px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. At non leo turpis non. Id aenean integer ut placerat sollicitudin nunc lacinia volutpat. Sed aliquam in proin tellus.
Grid Sizes
Size 1 of 1
Size 1 of 2
Size 1 of 3
Size 1 of 4
Size 1 of 8
Notes
When using the grid, Sed aliquam in proin tellus. Orci nam semper sed ac erat pretium. Natoque venenatis consectetur accumsan magna.
Vitae diam eget felis tincidunt. Purus quis fermentum dolor, donec ac ornare. Elementum libero fermentum amet, sit vitae, amet.
This example applies to the other ratios we support: 1/1, 1/2, 1/3, 1/4, and 1/8
Grid Gutter
Our grid system is composed of 8 flexible columns with a gutter between columns of 20px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. At non leo turpis non. Id aenean integer ut placerat sollicitudin nunc lacinia volutpat. Sed aliquam in proin tellus.
Mixed Grids
The grid layout is easily extended by nesting and mixing different column sizes.
Up Next
LOGO
Logo Components
LOGO
Primary Color

Icons

General Icons
Desktop
Mobile
Arrow
Menu
Arrow
Search
Close
Checklist
Instagram
Twitter
Facebook
Up Next
GUIDELINES
Pictograms
GUIDELINES
Spacing

Pictograms

General Pictogram
Website
Ecommerce
Mobile Apps
Software
Relocation
Twice Salary Review
Health Insurance
Twice Profit Sharing
Flexible Schedule
English Class
Reasonable Schedule
Email Hover
Email
Loans
Events
Maternity Leave
Transparent Process
Submit Ticket
Career Development
Up Next
GUIDELINES
Pictograms
GUIDELINES
Spacing

Spacing

Spacing Methods
Spacing methods are more granular than the responsive layout grid. Spacing methods are a set of rules around how to place elements within layouts and components.
Padding
Padding refers to internal spacing between element and its child elements. Padding is an alternative spacing method to keylines and is measured in increments of 5px or 10px. Padding can be measured both vertically and horizontally and does not need to span the whole height of a layout.
Dimensions
Our grid system is composed of 8 flexible columns with a gutter between columns of 20px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. At non leo turpis non. Id aenean integer ut placerat sollicitudin nunc lacinia volutpat. Sed aliquam in proin tellus.
Alignment
Alignment is the placement of elements within a component.
Up Next
LOGO
Logo Components
LOGO
Primary Color

Typography

Typeface
This is Ubuntu. Our brand typeface.
Ubuntu is the primary brand typeface for Softwareseni. An elegant san serif infused this headline face projects modernism, trustworthiness, and optimism.
Type Scale
We follow a 7px baseline grid for achieving a vertical rhythm on all block-level elements in the website.
H1
48px
Heading One
H2
36px
Heading Two
H3
26px
Heading Three
H4
21px
Heading Four
H5
18px
Heading Five
H6
16px
Heading Six
P
16px
Paragraph Text
Paragraphs
The default body text is 16px. For optimum reading length, the paragraph width is capped at 845px.
Example
Main section title
Sub-section title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mi nam vitae ut adipiscing nisi. Molestie a nunc pellentesque ornare vitae. Sagittis ornare aliquet malesuada proin. Et nibh augue aliquet quam nibh tempor. Proin tellus nunc tristiq id odio pellentesque. Id dictum arcu enim sagittis elementum, ac. Duis fermentum, a laoreet nunc et orci. Lectus sit eu, aliquam viverra semper semper vulputate neque placerat. Ut venenatis et viverra tellus sit ultricies egestas nulla. Quis faucibus eleifend eleifend nunc mi elit cursus duis interdum.
Small meta text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mi nam vitae ut adipiscing nisi. Molestie a nunc pellentesque ornare vitae. Sagittis ornare aliquet malesuada proin. Et nibh augue aliquet quam nibh tempor. Proin tellus nunc tristiq id odio pellentesque. Id dictum arcu enim sagittis elementum, ac. Duis fermentum, a laoreet nunc et orci. Lectus sit eu, aliquam viverra semper semper vulputate neque placerat. Ut venenatis et viverra tellus sit ultricies egestas nulla. Quis faucibus eleifend eleifend nunc mi elit cursus duis interdum.
Up Next
LOGO
Logo Components
LOGO
Primary Color