Client

Cedcommerce

Tools

Figma

Figjam

Photoshop

My Roles

Visual Designer

Illustration/Icons

Duration

September 2023 - March 2024

Ounce 3.0

Advance Design System

A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared library and visual consistency across different pages and platforms.

Overview

In Cedcommerce, I worked on the Design System which is version 3 (Final). The first and second versions of it messed up, there are not any properties and component variants followed correcting, detached components, lackness of important components. I feel that there needs to be a lot of improvement.

After exploring those flaws I initiated the brainstorming with the team lead and fellow product designers:

Collected the all necessary components, and created their atoms versions (to make them more accessible on a deeper level).
Implementing boolean and variables features in it,
Making it adaptive and responsive for all devices and screen sizes.
Finally tested the design system on one of our complex integration app where it was successfully performed.

There are more updates needed but for now, this version which I have created is good enough to implement on the products.

Typography

Desktop

Regular T1

Regular T2

Regular T3

Regular T4

Regular T5

Regular T6

Regular T7

Regular T8

Regular T9

Regular T10

Name

Size

Line height

400

Weight

Semibold T1

Semibold T2

Semibold T3

Semibold T4

Semibold T5

Semibold T6

Semibold T7

Semibold T8

Semibold T9

Semibold T10

Name

Size

Line height

500

Weight

Bold T1

Bold T2

Bold T3

Bold T4

Bold T5

Bold T6

Bold T7

Bold T8

Bold T9

Bold T10

Name

Size

Line height

600

Weight

Color Palettes

Danger

R30

#FFF4F4

rgb(255, 244, 244)

hsl(0, 100, 98)

FFF4F4

R40

#FCEFEE

rgb(252, 239, 238)

hsl(4, 70, 96)

FCEFEE

R50

#FBEAE9

rgb(251, 234, 233)

hsl(3, 69, 95)

FBEAE9

R55

#F6CECB

rgb(246, 206, 203)

hsl(4, 70, 88)

F6CECB

R60

#F2B9B5

rgb(242, 185, 181)

hsl(4, 70, 83)

F2B9B5

R75

#EFA9A4

rgb(239, 169, 164)

hsl(4, 70, 79)

EFA9A4

R80

#E2AFAC

rgb(226, 175, 172)

hsl(3, 48, 78)

E2AFAC

R90

#EC9892

rgb(236, 152, 146)

hsl(4, 70, 75)

EC9892

R100

#E9857E

rgb(233, 133, 126)

hsl(4, 71, 70)

E9857E

R110

#FF8277

rgb(255, 130, 119)

hsl(5, 100, 73)

FF8277

R150

#EC5B51

rgb(236, 91, 81)

hsl(4, 80, 62)

EC5B51

R200

#D33D31

rgb(211, 61, 49)

hsl(4, 65, 51)

D33D31

R300

#D62C20

rgb(214, 44, 32)

hsl(4, 74, 48)

D62C20

R350

#D92D20

rgb(217, 45, 32)

hsl(4, 74, 49)

D92D20

R400

#C4281C

rgb(196, 40, 28)

hsl(4, 75, 44)

C4281C

R500

#981F16

rgb(152, 31, 22)

hsl(4, 75, 34)

981F16

R600

#731811

rgb(115, 24, 17)

hsl(4, 74, 26)

731711

Blue

B10

#F5FAFF

rgb(245, 250, 255)

hsl(210, 100, 98)

F4F9FF

B20

#EFF8FF

rgb(239, 248, 255)

hsl(206, 100, 97)

EFF8FF

B40

#D1E9FF

rgb(209, 233, 255)

hsl(209, 100, 91)

D1E9FF

B50

#B2DDFF

rgb(178, 221, 255)

hsl(206, 100, 85)

B2DDFF

B60

#84CAFF

rgb(132, 202, 255)

hsl(206, 100, 76)

84CAFF

B70

#53B1FD

rgb(83, 177, 253)

hsl(207, 98, 66)

53B1FD

B80

#2E90FA

rgb(46, 144, 250)

hsl(211, 95, 58)

2E90FA

B90

#1570EF

rgb(21, 112, 239)

hsl(215, 87, 51)

156FEE

B100

#175CD3

rgb(23, 92, 211)

hsl(218, 80, 46)

175CD3

B200

#1849A9

rgb(24, 73, 169)

hsl(220, 75, 38)

1849A9

B300

#194185

rgb(25, 65, 133)

hsl(218, 68, 31)

194084

Primary

P10

#FBFAFE

rgb(251, 250, 254)

hsl(255, 67, 99)

FBFAFE

P20

#F7F6FC

rgb(247, 246, 252)

hsl(250, 50, 98)

F7F6FC

P25

#F0F2FA

rgb(240, 242, 250)

hsl(228, 50, 96)

P30

#F0EDFA

rgb(240, 237, 250)

hsl(254, 57, 95)

F0EDFA

P40

#E7E1F6

rgb(231, 225, 246)

