Ehya Design Styleguide
v 2.0
Ehya Design provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive.
What's New ?
The latest Design Styleguide updates and guidance
Add Icon Library
MAR 23, 2020
New feature supports uploading and viewing prototypes created in Sketch
Add 10 Pages Landing
MAR 23, 2020
This tool has been shut off
Make Figma Version
MAR 23, 2020
New name for the Material Plugin, which lets you upload files from Sketch directly to Gallery
Illustration
The illustration we used for Ehya Template Design. We use 3 style of illlustration.
Illustration Type 01
Illustration with outline combine with brand color. It shows simplicity and modern
Illustration Type 02
Illustration with solid color combine with eye catching component. It shows minimalism and representable.
Illustration Type 03
Illustration with gradient color combine with floating object. It shows fantasy, uniqueness and moderninm.
Color
Color is the cornerstone of Designspace design. It distinguishes our brand and helps us to create consistent experiences across marketing and products. We use color in meaningful ways in all expressions of our brand.
Fill Color
Our primary palette uses bright colors to bring a boldness to our brand, and is used in logical ways throughout product and marketing to guide the eye and highlight the important bits.
#1565D8
Primary
#3F598A
Secondary
#36B37E
Success
#00B8D9
Info
#FAAD13
Warning
#F16141
Danger
#183B56
Black
#SA7184
Gray
#B3BAC5
Gray Light
#FFFFFF
White
Fill Light Color
Our Fill Light palette contains a variety of colors to keep things fresh and interesting. We lean on these colors more frequently when brand awareness is high, or on our own properties for shading purpose.
#1565D8
Primary
#3F598A
Secondary
#36B37E
Success
#00B8D9
Info
#FAAD13
Warning
#F16141
Danger
#183B56
Black
#SA7184
Gray
#B3BAC5
Gray Light
#FFFFFF
White
Typography
Color is the cornerstone of Designspace design. It distinguishes our brand and helps us to create consistent experiences across marketing and products. We use color in meaningful ways in all expressions of our brand.
Scale Category
Typeface
Font
Size
Spacing
H1
HK Grotesk
Bold
56pt
1,5
H2
HK Grotesk
Bold
40pt
1,5
H3
HK Grotesk
Bold
32pt
1,5
H4
HK Grotesk
Bold
24pt
1,0
H5
HK Grotesk
Bold
20pt
1,0
H6
HK Grotesk
Bold
16pt
0,5
Paragraph 1
Open Sans
Regular
20pt
0,5
Paragraph 2
Open Sans
Regular
16pt
0,0
Paragraph 3
Open Sans
Regular
14pt
-0,5
icon
Font-Awesome
Regular
18pt
0,0
Iconography
Icons are a part of the illustration family in marketing, but they serve very different purposes. Typically, icons are more literal and are intended to bring clarity to their subject.
Senja Icon
Font Awesome Icon
Button Varian
Button
Description
Primary
To call attention to an action on a form, or highlight the strongest call to action.Primary buttons should only appear once per screen (not including the application header or in a modal dialog). Not every screen requires a primary button.
Button
The standard button for most use cases.
Info
Similar to a primary button, but behaves like a info button. We use these to avoid overwhelming the page with blue links.
Success
The function of success button is to show the user what the status of transaction or to subtitute the primary button when the main pages of design is green.
Warning
Warning messages appear before we request the user to take action, usually in anticipation of a significant change. You'll mostly find these in confirmation modals.
Delete
Delete button same as the name. the function is to track user when they need a delete something action. It also can be represent into dander button it for danger or alert status
Varian
Varian button, it is the varian button to make the design not flat again. We can use this to subtitute the primary button sometimes.
Form
Use forms to allow people to enter data for use by the application, or to configure options.
Blank Form
Blank Form - with Icon
Filled Form - with Icon
Filled Form
Input Base Form
End
So, this is the Styleguide of Ehya by Designspace. You can download and use this into your produt for opened. All is free to use personal and commercial.
Learn guidelines