# css design system

[Organized SCSS Folder Structures for Design Systems](https://blog.prototypr.io/organized-scss-folder-structures-for-design-systems-ecb861f1522c)

pm init svelte@next sv-skd-urql ; cd $_ ; pnpm i 
pm i -D @urql/svelte graphql
mkdir src/lib
mkdir -p src/lib/patterns src/lib/patterns/components src/lib/patterns/objects src/lib/patterns/templates
mkdir -p src/lib/graphql src/lib/graphql/queries
touch src/lib/types.ts
touch src/lib/styles.css
touch src/routes/__layout.svelte
code .

## links

Design system blog posts

* [Building your own Modern CSS Design System](https://dev.to/rockykev/building-your-own-modern-css-design-system-32kd)
* [Building a “utility-first” design system (part 1)](https://uxdesign.cc/building-utility-first-design-systems-part-1-52ce020630b)
* [designs systems](https://www.designsystems.com/)
* [design system gallery](https://designsystemsrepo.com/design-systems-recent/)
* [Orbit](https://orbit.kiwi/components/breadcrumbs/)

## tools

### colors

* [Color palette generator to generate CSS variables](https://palettolithic.com/)

### typography / typscaling

* [baseline typesale generator](https://baseline.is/tools/type-scale-generator/)
* [typescale generator](https://type-scale.com/)
* [modulear scale](https://www.modularscale.com/)
* [Vertical Rhythm Reset](https://jhildenbiddle.github.io/vertical-rhythm-reset/#:~:text=Vertical%20Rhythm%20Reset%20simplifies%20grid,needed%20for%20proper%20grid%20alignment.)

### spacing

* [Create your design system, part 4: Spacing](https://medium.com/codyhouse/create-your-design-system-part-4-spacing-895c9213e2b9)

## box shadow

* [box shadow generator](https://getcssscan.com/css-box-shadow-examples)

## example

:root {
 --baseFontSize: 1rem;
 --baseNavSize: 0.64rem;
 --smallFontSize: 0.8rem;
 --smallestFontSie: 0.512rem;
}

## margins
Just use margin bottom will save your headaches.

## elements

* [Card](https://youtu.be/LwYZTKxj-do?t=1411)

## organize colors

Start with your brand colors, work out your layout colors, then your denotive colors, from their your interactive colors in shades.

* **Brand Colors**
* **Layout Colors**: `background`, `foreground`, `title text`, `subtitle text`, `body text`
* See if primary brand color works on both a light and dark background
* **Low Contrast Neutral Colors**
* On the light side it's going to be a very light gray `sidebars`, `form fields`
* **Higher Contrast Background Color**
* Establishing your whites and your blacks. Note white / black don't have to be absolute.
* **lower Contrast Colors** as reduced version of your absolute blank / white.
* Color that is low contrast but useful on the light background and high contrast but useful on the dark background. `sub titles`, `body text`
* **Denotive**: the colors actually mean something.
* **Error state**: a state of something having gone wrong.
* **Success messaging**: if brand is green then can use it as your success color.
* Use the same denotive colors for both light and dark backgrounds.
* **Disabled state**: Essnetially low opacity: different for light and dark bg.
* Enough contrast that they are readable
* **Interactive Colors** For things that people can touch or click.
* Try to use as few as possible
* Select a color,
* Add a lighter and darker version: `hover sttute`
* Event lighter / darker version: `rollover state`, `pushed in`, `focused`
* Use +1, -1 in naming convention