hsl(257, 54, 92)

E7E1F6

P50

#D0C6EE

rgb(208, 198, 238)

hsl(255, 54, 85)

D0C6EE

P60

#C5B8EA

rgb(197, 184, 234)

hsl(256, 54, 82)

C5B8EA

P70

#BBADE7

rgb(187, 173, 231)

hsl(254, 55, 79)

BBADE7

P80

#B09FE3

rgb(176, 159, 227)

hsl(255, 55, 76)

B09FE3

P90

#A592DF

rgb(165, 146, 223)

hsl(255, 55, 72)

A592DF

P100

#9984DB

rgb(153, 132, 219)

hsl(254, 55, 69)

9984DB

P200

#8E76D7

rgb(142, 118, 215)

hsl(255, 55, 65)

8E76D7

P300

#8369D3

rgb(131, 105, 211)

hsl(255, 55, 62)

8369D3

P400

#7A5DCF

rgb(122, 93, 207)

hsl(255, 54, 59)

7A5DCF

P500

#6E4FCB

rgb(110, 79, 203)

hsl(255, 54, 55)

6E4FCB

P600

#6544C8

rgb(101, 68, 200)

hsl(255, 55, 53)

6544C8

P700

#5834C3

rgb(88, 52, 195)

hsl(255, 58, 48)

5834C3

P800

#4C26BF

rgb(76, 38, 191)

hsl(255, 67, 45)

4C26BF

P900 (Main)

#413BBC

rgb(67, 27, 188)

hsl(255, 75, 42)

431BBC

P1000

#270983

rgb(39, 9, 131)

hsl(255, 87, 27)

270983

P1100

#25085A

rgb(37, 8, 90)

hsl(261, 84, 19)

25085A

Shades

#FFFFFF

rgb(255, 255, 255)

hsl(0, 0, 100)

FFFFFF

G10

#FAFAFB

rgb(250, 250, 251)

hsl(240, 11, 98)

FAFAFB

G15

#F3F4F5

rgb(243, 244, 245)

hsl(210, 9, 96)

F2F3F4

G18

#F4F4F5

rgb(244, 244, 245)

hsl(240, 5, 96)

F3F3F4

G20

#F1F2F2

rgb(241, 242, 242)

hsl(180, 4, 95)

F5F6F6

G30

#ECEDEE

rgb(236, 237, 238)

hsl(210, 6, 93)

ECEDEE

G40

#E0E1E3

rgb(224, 225, 227)

hsl(220, 5, 88)

E0E1E3

G42

#D7D9DB

rgb(215, 217, 219)

hsl(210, 5, 85)

D7D9DB

G45

#D4D5D9

rgb(212, 213, 217)

hsl(228, 6, 84)

D4D5D9

G48

#C8CBCF

rgb(200, 203, 207)

hsl(214, 7, 80)

C7CACE

G50

#C3C5C9

rgb(195, 197, 201)

hsl(220, 5, 78)

C3C5C9

G55

#B9BBC1

rgb(185, 187, 193)

hsl(225, 6, 74)

B9BBC1

G60

#B5B7BC

rgb(181, 183, 188)

hsl(223, 5, 72)

B5B7BC

G70

#A9ACB2

rgb(169, 172, 178)

hsl(220, 6, 68)

A9ACB2

G80

#9B9EA5

rgb(155, 158, 165)

hsl(222, 5, 63)

9B9EA5

G90

#8C9098

rgb(140, 144, 152)

hsl(220, 6, 57)

8C9098

G100

#7E828B

rgb(126, 130, 139)

hsl(222, 5, 52)

7E828B

G200

#70747E

rgb(112, 116, 126)

hsl(223, 6, 47)

70747E

G300

#616771

rgb(97, 103, 113)

hsl(217, 8, 41)

616771

G400

#555B66

rgb(85, 91, 102)

hsl(219, 9, 37)

555B66

G450

#4E4F52

rgb(78, 79, 82)

hsl(225, 3, 31)

4E4F52

G500

#474D59

rgb(71, 77, 89)

hsl(220, 11, 31)

474D59

G600

#3B424F

rgb(59, 66, 79)

hsl(219, 14, 27)

3B424F

G700

#2A3140

rgb(42, 49, 64)

hsl(221, 21, 21)

2A3140

G800 (Main)

#1C2433

rgb(28, 36, 51)

hsl(219, 29, 15)

1C2433

G900

#101828

rgb(16, 24, 40)

hsl(220, 43, 11)

101828

G1000

#080C14

rgb(8, 12, 20)

hsl(220, 43, 5)

080C14

Black

BL10

#F2F2F2

rgb(242, 242, 242)

hsl(0, 0, 95)

F2F2F2

BL20

#E8E8E8

rgb(232, 232, 232)

hsl(0, 0, 91)

E8E8E8

BL30

#BCBCBC

rgb(188, 188, 188)

hsl(0, 0, 74)

BCBCBC

BL40

#ABABAB

rgb(171, 171, 171)

