skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-cohere

Apply Cohere's design system tokens and component styles when generating UI interfaces.

Updated Feb 23, 2026
Search Tags:#typography#frontend#design system#color palette#design tokens#ui design#cohere
One-click install
npx skills add https://github.com/deepparser/skills --skill design-cohere-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-cohere
Source: https://github.com/deepparser/skills/tree/main/design-cohere
Command: npx skills add https://github.com/deepparser/skills --skill design-cohere-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Cohere's enterprise visual identity requires exact design tokens — colors, typography, spacing, and the signature 22px card radius — which are tedious to reverse-engineer manually. ## Core Features & Use Cases - Complete Design Token Catalog: Provides exact color values (Cohere Black #000000, Interaction Blue #1863dc, Muted Slate #93939f), typography scales (CohereText display serif, Unica77 body sans, CohereMono labels), and spacing/radius scales. - Component Specifications: Defines ghost buttons, 22px-radius cards, purple hero bands, uppercase code tags, and shadow-free elevation rules with do's and don'ts. - Light and Dark Previews: Bundled HTML preview files show the full token catalog rendered in both themes for visual verification. - Use Case: When asked to build a landing page styled like Cohere, the skill supplies every hex value, font size, letter-spacing, and border-radius needed to produce a faithful implementation. ## Quick Start Use the design-cohere skill to build a hero section and feature card grid styled like Cohere's website.

Frequently Asked Questions about design-cohere

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I style a UI to look like Cohere's website?▼

Use Cohere's design tokens: white background, Cohere Black (#000000) text, cool gray borders (#d9d9dd), and the signature 22px card border-radius. Headlines use the CohereText serif at 60-72px with negative letter-spacing, while body text uses Unica77 at weight 400.

What fonts does the Cohere design system use?▼

Cohere uses three typefaces: CohereText (display serif for headlines), Unica77 (geometric sans for body and UI), and CohereMono (uppercase technical labels). The preview files substitute Space Grotesk, Inter, and Space Mono as fallbacks.

Does the Cohere design system support dark mode?▼

Yes, the skill includes a dark theme preview (preview-dark.html) using Deep Dark (#17171c) as the page background with adjusted card surfaces and borders. The same token structure and 22px radius apply in both themes.

What border radius should Cohere-style cards use?▼

Primary cards and containers use the signature 22px radius, which is Cohere's visual signature. Dialogs use 8px, featured containers use 16-20px, and buttons or tags use the pill radius (9999px).

When should I not use purple in a Cohere-style interface?▼

Purple is reserved exclusively for full-width hero bands and dramatic section breaks, never for card backgrounds or small accents. The interface stays black-and-white with cool grays, and Interaction Blue (#1863dc) appears only on hover and focus states.

Related Skills

Explore More Design & Creative Skills→
xpert-aixpert-ai
8

ideate

Generate three distinct on-brand UI design variants from confirmed briefs.

Official
Intermediate
RepairYourTechRepairYourTech
6

frontend-design

Designs frontend interfaces with WebGL, custom shaders, and React integration.

Community
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced