Welcome to Clarity

Hi!

Welcome to Clarity 2023.

[crowd applauds].

I'm so excited to be back here at the Alamo Draft House.

When this theater first announced its opening, I just knew that this had to be where Clarity would be.

And that first event was 2016, right here.

And now fast forward eight years later, we're right back here, and it's exciting.

this theater is in the mission of San Francisco.

And we acknowledge that San Francisco is located on the unceded ancestral homeland of the Ramaytush Ohlone peoples, who are the oriJinal inhabitants of San Francisco, the San Francisco Peninsula.

My names Jina Anne.

I'm a design systems advocate.

I designed my first design system back when I was still calling them style guides, um, instead of design systems.

And I was an intern at a design agency in Memphis called Odin Marketing and Design.

And it was a website for the American Contract Bridge League, like the card game.

it was a, documentation of the brand identity, the CSS guidelines, but I actually built it in Quark.

Does anyone remember Quark?

So we've come a long way since then.

and now throughout about 20 years of my career, I've had the opportunity to design systems at Salesforce, Apple, a few other big companies.

so it's been quite the journey.

design systems and the community around design systems have been my passion, for almost my entire career.

but I started this conference over eight years ago because at the time, there wasn't really as big of a community for people like me, people like us, back then.

So I created the design system Slack, and then this conference, I basically desired a conference for people that were working on similar problems and sharing and learning from each other.

So here we are.

and honestly, I thought it would be like a one and done thing, but after that first event, people were like, when's the next one?

When's the next one?

And so here we are at year eight now.

which is just wild to think.

I am curious, how many of you, this is your first Clarity?

Wow.

Oh my gosh.

And who's been here before?

Okay, it's like pretty mixed.

I'm super, super grateful for you all to be here this week.

It really does mean a lot to me.

some of you might be wondering why we're back in person this year.

and as you notice, things are a little bit different.

a return to form, shall we say.

And to be very candid with you, it's been a tough year.

not just for Clarity, not just for me, but for a lot of people.

A lot of us have been laid off, including some of the speakers on the lineup this year, including me, and a lot of education budgets have been slashed, the rise of virtual events held by a lot of companies that came about since COVID began has really made it hard for indie community events.

And that's just the reality.

And I am so grateful that you are here.

And it makes me so happy.

Sorry, I'm getting a little emotional, but I always do that.

It just makes me so happy to see people in our community come together and connect.

I do ask for kindness and understanding, as the changes we have made, were so that we could even have this event in the first place.

it almost didn't happen, but if it weren't for all of you, people who got tickets, my friends who supported me, generous sponsors.

such as, Knapsack, who has a booth out, which you should go visit.

Luro, Specify, Omlet, and Start.

Thank you to your generous support.

And, of course, the speakers.

Some of which actually donated their honorariums, to the scholarship.

So we were able to extend some scholarship, tickets as well, which I was really excited about.

however, with the changes, one that, one thing that does hold true is that this conference is about the community, it's about people, and that will always be at the heart of this conference.

Clarity is a design systems conference focused on how we work together.

We provide tools and standards to scale across an increasing number of devices, platforms, and products.

But real success comes when people align around a shared vision and language.

Diverse perspectives for design, development, and product unite so more people can be a part of the conversation.

And at Clarity, we elevate our skills through multi faceted inclusion, empathy, technology, creativity, and collaboration.

I love this community, and so with that I have a few guidelines I want to share so you can have the best experience.

First of all, we do have a code of conduct.

If you go to clarityconf.com/code-of-conduct, please read it.

We take it very seriously.

we also strive to have a safe and healthy event for everyone involved.

so while it is a more intimate conference this year, we still want people to be vigilant and safe.

so we do ask that when you're not eating and drinking, put on your mask if you need one, we have some at the desk.

We also have some COVID tests on hand if you'd like to, test, just in case.

and also comfort levels are going to be different for everyone.

So if you want to, give someone a hug, just ask first and make sure that they're comfortable with it.

And of course, wash your hands.

Shouldn't need to be said, but, there you go.

oh, my screen just dropped.

