Skip to main content

Naming #

Different disciplines use names defined in the design system to communicate about tokens, components, and similar. Hence, names must be short, meaningful and pronounceable.

With every piece of content we name, we aim to follow this simple set of rules adapted from Brad Frost’s CSS Architecture for Design Systems.

Make it modular #

Duet consists of independent modules and this applies to our naming as well. Different parts of the system need to be clearly separated.

Make it legible #

Developers should be able to understand code at a glance and understand the purpose of any given part. Same is true for design components.

Avoid conflicts #

Since Duet’s parts will be used on many platforms, it’s critical to ensure that its naming doesn’t conflict with other systems.

Sizes #

We define sizing using T-shirt sizes. This makes it possible for anyone, technical or non-technical person, to understand the differences and how they relate to each other at a glance.

Colors #

These are our generic color naming guidelines. Color names must be:

Icons #

When naming icons, we use the below defined conventions and categories to group them:

Design Tokens #

Please discuss with the design system team before creating a new global token. We want to make sure all global tokens are as reusable as possible and that there’s also a real need to make it global intead of local.

Components #

Different disciplines use component names to communicate about them. Hence, they must be short, meaningful and pronounceable.

Component Props #

When naming component properties we need to be extra careful that the names we use do not conflict with existing standardized prototype members. Reserved names that we can’t use include:

title, lang, translate, dir, tabIndex, accessKey, draggable, contentEditable, isContentEditable, offsetParent, offsetTop, offsetLeft, offsetWidth, offsetHeight, style, innerText, outerText, oncopy, oncut, onpaste, onabort, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting, onwheel, onauxclick, ongotpointercapture, onlostpointercapture, onpointerdown, onpointermove, onpointerup, onpointercancel, onpointerover, onpointerout, onpointerenter, onpointerleave, onselectstart, onselectionchange, nonce, click, focus, blur, namespaceURI, prefix, localName, tagName, id, className, classList, slot, attributes, shadowRoot, assignedSlot, innerHTML, outerHTML, scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, clientHeight, attributeStyleMap, onbeforecopy, onbeforecut, onbeforepaste, onsearch, previousElementSibling, nextElementSibling, children, firstElementChild, lastElementChild, childElementCount, onfullscreenchange, onfullscreenerror, onwebkitfullscreenchange, onwebkitfullscreenerror, setPointerCapture, releasePointerCapture, hasPointerCapture, hasAttributes, getAttributeNames, getAttribute, getAttributeNS, setAttribute, setAttributeNS, removeAttribute, removeAttributeNS, hasAttribute, hasAttributeNS, toggleAttribute, getAttributeNode, getAttributeNodeNS, setAttributeNode, setAttributeNodeNS, removeAttributeNode, closest, matches, webkitMatchesSelector, attachShadow, getElementsByTagName, getElementsByTagNameNS, getElementsByClassName, insertAdjacentElement, insertAdjacentText, insertAdjacentHTML, requestPointerLock, getClientRects, getBoundingClientRect, scrollIntoView, scroll, scrollTo, scrollBy, scrollIntoViewIfNeeded, animate, computedStyleMap, before, after, replaceWith, remove, prepend, append, querySelector, querySelectorAll, requestFullscreen, webkitRequestFullScreen, webkitRequestFullscreen, part, createShadowRoot, getDestinationInsertionPoints

Abstract #

We name all Sketch files in Abstract following the below naming convention:

<Project> - <Feature Name>

Example 1: “Toivo - Pet Insurance Purchase”
Example 2: “Toivo - Sign Up Flow”

Branches in Abstract follow the below naming convention:

<Feature/Fix> - <Feature Name/Fix Name>

Example 1: “Feature - Sign Up Flow”
Example 2: “Fix - Symbol Alignment Issues”

GitHub #

We name all repositories in GitHub following the below naming conventions:

Example 1: “toivo-pet-insurance-purchase”
Example 2: “toivo-sign-up-flow”