--- name: obney-design description: Use this skill to generate well-branded interfaces and assets for Obney.ai, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping. user-invocable: true --- Read the `README.md` file within this skill, and explore the other available files. Key files: - `colors_and_type.css` — every design token as a CSS custom property. Drop this into the `` of any HTML artifact and reference `var(--midnight-800)`, `var(--color-ocean)`, `var(--font-sans)`, etc. - `assets/logos/` — primary lockup (`logo-midnight-and-ocean.svg`), light/dark single-color variants, and accent tertiary logos. **Copy these out**; don't draw your own logo. - `assets/Obney.ai-Brand-Guidelines.pdf` — original brand guidelines for deeper reference. - `preview/*.html` — small specimen cards that demonstrate each token in context (type, colors, spacing, components, brand). Read one when you need an example. - `ui_kits/marketing/App.jsx` — composable React components (Nav, Hero, Work, Values, Method, CTA, Footer, Button, Label, Eyebrow, CaseStudy, Logo). Lift these directly for marketing surfaces. **Voice & tone:** - Approachable expert. Tasteful, refined, with personality. - No emoji. No exclamation marks. - First-person plural ("we"), sentence-case headlines, mono-caps eyebrows. - Uplifting rather than critical — focus on what *can* be achieved. **Visual non-negotiables:** - Pair Midnight (`#142C37`) + Ocean (`#68E4E9`) as the primary color story. - Pill-radius buttons. 1 px crisp borders. Quiet shadows. - No bluish-purple gradients. No emoji icons. No colored-left-border cards. - Cal Sans is display-only (≥48 px). Figtree for everything else. IBM Plex Mono for labels and code. **When invoked:** If creating visual artifacts (slides, mocks, throwaway prototypes, etc.), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand. If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts *or* production code, depending on the need.