Back to Details

maycrest-web-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Maycrest Web Design

Maycrest网页设计

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.
为Maycrest打造的设计系统与网页设计策略——Maycrest是一家面向印第安纳州中小企业（SMBs）的智能赋能托管情报提供商，拥有三大服务板块：创意服务、AI解决方案和网络安全。

Brand Identity

品牌标识

Positioning

定位

  • "Enterprise intelligence at SMB prices"
  • AI-augmented managed services
  • Indianapolis-rooted, nationally capable
  • Not a generic MSP — a strategic intelligence partner
  • "企业级情报服务，中小企业价位"
  • AI增强型托管服务
  • 扎根印第安纳波利斯，服务覆盖全国
  • 绝非通用MSP（托管服务提供商），而是战略情报合作伙伴

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)
Primary:        #0A0F1C (Deep Navy — 背景色)
Secondary:      #1A1F35 (高层面板色)
Accent:         #00D4AA (Cyber Teal — CTA、高亮色)
Accent Alt:     #7B61FF (Electric Purple — AI/创新主题色)
Warning:        #FF6B35 (Alert Orange — 安全警示色)
Text Primary:   #F0F0F5 (近白色主文本)
Text Secondary: #8A8FA3 (弱化辅助文本)
Surface:        #12172B (卡片、面板底色)
Border:         #2A2F45 (细微分隔线色)

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
  • 标题: Inter或Space Grotesk——简洁、现代、科技感
  • 正文: Inter——易读、专业
  • 代码/数据: JetBrains Mono——增强技术可信度
  • 字号层级: 12, 14, 16, 18, 20, 24, 32, 40, 48, 64

Spacing

间距

  • Base unit: 4px
  • Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96
  • 基础单位: 4px
  • 间距层级: 4, 8, 12, 16, 24, 32, 48, 64, 96

Page Architecture

页面架构

Homepage

首页

  1. Hero — Bold value proposition + animated background
  2. Service Arms — Three-card layout (Creative, AI, Cyber)
  3. Intelligence Dashboard Preview — Interactive demo
  4. Social Proof — Logos, testimonials, case study snippets
  5. CTA — "Schedule Your Intelligence Briefing"
  1. 英雄区——醒目的价值主张 + 动画背景
  2. 服务板块——三卡片布局（创意、AI、网络安全）
  3. 情报仪表板预览——交互式演示
  4. 社交证明——合作品牌标识、客户 testimonial、案例研究片段
  5. CTA——"预约您的情报简报"

Service Pages (x3)

服务页面（共3个）

  • Creative Services
  • AI Solutions
  • Cybersecurity
Each follows: Hero → Problem → Solution → Features → Case Study → CTA
  • 创意服务
  • AI解决方案
  • 网络安全
每个页面遵循：英雄区 → 痛点 → 解决方案 → 功能特性 → 案例研究 → CTA

TIE Platform Page

TIE平台页面

  • Product hero with screenshot/demo
  • Feature grid
  • Pricing tiers
  • Integration showcase
  • "Request Demo" CTA
  • 产品英雄区（含截图/演示）
  • 功能网格
  • 定价层级
  • 集成展示
  • "申请演示" 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
  • 带图标+描述的服务卡片
  • 带动画计数器的数据卡片
  • 带头像+引用的 testimonial卡片
  • 悬停展示详情的功能卡片

CTAs

CTA按钮

  • 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
  • 威胁等级指示器
  • 服务状态仪表板
  • ROI计算器
  • 交互式时间线

Motion Design

动效设计

Principles

原则

  • Purposeful — every animation communicates something
  • Subtle — enhance, don't distract
  • Performance — no jank, 60fps minimum
  • Accessible — respect prefers-reduced-motion
  • 有目的性——每一个动画都传递特定信息
  • 简约——增强体验，而非分散注意力
  • 高性能——无卡顿，最低60fps
  • 无障碍——尊重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)
  • 滚动触发的渐显动画（向上淡入、缩放进入）
  • 进入视口时的数字计数动画
  • 带深度感的悬停状态（Y轴位移 + 阴影）
  • 页面过渡（路由间交叉淡入）
  • 加载状态（骨架屏，而非加载 spinner）

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)
Maycrest的视觉风格必须区别于：
  • 通用MSP网站（头戴耳机的库存照片、蓝色渐变）
  • 千篇一律的IT公司模板
  • 过于复杂的企业软件网站
Maycrest应营造的感觉：
  • 高端SaaS产品（如Linear、Vercel、Stripe）
  • 设计导向的咨询公司（如IDEO、Pentagram）
  • 现代情报平台（如Palantir、CrowdStrike）

DESIGN.md — Authoritative Design System Reference

DESIGN.md——权威设计系统参考

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:
  1. Reference 
    DESIGN.md
    for exact token values (colors, typography, spacing, shadows, motion)
  2. Use the card hierarchy documented there: 
    .observation-window
    → 
    .glass-card
    → 
    .intel-card
    → 
    .story-card
    → 
    .cta-card
  3. Follow the Agent Prompt Guide (Section 9) for component generation patterns
  4. 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.
Maycrest数字网站的仓库根目录（
website/DESIGN.md
）中有一份全面的
DESIGN.md
文件，采用Google Stitch 9-section格式编纂了整个设计系统。该文件是AI编码Agent生成UI时的唯一可信来源。
构建或修改Maycrest网页时：
  1. 参考
    DESIGN.md
    获取精确的令牌值（颜色、排版、间距、阴影、动效）
  2. 使用文档中规定的卡片层级：
    .observation-window
    → 
    .glass-card
    → 
    .intel-card
    → 
    .story-card
    → 
    .cta-card
  3. 遵循第9节的Agent Prompt Guide（Agent提示指南）进行组件生成
  4. 本技能文件中的设计令牌为战略层面内容——DESIGN.md包含精确的实现值
DESIGN.md中未在本技能文件提及的关键细节：
  • 使用
    clamp()
    实现的流体排版层级（而非固定px值）
  • 玻璃态模糊层级（24px → 16px → 12px）
  • 各服务板块专属的强调色发光阴影系统
  • 区块间距类（
    .section-hero
    , 
    .section-feature
    , 
    .section-proof
    , 
    .section-cta
    ）
  • 含精确缓动曲线的Framer Motion模式
maycrest-create:design-system-architect
技能负责DESIGN.md的创建与审核。

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
  • 深色模式为默认体验
  • 禁止使用库存照片——使用插画、图标、数据可视化
  • 每个页面必须有清晰的核心CTA
  • 移动端优先的响应式设计
  • 性能预算：LCP < 3秒，FID < 100毫秒
  • 无障碍：最低符合WCAG AA标准
  • 所有动画尊重prefers-reduced-motion设置
  • 构建组件时务必参考
    DESIGN.md
    获取精确实现值