hsl(0, 0, 67)

AAAAAA

BL50

#999999

rgb(153, 153, 153)

hsl(0, 0, 60)

989898

BL60

#878787

rgb(135, 135, 135)

hsl(0, 0, 53)

868686

BL70

#616161

rgb(97, 97, 97)

hsl(0, 0, 38)

606060

BL80

#585858

rgb(88, 88, 88)

hsl(0, 0, 35)

585858

BL90

#4F4F4F

rgb(79, 79, 79)

hsl(0, 0, 31)

4F4F4F

BL100

#474747

rgb(71, 71, 71)

hsl(0, 0, 28)

464646

BL200

#3E3E3E

rgb(62, 62, 62)

hsl(0, 0, 24)

3E3E3E

BL300

#242628

rgb(36, 38, 40)

hsl(210, 5, 15)

242628

BL400

#1B1B1B

rgb(27, 27, 27)

hsl(0, 0, 11)

1B1B1B

BL500

#0A0A0A

rgb(10, 10, 10)

hsl(0, 0, 4)

0A0A0A

BL600

#010101

rgb(1, 1, 1)

hsl(0, 0, 0)

010101

Warning

Y45

#FFFAED

rgb(255, 250, 237)

hsl(43, 100, 96)

FFFAED

Y50

#FFF6E1

rgb(255, 246, 225)

hsl(42, 100, 94)

FFF6E1

Y70

#FFEFCC

rgb(255, 239, 204)

hsl(41, 100, 90)

FFEFCB

Y75

#FFE8B5

rgb(255, 232, 181)

hsl(41, 100, 85)

FFE8B5

Y80

#FEE6AE

rgb(254, 230, 174)

hsl(42, 98, 84)

FEE6AE

Y90

#FFE3A4

rgb(255, 227, 164)

hsl(42, 100, 82)

FFE3A3

Y95

#EAD8B0

rgb(234, 216, 176)

hsl(41, 58, 80)

EAD8B0

Y100

#FEDF97

rgb(254, 223, 151)

hsl(42, 98, 79)

FEDF97

Y200

#FED16A

rgb(254, 209, 106)

hsl(42, 99, 71)

FED16A

Y250

#FCCF65

rgb(252, 207, 101)

hsl(42, 96, 69)

FCCE64

Y300

#FEC84B

rgb(254, 200, 75)

hsl(42, 99, 65)

FEC84B

Y400

#B28C35

rgb(178, 140, 53)

hsl(42, 54, 45)

B28C35

Y500

#9B7A2E

rgb(155, 122, 46)

hsl(42, 54, 39)

9B7A2E

Y600

#E8A23A

rgb(232, 162, 58)

hsl(36, 79, 57)

Y700

#A86500

rgb(168, 101, 0)

hsl(36, 100, 33)

Success

GR40

#EEF6F3

rgb(238, 246, 243)

hsl(157, 31, 95)

EEF6F3

GR50

#E6F2ED

rgb(230, 242, 237)

hsl(155, 32, 93)

E6F2ED

GR65

#D7EAE2

rgb(215, 234, 226)

hsl(155, 31, 88)

D7EAE2

GR70

#AEE9D1

rgb(174, 233, 209)

hsl(156, 57, 80)

AEE9D1

GR75

#97C8B4

rgb(151, 200, 180)

hsl(156, 31, 69)

97C8B4

GR80

#A8D1C0

rgb(168, 209, 192)

hsl(155, 31, 74)

A7D1C0

GR90

#87C0A8

rgb(135, 192, 168)

hsl(155, 31, 64)

86BFA8

GR100

#6CB295

rgb(108, 178, 149)

hsl(155, 31, 56)

6CB295

GR110

#55D4A1

rgb(85, 212, 161)

hsl(156, 60, 58)

55D4A1

GR150

#269E6C

rgb(38, 158, 108)

hsl(155, 61, 38)

269E6C

GR200

#1B875A

rgb(27, 135, 90)

hsl(155, 67, 32)

1B875A

GR300

#027A48

rgb(2, 122, 72)

hsl(155, 97, 24)

027A48

GR350

#016038

rgb(1, 96, 56)

hsl(155, 98, 19)

015F38

GR400

#015532

rgb(1, 85, 50)

hsl(155, 98, 17)

015532

GR500

#013C24

rgb(1, 60, 36)

hsl(156, 97, 12)

003C23

Button Components & Variants

Checkbox, Radio & Toggle Components

Label

Description

Label

Description

Label

Description

Select & Input Component

Select Label

Select

Helper Text

Select Label

India

Input Label

Enter text here

Text

Helper Text

Input Label

Peterfinger@gmai |

Text

Helper Text

Buttons, Badges & Tags

Button

Badge

Tag

:Side Text

Tag

:Side Text

Spinner & Progress Bar

40%

Tabs & Step Wizard

In progress

Active

New

Inactive

Errors

Inactive

Errors

Failed

Inactive

New

Advance Design System

Contact