Sorry, I'll get back to my point where I was.

Here we go.

oh, a social tip.

There's a thing called the Pac Man rule.

You might have heard of this before, you might not.

Basically, if you think about Pac Man, it's a circle with a little opening for a mouth.

When you're having group conversations, leave a space open so that someone can join in the conversation.

and also if you're wearing a backpack and you're moving around in groups, just be mindful of that.

I've been hit by backpacks before.

one of the changes this year is that lunch is for purchase, but you, the venue here at the Alamo Draft House is fantastic.

we do encourage you please do that, it's gonna help us out a lot, with the venue, costs, just being real.

the way you can do that is you'll, you'll notice in front of you there's these little cards, you can write your lunch order on there, the menus are under the table.

if you can order earlier, then it means that when lunch starts coming out, there won't be like a backup or wait of getting your order in.

So you can go ahead and order now.

and then during, prior to lunch, there is coffee in the back.

If you need something else, like water or something, you can hit the little call light on your table and, one of the servers will like, quietly come get whatever it is you need.

so, [microphone noise] hello?

Okay.

If you're posting on social media about the event, please use Clarity 2023.

And please do post.

I know socials become very scattered with the demise of Twitter, and all the new apps that have popped up.

But wherever you are, please share so that others can learn about Clarity and come join us next time.

if you need help I'm here, I also have a crew of friends here helping me out.

I don't know if, I can, I can't see because of the light, but I was gonna say they can like wave.

yeah, so we got folks in the back there you can also ask for help.

the Slack channel's event clarity in the design system Slack.

If you're not in there yet, almost everyone in here probably is, so we can invite you.

Videos will be available, it's gonna be a video pass, but as an attendee you'll have access to that pass.

so once those are available, we'll share those with you.

we did have a few schedule changes, due to some unforeseen circumstances.

Some speakers who initially were announced, could not join us.

And I do wish them, health and wellness to them and their families.

so the schedule on the badges are a little out of date, but the times are all still the same.

And if you look at the website, you can always get the latest and greatest information there.

again, as I mentioned, make sure you stop by the booth.

Knapsack is here.

Thank you again for your support.

And, okay.

So I am technically the first speaker today, but first I wanted to introduce our MC.

so Nathan Curtis, fun fact about Nathan, he is the only person besides me who has been to every single Clarity.

So [applause] Super, super stoked to have him.

he has actually emceed before in 2018 in New York.

It was a last minute request because the emcee that we had scheduled had a family emergency.

so it was like maybe a day and a half before the conference he finds out he's emceeing.

and he jumped in and he did a fantastic job.

And so I asked him to do it again this year, but this time I gave him way more notice.

So he's a lot more, prepared and he's excited.

Nathan Co-founded eight Shapes with Dan Brown near Washington, DC in 2006.

He's passionate about information architecture, ux, front end.

he bless you, . He leads and consults with design systems teams to chart a strategic, strategic path and optimize operations.

And he wrote Modular web Design in 2009.

and blogs about design systems regularly and.

he also recently, had a plugin that released called the 8 Shapes Specs Plugin and it lets you automate design specs for like pages and components, so you should check that out.

if there's anything that you need to know about strategy, planning, or operating a design system, There's likely a Medium article written about that by Nathan.

so if you think you're a design system geek, I promise you, Nathan's a bigger geek than you.

and I mean that in the best way.

so without further ado Let's welcome Nathan [applause].

Welcome everybody.

It's good to see you all.

Thanks for coming to Clarity.

So it's Clarity 2023.

My name is Nathan Curtis.

As Jina said, I'm from 8 Shapes a Company.

This is the 8th Clarity.

There's a lot of mysticism around the number eight.

We won't get into that.

But I want to welcome all of you.

I appreciate that Jina already started to probe the audience with questions.

asking who's the first time, who's here for the first time at Clarity and who is here, has been here more than once.

And so I wonder, are there any, is there anybody here that's been there, been to at least four Clarity's?

Wow, okay, look around.

Five clarities, keep your hands up.

Six?

Okay, so now I know how far ahead I am of all of you.

