界面已本地化;技能介绍与说明文档按所选语言由 AI 自动翻译,代码、命令、路径和专业术语保留原文,以原作者文档为准。
探索技能
效率与协作 · SKILL.md

corporate

corporate

【效率与协作】Professional blue-navy palette conveying trust, formality, and tradition

独立 GitHub 快照 · 自动分类 · 以原作者文档为准

技能说明

GitHub

name: corporate description: Professional blue-navy palette conveying trust, formality, and tradition

Corporate

Mission

Project trust, stability, and professionalism through a conservative blue-navy palette and formal, structured layouts.

Brand

🎨 Colors

  • #0A1628 — Primary dark (navy background)
  • #1E3A5F — Secondary dark (card backgrounds)
  • #0066CC — Accent (corporate blue)
  • #FFFFFF — Primary text on dark / background on light
  • #94A3B8 — Secondary text (slate)
  • #F1F5F9 — Light section background (alternating)

🔤 Typography

  • Heading font: Libre Franklin (Google Fonts)
  • Body font: Source Sans 3 (Google Fonts)
  • Type scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.125rem / xl 1.375rem / 2xl 1.75rem / 3xl 2.25rem

📐 Spacing

  • Grid: 12-column, 2rem gap, max-width 1140px
  • Section padding: 5rem top/bottom (alternating white/navy backgrounds)
  • Card gap: 2rem

🧩 Components

  • Buttons: 4px border-radius (nearly square), solid navy fill, white text, subtle darken on hover
  • Cards: White with 1px #E2E8F0 border, 8px radius, subtle shadow, icon-top layout
  • Nav: Full-width navy bar, centered or left-aligned logo, dropdown menus for sub-sections
  • Hero: Full-width navy background, centered heading, subhead, two CTAs (primary + outline), stock-photo or abstract background
  • Footer: Dark navy with 4-column link grid, copyright line, social icons, "trust bar" with certifications

♿ Accessibility

  • Minimum 4.5:1 contrast for all text (navy on white = 13:1, white on navy = 13:1)
  • Focus rings: 2px solid #0066CC outline
  • Reduced motion: remove hover lifts, keep opacity transitions
  • Minimum font size 0.875rem for body

✍️ Writing Tone

  • Formal and professional — use complete sentences, avoid contractions
  • Third-person or institutional "we"; avoid first-person singular
  • Labels: title case for navigation, sentence case for body CTAs

Do / Don't

✅ Do

  • Alternate between white and light-gray section backgrounds for rhythm
  • Use data-heavy layouts: stat blocks, comparison tables, bulleted feature lists
  • Include trust signals: client logos, certifications, case-study links
  • Maintain conservative border-radius (4-8px max)
  • Structure content with clear headings, subheadings, and supporting body

❌ Don't

  • Use bright or neon accent colors — stay in the blue-navy range
  • Add playful animations — hover lifts are the ceiling
  • Use unconventional layouts — centered or two-column only
  • Feature informal photography — use corporate stock or product shots
  • Mix in trendy design elements (glassmorphism, neumorphism, brutalism)

Quality Gates

  • All text passes 4.5:1 contrast (target 7:1 for body text)
  • Focus states visible on every interactive element
  • Page respects prefers-reduced-motion
  • No font smaller than 0.875rem
  • Navigation works with keyboard (tab order logical)
  • Trust signals present above the fold (client logos or certification)
我的收藏