d0rich design system

Design system inspired by Persona 5 UI

References:

Authored by d0rich

Shapes

Did you know that this design system has shape system?

Wow, that's cool! It seems like it's very flexible! There are some predefined shapes, but you can also create your own!

XRay Example

It also has XRay effect, which displays only main shape from background!

Dense example

Cards have densed mode. It's useful for displaying more content in one place.

Shadows

Description

Shadows are implemented as TailwindCSS plugin. It's very easy to use.

Animation (Hover me)

These shadows are also animatable! Hover this card to see it in action.

SVG lines animation toolkit

Description

Design system provides toolkit for SVG lines animation. It's very easy.

Switch color

Switch color on example.

Boop

GSAP compatible

It is much easer to use GSAP with this toolkit. For example use GSAP's scrollTrigger plugin.

Buttons

Rotation

Imperfection is the part of the design. It's not a bug, it's a feature. So buttons are rotated by default.

Don't forget to hover buttons in order to see the effect.

Just Button
No Rotate

Tile buttons

Tile buttons are default buttons. They are used in the most cases. Hover effect looks like a distorted tile.

Button
Active button

List highlight

This is a list highlight button. It's created specifically for the lists.

List highlight
Active list highlight
Custom color
Active Custom color
Negative
Active Negative
Composite
Active Composite

Big Bang Button

There is specific button which displays big animation on click.

BOOP ME

Action Lists

Lists

Specific component for lists of actions. Hover it or click it to see animation.

Fan

Fan is another variation of list. It can be oriented to left or to right.

Try add more items to action fan.

Add Item

Reset Items

Idle

Idle

Identica

Character

Some elements are specific for my projects. For example, this character variations.

Masks

It also includes some masks. These are symbolising different sides of my personality.

Animations

Animated elements

This design system has some atomic animated elements. It can be used for stuffing background.

Content components

Some components were created in order to be used via Nuxt Content.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque quibusdam possimus aliquid earum adipisci tempore quidem molestiae distinctio quaerat reiciendis.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque quibusdam possimus aliquid earum adipisci tempore quidem molestiae distinctio quaerat reiciendis.