ساختار پیوند
هر چیزی در پیوند از چند توکن شروع می‌شود و قدم به قدم بزرگ‌تر می‌شود.
پیوند از کوچک به بزرگ ساخته می‌شود: توکن‌ها کامپوننت می‌سازند و کامپوننت‌ها الگو. این روش از اتمیک دیزاین برد فراست (Brad Frost) می‌آید. صفحه را پایین بکشید تا پنجره جست‌وجوی سایت را قدم به قدم بسازیم.
توکن‌ها
هر چیزی که در پیوند می‌بینید از چند تصمیم کوچک ساخته شده است: یک رنگ، یک گوشه، یک فاصله، یک سایه یا اندازه یک متن. هر کدام از این تصمیم‌ها نامی دارد که به آن توکن می‌گوییم، مثل shape.corner.md برای گوشه کادرها.
کامپوننت‌ها هیچ عدد یا رنگی را مستقیم نمی‌نویسند و فقط همین نام‌ها را به کار می‌برند. برای همین اگر تصمیمی عوض شود، هر جایی که آن نام را دارد با هم عوض می‌شود. پیوند ۲۶۲ توکن نقش دارد که هر کدام به یکی از ۳۴۰ مقدار خام اشاره می‌کند، و رنگ‌ها در هر سه حالت روشن، تیره و تاریک مقدار خودشان را دارند. آیکون‌ها هم مثل توکن‌ها از یک مجموعه می‌آیند.
کامپوننت‌ها
کامپوننت قطعه‌ای مستقل است که از همین توکن‌ها ساخته می‌شود. کادر جست‌وجو یکی از آن‌هاست: گوشه‌اش، خط دورش، فاصله داخلش، متنش و آیکونش هر کدام از یک توکن یا از مجموعه آیکون‌ها می‌آید.
پیوند ۳۲ کامپوننت دارد، از دکمه و متن تا پنجره و اسلایدر. بعضی از آن‌ها از کامپوننت‌های دیگر هم ساخته می‌شوند؛ مثلا مدال یک عنوان و یک دکمه آیکون‌دار دارد. همه را در کامپوننت‌ها ببینید.
الگوها
الگو چند کامپوننت را برای کاری کنار هم می‌چیند که چند محصول لازمش دارند. پنجره جست‌وجو یک الگوست: کادر جست‌وجو، دکمه بستن و فهرست نتیجه‌ها روی یک سطح کنار هم نشسته‌اند و خود سطح هم فقط از توکن‌ها ساخته شده است.
جست‌وجو، حمایت مالی، فرم تماس و هدر سایت نمونه‌هایی از الگو هستند. هر محصول همین الگوها را به کار می‌برد و هیچ‌کدام را از نو نمی‌سازد.
صفحه‌ها و رسپی‌ها
صفحه‌ها در خود محصولات ساخته می‌شوند، از روی وایرفریم و با محتوای واقعی. صفحه هیچ ظاهری از خودش ندارد و همه چیزش از کامپوننت‌ها و الگوهای پیوند می‌آید.
گاهی محصولی ترکیبی لازم دارد که فقط مال خودش است، مثل کارت پروژه در سایت. به این ترکیب‌ها رسپی می‌گوییم. رسپی در همان محصول و فقط از اجزای پیوند ساخته می‌شود. اگر ظاهر تازه‌ای لازم داشته باشد، آن ظاهر اول در پیوند تعریف می‌شود، و اگر محصول دیگری هم لازمش داشت، به پیوند می‌آید و الگو می‌شود.
خانواده‌های توکن
توکن‌های هر خانواده آخر صفحه قاعده خودش آمده است.
رنگ
هر رنگ در پیوند یک نقش است، مثل رنگ اصلی یا متن روی سطح، و در هر سه حالت روشن، تیره و تاریک مقدار خودش را دارد.
تایپوگرافی
دو فونت پیوند و نقش‌های متن، هر کدام با اندازه، ارتفاع خط و وزن خودش.
فاصله
پله‌های فاصله بر پایه ۴ پیکسل، برای فاصله داخل هر جزء و فاصله بین اجزا.
اندازه
ارتفاع کنترل‌ها، اندازه آیکون‌ها، کوچک‌ترین سطح لمس و اندازه‌هایی که چند جزء با هم شریک‌اند.
فرم و حاشیه
گوشه‌ها با Corner smoothing و حاشیه‌ها با پهنا و رنگشان.
سطح و ارتفاع
سطح‌ها و سایه‌های شش ارتفاع، و ترتیب لایه‌هایی که روی هم می‌آیند.
حرکت
یک منحنی نرم و پنج مدت برای همه حرکت‌ها، و گذارهایی که کامپوننت‌ها از آن‌ها می‌سازند.
فوکوس و حالت‌ها
حلقه فوکوس و لایه‌های رنگی هاور، فشار و غیرفعال.
چیدمان صفحه
پهنای ظرف صفحه، فاصله لبه‌ها، ستون‌ها و نقطه‌های شکست.
آیکون‌ها
آیکون‌های Solar روی گرید ۲۴ که هر کامپوننت از همین مجموعه برمی‌دارد.