Design System

Generative Drawing. Colormono, 2023.

Hello

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

By establishing a design system, organizations can streamline the design and development process, improve consistency, and reduce the time and resources required to create digital products. It helps ensure that products are user-friendly, accessible, and meet the needs of users, while also supporting the overall brand identity and business goals of the organization.

Typography

Typography creates purposeful texture, guiding users to read and understand the hierarchy of information. The right typographic treatment and the controlled usage of type styles helps manage the display of content, keeping it useful, simple, and effective.

God is in the kerning.
Mi vieja crió un idiota de corazón lunático.
h3
Siempre seguí la misma dirección, la difícil, la que usa el salmón.
lead
Si es rápido y gratis… Why not?
body
Tengo un montón de cosas en contra de la televisión, que van desde las ondas alfa, a los mecanismos en donde el mensaje se transforma en esa misma cosa. Pero no soy tan imbécil como para pretender apagar la televisión. Carlos Alberto Solari.
small
Este mundo, esta empresa, este mundo de hoy que te esnifa la cabeza una y otra vez en una línea y otra línea y otra línea más. Voy cumpliendo como puedo… Yo trabajo acá!
caption
Tu negocio es muy difícil de explicar y fácil de enseñar.
overline
Violencia es mentir

Blandit libero volutpat sed cras ornare arcu. Cursus sit amet dictum sit amet. Nunc vel risus commodo viverra maecenas accumsan. Libero id faucibus nisl tincidunt eget nullam non nisi est. Varius quam quisque id diam vel quam. Id donec ultrices tincidunt arcu non.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat sed cras ornare arcu. Nibh ipsum consequat nisl vel pretium lectus quam id leo. A arcu cursus vitae congue. Amet justo donec enim diam. Vel pharetra vel turpis nunc eget lorem. Gravida quis blandit turpis cursus in. Semper auctor neque vitae tempus. Elementum facilisis leo vel fringilla est ullamcorper eget nulla. Imperdiet nulla malesuada pellentesque elit eget.

Felis donec et odio pellentesque diam volutpat commodo sed.

Tortor consequat id porta nibh. Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo. Scelerisque fermentum dui faucibus in. Tortor posuere ac ut consequat semper viverra.

Information we collect

Amet justo donec enim diam. In hendrerit gravida rutrum quisque non. Hac habitasse platea dictumst quisque sagittis purus sit.

How we use your Information

Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Consectetur adipiscing elit pellentesque habitant. Ut tristique et egestas quis ipsum suspendisse ultrices gravida.

Icons

An icon family ensures that all pictograms and ideograms within the system share a consistent style, which makes it easier for users to understand their meaning and use them correctly.

< Network /> < ShieldAlert /> < Landmark /> < Wallet /> < CreditCard /> < Banknote /> < Coins /> < PiggyBank /> < Briefcase /> < User /> < Users /> < Contact /> < Bookmark /> < Share /> < Share2 /> < Send /> < Mail /> < Inbox /> < ListChecks /> < Cake /> < Cast /> < Bot /> < Pencil /> < Eraser /> < Box /> < Component /> < Puzzle /> < BoxSelect /> < Dice1 /> < Dice2 /> < Dice3 /> < Dice4 /> < Dice5 /> < Dice6 /> < Dices />

MoreHorizontal

Color

To support the user experience, colors need to be combined wisely so that they work together well, do not overwhelm, and communicate the same kind of information everywhere in the interface.

Background

Muted

Muted Foreground

Foreground

Primary: Indigo

Primary Foreground

Secondary: Teal

Secondary Foreground

Accent: Pink

Accent Foreground

Grid

Grids are a great framework to help designers quickly put together a clean, well-aligned interface, and help users to easily scan, read, and use those interfaces.

Header

Sidebar

Footer

Components

A collection of reusable UI components, such as buttons, forms, and icons, that can be assembled to create new pages and features.

Principles

Design principles for creative organizations may include some of the common principles, such as user-centered design, consistency, and accessibility, but may also emphasize additional principles that are specific to creative work. Here are some design principles that can be applied in creative organizations:

Innovation: Creative organizations should prioritize innovation and creativity in their designs, seeking out new and innovative ways to solve problems and meet the needs of their clients and users.

Collaboration: Design should involve collaboration between designers, clients, and other stakeholders, promoting open communication and collaboration to ensure that all perspectives are considered.

Empathy: Designers should have empathy for their clients and users, seeking to understand their needs and perspectives in order to create designs that are effective and impactful.

Authenticity: Design should be authentic and true to the values and mission of the organization, reflecting its personality and positioning in a way that is genuine and honest.

Experimentation: Design should be experimental and exploratory, encouraging designers to try out new ideas and approaches to see what works best.

Storytelling: Design should tell a story and engage users in a way that is compelling and meaningful, using visual and narrative elements to create an emotional connection.

Aesthetics: Design should prioritize aesthetics and beauty, creating designs that are visually appealing and engaging.

Flexibility: Design should be flexible and adaptable, allowing for changes and adjustments as needed to meet the evolving needs of the organization and its users.