First 'Internal Friday'
100 Days in a Row
Third Lunation
Second Successful Lunation
First Successful Lunation
Made the journal public

Design System Starter Kit

Build a library of flexible and un-styled components to start or supplement design system projects. Anyone can jump in the file below
229 entries
Started Apr 30, 2020

In addition to the basic components, it would be good to also have the most common combinations. This helps 1) test the how well the basic components work together and 2) provides a good reference for people using the library

Slowly resuming writing and designing the website.

There’s a baseline grid, but aligning to them like you would in print isn’t really feasible. They’re still useful for getting a vertical rhythm though. Make the line-height (24px) a multiple of the baseline (8px), then make the spaces between stuff a multiple of the line-height. (48, 96, etc.)

More date picker improvements

At the moment, the date shortcuts are buttons. You click on a shortcut, then it selects the date(s) and closes the calendar. Thinking these should be tabs instead. You click on a shortcut to select the date(s), but instead of closing the calendar the tab becomes active.



After the first release, this’ll continue being an ongoing project. I see it slowing down, but never actually ending. I like the idea of having a different cover (e.g.) every month. They’d be a fun way to denote when a particular version of the file is from, and they’d be the one part of this project where utility isn’t a concern.

For the first year or so, I’ll use colorways of the “cubes” cover. They’re pretty easy to make:

1. Choose a background color.
2. Make the line-work cubes the background color, but change the blend mode to ‘Multiply’

The hard part’s choosing the background colors. I don’t want them to be arbitrary. They should relate to the project, even if only tenuously.

Because it’s what I prefer, and because it’s what we use at work, this project is, and will ultimately be, a Figma file. That’s a good place to start. I think it would be cool to pull colors from the UI before moving on to more obvious colors, or more esoteric colors.

I think I’ve settled on the first four colors/covers:
1. #00a1ff (Blue), from the selection bound of a regular object/layer
2. #7b61ff (Purple), from the selection bounds of a variant or component
3. #e249af (Pink), from the smart selection overlays
4. #e5e5e5 (Light gray), from the default canvas background

I’m still slowly turning components into variants…

I need to speed things up a bit. I’m presenting at a side project showcase zoom call and, although my presentation’s more about the process (work on it every day for ~30 days; post to FL), it would be good to have something ‘complete’ and shareable

More importantly, the sooner I can get his in front of people that can test it and give me feed back the better

Next steps

- Wrap up the transition to variants
- Make v1 of the color system and styles
- Add auto layout v3 features wherever it makes sense. (Auto layout v3 should be launching this month)
- Writ a ToC and readme
- Throw together a website, which will probably just be loose port of the ToC and readme
- Publish the file to the Community

norton Design System Starter Kit