Design system

[GrandSchtroumpf]

This is the current design system in the application

Components

Navigation

Used to navigate between pages or subpages.
One item should always be selected

States:

• idle
• hover
• active
• selected
• disabled
• focus

Main nav

Top

Bottom

Cart links (this one is alone for now)

Subnav

trade / simulator

portfolio / explorer / edit

Switch

Used for a mandatory selection
One item should always be selected

States:

• idle
• hover
• active
• selected
• disabled
• focus

Radio group

Use for optional selection
At most one item is selected

States:

• idle
• hover
• active
• selected
• disabled
• focus

Input

States:

• idle
• hover
• disabled
• focus
• warning
• error

Note: the difference of color here is because of the gradient, the background looks actually the same on each input.

Combobox

Input search combined with a listbox. Focus doesn't leave the input field.
Items of the listbox can be selected if wanted.

Search input

States:

• idle
• hover
• disabled
• focus

Listbox

States

• idle
• hover
• active
• focus
• selected (optional)

Menu

List of links, buttons, radio or checkbox

States:

• idle
• hover
• focus
• active
• selected (for checkbox & radio)

Buttons & Links

Radio

Top layer

Dynamic elements that are on top of the page

Tooltip

Describe an element in the page
Opens on hover, anchored to the hovered element.
Should not contain actionable items

Popover

Opens on click, anchored to the element clicked.
Scroll is still enabled
Contains actionable items

Modal

Opens on click, fixed on the top of the page
Scroll is disabled
Track focus in the modal
Usually contains a form

States:

• backdrop when open (every behind the modal)

Buttons / Links

States:

• basic
• hover
• active
• disabled
• focus

Surfaces

Tables

State:

• hover (if the row is a link)

Surface

Contrast surface

[GrandSchtroumpf]

Colors

I would suggest to use oklch(lightness chroma hue) format for the colors.

Example of how we can build a design system with oklch:
https://codepen.io/GrandSchtroumpf/pen/raxymJW

Theory

hue

Each information has its own hue :

• primary: 206
• error: 15
• warning: 57
• sell: 25
• buy: 170

Chroma

Chroma is used to differentiate between surfaces and top level elements :

• surface: 4%
• button: 8%
• CTA / colored text: 20%

lightness

Lightness is used to create shades without the same category

Examples:

Plain colors

Currently:

• New green: oklch(0.427 0.044 206.47)
• Dark green: oklch(0.2064 0.0277 207.71)
• Black: oklch(0.1422 0.0216 206.69)

After:

• New green: oklch(0.4 0.03 206)
• Dark green: oklch(0.2 0.03 206)
• Black: oklch(0.15 0.03 206)

The difference if small, but it provides a great way to manage shades in the app

Tertiary button

Currently:

linear-gradient(oklch(0.43 0.04 206.47), oklch(0.32 0.04 209.88) , oklch(0.21 0.03 207.71))

After:

linear-gradient(oklch(0.4 0.04 206), oklch(0.3 0.04 206), oklch(0.2 0.03 206))

Secondary button

Currently:

linear-gradient(oklch(0.73 0.08 207.04), oklch(0.43 0.04 206.47))

After:
With chroma: 0.4

linear-gradient(oklch(0.7 0.08 206), oklch(0.4 0.08 206))

Or with chroma: 0.08

linear-gradient(oklch(0.7 0.08 206), oklch(0.4 0.08 206))

Benefit

It provides a pattern that we can use for different state (hover, focus, selected, active, ...), and future component.
We can create variable to easily see the result in the app to test new patterns.
We can apply the same pattern for other hues: sell, buy, error, warning, ...