Basics
Typography
Typescale
This typography scale offers simplicity and accessibility for all, ensuring readability and creating harmony in every line. Perfect for maintaining consistent, user-friendly design.
Aa
Satoshi
Regular
Medium
Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Headline
D1 — 156/120%
Letter spacing: 0.4px
Display 1
D2 — 112/120%
Letter spacing: 0.4px
Display 2
Headline
H1 — 56/120%
Letter spacing: 0.4px
Heading 1
H2 — 48/120%
Letter spacing: 0.4px
Heading 2
H3 — 40/120%
Letter spacing: -0.26px
Heading 3
H4 — 32/120%
Letter spacing: -0.45px
Heading 4
Body
Body 2XL — 24/150%
Letter spacing: -0.43px
Body 2XL - 24px/Bold
Body 2XL - 24px/Medium
Body 2XL - 24px/Regular
Body XL — 20/150%
Letter spacing: -0.43px
Body XL - 20px/Bold
Body XL - 20px/Medium
Body XL - 20px/Regular
Body L — 18/150%
Letter spacing: -0.31px
Body L - 18px/Bold
Body L - 18px/Medium
Body L - 18px/Regular
Body M — 16/150%
Letter spacing: -0.31px
Body M - 16px/Bold
Body M - 16px/Medium
Body M - 16px/Regular
Body S — 14/150%
Letter spacing: 0.08px
Body S - 14px/Bold
Body S - 14px/Medium
Body S - 14px/Regular
Body XS — 12/150%
Letter spacing: 0
Body XS - 12px/Bold
Body XS - 12px/Medium
Body XS - 12px/Regular
Basics
Color Guidances
Primitive colors
The color system to help you crafting your UI in faster and purposeful way. With a comprehensive color system you also able to differentiate UI elements such as buttons, forms, background, and many more. In this case we're using Toko Kopi Tuku as the brand example on the Kiosk. So, the brand color will be Orange like their website and not using Otter Yellow.
Neutral
Base
These are base black and white color styles to quickly swap out if you need to.
White
#FFFFFF
hsla(0,0,100,1)
Black
#000000
hsla(0,0,0,1)
Gray
The most basic colors to be applied on UI like texts, backgrounds and dividers.
50
#FAFAFA
hsla(0,0,98,1)
100
#F4F4F5
hsla(240,5,96,1)
200
#E4E4E7
hsla(240,6,90,1)
300
#D4D4D8
hsla(240,5,84,1)
400
#A1A1AA
hsla(240,5,65,1)
500
#71717A
hsla(240,4,46,1)
600
#52525B
hsla(240,5,34,1)
700
#3F3F46
hsla(240,5,26,1)
800
#27272A
hsla(240,4,16,1)
900
#18181B
hsla(240,6,10,1)
Brand
Violet
This is your main color where we will use it on buttons & links. And can be customized by any other color avaliable in this pallete.
50 - Cloud Receipt
#F5F3FF
hsla(250,100,98,1)
100
#EDE9FE
hsla(251,91,95,1)
200 - Payment Lavender
#DDD6FE
hsla(250,95,92,1)
300
#C4B5FD
hsla(252,95,85,1)
400
#A78BFA
hsla(255,92,76,1)
Base
500 - Brand
#8B5CF6
hsla(258,90,66,1)
600
#7C3AED
hsla(262,83,58,1)
700
#6D28D9
hsla(263,70,50,1)
800
#5B21B6
hsla(263,69,42,1)
900
#4C1D95
hsla(263,67,35,1)
Othe brand color
POS Terminal Blue
#040457
hsla(240,91,18,1)
Checkout Lilac
#C074FF
hsla(273,100,73,1)
Invoice Pastel
#FEE6A5
hsla(44,98,82,1)
500 - ROI Gold
#EAB308
hsla(45,93,47,1)
Gradients
Overlays
Seamless Transaction
#8559F6 - #C074FF
-
VinPay - Design Style Guide
Built for TND for VinPay project by Michael Stevanus Hartono & Dicky Yudha Handika
Basics
Color Guidances
Semantic variable colors
Color variables (Figma’s version of design tokens) store reusable values that can be applied to all kinds of design properties including fill and stroke colors. They help save time and effort when managing design systems by acting as a “single source of truth” while allowing designers to create multiple color modes.
Text colors
Color sample
Color name
text/primary
text/secondary
text-secondary hover
text-tertiary
text-tertiary hover
text-disable
text-placeholder
text-placeholder subtle
text-danger
text-warning
text-green
Primitive color parent
Black & white/Gray/900
Black & white/Gray/700
Black & white/Gray/800
Black & white/Gray/600
Black & white/Gray/700
Black & white/Gray/500
Black & white/Gray/500
Black & white/Gray/300
Red/600
Yellow/600
Green/700
Usage
Primary text such as page headings.
Secondary text such as labels and section headings.
Secondary text when in hover state.
Tertiary text such as supporting text and paragraph text.
Tertiary text when in hover state.
Default color for disabled text such as disabled input fields or buttons. This can be changed to gray-400, but gray-500 is higher contrast and more accessible.
Default color for placeholder text such as input field placeholders. This can be changed to gray-400, but gray-500 is more accessible because it is higher contrast.
A more subtle (lower contrast) alternative placeholder text. Useful for components such as verification code input fields.
Default error state semantic text color (e.g. input field error states.
Default warning state semantic text color.
Default success state semantic text color.
Border (br) colors
Color sample
Color name
br-primary
br-secondary
br-tertiary
br-disabled
br-disabled-subtle
br-brand
br-brand-subtle
br-danger
br-danger-subtle
br-warning
br-warning-subtle
br-success
Primitive color parent
Black & white/Gray/300
Black & white/Gray/200
Black & white/Gray/100
Black & white/Gray/300
Black & white/Gray/200
Violet/500 - Brand
Brand original/Checkout Lilac
Red/500
Red/300
Yellow/500
Yellow/300
Green/500
Usage
High contrast borders. These are used for components such as input fields, button groups, and checkboxes.
Medium contrast borders. This is the most commonly used border color and is the default for most components (such as file uploaders), cards (such as tables), and content dividers.
Low contrast borders useful for very subtle dividers and borders such as line and bar chart axis dividers.
Default disabled border color for disabled states in components such as input fields and checkboxes.
A more subtle (lower contrast) alternative for disabled borders such as disabled buttons.
Default brand border color. Useful for active states in components such as such as input fields.
More subtle (lower contrast) an alternative for br-brand-border
Default error state semantic border color. Useful for error states in components such as input fields and file uploaders.
A more subtle (lower contrast) alternative for error state semantic borders such as error state input fields.
Default warning state semantic border color. Useful for error states in components such as input fields and file uploaders.
A more subtle (lower contrast) alternative for error state semantic borders such as warning state input fields.
Default success state semantic border color. Useful for error states in components such as input fields and file uploaders.
Foreground (fg) colors
Color sample
Color name
fg-primary
fg-secondary
fg-secondary hover
fg-tertiary
fg-tertiary hover
fg-disable
fg-disable-subtle
fg-brand
fg-brand-secondary
fg-danger
fg-danger-secondary
fg-warning
fg-warning-secondary
fg-success
fg-success-secondary
Primitive color parent
Black & white/Gray/900
Black & white/Gray/700
Black & white/Gray/800
Black & white/Gray/600
Black & white/Gray/700
Black & white/Gray/400
Black & white/Gray/300
Violet/500 - Brand
Brand original/Checkout Lilac
Red/700
Red/500
Orange/600
Orange/500
Green/700
Green/500
Usage
Highest contrast non-text foreground elements such as icons.
High contrast non-text foreground elements such as icons.
Secondary foreground elements when in hover state.
Medium contrast non-text foreground elements such as icons.
Tertiary foreground elements when in hover state.
Default color for disabled non-text foreground elements such as icons in disabled button group buttons and input dropdown menu items.
A more subtle (lower contrast) alternative for non-text disabled foreground elements such as disabled active checkboxes and tag checkboxes.
Primary brand color non-text foreground elements such as featured icons and progress bars.
An alternative for primary brand color non-text foreground elements.
Primary error state color for non-text foreground elements such as featured icons.
Secondary error state color for non-text foreground elements such as icons in error state input fields and negative metrics item charts and icons.
Primary warning state color for non-text foreground elements such as featured icons.
Secondary warning state color for non-text foreground elements.
Primary success state color for non-text foreground elements such as featured icons.
Secondary success state color for non-text foreground elements such as button dots, avatar online indicator dots, and negative metrics item charts and icons.
Background (bg) colors
Color sample
Color name
bg-primary
bg-primary-hover
bg-primary-dark
bg-secondary
bg-secondary-hover
bg-secondary-dark
bg-tetiary
bg-disabled
bg-overlay
bg-brand
bg-brand-secondary
bg-brand-solid
bg-brand-solid_pressed
bg-danger
bg-danger-secondary
bg-danger-solid
bg-warning
bg-warning-secondary
bg-success
bg-success-secondary
bg-success-solid
bg-success-solid-dark
Primitive color parent
Black & white/Base/White
Black & white/Gray/50
Black & white/Gray/900
Black & white/Gray/50
Black & white/Gray/100
Black & white/Gray/600
Black & white/Gray/100
Black & white/Gray/100
Black & white/Base/Black alpha 50
Violet/50 - Cloud Receipt
Violet/200 - Payment Lavender
Violet/500 - Brand
Violet/700
Red/50
Red/100
Red/600
Yellow/50
Yellow/100
Green/50
Green/100
Green/700
Green/800
Usage
The primary background color (white) used across all layouts and components.
Primary background hover color. This acts as the default hover state background color for components with white backgrounds (e.g. input dropdown menu items).
The primary dark background color used across layouts and components. This switches to bg-secondary when in dark mode and is useful for components such as tooltips and WYSIWYG tooltips.
The secondary background color used to create contrast against white backgrounds, such as website section backgrounds.
Secondary background hover color. Useful for hover states for components with gray-50 backgrounds such as active states (e.g navigation items and date pickers).
The secondary dark background color used across layouts and components. This is useful for components such as featured icons.
The tertiary background color used to create contrast against light backgrounds such as toggles.
Default disabled background color for components such as disabled primary buttons and toggles.
Default background color for background overlays.
The primary brand background color. Useful for components such as check icons.
The secondary brand background color.
Default solid brand background color. Useful for components such as button & toggles.
Pressed state solid brand background color.
Primary error state background color for components.
Secondary error state background color for components such as featured icons.
Default solid danger state background color
Secondary warning state background color.
Default solid success state background color
Primary success state background color for components.
Secondary success state background color.
Default solid success state background color
Alternative solid success state background color
VinPay - Design Style Guide
Built for TND for ViaPay project by Michael Stevanus Hartono & Dicky Yudha Handika