maycrest-web-design

Original：🇺🇸 English

Translated

Use when designing the Maycrest website or TIE Platform — building pages, components, or dashboards, choosing fonts and colors, applying the brand aesthetic, or seeking web design inspiration.

1installs

Sourcecoreymaypray/sloth-skill-tree

Added on2026-08-16

NPX Install

npx skill4agent add coreymaypray/sloth-skill-tree maycrest-web-design

SKILL.md Content

View Translation Comparison →

Maycrest Web Design

Overview

Design system and web design strategy for Maycrest — an Agentic-Enabled Managed Intelligence Provider serving SMBs in Indianapolis. Three service arms: Creative Services, AI Solutions, and Cybersecurity.

Brand Identity

Positioning

"Enterprise intelligence at SMB prices"
AI-augmented managed services
Indianapolis-rooted, nationally capable
Not a generic MSP — a strategic intelligence partner

Visual Tone

Premium but approachable — not corporate stiff, not startup casual
Dark-mode forward — deep backgrounds with luminous accents
Data-informed aesthetic — subtle grid patterns, node networks, clean data visualization
Motion with purpose — animations that communicate, not just decorate

Design Tokens

Colors

Primary:        #0A0F1C (Deep Navy — backgrounds)
Secondary:      #1A1F35 (Elevated surfaces)
Accent:         #00D4AA (Cyber Teal — CTAs, highlights)
Accent Alt:     #7B61FF (Electric Purple — AI/innovation)
Warning:        #FF6B35 (Alert Orange — security)
Text Primary:   #F0F0F5 (Near white)
Text Secondary: #8A8FA3 (Muted)
Surface:        #12172B (Cards, panels)
Border:         #2A2F45 (Subtle dividers)

Typography

Headlines: Inter or Space Grotesk — clean, modern, technical
Body: Inter — readable, professional
Code/Data: JetBrains Mono — technical credibility
Scale: 12, 14, 16, 18, 20, 24, 32, 40, 48, 64

Spacing

Base unit: 4px
Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96

Page Architecture

Homepage

Hero — Bold value proposition + animated background
Service Arms — Three-card layout (Creative, AI, Cyber)
Intelligence Dashboard Preview — Interactive demo
Social Proof — Logos, testimonials, case study snippets
CTA — "Schedule Your Intelligence Briefing"

Service Pages (x3)

Creative Services
AI Solutions
Cybersecurity

Each follows: Hero → Problem → Solution → Features → Case Study → CTA

TIE Platform Page

Product hero with screenshot/demo
Feature grid
Pricing tiers
Integration showcase
"Request Demo" CTA

Component Library

Navigation

Sticky header with glass morphism
Service arm mega menu
Mobile: slide-out drawer

Hero Sections

Full-width with particle/node animation
Split layout (text left, visual right)
Centered headline with gradient text

Cards

Service cards with icon + description
Stat cards with animated counters
Testimonial cards with avatar + quote
Feature cards with hover reveal

CTAs

Primary button: Accent fill + subtle glow
Secondary button: Ghost/outline
Floating action: "Schedule Briefing" persistent

Data Visualization

Threat level indicators
Service status dashboards
ROI calculators
Interactive timelines

Motion Design

Principles

Purposeful — every animation communicates something
Subtle — enhance, don't distract
Performance — no jank, 60fps minimum
Accessible — respect prefers-reduced-motion

Patterns

Scroll-triggered reveals (fade up, scale in)
Number counters on viewport entry
Hover states with depth (translateY + shadow)
Page transitions (cross-fade between routes)
Loading states (skeleton screens, not spinners)

Competitive Positioning

Maycrest should look NOTHING like:

Generic MSP sites (stock photos of headsets, blue gradients)
Cookie-cutter IT company templates
Overly complex enterprise software sites

Maycrest should feel like:

A premium SaaS product (Linear, Vercel, Stripe)
A design-forward consultancy (IDEO, Pentagram)
A modern intelligence platform (Palantir, CrowdStrike)

DESIGN.md — Authoritative Design System Reference

The Maycrest Digital website has a comprehensive

DESIGN.md

file at the repo root (

website/DESIGN.md

) that codifies the entire design system in the Google Stitch 9-section format. This file is the single source of truth for AI coding agents when generating UI.

When building or modifying Maycrest web pages:

Reference
```
DESIGN.md
```
for exact token values (colors, typography, spacing, shadows, motion)

Use the card hierarchy documented there:

.observation-window

→

.glass-card

→

.intel-card

→

.story-card

→

.cta-card

Follow the Agent Prompt Guide (Section 9) for component generation patterns
The design tokens in this skill file are strategic — DESIGN.md has the precise implementation values

Key DESIGN.md specifics not in this skill:

Fluid typography scale using
```
clamp()
```
(not fixed px values)
Glass morphism blur hierarchy (24px → 16px → 12px)
Accent glow shadow system per service arm

Section spacing classes (

.section-hero

,

.section-feature

,

.section-proof

,

.section-cta

)

Framer Motion patterns with exact easing curves

The

maycrest-create:design-system-architect

skill owns DESIGN.md creation and auditing.

Rules

Dark mode is the primary experience
No stock photography — use illustrations, icons, data viz
Every page must have a clear single CTA
Mobile-first responsive design
Performance budget: < 3s LCP, < 100ms FID
Accessibility: WCAG AA minimum
All animations respect prefers-reduced-motion
Always reference
```
DESIGN.md
```
for exact implementation values when building components