Context
RitchieRitchieBrosBrosrunsrunsthetheworld'sworld'slargestlargestindustrialindustrialequipmentequipmentmarketplace,marketplace,acrossacrossaapublicpublicauctionauctionsite,site,nativenativeappsappsandandthetheinternalinternaltoolstoolsitsitsteamsteamssellsellwith.with.EachEachsurfacesurfacehadhaddrifteddriftedintointoitsitsownowninterpretationinterpretationofofthethebrand,brand,andandthethecostcostofofthatthatdivergencedivergencelandedlandedononthethepeoplepeopleusingusingthem.them.
Objective
BuildBuildOrbitOrbitfromfromnothing:nothing:thethetokens,tokens,ramps,ramps,componentscomponentsandandprocessprocessthatthatletleteveryeveryteamteamdesigndesignandandbuildbuildfromfromoneonesourcesourceofoftruth.truth.MyMyrolerolewaswasdesigndesignsystemsystemmanager,manager,whichwhichmeantmeantowningowningthethearchitecturearchitectureandandthethegovernancegovernancearoundaroundit,it,notnotjustjustthethelibrary.library.
Token Architecture
OrbitOrbitisisbuiltbuiltonon1,1771,177variablesvariablesacrossacrossthirteenthirteencollections,collections,tieredtieredsosothatthatintentintentnevernevergetsgetshardcoded.hardcoded.PrimitivesPrimitivesholdholdrawrawvalues,values,aasystemsystemlayerlayergivesgivesthemthemmeaning,meaning,componentcomponentandandpatternpatternlayerslayersconsumeconsumeit.it.NothingNothingininaacomponentcomponentreachesreachespastpastthethelayerlayeraboveaboveit.it.
Colour Ramps
ColourColourisistwelve-steptwelve-steprampsrampsratherratherthanthanaahandfulhandfulofofbrandbrandvalues,values,withwitheveryeverystepstepassignedassignedaajob:job:appappbackground,background,subtlesubtleandandsolidsolidfills,fills,hoverhoverandandactive,active,borders,borders,lowlowandandhighhighcontrastcontrasttext.text.EachEachramprampresolvesresolvesininlightlightandanddark,dark,sosodarkdarkmodemodeisisaamodemoderatherratherthanthanaasecondsecondpalette.palette.
Components
TheThelibrarylibrarycoverscoversbothbothplatformsplatformsendendtotoend,end,fromfrombuttons,buttons,fieldsfieldsandandformsformsthroughthroughtotodialogs,dialogs,snackbars,snackbars,skeletonsskeletonsandandpagination.pagination.TheThewebwebsidesidefollowsfollowsthethestructurestructurethetheengineersengineersalreadyalreadybuildbuildin,in,sosoaacomponentcomponentininFigmaFigmamapsmapsontoontothetheoneoneinincodecodeinsteadinsteadofofdescribingdescribingsomethingsomethingadjacentadjacenttotoit.it.
Icons & Flags
IconsIconsarearethethelargestlargestsinglesinglepiecepieceofofthethesystem:system:moremorethanthaneighteeneighteenthousandthousandcomponents,components,organisedorganisedintointosetssetssosoaadesignerdesignerpickspicksaaconceptconceptandandaaweightweightratherratherthanthanhuntinghuntingthroughthroughaasheet.sheet.AAfullfullflagflagsetsetsitssitsalongsidealongsidethemthemforforaamarketplacemarketplacethatthatsellssellsacrossacrossborders.borders.
Platforms & Locales
OneOnesemanticsemanticlayerlayerresolvesresolvesacrossacrossmobile,mobile,webwebandandinternalinternaltools,tools,sosoaadecisiondecisionmademadeonceoncereachesreachesallallthree.three.AAlanguagelanguagecollectioncollectioncarriescarriesthethedomaindomainitself,itself,termstermslikelikelot,lot,bidsbidsandandbiddingbiddingpaused,paused,acrossacrosstwentytwentylocaleslocalesfromfromArabicArabictotoJapanese,Japanese,withwiththethecomponentcomponentlibrarylibraryuntouched.untouched.
Governance
AAsystemsystemwithoutwithoutaaprocessprocessisisaalibrarylibrarythatthatrots.rots.OrbitOrbitdocumentsdocumentsthethewholewholelifecycle,lifecycle,fromfromaateamteamraisingraisingaaneed,need,throughthroughdiscussiondiscussionandanddesign,design,totobuild,build,releasereleaseandandadoption,adoption,sosocontributioncontributionhashasaarouterouteininandandreleasesreleasesarearepredictablepredictableratherratherthanthanannounced.announced.
Migration
AdoptionAdoptionhappenshappenswhilewhileproductsproductskeepkeepshipping,shipping,sosothethepalettepaletteandandtypographytypographycarrycarrycurrentcurrentandandlegacylegacymodesmodessidesidebybysidesideandandteamsteamsmovemovesurfacesurfacebybysurface.surface.One-offsOne-offsliveliveononaasnowflakessnowflakespagepageinsteadinsteadofofleakingleakingintointocore,core,andandretiredretiredworkworkmovesmovestotodeprecateddeprecatedratherratherthanthanbeingbeingdeleteddeletedoutoutfromfromunderunderanyone.anyone.
Result
Web,Web,mobilemobileandandinternalinternaltoolstoolsnownowshareshareoneonevisualvisuallanguage,language,andandteamsteamscomposecomposefromfromthethelibrarylibraryratherratherthanthanrebuilding.rebuilding.TheThetokentokenandandlanguagelanguagelayerslayersmademadedarkdarkmodemodeandandtwenty-localetwenty-localesupportsupportpossiblepossiblewithoutwithoutreworkingreworkingcomponents,components,andandthethegovernancegovernancemeansmeanscontribution,contribution,releasereleaseandanddeprecationdeprecationcarrycarryononwithoutwithoutme.me.