No, I'm kidding.

Okay, I, also want to get a sense, I like to ask questions, I like to understand.

Even though I've made lots of token taxonomies and designed more card components than I'd like to admit, I always enter a new space to try and understand where I'm at.

And I'd like to understand a little bit about the audience.

How many of you would classify yourself first and foremost as a designer or in design, a lot of you, okay.

How many would instead classify themselves as a developer first?

All right, it's good to see a good strong contingent.

With design systems it's typically one or the other.

How about content first?

Love that you're here, at least a couple.

How about accessibility first?

Great.

How about the product first?

Good to see you.

I actually find myself these days in the role as almost a product lead, trying to chart the direction and scope and understand the user's needs and coordinate how we're going to deliver the system internally.

So anybody else want to yell out their discipline if I didn't include you?

I covered all the bases.

Okay, great.

it's great to see you all.

really, when Jina asked me to MC, I was thinking reflectively because, okay, this is the eighth time, and I was actually a speaker at the first Clarity on this stage, and I was thinking to myself, Oh, I'm so excited that we're going back to the Alamo.

It is back to the basics.

And then I remembered, oh my gosh, this screen is so massive.

And I'm not surprised nobody's in the front two rows.

It's like when you come see a movie.

There are going to be some big words, some big pictures.

I think you're all properly situated a little bit further from the screen.

And I think that's okay.

But it also has me reflecting.

On experience, and when you think about a design system, what makes a design system good?

And one of the ways that I think about, and when I initially see a design system, I make my own little judgments and I try to sense where they're at.

Good design systems that I find.

That I engage with.

They've figured out how to make things well, make things at a high level of quality, and release them so that other teams can benefit from them, so that other groups within their organization can make things at scale.

But better design systems actually, not just make those things, but properly communicate things.

And they know how to change.

They know how to measure the impact of change.

And they know how to communicate how things have changed.

And the evidence of those things are as simple as version histories, or, good communications with each release.

But the best design systems, better than all of those, are the ones that actually have achieved a better state.

That they've equipped the people that use their design systems to undergo what I sometimes refer to as generational change.

That if you're going to do and achieve big things, that the people using your design system are already ready to receive those things and rapidly evolve with you.

Those are the best design systems.

That when they say, we have a new logo, or something else.

In one night, you turn on your phone and you see the app and you see the website, everything's changed in unison.

Those are the best systems.

And so it has me thinking about change and how we shepherd people through change.

So let's talk about change.

I wanted to reflect a little bit.

About where we were eight years ago, roughly, it's seven and a half, but eight years ago, and where we are today.

And as a consultant, I have, in the past, I don't do this anymore, but I would frame assessing the health of a design system by looking at a range of different categories using, what ended up being 180 heuristics that I would measure it with.

And I'd coordinate with teams, and we'd self assess, and we'd look for disagreements, and we'd try to identify where the challenges are.

But the big categories give us a good frame to think about design systems.

On the one side, there's categories like the figures we make, and the tools that we embed them in, and the documentation we use to describe them.

It's all the making of the stuff.

And then on the other side, it's how we do these things.

It's the processes we conduct.

It's the people and how we form teams.

It's the strategy and vision of where we want to go.

And so that's going to, I'm going to use that to frame some reflections on where we're at.

So with the features we make, we pretty much all still make UI components.

Catalogs in 2016 had 20 to 50, and yet, these days, we're making maybe more components, but we're starting to see a ceiling with that core catalog.

But actually, UI component ecosystems are growing a lot more.

More multiple teams are making those components, such that the number of choices a particular person has to engage with the features of this system is growing.

And today, one of our, we welcome her, Kathleen McMahon, is going to talk about, Design Systems Carnival.

One accessible component, many pretty masks.

And so that's going to be a reflection, I think, on where we're at with components.

Another thing is color as a feature.

We were actually using tokens in 2016.

We had our nice palettes and semantic colors and so on.

And actually those taxonomies haven't changed.

But I do see teams now changing to have, let's support 50 brands.

Let's create infrastructure that has thousands and thousands of component tokens so that each group can make the, presentation of their visual expression unique and distinct for what their needs are.

