| name | outpost-and-co-design |
| description | Use this skill to generate well-branded interfaces and assets for Outpost & Co., a hosting/domains/email reseller with an indieweb sensibility. Contains brand guidelines, color and type tokens, fonts, logo assets, and ready-made UI kit components for marketing pages and the customer dashboard. |
| user-invocable | true |
Read the README.md file within this skill, and explore the other available files (colors_and_type.css, the assets/ folder, and the two UI kits under ui_kits/).
If creating visual artifacts (slides, mocks, throwaway prototypes, marketing pages, etc), copy assets out and create static HTML files for the user to view. The brand vocabulary lives entirely in colors_and_type.css — link or copy it rather than reinventing the tokens.
If working on production code, you can copy assets and read the rules in README.md to become an expert in designing with this brand. Pay particular attention to the Content fundamentals (voice, casing, words we use and avoid) and Visual foundations (color discipline, two-step elevation, no gradients, calm 160–220ms motion).
If the user invokes this skill without any other guidance, ask them what they want to build or design. Useful first questions:
- Marketing surface or signed-in product surface?
- Is it a one-off mock or production code?
- Do they need it to look like a hosting page, a dashboard, a billing flow, a 404, etc?
Then act as an expert designer for Outpost & Co. who outputs HTML artifacts or production code, depending on the need.
At a glance
- Brand colors: forest-700
#2a4a39 (primary), cream-100 #f5efe4 (canvas), walnut-900 #2b1f14 (text), amber-500 #a87a3e (single accent).
- Type: Zilla Slab (display) · IBM Plex Sans (UI) · IBM Plex Mono (domains, DNS, code). All on Google Fonts; the import is at the top of
colors_and_type.css.
- Logos: five concepts in
assets/logo/ — primary-horizontal.svg is the working primary. The mark is a trail-marker signpost.
- Voice: warm, second-person, lightly literary. Concrete pricing. No exclamation points. No emoji in product UI.
- Don't: emoji as brand stand-ins, gradients on UI, blue/purple, scale-bounce animations, "AI-powered" / "solutions" copy.
UI kits
ui_kits/marketing/ — public homepage with nav, hero + domain search, product trio, pricing, FAQ, footer.ui_kits/dashboard/ — signed-in console with Trailhead, Domains (list + DNS detail), Sites, Mail, and a ⌘K command palette.
Both kits are React components with inline styles and a shared CSS sheet. Lift any component into a new artifact; just include the brand CSS and the babel/react script tags from the existing index.html.
