Kawn

Design System

Count Design System

Count Design System

Overview

Overview

Overview

Kawn Point of Sale (POS) design system is a set of guidelines and resources to ensure consistent, cohesive, and user-friendly design across all Kawn POS products. The system provides a clear and accessible language to communicate design decisions, patterns, and best practices. It also serves as a foundation for scalability, flexibility, and maintainability of the design system.

Colors

Colors

Colors

The Kawn POS color palette consists of a primary color, secondary color, accent color, and neutral colors. The primary color is blue, which represents trust, professionalism, and security. The secondary color is orange, which represents energy, creativity, and innovation. The accent color helps to give graphic and chart more clarity. The neutral colors are charcoal, and white, which provide contrast, readability, and balance.

Kawn POS color palette consists of a primary color, secondary color, accent color, and neutral colors. The primary color is blue, which represents trust, professionalism, and security. The secondary color is orange, which represents energy, creativity, and innovation. The accent color helps to give graphic and chart more clarity. The neutral colors are charcoal, and white, which provide contrast, readability, and balance.

Blue-100
#0076A0
Blue-80
#0094C9
Blue-60
#33A9D3
Blue-40
#66BFDE
Blue-20
#CCEAF4
Blue-05
#F2FAFC
Orange-100
#BC7A20
Orange-80
#EB9928
Orange-60
#EFAD53
Orange-40
#F3C27E
Orange-20
#FBEBD4
Orange-05
#FEFAF4
Charcoal-100
#353749
Charcoal-80
#5C5F6C
Charcoal-60
#828282
Charcoal-40
#ADAFB5
Charcoal-20
#D7D7DB
Charcoal-05
#FBFBFB
Accent-01
#D741A7
Accent-02
#7678ED
Accent-03
#8FC93A
Accent-04
#F7B801
Accent-05
#F38D68
Accent-06
#EE6C4D
Info-color
#0284FE
Success-color
#00AA55
Alert-color
#FFA800
Destructive-color
#EF3F3A

Typography

Typography

The Kawn POS typography uses the rubik for display and title and nunito for description and microcopy, which is modern, legible, and versatile. The system employs various font weights, styles, sizes, and spacing to create a hierarchy of information and emphasize key elements. The font size ranges from 12px to 20px for body text and 24px to 64px for headings.

Kawn POS typography uses the rubik for display and title and nunito for description and microcopy, which is modern, legible, and versatile. The system employs various font weights, styles, sizes, and spacing to create a hierarchy of information and emphasize key elements. The font size ranges from 12px to 20px for body text and 24px to 64px for headings.

Rubik

Use for display and title.

Nunito

Use for description and microcopy

Font ini digunakan untuk Deskripsi

The quick brown fox jumps
48/57

Page Titles - Heading 1

The quick brown fox jumps
36/43

Page Titles - Heading 2

The quick brown fox jumps
24/28

Page Titles - Heading 3

The quick brown fox jumps
20/24
Info Paragraphs
The quick brown fox jumps
18/24

Subtitle

The quick brown fox jumps
16/24
Station Descriptions
The quick brown fox jumps
12/18
Captions, Overline
The quick brown fox jumps
8/14

MIcrocopy

Iconography

Iconography

Kawn POS iconography uses simple, recognizable, and scalable icons to enhance usability and visual appeal. The system employs the feathericons library, it simply beautiful open source icons which provides a wide range of icons for different categories and use cases.

Illustration

Illustration

Illustrations can be used to showcase Kawn POS products and features in a more engaging way. For example, an illustration of a point of sale terminal with the Kawn POS interface displayed on it can help customers visualize the product.

Layout

Layout

The Kawn POS layout follows a grid-based system that ensures consistency, alignment, and balance. The system employs a 8px grid with a 4px baseline grid to ensure accurate spacing, proportions, and readability. The layout also follows the F-pattern, which prioritizes the most critical information in the top-left corner and guides the eye towards the main content.