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
norton

Snapshot of (most of) the project.

Work was scattered today. More converting stuff to variants.

Slow day today. Revised test fields, textareas, dropdowns, and 'special fields' with leading text/icons

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.

Covers

(Draft)

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

00:00
norton
norton Design System Starter Kit