And so that's really changed too.

And Donny is going to talk to us about mise en mode.

I don't know if my, okay, don't correct me on my French.

I'm not French.

Mise en mode, but he's going to reflect on taxonomies, and color, and tokens, and topics like that.

But, while we've advanced in how we think about components and color, I've got a little gripe.

People know me from writing Medium posts, and by far, the most popular thing I ever wrote was in 2016.

It was that long ago.

And it was called Space in Design Systems, where I wanted to think about, is there any way we can describe space in a Beyond Primitive Way.

So fast forward to 2023, and I'll tell you right now, all the design system teams I work with, nobody's doing that at all yet.

I still see, we've got thousands of color tokens.

We have eight levels of generic spacers, all with proportional sizes.

I gotta admit, I'm not feeling like our, community is really progressing fast enough across all the different ways that we could.

But I will say, we're about, I think we're at a place where we can get over some of the hurdles.

The first hurdle being that tokens for space are embarrassingly primitive.

The second one is most designers don't understand the box model.

And so when you ask them to use auto layout, in my experience over the last year, about half or more don't use it.

they're drawing in tools like Figma, where you can embed all of this, all these ideas, and they're just moving shapes around a canvas.

And I'm embarrassed to say, in the last year, I've seen people in their design system Figma libraries with spacer components that they put in between other components so they can use auto layout.

I'm just thinking, wasn't that not 2016?

That was like 2006 when we were thinking about spacers.

But I think with the tools and the way they're advancing, there is a potential good future there.

And Danny Banks, one of the other speakers who stepped in yesterday to fill a spot, he's going to probably expand on concepts like that in his talk, Love Letter to CSS Variables.

To help us realize some of that potential.

So then we get to tools, and on the code side, 2016, I was really excited when we would deliver design systems of vanilla HTML and CSS.

And then in 2023, most teams I'm working with are delivering React, or Angular, or Svelte, or Vue, or Web Components, and iOS, and Android, all consolidated.

You look at Carbon, they have one design system they built as what I understand as React as a reference, but then available in all the other tools that their vast organization is going to need.

And lots of us are figuring out that path too.

From a design tool perspective, I think we all know what path we're on.

In 2016, we were about two years past the moment when everyone said, I love Sketch.

I want to use Sketch all the time.

And we found, InVision was just on the rise, and you had things like Zeppelin forming a whole toolkit.

Fast forward to 2023, we have one tool that, for many teams, is becoming the predominant hegemonic tool that everyone's using in Figma.

And it's awesome.

I wrote a Figma plugin.

It was a lot of fun.

It empowers us to do so many things.

It's unifying so many different disciplines.

But it's also potentially presenting challenges.

And we have to make sure that tools like that continue to serve our needs.

That they're made for us to achieve and succeed.

Rather than us potentially being made for them.

And Kalig is going to help us reflect on just This is the state of relationship with tools and his talk from walled gardens to open fields, why open standards matter in design is one I'm really looking forward to.

There's also the last thing with tools before I move on to the sort of more strategic stuff and that's AI.

We don't have a talk about AI today, but I'll tell you for us, it's coming.

I've been working in design systems since roughly 2006.

And I've been a pattern hunter.

One of my colleagues, Christian Crumlish, who worked at Yahoo on the Yahoo Pattern Library almost two decades ago, he just described himself as a pattern detective.

What we do is we establish patterns.

Tokens are patterns.

Components follow patterns.

And you know what else follows patterns?

The machines, they can figure this out.

And I don't know, as I reflect about where we were and where we are, that injects a lot of uncertainty around where we may be in the future.

And I think we need to all be thinking about that more.

So let's shift to the other half of those heuristics.

The fourth of the big six categories is process, where in 2016 I was confident running a design system where you would get the design task.

Okay.

It's done.

You get the code task.

Great.

Simple.

Let's deliver a component.

And now in 2023, we have robust processes where we're preceding all of that with scoping and planning and discovery.

With the code, we're actually diversifying our code across many toolkits.

