Merupakan nilai-nilai yang membangun dan membentuk design system seperti spacing, color, typography, object styles, animation, etc. Design Token di representasikan sebagai data, biasanya dalam bentuk .json. Data yang disimpan bisa dipakai oleh berbagai teknologi, dan menjadi source of truth untuk bisa dipakai berbagai divisi dalam suatu organisasi. Contoh data nya seperti nilai RGB atau pun nilai heksadesimal untuk color, koordinat Bezier untuk animation. Design token terintegrasi dengan berbagai komponen untuk bisa mengontrol konsistensi.

Atom pada Atomic Design merupakan dasar dari “building blocks” yang ada pada level-level diatasnya. Jika di aplikasikan pada suatu website, maka Atoms pada Atomic Design System merupakan suatu tag HTML. Level Atoms bisa terdiri dari elemen yang lebih abstrak, seperti color palettes, fonts ataupun animations. Seperti Atoms yang ada di alam, Atoms akan sangat berguna jika saling dikombinasikan, dan akan menghasilkan level lain yang lebih kontekstual dan usable.

Saat Atoms digabungkan, akan menjadi Moleculs yang bisa digunakan dan memiliki fungsi masing-masing. Molecules adalah kumpulan dari Atoms yang menyatu bersama dan merupakan komponen terkecil dari suatu Design System. Di level ini biasanya terdiri dari komponen seperti Button, Inputs, Badges, Radio Button, etc.

Molecules membantu kita untuk membuat suatu halaman menjadi lebih cepat karena komponen yang dibuat sudah menjadi reusable komponen yang bisa digunakan sesuai dengan konteks nya ataupun fungsi nya. Saat Molecules saling dikombinasikan, maka akan terbentuk yang namanya Organisms. Organisms adalah kumpulan dari suatu grup Molecules yang membentuk suatu kompleks komponen. Pada level ini, akan lebih mudah dan juga sulit disaat yang bersamaan. Tantangan besarnya adalah bagaimana cara kita untuk menentukkan komponen Organisms apa yang akan dipakai oleh product/services kita.

Pada level Templates, terdiri dari kumpulan Organisms yang saling berkombinasi bersama membentuk suatu template halaman yang bisa di berikan konteks untuk menjadi suatu halaman yang sesuai dengan usability dan goals nya. Templates juga membantu kita untuk menjadi guide dalam layouting ataupun guides dalam membuat suatu halaman, selain itu dapat mengurangi proses low-fidelity wireframe agar bisa lebih cepat untuk mendapatkan feedback.

Pada level Pages, konten-konten yang belum memiliki konteks akan digantikan oleh konten real yang lebih akurat dalam mengelaborasikan konteks. Pages menjadi level tertinggi dalam suatu Atomic Design System.

DNA merupakan level terkecil yang ada pada DNA Design System. Pada level DNA, terdiri dari parameter seperti font size, font weight, color base, corner radius, line height, shadow. DNA bisa menjadi dasar untuk dipakai oleh level-level diatasnya. Selain itu DNA menjadi source of truth design decisions sebagai design data dalam bentuk .json yang tidak tergantung pada spesifik platform saat ingin dipakai oleh tim Developer (tech-agnostic). Hal ini yang membuat level DNA menjadi lebih dinamis.

Saat suatu DNA dikombinasikan, maka akan terbentuk level yang bernama Cells. Level Cells merupakan pengganti dari level Atoms pada Atomic Design System. Cells terdiri dari Semantic Color, Typography, Icon, Box shadow. Cells yang nantinya akan membentuk Organs agar bisa menjadi komponen.

Organs merupakan kumpulan dari Cells. Sama seperti Molecules pada Atomic Design System, Organs akan membentuk komponen seperti form label. Input atau button tidak akan terlalu berguna jika tidak saling dikombinasikan menjadi suatu form. Kombinasi antar Cells menjadi Organs akan menjadi berguna dan mempercepat proses kita dalam membuat suatu UI ataupun melakukan iterasi pengembangan produk.

Organs menjadi bahan kita dalam membuat suatu komponen. Form label bisa digunakan untuk membuat suatu form yang nantinya bisa dipakai untuk konteks apa saja seperti untuk template halaman login, ataupun kolom pencarian seperti search. Organisms merupakan kombinasi antara Organs yang menciptakan reusable component. Komponen ini nantinya akan saling digabungkan sesuai dengan konteks nya.

Templates merupakan suatu reusable component yang belum memiliki konteks tetapi sudah memiliki layout dan placeholder yang default. Templates merupakan gabungan dari DNA sampai Organisms. Pada suatu Templates bisa saja ada lebih dari 1 level seperti Organisms, Organs, Cells ataupun DNA. Templates memudahkan kita nantinya untuk memiliki UI yang konsisten. UI yang konsisten tentu nya akan memudahkan kita deliver touch and feels dari brand produk kita serta User Experience kepada pengguna. Contoh dari Templates adalah Sign In page, Article page, Home page, etc.

Jika Templates merupakan reusable page yang belum memiliki konteks tetapi sudah memiliki layout, maka Pages adalah suatu halaman atau screen yang sudah memiliki konteks. Pada Pages, kita bisa mengganti placeholder yang mungkin masih Lorem Ipsum dengan real konten yang memiliki konteks seperti berita, blog atau deskripsi. Selain itu, kita juga bisa mengganti placeholder Image dengan Image yang kita miliki. Karena adanya level lain seperti DNA sampai Templates, membuat suatu Pages akan sangat mudah dalam pengisian konten nya. Tentu Brand Identity serta Brand Image kita akan lebih memiliki positioning, serta User Experience akan mudah terdeliver karena komponen-komponen yang disusun pada Pages sudah konsisten.