Shared design system for Palmshed projects. Framework-agnostic CSS and HTML templates.
| Path | Description |
|---|---|
css/tokens.css |
Design tokens (colors, fonts, spacing) |
css/base.css |
Reset and base styles |
css/layout.css |
Nav, hero, page layout, footer |
css/typography.css |
Headings, code blocks, tables, links |
css/components.css |
Reusable components (cards, buttons, badges, alerts) |
assets/mark.svg |
Organization logo |
templates/ |
HTML starting points for new sites |
docs/ |
Living documentation site |
Copy or submodule the repository into your project, then link the CSS files using relative or server-relative paths:
<link rel="stylesheet" href="/vendor/palmshed-ui/css/tokens.css">
<link rel="stylesheet" href="/vendor/palmshed-ui/css/base.css">
<link rel="stylesheet" href="/vendor/palmshed-ui/css/layout.css">
<link rel="stylesheet" href="/vendor/palmshed-ui/css/typography.css">
<link rel="stylesheet" href="/vendor/palmshed-ui/css/components.css">When working on the design system itself, use relative paths from templates/ or docs/:
<link rel="stylesheet" href="../css/tokens.css">
<link rel="stylesheet" href="../css/base.css">If hosting at a path prefix, adjust the paths accordingly:
<link rel="stylesheet" href="/ui/css/tokens.css">| Token | Value |
|---|---|
--bg |
#080909 |
--surface |
#0e1010 |
--text |
#e1e2e2 |
--muted |
#8f9191 |
--accent |
#91AAA6 |
--border |
rgba(255,255,255,0.04) |
--code-bg |
rgba(255,255,255,0.015) |
MIT