Marco Guglielminotti's personal design system (travelermarco). Used in: YoshiGuide, YoshiAdmin, Caribù, PawPort.
If you're an AI building something for Marco, read AI_CONTEXT.md before anything else. It contains everything: tokens, typography, components, splash/reveal patterns, rules and anti-patterns.
Quick prompt to use:
"Read the content of AI_CONTEXT.md and use it as the style base for [project description]."
marco-style/
├── AI_CONTEXT.md ★ Full AI briefing — THE MOST IMPORTANT FILE
├── README.md This file
├── css/
│ ├── marco-style.css Full drop-in CSS (tokens + all components)
│ └── tokens.css Design tokens only (for projects that already have CSS)
├── js/
│ └── splash.js Splash screen + page reveal logic
└── snippets/
├── splash.html Splash screen HTML (first element in <body>)
├── nav-web.html Nav for web apps (YoshiGuide style)
├── header-admin.html Header for admin panels (YoshiAdmin style)
└── hero.html Hero section with stagger reveal
cp css/marco-style.css your-project/styles.css
cp js/splash.js your-project/splash.js<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AppName</title>
<meta name="theme-color" content="#7c3aed">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- SPLASH: first element in body -->
<div id="splash" role="presentation" aria-hidden="true">
<div class="splash-logo-wrap">
<img class="splash-logo-ghost" src="icons/icon-512.png" alt="">
<div class="splash-logo-fill">
<img src="icons/icon-512.png" alt="">
</div>
</div>
<span class="splash-brand">AppName</span>
</div>
<!-- NAV / CONTENT -->
<script src="splash.js"></script>
</body>
</html>In styles.css, edit :root:
- Change
--accentand--accent-dkto your theme colors - Update
drop-shadowin.splash-logo-wrapto match your accent - Update the
rgbain the aurora glow.hero::before
In splash.js:
- Change
APP_NAMEto your project name (e.g.'myapp-splash')
| App | Accent | Icon | Notes |
|---|---|---|---|
| YoshiGuide | #a78bfa purple |
PNG lightning bolt | Documentation site |
| YoshiAdmin | #a78bfa purple |
PNG lightning bolt | Supabase admin panel |
| Caribù | #F59E0B amber |
SVG camper van | Mobile PWA, --radius: 16px |
| PawPort | #FF8C42 orange |
PNG paw print | Dog passport PWA, Firebase |
When you make significant style changes in any of your projects:
- Update the files in this repo
- Update
AI_CONTEXT.mdwith new rules/patterns - Commit + push