In between is a handoff for teams that are scaling so that they use something like a spec as a source of truth for all of those different recipients.

It's a much more robust process.

And a talk that we're going to hear from Amy Lee is about building design systems, that people love.

And I got a little bit of a preview of the talk, and I'm just really excited because I love talks that will just deliver us a lot of pragmatic tools that we can bring back to make our own processes and experiences better.

In particular, our processes are more robust these days for things like accessibility.

In 2016, that same design to code workflow we had, we got to launch, we were about to launch the whole kit, and then we realized, there's a lot of accessibility issues in here.

So we had to rapidly identify all the components, identify all the accessible criteria we had to meet, and make sure we checked all those different cells in that table.

But today, partly out of, opportunity and well educated people like I assume most of us in here, but also because of people's fear and risk and all the other motivations, accessibility is now a core part of how we deliver products.

And there are steps and people and reviews, all very formal in most of the systems that I work on.

And that's really encouraging.

And I'm really hopeful that two of the speakers here at Clarity, Soren, who is going to be talking about accessibility in Ouija boards, and Homer Gaines, who will be talking about improving accessibility through design systems, can continue to give us tips to help us figure out how to weave.

Considerations of accessibility, not as a review step at the end of the code just before the PR is merged, but instead threaded through everything that we do.

That's my hope.

The fifth out of six categories is about people and teams.

I met Jina really in 2015 because I wrote a thing on Medium and then she wrote a thing on Medium.

It was about things like solitary and central and federated teams.

And, that was what really connected us and today it's not about those individual solitary people who are just trying to sell a design system so you get a maybe one or two dedicated headcount.

Instead, a lot of design systems, particularly at larger companies, 30 people, 60 people, divided into a lot of sub teams, really starting to become a true platform, not just a product, that establishes a way of making for a whole organization.

And, in that, we suddenly become far more, susceptible to what Jina was talking about before around the risk of downsizing and organizational change.

And I've seen design systems grow, flourish, and then end.

I don't like to say design systems die.

But they come to an end because an organization's path it's on changes direction.

And so Michelle from, ZeroHeight is going to be talking about decolonizing your design system.

And that should also be some interesting reflections about how we relate to each other.

Lastly, the, six out of six categories is, I think about strategy.

Part of that is planning.

2016, I was just like, what components are we going to deliver?

One of my blog posts was just like a PDF printout of all the potential components you can use.

Let's decide which ones we're going to deliver.

And yeah, components are a part of your design system, but today it's more complicated than that.

And so the talk by Jules Forrest, which is called, designing a community driven roadmap, it's going to dig into the diverse array of things that you can consider for your design system, not just your feature backlog, but the tools you need to make and the impacts and enabling that your team is going to provide for the rest of the org.

Additionally, strategically, I think we all need to be zooming out.

And I'm really glad that, Jina asked Erica Hall to do the closing keynote tomorrow.

Where her talk is, The Business Model is the Grid.

And I think it's going to force us to remove ourselves from the day to day, even strategic problems that we deal with.

Who's adopting our stuff?

How can we enable our customers?

is our design system a product or a platform?

And we'll ask more fundamental questions like, Is our design system leading to good?

Is our design system part of a business practice that's going in the right direction and is creating good further out in the world?

And so that's going to be something that we really need to continue pressing on.

that's all about where we've been, and it's also about where we are today.

And hopefully you'll be able to walk away from this conference also thinking about where are we going?

What does the future look like?

And one of the things we're going to do at the end of today is have a panel, led by Chris Strahl of Knapsack.

That is essentially going to explore questions of the future of design systems.

And so I love listening to Chris and his podcast.

He's such a great creator.

I was talking to a colleague of his out in the hallway and the way he'll create constructive dissonance between people to help us all understand different points of view and help us learn from each other.

So I think that panel is going to be great.

So where are we?

We're at Clarity.

And I'm excited.

I love Clarity.

Obviously, I've been to every one.

It's a big part of who I am as a design system consultant and participant in the community.

I'm thankful Jina puts on this show.

And I hope that you all can create connections like I have over the last eight years through the two days that we spend together.