Single Source of Truth für alle Hammerpreis-Projekte: - tokens.css: CSS Custom Properties (Farben, Spacing, Radien, Schatten, Typo) - base.css: Google Fonts Import (Jost + JetBrains Mono) - Logo-SVGs: Symbol, Vollversion, Favicon, OG-Image Made-with: Cursor
48 lines
1.4 KiB
Markdown
48 lines
1.4 KiB
Markdown
# Hammerpreis Branding
|
|
|
|
Shared Design-Tokens und Logo-Assets für alle Hammerpreis-Projekte.
|
|
|
|
## Einbindung als Git-Submodul
|
|
|
|
```bash
|
|
git submodule add https://git.michael-hermann.de/michaelhermannadmin/branding_hammerpreis.git branding
|
|
```
|
|
|
|
### CSS importieren
|
|
|
|
```css
|
|
@import '../branding/base.css'; /* Font-Import (Jost + JetBrains Mono) */
|
|
@import '../branding/tokens.css'; /* Alle CSS Custom Properties */
|
|
```
|
|
|
|
## Farbpalette
|
|
|
|
| Rolle | Variable | Hex |
|
|
|---|---|---|
|
|
| **Primary** | `--color-primary` | `#071635` |
|
|
| Primary Light | `--color-primary-light` | `#1B2A49` |
|
|
| Primary Dark | `--color-primary-dark` | `#040d20` |
|
|
| **Accent** | `--color-accent` | `#FF6B35` |
|
|
| Accent Light | `--color-accent-light` | `#ff8a5c` |
|
|
| Accent Dark | `--color-accent-dark` | `#e55a24` |
|
|
| **Kunde** | `--color-customer` | `#4DBEEE` |
|
|
| **Handwerker** | `--color-craftsman` | `#6B7FA9` |
|
|
|
|
## Schriftart
|
|
|
|
**Jost** (Google Fonts) -- importiert via `base.css`.
|
|
|
|
## Logo-Assets
|
|
|
|
| Datei | Verwendung |
|
|
|---|---|
|
|
| `logo-symbol.svg` | 3-Hausdach-Symbol, fuer Header und kleine Kontexte |
|
|
| `logo-full.svg` | Vollstaendiges Logo mit Schriftzug (weiss auf dunkel) |
|
|
| `favicon.svg` | 32x32 Favicon |
|
|
| `og-image.svg` | 1200x630 Open-Graph-Bild |
|
|
|
|
## Branding aktualisieren
|
|
|
|
1. Aenderungen hier committen und pushen
|
|
2. In jedem UI-Repo: `git submodule update --remote branding && git add branding && git commit -m "chore: branding update" && git push`
|