Odessa

Design system, at scale leveraging user interface components and UX patterns to maintain a unified language in cross-functional teams

Grid System

The adoption of the 8-point grid system serves as a universal foundation for interfaces. This systematic approach to spacing and layout not only provides precision but also establishes a cohesive design language, streamlining the development and maintenance of interfaces across different platforms.

Column Grid

design system, ux, ui, atomic design, product design, grid, grid ystem, type style, ux design, product design, Munich, Berlin

Responsive Column Grid

design system, ux, ui, atomic design, product design, grid, grid system, type style, ux design, product design, Munich, Berlin

Color System

Color palette chart with categories like "Neutrals & Shades," "Primary," "Warning," "Error," and "Success." Each category includes multiple color swatches with names, codes, and base colors highlighted.

Typography

Typography guide for the font Avenir Next showing font weights, predefined sizes for headings, subheadings, body text, and button text. Includes examples of use with text samples in different styles and sizes, and a call-to-action button with 'Order now.'

Button System

Image showing different styles of button designs, including primary, secondary, and scaling buttons with variations in label, icon placement, and states like default, hover, pressed, and disabled.

System Icons

Each icon is reduced to its minimal form, expressing essential characteristics.

design system, ux, ui, product design, button system, primary button, secondary button, business design, atomic design, ux design, icons, outlined icons, menu icons, hamburger icon, hamburger icons, icon system, product design, Munich, Berlin

Menu Icons

Set of eight minimalist line icons on white diamond shapes, labeled from top left to bottom right: Hamburger, Honey, Odessa, Oreos, Fries, Domino, Hotdog, Veggie Burger. Each icon features lines or dots resembling different menu or list indicators.

Navigation

Three breadcrumb navigation examples with varying link counts and styles, including bold and gray text.

Interface with tabs labeled 'Tab 1', 'Tab 2', 'Tab 3', and 'Tab 4'. Tab 2 is highlighted as active.

Set of blue tooltip buttons labeled "Tooltip," "Tip up," "Tip right," "Tip down," and "Tip left."

Three blue buttons labeled: 'Tag name', '+ Tag name', and 'Tag name ×' on a white background.

Various search bar designs with buttons labeled 'Search,' 'GO,' and filter options like 'All,' 'Recent,' and 'Popular.'

Input

Timeline progress indicators showing three steps: Personal Info, Select Plan, Payment Info. Each row shows different stages of completion with checkmarks and numbers.

Checkbox

Radio

Checkbox states showing unchecked, hover, checked, and disabled.

Radio button examples showing four states: unchecked, hover, checked, and disabled.

Toggle

Toggle switches in different states: off, hover, on, and disabled, with corresponding labels.

Three file upload boxes with dotted borders and plus signs, labeled 'Upload,' 'Drag & Drop,' and 'Click or upload a file.'

Upload

Comparison of three dropdown menu states: inactive, active, and filled. Inactive shows a closed dropdown, active displays options including a nested option, and filled indicates a selection has been made.

Dropdown

A chart displaying different text input field states, including inactive, active, filled, error, required, and disabled, with variations in style and labels for each state.

Forms

Feedback

Two dialog boxes asking "Do you want to delete these items?" with "Cancel" and "Confirm" buttons. Left box is white; right box is blue.

Pop Up

Alerts

UI component examples showing info, warning, success, and error messages in light and dark backgrounds with corresponding icons and buttons.

Data Display

Two tables displaying a list of job positions with columns for Name, Position, Status, and Date. Rows include names Eva Hermann, Thomas Sowell, and Sophia Thomas, each listed with their respective positions in Marketing, IT, and Public Relations, all with status Open and different dates in 2022.

Table

Screenshot of a FAQ section with three questions: What is a company design system?, Why are design systems important?, and How do I share my design system with developers?. The second question is expanded with a paragraph explaining the benefits of design systems for replicating designs efficiently by using premade UI components.

Accordian

Three design thinking cards featuring blue graphics and text about improving organizational decision-making in product and service creation.

Cards

Data Display

Two tables displaying a list of job positions with columns for Name, Position, Status, and Date. Rows include names Eva Hermann, Thomas Sowell, and Sophia Thomas, each listed with their respective positions in Marketing, IT, and Public Relations, all with status Open and different dates in 2022.

Table

Screenshot of a FAQ section with three questions: What is a company design system?, Why are design systems important?, and How do I share my design system with developers?. The second question is expanded with a paragraph explaining the benefits of design systems for replicating designs efficiently by using premade UI components.

Accordian

Three design thinking cards featuring blue graphics and text about improving organizational decision-making in product and service creation.

Cards

Warner Music Germany

APPHEIMER