Content Comparison

...

1. Using atomic design classification - hierarchical structure (atoms, molecules, organisms, etc.)

2. Simple and descriptive - consistent naming rules (descriptive, clear, no abbreviations)

3. Scalable structure -

4. SinglConsistent letter casing - maintain sentence case for for component and lowercase for properties on design level, code should follow language default

5. Singular name - avoid the use of plurals in choosing a name (button not buttons)

Naming schema

A naming schema provides consistency, clarity, and ease of reference. By following a set pattern or rules for naming, it becomes easier to identify, manage, and search for items.

...

[ category ] represents the broadest classification (components, organisms, etc.).
[ component ] type represents the specific component being referred to (button, checkbox, toggle, input, etc.).
[ style ] describes the general appearance or behaviour of the component (standard, iconOnly, textOnly, etc.).
[ variant ] specifies the purpose or use-case for the component (primary, secondary, tertiary, information, success, warning, etc.).
[ size ] denotes the component's dimensions or scale (small, medium, large, etc.).
[ state ] describes the current interaction or status of the component (default, hover, focus, active, disabled, etc.).

Classification

There are three different classification used

Atomic design

Atomic design is a methodology developed by Brad Frost for creating design systems in a systematic and hierarchical manner.

The idea behind atomic design is to break interfaces down into their smallest parts, which can be combined and recombined to produce any number of UI variations. Atomic design breaks down UI components into the following levels: atoms, molecules, organisms, templates and pages

Functionality

The idea behind atomic design is to break interfaces down into their smallest parts, which can be combined and recombined to produce any number of UI variations. Atomic design breaks down UI components into the following levels: atoms, molecules, organisms, templates and pages

Context of use

The idea behind atomic design is to break interfaces down into their smallest parts, which can be combined and recombined to produce any number of UI variations. Atomic design breaks down UI components into the following levels: atoms, molecules, organisms, templates and pages.

This classification is to be used on the design level, within Figma and code as this allows for scalability as more complex components are designed and developed.

Functionality

Ideal for external documentation as it’s easier to find component based on the functionality they add to the overall design, it is easily found in popular design system documentation such as Shopify, Material design and others.

This classification separates the components into categories such as Inputs, Navigation, Layout etc

Context of use

This classification method separates components by features, pages or user journeys to allow for more accessibility within complex components templates for instance, a card component could be further extended as a template for specific use on FX and on loans but with different layout arrangement and content.

The classification method will only be used to classify templates further into feature groups.

Component breakdown

By Atomic design

The component list of kamona is classified using the atomic design classification as listed below

Atoms

These are the basic building blocks, analogous to atoms in the physical world. In terms of web interfaces, atoms can be HTML tags, such as labels, inputs, buttons, or other elemental parts like colour swatches and typographic styles. They are not useful on their own but when combines, they become the foundation of your UI.

...

...

Pages

Pages are specific instances of templates. Here, placeholder content in templates is replaced with real content, thus forming a complete page. This level allows for testing the effectiveness of the design system’s hierarchy and seeing how the design system works in practice with real content.

By Functionality

...

Inputs or Form

Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. Think of them as UI components, like a form label + from input + button = search formAll components that allow to for data input from text fields to file upload including buttons and links.

Navigation

Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. Think of them as UI components, like a form label + from input + button = search form.

...