mirror of
https://github.com/awizemann/scarf.git
synced 2026-05-10 10:36:35 +00:00
53 lines
2.3 KiB
Markdown
53 lines
2.3 KiB
Markdown
|
# Scarf Design System — static site
|
||
|
|
|
||
|
|
A self-contained, offline-friendly site that browses every artifact in the
|
||
|
|
Scarf design system. Open `index.html` directly in any browser — no server,
|
||
|
|
no build step.
|
||
|
|
|
||
|
|
## What's here
|
||
|
|
|
||
|
|
```
|
||
|
|
static-site/
|
||
|
|
├── index.html ← landing page, links into everything
|
||
|
|
├── colors_and_type.css ← shared design tokens (referenced everywhere)
|
||
|
|
│
|
||
|
|
├── ui-kit/ ← interactive macOS UI kit
|
||
|
|
│ ├── index.html ← click-thru of every screen in the app
|
||
|
|
│ └── *.jsx ← React components (Sidebar, Chat, Dashboard…)
|
||
|
|
│
|
||
|
|
├── tokens/ ← design-system cards
|
||
|
|
│ ├── _preview.css ← shared card styling
|
||
|
|
│ ├── colors-*.html ← brand / neutrals / semantic / tool-kinds
|
||
|
|
│ ├── type-*.html ← display / body / mono
|
||
|
|
│ ├── spacing-*.html ← scale / radii / shadows
|
||
|
|
│ ├── components-*.html ← buttons / forms / sidebar / cards / chat / composer / tool-call
|
||
|
|
│ ├── iconography.html
|
||
|
|
│ └── brand-mark.html
|
||
|
|
│
|
||
|
|
└── assets/ ← icons, brand artwork
|
||
|
|
```
|
||
|
|
|
||
|
|
## How to use it
|
||
|
|
|
||
|
|
- **Browse offline**: double-click `index.html`. Everything renders locally;
|
||
|
|
the only network dependency is Google Fonts (Inter + JetBrains Mono).
|
||
|
|
- **Host as a site**: drop the whole folder onto any static host (Netlify,
|
||
|
|
GitHub Pages, S3, your own nginx). Nothing needs building.
|
||
|
|
- **Embed in a doc**: link individual cards directly, e.g.
|
||
|
|
`static-site/tokens/colors-brand.html`.
|
||
|
|
- **Show the macOS app**: `static-site/ui-kit/index.html` runs the full
|
||
|
|
React-based interactive kit (single self-contained file — works from
|
||
|
|
`file://`, no server needed). The traffic-light corner makes it look like
|
||
|
|
the real app. Source components live alongside as `*.jsx` for editing —
|
||
|
|
re-bundle into `index.html` when you change them.
|
||
|
|
|
||
|
|
## Notes
|
||
|
|
|
||
|
|
- The kit's `index.html` is a self-contained bundle — React, Babel, Lucide
|
||
|
|
and every component are inlined, so it works from `file://` with no
|
||
|
|
network. The original split-file source is preserved as
|
||
|
|
`ui-kit/index.source.html` next to the `.jsx` files for editing.
|
||
|
|
- The font import in `colors_and_type.css` (`fonts.googleapis.com`) is the
|
||
|
|
only other network call. Replace with locally-served WOFF2 if you need
|
||
|
|
airgapped use.
|