Skip to content
Back
Theme
A Playful Onboarding
1 min read
Original article ↗
For designers, developers, and builders.
'%3e%3cpath%20d='M0.5%200H20.5V20H0.5V0ZM18.8617%2015.23C18.7158%2014.3175%2018.1217%2013.5508%2016.3592%2012.8358C15.7458%2012.5483%2015.0642%2012.3483%2014.8617%2011.8858C14.7858%2011.6108%2014.7742%2011.4608%2014.8233%2011.2983C14.9483%2010.76%2015.5858%2010.5983%2016.0858%2010.7483C16.4108%2010.8483%2016.7108%2011.0983%2016.8992%2011.4983C17.7608%2010.935%2017.7608%2010.935%2018.3617%2010.5608C18.1367%2010.2108%2018.025%2010.06%2017.8733%209.91083C17.3483%209.32333%2016.6492%209.02333%2015.5117%209.04917L14.9242%209.12333C14.3608%209.26083%2013.8242%209.56083%2013.4992%209.96083C12.5492%2011.0367%2012.8233%2012.9117%2013.9733%2013.6867C15.1108%2014.5367%2016.7742%2014.7233%2016.9867%2015.5242C17.1867%2016.4992%2016.2617%2016.8117%2015.3483%2016.6992C14.6725%2016.5492%2014.2983%2016.2108%2013.8858%2015.5858L12.3608%2016.4617C12.5358%2016.8617%2012.7358%2017.0358%2013.0358%2017.3858C14.4858%2018.8492%2018.1108%2018.7742%2018.7617%2016.5492C18.7858%2016.4742%2018.9617%2015.9617%2018.8233%2015.1742L18.8617%2015.23ZM11.3758%209.1925H9.5025C9.5025%2010.8075%209.495%2012.4125%209.495%2014.03C9.495%2015.0567%209.5475%2015.9992%209.38%2016.2892C9.105%2016.8633%208.39667%2016.79%208.075%2016.6892C7.745%2016.5258%207.5775%2016.3008%207.38333%2015.9767C7.33083%2015.8892%207.29167%2015.8133%207.2775%2015.8133L5.75667%2016.7508C6.01083%2017.2758%206.38167%2017.7275%206.86%2018.015C7.5725%2018.44%208.53%2018.5775%209.5325%2018.3525C10.185%2018.1642%2010.7475%2017.7767%2011.0417%2017.1767C11.4667%2016.4017%2011.3767%2015.4517%2011.3725%2014.3883C11.3825%2012.6767%2011.3725%2010.9642%2011.3725%209.23917L11.3758%209.1925Z'%20fill='%23737882'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_6411_900'%3e%3crect%20width='20'%20height='20'%20fill='white'%20transform='translate(0.5)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e){kind=small}
'%3e%3cpath%20d='M9.12833%2017.6042C8.39532%2017.7946%207.62151%2017.7556%206.91141%2017.4922C6.2013%2017.2289%205.58911%2016.754%205.1575%2016.1317C4.89243%2015.7608%204.70406%2015.3408%204.60347%2014.8962C4.50287%2014.4516%204.49206%2013.9914%204.57167%2013.5425C4.59881%2013.3951%204.63612%2013.2498%204.68333%2013.1075L4.77083%2012.84L5.01%2013.015C5.56102%2013.4198%206.17709%2013.7275%206.83167%2013.925L7.005%2013.9775L6.98833%2014.1509C6.96752%2014.3964%207.03424%2014.6414%207.17667%2014.8425C7.30654%2015.0301%207.49086%2015.1733%207.70473%2015.2527C7.91859%2015.3321%208.15168%2015.344%208.3725%2015.2867C8.47359%2015.2598%208.56999%2015.2177%208.65833%2015.1617L13.3167%2012.1934C13.4304%2012.1215%2013.528%2012.0267%2013.6032%2011.9151C13.6784%2011.8035%2013.7295%2011.6775%2013.7533%2011.545C13.7773%2011.4097%2013.7741%2011.271%2013.744%2011.1369C13.7138%2011.0029%2013.6572%2010.8762%2013.5775%2010.7642C13.4475%2010.5767%2013.2632%2010.4336%2013.0494%2010.3542C12.8355%2010.2748%2012.6025%2010.2628%2012.3817%2010.32C12.2806%2010.3469%2012.1842%2010.389%2012.0958%2010.445L10.3183%2011.5784C10.0261%2011.7644%209.70713%2011.9046%209.3725%2011.9942C8.63957%2012.1847%207.86582%2012.1458%207.15572%2011.8826C6.44563%2011.6194%205.83339%2011.1447%205.40167%2010.5225C5.13658%2010.1515%204.94829%209.73131%204.84783%209.28655C4.74737%208.84179%204.73678%208.38144%204.81667%207.93252C4.89565%207.49263%205.06556%207.07405%205.31552%206.70355C5.56548%206.33306%205.89%206.01879%206.26833%205.78086L10.9258%202.81169C11.218%202.62561%2011.537%202.48538%2011.8717%202.39586C12.6047%202.2054%2013.3785%202.24447%2014.0886%202.5078C14.7987%202.77113%2015.4109%203.24602%2015.8425%203.86836C16.1076%204.23921%2016.2959%204.65925%2016.3965%205.10386C16.4971%205.54847%2016.5079%206.00868%2016.4283%206.45752C16.4011%206.6049%2016.3638%206.75024%2016.3167%206.89252L16.2292%207.16002L15.9908%206.98502C15.4397%206.57979%2014.8233%206.27174%2014.1683%206.07419L13.995%206.02169L14.0117%205.84919C14.0325%205.60337%2013.9658%205.35809%2013.8233%205.15669C13.6933%204.96928%2013.509%204.82628%2013.2951%204.747C13.0813%204.66771%2012.8482%204.65597%2012.6275%204.71336C12.5264%204.74021%2012.43%204.78236%2012.3417%204.83836L7.68333%207.80669C7.56949%207.87848%207.47186%207.97321%207.39667%208.08484C7.32149%208.19647%207.2704%208.32254%207.24667%208.45502C7.22258%208.59033%207.22572%208.72908%207.25591%208.86316C7.2861%208.99723%207.34274%209.12394%207.4225%209.23586C7.55246%209.42333%207.73679%209.56642%207.95062%209.64585C8.16446%209.72527%208.39751%209.7372%208.61833%209.68002C8.71975%209.65294%208.81642%209.61051%208.905%209.55419L10.6817%208.42086C10.9739%208.23501%2011.2929%208.09505%2011.6275%208.00586C12.3604%207.81531%2013.1342%207.85426%2013.8443%208.11743C14.5544%208.38061%2015.1666%208.85534%2015.5983%209.47752C15.8634%209.84852%2016.0517%2010.2687%2016.1522%2010.7135C16.2526%2011.1583%2016.2632%2011.6186%2016.1833%2012.0675C16.1044%2012.5075%2015.9345%2012.9262%2015.6845%2013.2969C15.4345%2013.6675%2015.11%2013.9819%2014.7317%2014.22L10.0742%2017.1884C9.78196%2017.3744%209.46299%2017.5147%209.12833%2017.6042ZM17.76%202.64586C15.9033%20-0.012476%2012.235%20-0.799976%209.58333%200.890024L4.925%203.85836C4.29592%204.25428%203.75635%204.77709%203.34081%205.39338C2.92526%206.00968%202.64286%206.70589%202.51167%207.43752C2.2894%208.67017%202.48471%209.94174%203.06667%2011.0509C2.66778%2011.6555%202.39563%2012.3347%202.26667%2013.0475C2.13413%2013.7939%202.15195%2014.5592%202.31909%2015.2986C2.48623%2016.038%202.79932%2016.7366%203.24%2017.3534C5.0975%2020.0117%208.765%2020.7992%2011.4167%2019.11L16.075%2016.1417C16.7042%2015.7459%2017.2438%2015.2231%2017.6593%2014.6068C18.0749%2013.9904%2018.3572%2013.2942%2018.4883%2012.5625C18.7107%2011.33%2018.5157%2010.0585%2017.9342%208.94919C18.3325%208.34443%2018.6041%207.66519%2018.7325%206.95252C18.8654%206.20608%2018.8478%205.44062%2018.6808%204.70107C18.5138%203.96151%2018.2007%203.26277%2017.76%202.64586Z'%20fill='%23737882'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_6411_906'%3e%3crect%20width='20'%20height='20'%20fill='white'%20transform='translate(0.5)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e){kind=small}
'%3e%3cpath%20d='M20.5%201.34167H12.2167L10.5%204.30001L8.78333%201.34167H0.5L10.5%2018.6583L20.5%201.34167ZM10.5%2011.7333L4.8%201.85834H8.49167L10.5%205.34167L12.5083%201.85834H16.2L10.5%2011.7333Z'%20fill='%23737882'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_6411_908'%3e%3crect%20width='20'%20height='20'%20fill='white'%20transform='translate(0.5)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e){kind=small}