Cito

Introduction

Cito is a personal design system. It functions like a customized scaffolding arrangement, serving as a repository of ideas, concepts and code snippets. The long-term goal is to have a place where I can demonstrate how I think and showcase the types of problems I have worked with in my daily work context.

Utilize the supplied CSS (currently accessible through browser inspection) with your preferred framework. The CSS is designed to be compatible with any project setup adhering to standard web conventions. The only remaining task for users is scoping. Initially, the sources for numerous components will not be publicly available, but this can change later.

Buttons

Default
Danger
Primary
Soft
Default small
Danger small
Primary small
Soft small

Colors

Cards

Berlin Rathaus
The Rotes Rathaus is the town hall of Berlin, located in the Mitte district on Rathausstraße near Alexanderplatz.
Berlin Rathaus
The Rotes Rathaus is the town hall of Berlin, located in the Mitte district on Rathausstraße near Alexanderplatz.
Did you know?
You can also make better choices

Checkboxes

Key-value lists

Key of
The value
Another key
And another value
Last key
Value not set
Key of
The value
Another key
And another value
Last key
Value not set
Key of
The value
Another key
And another value
Last key
Value not set
Key of
The value
Another key
And another value
Last key
Value not set

Grid containers

Unknown amount of items. First and last to be stuck on ends. Rest flows in the center. Suitable for dynamically changing custom containers (e.g. table row), where each child is directly under the parent and template structure is preferred to be kept intact.

Example 1

1
2
3
4 – and additional length here that is way too big for the cell
5
6
7
8
9

Example 2

1
2
3
4 – and additional length here that is way too big for the cell
5
6
7
8
9

Clip paths

Start
This here
That one
End

App chrome starters

Example 1