skills.rest
coreymaypray
coreymayprayCOMMUNITY
Explore all skills by this author →
GitHub

maycrest-web-design

Design a dark-mode web design system with tokens and component patterns.

1|Updated Mar 13, 2026
Search Tags:#typography#ui-ux#design-system#dark-mode#web-design#color-palette#motion-design
One-click install
npx skills add https://github.com/coreymaypray/sloth-skill-tree --skill maycrest-web-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: maycrest-web-design
Source: https://github.com/coreymaypray/sloth-skill-tree/tree/main/plugins/maycrest-automate/skills/maycrest-web-design
Command: npx skills add https://github.com/coreymaypray/sloth-skill-tree --skill maycrest-web-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design system and web design strategy for Maycrest — an Agentic-Enabled Managed Intelligence Provider serving SMBs in Indianapolis. It defines a cohesive design system, brand identity guidelines, and a blueprint for web properties across the three service arms (Creative Services, AI Solutions, Cybersecurity), plus considerations for the TIE Platform. The guide ensures consistency, accessibility, and performance across pages, dashboards, and marketing assets.

Core Features & Use Cases

  • Brand identity and positioning guidelines to ensure a premium, dark-mode-forward aesthetic across all channels.
  • Design tokens, typography, color, spacing, and motion guidelines to enable a consistent UI across pages, dashboards, and marketing assets.
  • Page architecture and component library blueprint for homepage, three service arms, and TIE Platform, with accessibility and performance criteria.

Quick Start

Generate a cohesive Maycrest web design strategy and design system ready for implementation on the homepage and service pages.

Frequently Asked Questions about maycrest-web-design

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

FAQPage Schema
How do I create a dark-mode web design system for a multi-service brand?▼

Design tokens for a dark-mode UI define reusable color, typography, and spacing variables that ensure accessibility and consistency across homepage, dashboards, and marketing materials for a multi-service brand.

How do I build a design system blueprint that a front-end team can implement?▼

An implementable design system blueprint specifies design tokens, component patterns, and motion guidelines, providing a detailed page architecture and asset map that a front-end team can directly code.

What design guidelines are needed for dashboards and marketing materials?▼

Dashboards and marketing materials require unified color palettes, typography scales, spacing rules, and motion guidelines to maintain premium brand identity and accessibility across all digital properties.

Can I apply a single UI-UX strategy across both a homepage and a platform dashboard?▼

Applying a single UI-UX strategy across a homepage and platform dashboard involves establishing shared component patterns and design tokens that scale from marketing pages to complex data interfaces.

What is the best way to structure component patterns for a cybersecurity and AI services website?▼

Structuring component patterns for cybersecurity and AI services involves creating a unified page architecture and design system that addresses distinct service arm needs while maintaining a consistent dark-mode aesthetic.

Related Skills

Explore More Design & Creative Skills→
EstomEstom

brand-guidelines

Apply Anthropic brand colors, typography, and layout to documents and assets.

Community
Advanced
g4rcezg4rcez
48

react-typescript-frontend

Guide React + TypeScript component implementation with consistent architecture and typing conventions.

Community
Advanced
Dzakiamriz22Dzakiamriz22
1

color-system

Define semantic color tokens in OKLCH with WCAG 2.1 AA contrast.

Community
Advanced
CutTheChexxCutTheChexx

brand-builder

Create cohesive brand identities and scalable design systems for web applications.

Community
Advanced