{
"schemaVersion": "1.0",
"item": {
"slug": "terminal-ui-website-design",
"name": "Terminal UI Website Design",
"source": "tencent",
"type": "skill",
"category": "开发工具",
"sourceUrl": "https://clawhub.ai/chyinan/terminal-ui-website-design",
"canonicalUrl": "https://clawhub.ai/chyinan/terminal-ui-website-design",
"targetPlatform": "OpenClaw"
},
"install": {
"downloadMode": "redirect",
"downloadUrl": "/downloads/terminal-ui-website-design",
"sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=terminal-ui-website-design",
"sourcePlatform": "tencent",
"targetPlatform": "OpenClaw",
"installMethod": "Manual import",
"extraction": "Extract archive",
"prerequisites": [
"OpenClaw"
],
"packageFormat": "ZIP package",
"includedAssets": [
"SKILL.md",
"references/complete-css-variables.css",
"references/component-templates.html",
"references/design-tokens.json"
],
"primaryDoc": "SKILL.md",
"quickSetup": [
"Download the package from Yavira.",
"Extract the archive and review SKILL.md first.",
"Import or place the package into your OpenClaw setup."
],
"agentAssist": {
"summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
"steps": [
"Download the package from Yavira.",
"Extract it into a folder your agent can access.",
"Paste one of the prompts below and point your agent at the extracted folder."
],
"prompts": [
{
"label": "New install",
"body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
},
{
"label": "Upgrade existing",
"body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
}
]
},
"sourceHealth": {
"source": "tencent",
"status": "healthy",
"reason": "direct_download_ok",
"recommendedAction": "download",
"checkedAt": "2026-05-07T17:22:31.273Z",
"expiresAt": "2026-05-14T17:22:31.273Z",
"httpStatus": 200,
"finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
"contentType": "application/zip",
"probeMethod": "head",
"details": {
"probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
"contentDisposition": "attachment; filename=\"afrexai-annual-report-1.0.0.zip\"",
"redirectLocation": null,
"bodySnippet": null
},
"scope": "source",
"summary": "Source download looks usable.",
"detail": "Yavira can redirect you to the upstream package for this source.",
"primaryActionLabel": "Download for OpenClaw",
"primaryActionHref": "/downloads/terminal-ui-website-design"
},
"validation": {
"installChecklist": [
"Use the Yavira download entry.",
"Review SKILL.md after the package is downloaded.",
"Confirm the extracted package contains the expected setup assets."
],
"postInstallChecks": [
"Confirm the extracted package includes the expected docs or setup files.",
"Validate the skill or prompts are available in your target agent workspace.",
"Capture any manual follow-up steps the agent could not complete."
]
},
"downloadPageUrl": "https://openagent3.xyz/downloads/terminal-ui-website-design",
"agentPageUrl": "https://openagent3.xyz/skills/terminal-ui-website-design/agent",
"manifestUrl": "https://openagent3.xyz/skills/terminal-ui-website-design/agent.json",
"briefUrl": "https://openagent3.xyz/skills/terminal-ui-website-design/agent.md"
},
"agentAssist": {
"summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
"steps": [
"Download the package from Yavira.",
"Extract it into a folder your agent can access.",
"Paste one of the prompts below and point your agent at the extracted folder."
],
"prompts": [
{
"label": "New install",
"body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
},
{
"label": "Upgrade existing",
"body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
}
]
},
"documentation": {
"source": "clawhub",
"primaryDoc": "SKILL.md",
"sections": [
{
"title": "Terminal UI Design System",
"body": "A comprehensive design system for creating terminal-inspired user interfaces with macOS-style window decorations, monospace typography, and a warm, developer-friendly color palette. This design system is optimized for developer tools, code marketplaces, technical documentation, and any interface that benefits from a command-line aesthetic."
},
{
"title": "Design Philosophy",
"body": "Core Principles:\n\nTerminal Aesthetic: Mimics macOS terminal windows with colored dots, monospace fonts, and command-line syntax\nDeveloper-First: Uses syntax highlighting colors, code-like structures, and terminal metaphors\nWarm & Approachable: Warm terracotta primary color (#cc7a60) creates a friendly, non-intimidating feel\nHigh Contrast: Clear visual hierarchy with distinct text colors and backgrounds\nFunctional Beauty: Every design element serves a purpose while maintaining visual appeal"
},
{
"title": "Primary Palette",
"body": "Main Brand Color:\n\n--primary: #cc7a60 - Warm terracotta/orange-brown, used for primary actions, accents, and highlights\n--primary-foreground: #fff - White text on primary backgrounds\n--primary-dark: #b56850 - Darker shade for hover states\n--primary-light: #d8907a - Lighter shade for subtle accents\n--ring: #cc7a60 - Focus ring color (same as primary)\n\nWarm Accent:\n\n--warm-red: #c85a3f - Used for code block borders and warm accents"
},
{
"title": "Semantic Colors",
"body": "Backgrounds:\n\n--background: #fff - Pure white for main backgrounds\n--bg-main: #f8f8f8 - Light gray for page background (with subtle grid pattern)\n--bg-card: #fff - White for card components\n--bg-code: #fafafa - Very light gray for code blocks and window headers\n--secondary: #f9fafb - Light gray for secondary backgrounds\n--muted: #f3f4f6 - Muted gray for subtle backgrounds\n\nText Colors:\n\n--foreground: #111827 - Near-black for primary text (excellent readability)\n--text-primary: #111827 - Primary text color\n--text-secondary: #666666 - Medium gray for secondary text\n--text-muted: #5b6370 - Muted gray for less important text\n--muted-foreground: #5b6370 - Foreground on muted backgrounds\n\nBorders:\n\n--border: #8b929e - Medium gray for main borders\n--border-light: #e5e7eb - Light gray for subtle dividers\n--input: #8b929e - Input border color\n\nStatus Colors:\n\n--success: #22c55e - Green for success states\n--warning: #f59e0b - Amber for warnings\n--danger: #ef4444 - Red for errors/destructive actions\n--accent: #f59e0b - Amber accent color"
},
{
"title": "Syntax Highlighting Colors",
"body": "Code Syntax:\n\n--syntax-keyword: #cc7a60 - Primary color for keywords (const, export, etc.)\n--syntax-string: #22c55e - Green for strings\n--syntax-number: #cc7a60 - Primary color for numbers\n--syntax-comment: #6a9955 - Muted green for comments\n--syntax-function: #dcdcaa - Light yellow for function names\n\nCommand Prefix:\n\nCommand prefix ($) uses fluorescent green: #39ff14 - Creates terminal-like appearance\n\nCode Elements:\n\n--text-comment: #6a9955 - Comment text color"
},
{
"title": "macOS Window Dots",
"body": "Terminal Window Controls:\n\n--dot-red: #ff5f57 - Close button (macOS red)\n--dot-yellow: #febc2e - Minimize button (macOS yellow)\n--dot-green: #28c840 - Maximize button (macOS green)"
},
{
"title": "Color Usage Guidelines",
"body": "Primary Color (#cc7a60) Usage:\n\nCommand keywords in navigation\nPrompt symbols (>)\nActive states and highlights\nFocus rings\nHover borders\nPrimary buttons when active\nChart lines and data visualization\n\nFluorescent Green (#39ff14) Usage:\n\nCommand prefix ($) - creates authentic terminal feel\nOnly used for dollar signs, never for other elements\n\nGreen (#22c55e) Usage:\n\nSuccess indicators\nStatus dots (online/ready)\nString literals in code\nPositive actions\n\nBlue (#3b82f6) Usage:\n\nCommand keywords (cd, watch, man, api)\nCode keywords (const, let, var)\nLinks and interactive elements"
},
{
"title": "Font Families",
"body": "Primary Font Stack:\n\n--font-mono: \"JetBrains Mono\", \"JetBrains Mono Fallback\", 'Fira Code', 'Consolas', monospace;\n\nPrimary: JetBrains Mono (400-800 weights)\nFallbacks: Fira Code, Consolas, system monospace\nUsed for: All UI text, navigation, buttons, code blocks\n\nSans-serif Fallback:\n\n--font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n\nUsed as fallback only, monospace is preferred"
},
{
"title": "Font Size Scale",
"body": "Base Unit System:\n\n--text-xs: 0.75rem (12px) - Small labels, hints, window status\n--text-sm: 0.875rem (14px) - Secondary text, descriptions\n--text-base: 1rem (16px) - Body text, default size\n--text-lg: 1.125rem (18px) - Slightly emphasized text\n--text-xl: 1.25rem (20px) - Subheadings\n--text-2xl: 1.5rem (24px) - Section titles\n--text-3xl: 1.875rem (30px) - Large numbers, stats\n--text-4xl: 2.25rem (36px) - Hero numbers\n--text-5xl: 3rem (48px) - Large headings\n--text-6xl: 3.75rem (60px) - Extra large headings\n\nFont Weights:\n\n--font-weight-normal: 400 - Body text\n--font-weight-medium: 500 - Medium emphasis\n--font-weight-semibold: 600 - Semibold (keywords, labels)\n--font-weight-bold: 700 - Bold (headings, important text)\n--font-weight-extrabold: 800 - Extra bold (hero text)\n\nLine Heights:\n\n--leading-tight: 1.25 - Tight spacing for headings\n--leading-relaxed: 1.625 - Relaxed spacing for body text"
},
{
"title": "Typography Usage",
"body": "Headings:\n\nHero titles: 3.5rem, weight 700, line-height 1.1\nSection titles: 2.5rem, weight 700\nFAQ titles: 2rem, weight 700\n\nBody Text:\n\nDefault: 1rem, weight 400, line-height 1.5\nSecondary: 0.875rem, color --text-secondary\nMuted: 0.75rem, color --text-muted\n\nCode/Command Text:\n\nAlways use monospace font\nCommand prefix: fluorescent green (#39ff14)\nKeywords: primary color (#cc7a60) or blue (#3b82f6)\nFlags/arguments: default foreground color"
},
{
"title": "Spacing System",
"body": "Base Unit: --spacing: 0.25rem (4px)\n\nSpacing Scale:\n\n--spacing-xs: 4px (0.25rem) - Tight spacing, icon padding\n--spacing-sm: 8px (0.5rem) - Small gaps, button padding\n--spacing-md: 16px (1rem) - Standard spacing, card padding\n--spacing-lg: 24px (1.5rem) - Large gaps, section spacing\n--spacing-xl: 32px (2rem) - Extra large gaps, major sections\n--spacing-2xl: 48px (3rem) - Maximum spacing, page sections\n\nUsage Guidelines:\n\nUse consistent spacing multiples (4px base)\nCard padding: --spacing-md to --spacing-lg\nSection margins: --spacing-xl to --spacing-2xl\nButton padding: --spacing-sm to --spacing-md\nGap between related elements: --spacing-sm to --spacing-md"
},
{
"title": "Border Radius System",
"body": "Radius Scale:\n\n--radius-xs: 2px (0.125rem) - Minimal rounding\n--radius-sm: 4px (0.25rem) - Small elements\n--radius-md: 6px (0.375rem) - Buttons, inputs\n--radius-lg: 8px (0.5rem) - Cards, windows (most common)\n--radius-xl: 12px (0.75rem) - Large cards\n--radius-2xl: 16px (1rem) - Extra large elements\n--radius: 10px (0.625rem) - Default radius\n\nUsage:\n\nTerminal windows: --radius-lg (8px)\nButtons: --radius-lg (8px)\nCards: --radius-lg (8px)\nInputs: --radius-md (6px)\nAvatar: 9999px (fully rounded)"
},
{
"title": "Shadow System",
"body": "Shadow Scale:\n\n--shadow-sm: 0 1px 2px rgba(0,0,0,0.05) - Subtle elevation\n--shadow-md: 0 4px 6px rgba(0,0,0,0.07) - Medium elevation (cards on hover)\n--shadow-lg: 0 10px 25px rgba(0,0,0,0.1) - Large elevation (floating buttons)\n\nUsage:\n\nDefault cards: --shadow-sm\nHover states: --shadow-md\nFloating elements: --shadow-lg\nPrimary-colored shadows: rgba(204, 122, 96, 0.1) for primary-themed elements"
},
{
"title": "Terminal Window Component",
"body": "Structure:\n\n
\n
\n
\n \n \n \n
\n filename.ext\n ready\n
\n
\n \n
\n
\n\nStyling:\n\nBackground: --bg-card (#fff)\nBorder: 1px solid --border (#8b929e)\nBorder radius: --radius-lg (8px)\nBox shadow: --shadow-sm\nHeader background: --bg-code (#fafafa)\nHeader border-bottom: 1px solid --border-light (#e5e7eb)\nHeader padding: --spacing-sm --spacing-md (8px 16px)\nContent padding: --spacing-lg (24px)\n\nWindow Dots:\n\nSize: 12px × 12px\nGap: 6px\nColors: Red (#ff5f57), Yellow (#febc2e), Green (#28c840)\nFully rounded (border-radius: 50%)\n\nWindow Title:\n\nFont size: 0.85rem\nColor: --text-secondary (#666666)\nFont: Monospace\n\nWindow Status:\n\nFont size: 0.75rem\nColor: --text-muted (#5b6370)\nPosition: Right side of header"
},
{
"title": "Navigation Bar",
"body": "Structure:\n\n\n\nStyling:\n\nPosition: sticky, top: 0\nBackground: rgba(255, 255, 255, 0.8) with backdrop-filter: blur(8px)\nBorder-bottom: 1px solid --border\nHeight: 64px (desktop), 56px (mobile)\nMax width: 80rem (1280px), centered\n\nLogo:\n\nStatus indicator: Green dot (8px) + \"ready\" text\nPath prefix: ~/ in primary color (#cc7a60)\nPath name: Bold, foreground color\nCursor blink: 2px width, primary color, animated\n\nNavigation Commands:\n\nDisplay: Flex, gap --spacing-md\nButton style: Monospace font, small padding (6px 12px)\nBorder: 1px solid --border\nBorder radius: --radius-lg\nActive state: Primary border color with pulse animation\nHover: Border color changes to primary with 50% opacity\n\nCommand Button Structure:\n\n\n\nCommand Colors:\n\nPrefix ($): Fluorescent green (#39ff14)\nKeyword: Primary color (#cc7a60) or blue (#3b82f6)\nFlag: Default foreground color"
},
{
"title": "Card Components",
"body": "Skill Card:\n\nBackground: --bg-card (#fff in light, #111 in dark)\nBorder: 1px solid --border\nBorder radius: --radius-xl (12px)\nHeight: 100% with flex column layout\nHover: Border changes to primary with 50% opacity, shadow increases (0 25px 50px -12px rgba(204, 122, 96, 0.1)), translateY(-4px)\nActive: translateY(0) scale(0.99)\nTransition: all 0.3s ease\nLine Numbers: Absolute positioned on left, 2rem width, subtle background\nAvatar: 24px × 24px, bordered, scales on hover\nStar Icon: 10px × 10px, warning color\nLike Button: SVG heart icon, changes color on hover\n\nCategory Card:\n\nSame base styling as skill card\nColor Themes: Cyan, Blue, Purple, Amber variants\nFolder Icon: SVG icon, color varies by theme, scales on hover\nCategory Dot: Small indicator dot, changes on hover\nArrow Icon: Appears on hover, positioned bottom-right\nJSON Display: Key-value pairs with theme-colored hover effects\nCommand Line: Footer with command-style text\n\nMention Card:\n\nSame base styling\nBlockquote styling with quotation marks\nSource attribution with border-top separator"
},
{
"title": "Button Components",
"body": "Primary Button (Active):\n\nBackground: --primary (#cc7a60)\nColor: --primary-foreground (#fff)\nBorder: 1px solid --primary\nBorder radius: --radius-lg\nPadding: 6px 12px (small) or --spacing-md --spacing-lg (medium)\nFont: Monospace, --text-xs or --text-sm\n\nSecondary Button:\n\nBackground: --bg-card\nBorder: 1px solid --border\nColor: --foreground\nHover: Border color changes to primary with 50% opacity\nActive: transform: scale(0.95)\n\nIcon Button:\n\nSquare or rounded\nPadding: 6px 12px\nIcon size: 14px or 16px\nSame hover/active states as secondary button"
},
{
"title": "Input Components",
"body": "Search Input:\n\nBackground: Transparent\nBorder: None\nFont: Monospace\nPlaceholder: --text-muted color\nFocus: No visible border (minimal design)\n\nText Input:\n\nBackground: --bg-card\nBorder: 1px solid --border\nBorder radius: --radius-sm or --radius-md\nPadding: --spacing-sm\nFont: Monospace"
},
{
"title": "Code Display Components",
"body": "Code Block:\n\nBackground: rgba(255, 255, 255, 0.5) with backdrop blur\nBorder: 1px solid --border\nBorder radius: --radius-lg\nPadding: --spacing-md\nFont: Monospace\nLine height: --leading-relaxed\n\nCode Line:\n\nDisplay: Flex, align baseline\nGap: --spacing-sm\nSyntax colors applied to different elements\n\nDescription Block (Comment Style):\n\nBorder-left: 4px solid rgba(204, 122, 96, 0.5)\nBackground: rgba(204, 122, 96, 0.05)\nPadding-left: --spacing-md\nBorder-radius: Right side only (--radius-lg)\nFont: Monospace"
},
{
"title": "Grid Layouts",
"body": "Skills Grid:\n\nDisplay: Grid\nColumns: repeat(3, 1fr) (desktop), repeat(2, 1fr) (tablet), 1fr (mobile)\nGap: --spacing-lg (24px)\n\nCategories Grid:\n\nDisplay: Grid\nColumns: repeat(4, 1fr) (desktop), repeat(2, 1fr) (tablet), 1fr (mobile)\nGap: --spacing-lg\n\nMentions Grid:\n\nDisplay: Grid\nColumns: 1fr 1fr (desktop), 1fr (mobile)\nGap: --spacing-lg"
},
{
"title": "Transitions",
"body": "Default Transition:\n\nDuration: 0.15s or 0.2s\nTiming: cubic-bezier(.4,0,.2,1) (ease-in-out)\nProperties: all or specific properties\n\nCommon Transitions:\n\nHover states: all 0.2s ease\nActive states: transform 0.2s ease\nColor changes: color 0.2s ease or background-color 0.2s ease"
},
{
"title": "Keyframe Animations",
"body": "Blink Animation (Cursor):\n\n@keyframes blink {\n 0%, 50% { opacity: 1; }\n 51%, 100% { opacity: 0; }\n}\n\nDuration: 1s\nIteration: infinite\nUsed for: Cursor blink effect\n\nPulse Border Animation:\n\n@keyframes pulse-border {\n 0%, 100% { border-color: rgba(204, 122, 96, 0.5); }\n 50% { border-color: var(--ring); }\n}\n\nDuration: 2s\nTiming: ease-in-out\nIteration: infinite\nUsed for: Active navigation items\n\nFade In Up Animation:\n\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\nDuration: 0.5s\nTiming: ease\nUsed for: Card entrance animations\nStaggered delays: 0.1s increments for grid items"
},
{
"title": "Interactive States",
"body": "Hover States:\n\nButtons: Border color changes, background lightens\nCards: Border changes to primary, shadow increases, slight lift\nLinks: Color changes to primary\nScale: No scaling on hover (maintains stability)\n\nActive States:\n\nButtons: transform: scale(0.95) - subtle press effect\nDuration: 0.2s\n\nFocus States:\n\nOutline: 2px solid --ring with 2px offset\nUsed for: Accessibility, keyboard navigation"
},
{
"title": "Grid Pattern (Page Background)",
"body": "background-image: \n linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),\n linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);\nbackground-size: 20px 20px;\n\nVery subtle grid (2% opacity black)\n20px × 20px grid cells\nCreates texture without distraction\nApplied to body background"
},
{
"title": "Gradient Backgrounds",
"body": "Avatar Gradient:\n\nbackground: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);\n\nWarm peach gradient\n135-degree angle\nUsed for: User avatars\n\nChart Gradient:\n\nlinearGradient: #cc7a60 with opacity stops (0%: 0.6, 100%: 0)\n\nPrimary color gradient\nUsed for: Area charts, data visualization"
},
{
"title": "Breakpoints",
"body": "Mobile: < 640px\n\nSingle column layouts\nReduced font sizes\nSimplified navigation\nStacked grids\n\nTablet: 640px - 1024px\n\nTwo column layouts\nMedium font sizes\nCollapsed navigation menu\n\nDesktop: 1024px - 1200px\n\nThree column layouts\nFull navigation visible\nStandard spacing\n\nLarge Desktop: > 1200px\n\nFour column layouts (where applicable)\nMaximum content width: 1400px\nGenerous spacing"
},
{
"title": "Responsive Adjustments",
"body": "Navigation:\n\nDesktop (>1024px): Full command menu visible\nTablet/Mobile: Hamburger menu, simplified layout\nStatus indicator: Hidden on mobile, visible on tablet+\n\nHero Section:\n\nDesktop: Two column grid (text + chart)\nMobile: Single column, stacked\n\nGrids:\n\nSkills: 3 → 2 → 1 columns\nCategories: 4 → 2 → 1 columns\nMentions: 2 → 1 columns\n\nTypography:\n\nHero title: 3.5rem → 2.5rem (mobile)\nSection titles: 2.5rem → 2rem (mobile)\nBody text: Maintains readability"
},
{
"title": "CSS Variable Usage",
"body": "Always use CSS variables for:\n\nColors (never hardcode hex values)\nSpacing (use spacing scale)\nTypography (use text size scale)\nBorder radius (use radius scale)\nShadows (use shadow scale)\n\nExample:\n\n.button {\n background: var(--bg-card);\n color: var(--foreground);\n padding: var(--spacing-sm) var(--spacing-md);\n border: 1px solid var(--border);\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-sm);\n}"
},
{
"title": "Component Structure",
"body": "Terminal Window Pattern:\n\nContainer with border and radius\nHeader with dots, title, status\nContent area with padding\nConsistent spacing throughout\n\nCommand-Line Pattern:\n\nPrefix ($) in fluorescent green\nKeyword in primary or blue\nFlags/arguments in default color\nMonospace font throughout"
},
{
"title": "Color Application Rules",
"body": "Primary Color (#cc7a60):\n\nUse for: Active states, highlights, keywords, prompts\nAvoid: Large background areas (too intense)\nOpacity variants: Use rgba(204, 122, 96, 0.5) for borders, rgba(204, 122, 96, 0.05) for backgrounds\n\nFluorescent Green (#39ff14):\n\nUse ONLY for: Command prefix ($)\nNever use for: Other text, backgrounds, or accents\n\nGreen (#22c55e):\n\nUse for: Success states, positive indicators, string literals\nAvoid: Primary actions (use primary color instead)"
},
{
"title": "Typography Rules",
"body": "Always use monospace font for:\n\nNavigation elements\nButtons\nCode blocks\nCommand-line interfaces\nWindow titles\nStatus text\n\nFont weight guidelines:\n\nBody text: 400 (normal)\nLabels/keywords: 600 (semibold)\nHeadings: 700 (bold)\nHero text: 700-800 (bold-extrabold)"
},
{
"title": "Spacing Consistency",
"body": "Use spacing scale:\n\nNever use arbitrary values (e.g., 13px, 27px)\nStick to: 4px, 8px, 16px, 24px, 32px, 48px\nFor gaps between related items: --spacing-sm to --spacing-md\nFor section separation: --spacing-xl to --spacing-2xl"
},
{
"title": "Animation Best Practices",
"body": "Keep animations subtle:\n\nDuration: 0.15s - 0.3s maximum\nEasing: Use provided cubic-bezier curves\nAvoid: Bouncy animations, long durations\nPrefer: Fade, translate, scale (small amounts)\n\nPerformance:\n\nUse transform and opacity for animations (GPU accelerated)\nAvoid animating width, height, margin, padding"
},
{
"title": "Terminal Window Card",
"body": "
"
},
{
"title": "Accessibility Considerations",
"body": "Color Contrast:\n\nPrimary text (#111827) on white: WCAG AAA compliant\nSecondary text (#666666) on white: WCAG AA compliant\nPrimary color (#cc7a60) on white: WCAG AA compliant for large text\n\nFocus States:\n\nAll interactive elements have visible focus indicators\nFocus ring: 2px solid primary color with 2px offset\n\nKeyboard Navigation:\n\nAll interactive elements are keyboard accessible\nTab order follows visual hierarchy\nEnter/Space activate buttons\n\nScreen Readers:\n\nSemantic HTML structure\nARIA labels where needed\nStatus indicators use appropriate roles"
},
{
"title": "Dark Mode Implementation",
"body": "The design system includes a complete dark mode implementation using [data-theme=\"dark\"] attribute selector. Dark mode is fully integrated with smooth transitions and maintains all design principles."
},
{
"title": "Dark Mode Color System",
"body": "Primary Colors (Dark Mode):\n\n--primary: #d99178 - Lighter terracotta for better contrast on dark backgrounds\n--primary-foreground: #0a0a0a - Dark text on primary backgrounds\n--primary-dark: #c57f66 - Darker shade for hover states\n--primary-light: #e5a890 - Lighter shade for subtle accents\n--ring: #d99178 - Focus ring color (lighter primary)\n\nBackgrounds (Dark Mode):\n\n--background: #0a0a0a - Deep black for main backgrounds\n--bg-main: #0a0a0a - Dark background with subtle white grid pattern\n--bg-card: #111 - Slightly lighter black for card components\n--bg-code: #18181b - Dark gray for code blocks and window headers\n--secondary: #1a1a1a - Dark gray for secondary backgrounds\n--muted: #262626 - Muted dark gray for subtle backgrounds\n\nText Colors (Dark Mode):\n\n--foreground: #ededed - Light gray for primary text\n--text-primary: #ededed - Primary text color\n--text-secondary: #a3a3a3 - Medium gray for secondary text\n--text-muted: #a3a3a3 - Muted gray for less important text\n--muted-foreground: #a3a3a3 - Foreground on muted backgrounds\n\nBorders (Dark Mode):\n\n--border: #606068 - Lighter gray for visibility on dark backgrounds\n--border-light: #27272a - Subtle dark gray for dividers\n\nSyntax Highlighting (Dark Mode):\n\n--syntax-keyword: #d99178 - Lighter primary for keywords\n--syntax-string: #22c55e - Green (same as light mode)\n--syntax-number: #d99178 - Lighter primary for numbers\n--syntax-comment: #6a9955 - Muted green (same as light mode)\nBlue keywords: #60a5fa (blue-400) - Brighter blue for better contrast\nPurple keywords: #c084fc (purple-400) - Brighter purple for better contrast\n\nShadows (Dark Mode):\n\n--shadow-sm: 0 1px 2px rgba(0,0,0,0.3) - Stronger shadows for depth\n--shadow-md: 0 4px 6px rgba(0,0,0,0.4) - Medium shadows\n--shadow-lg: 0 10px 25px rgba(0,0,0,0.5) - Large shadows"
},
{
"title": "Dark Mode Background Pattern",
"body": "Dark mode uses a subtle white grid pattern instead of black:\n\n[data-theme=\"dark\"] body {\n background-image: \n linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);\n}"
},
{
"title": "Theme Toggle Implementation",
"body": "HTML Structure:\n\n\n\nJavaScript Implementation:\n\nUses localStorage to persist theme preference\nDetects system preference on first load\nSmoothly transitions between themes\nUpdates icon visibility (sun/moon)\nListens to system theme changes (when no manual preference set)\n\nKey Features:\n\nAutomatic system preference detection\nManual override with localStorage persistence\nSmooth CSS transitions (0.2s ease-in-out)\nIcon state management (sun for light, moon for dark)"
},
{
"title": "Dark Mode Component Adaptations",
"body": "Navigation Bar:\n\nBackground: rgba(10, 10, 10, 0.8) with backdrop blur\nStatus indicator: Darker background with adjusted border\n\nTerminal Windows:\n\nCard background: #111 (slightly lighter than main background)\nWindow headers: rgba(38, 38, 38, 0.3) for subtle contrast\nAll borders use darker mode colors\n\nSkill Cards:\n\nLine numbers background: rgba(38, 38, 38, 0.2)\nFooter background: rgba(38, 38, 38, 0.2)\nHover effects maintain same behavior with adjusted colors\n\nCategory Cards:\n\nEach category has theme-specific hover colors:\n\nCyan: #22d3ee (dark) vs #06b6d4 (light)\nBlue: #60a5fa (dark) vs #3b82f6 (light)\nPurple: #c084fc (dark) vs #a855f7 (light)\nAmber: #fbbf24 (dark) vs #f59e0b (light)\n\nCharts:\n\nGrid lines: #27272a with 0.5 opacity\nChart container: rgba(17, 17, 17, 0.3)\nAll text colors adapt to dark mode\n\nFAB Button:\n\nLight mode: Dark background #1a1a1a with white icon\nDark mode: White background with dark icon (inverted)"
},
{
"title": "Dark Mode Best Practices",
"body": "Color Contrast:\n\nAll text maintains WCAG AA compliance in dark mode\nPrimary color is lightened for better visibility\nBorders are lighter for clear definition\n\nTransitions:\n\nAll color changes use transition: color 0.2s ease-in-out\nBackground changes use transition: background-color 0.2s ease-in-out\nSmooth theme switching without jarring changes\n\nImplementation Pattern:\n\n/* Light mode (default) */\n.component {\n background: var(--bg-card);\n color: var(--foreground);\n}\n\n/* Dark mode */\n[data-theme=\"dark\"] .component {\n background: var(--bg-card); /* Automatically uses dark value */\n color: var(--foreground); /* Automatically uses dark value */\n}\n\nMaintains:\n\nSame spacing system\nSame typography scale\nSame component structure\nSame animation timing\nEnhanced shadows for depth perception"
},
{
"title": "Performance Optimization",
"body": "CSS Variables:\n\nAll colors/spacing use CSS variables for easy theming\nVariables defined in :root for global access\n\nAnimations:\n\nUse transform and opacity (GPU accelerated)\nAvoid layout-triggering properties\nKeep durations short (0.15s - 0.3s)\n\nFont Loading:\n\nPreconnect to Google Fonts\nUse font-display: swap for better performance\nProvide fallback fonts in stack"
},
{
"title": "Browser Support",
"body": "Modern Browsers:\n\nChrome/Edge: Full support\nFirefox: Full support\nSafari: Full support (with -webkit- prefixes for backdrop-filter)\n\nFeatures Used:\n\nCSS Grid: Full support in modern browsers\nCSS Variables: Full support\nBackdrop Filter: Requires -webkit- prefix for Safari\nFlexbox: Full support"
},
{
"title": "Design Tokens Summary",
"body": "Quick Reference:\n\n/* Colors - Light Mode */\nPrimary: #cc7a60\nFluorescent Green: #39ff14 (command prefix only)\nSuccess: #22c55e\nBlue: #3b82f6\nForeground: #111827\nBorder: #8b929e\n\n/* Colors - Dark Mode */\nPrimary: #d99178\nForeground: #ededed\nBackground: #0a0a0a\nCard: #111\nBorder: #606068\nBlue: #60a5fa (brighter for contrast)\n\n/* Spacing */\nxs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 32px, 2xl: 48px\n\n/* Typography */\nFont: JetBrains Mono\nSizes: 0.75rem - 3.75rem scale\nWeights: 400, 500, 600, 700, 800\n\n/* Radius */\nxs: 2px, sm: 4px, md: 6px, lg: 8px, xl: 12px, 2xl: 16px\n\n/* Shadows - Light Mode */\nsm: 0 1px 2px rgba(0,0,0,0.05)\nmd: 0 4px 6px rgba(0,0,0,0.07)\nlg: 0 10px 25px rgba(0,0,0,0.1)\n\n/* Shadows - Dark Mode */\nsm: 0 1px 2px rgba(0,0,0,0.3)\nmd: 0 4px 6px rgba(0,0,0,0.4)\nlg: 0 10px 25px rgba(0,0,0,0.5)"
},
{
"title": "Theme Toggle JavaScript Implementation",
"body": "Complete Implementation:\n\n(function() {\n const themeToggles = document.querySelectorAll('.theme-toggle');\n const html = document.documentElement;\n \n // Get initial theme from localStorage or system preference\n function getInitialTheme() {\n const savedTheme = localStorage.getItem('theme');\n if (savedTheme) {\n return savedTheme;\n }\n // Check system preference\n if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n return 'dark';\n }\n return 'light';\n }\n \n // Set theme and update icons\n function setTheme(theme) {\n if (theme === 'dark') {\n html.setAttribute('data-theme', 'dark');\n document.querySelectorAll('.icon-sun').forEach(icon => {\n icon.style.display = 'none';\n });\n document.querySelectorAll('.icon-moon').forEach(icon => {\n icon.style.display = 'block';\n });\n } else {\n html.removeAttribute('data-theme');\n document.querySelectorAll('.icon-sun').forEach(icon => {\n icon.style.display = 'block';\n });\n document.querySelectorAll('.icon-moon').forEach(icon => {\n icon.style.display = 'none';\n });\n }\n localStorage.setItem('theme', theme);\n }\n \n // Toggle theme\n function toggleTheme() {\n const currentTheme = html.getAttribute('data-theme');\n const newTheme = currentTheme === 'dark' ? 'light' : 'dark';\n setTheme(newTheme);\n }\n \n // Initialize\n const initialTheme = getInitialTheme();\n setTheme(initialTheme);\n \n // Add event listeners\n themeToggles.forEach(button => {\n button.addEventListener('click', toggleTheme);\n });\n \n // Listen to system theme changes (only if no manual preference)\n if (window.matchMedia) {\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n mediaQuery.addEventListener('change', (e) => {\n if (!localStorage.getItem('theme')) {\n setTheme(e.matches ? 'dark' : 'light');\n }\n });\n }\n})();\n\nKey Features:\n\nPersists theme preference in localStorage\nDetects system preference on first load\nSmoothly transitions between themes\nUpdates icon visibility automatically\nListens to system theme changes (when no manual override)"
},
{
"title": "Usage Examples",
"body": "When implementing this design system:\n\nStart with CSS variables - Import or define all color/spacing variables (including dark mode)\nUse terminal window pattern - Wrap content in terminal-window component\nApply monospace font - Use JetBrains Mono for all UI text\nFollow spacing scale - Use defined spacing values consistently\nUse semantic colors - Apply colors based on meaning, not appearance\nImplement theme toggle - Add theme toggle button and JavaScript\nMaintain consistency - Reuse component patterns throughout\nTest responsiveness - Ensure layouts work at all breakpoints\nTest both themes - Verify light and dark modes work correctly\nOptimize animations - Keep transitions smooth and performant\n\nThis design system creates a cohesive, developer-friendly interface that feels both modern and familiar to users comfortable with terminal interfaces. The complete dark mode implementation ensures the interface works beautifully in any lighting condition."
}
],
"body": "Terminal UI Design System\n\nA comprehensive design system for creating terminal-inspired user interfaces with macOS-style window decorations, monospace typography, and a warm, developer-friendly color palette. This design system is optimized for developer tools, code marketplaces, technical documentation, and any interface that benefits from a command-line aesthetic.\n\nDesign Philosophy\n\nCore Principles:\n\nTerminal Aesthetic: Mimics macOS terminal windows with colored dots, monospace fonts, and command-line syntax\nDeveloper-First: Uses syntax highlighting colors, code-like structures, and terminal metaphors\nWarm & Approachable: Warm terracotta primary color (#cc7a60) creates a friendly, non-intimidating feel\nHigh Contrast: Clear visual hierarchy with distinct text colors and backgrounds\nFunctional Beauty: Every design element serves a purpose while maintaining visual appeal\nColor System\nPrimary Palette\n\nMain Brand Color:\n\n--primary: #cc7a60 - Warm terracotta/orange-brown, used for primary actions, accents, and highlights\n--primary-foreground: #fff - White text on primary backgrounds\n--primary-dark: #b56850 - Darker shade for hover states\n--primary-light: #d8907a - Lighter shade for subtle accents\n--ring: #cc7a60 - Focus ring color (same as primary)\n\nWarm Accent:\n\n--warm-red: #c85a3f - Used for code block borders and warm accents\nSemantic Colors\n\nBackgrounds:\n\n--background: #fff - Pure white for main backgrounds\n--bg-main: #f8f8f8 - Light gray for page background (with subtle grid pattern)\n--bg-card: #fff - White for card components\n--bg-code: #fafafa - Very light gray for code blocks and window headers\n--secondary: #f9fafb - Light gray for secondary backgrounds\n--muted: #f3f4f6 - Muted gray for subtle backgrounds\n\nText Colors:\n\n--foreground: #111827 - Near-black for primary text (excellent readability)\n--text-primary: #111827 - Primary text color\n--text-secondary: #666666 - Medium gray for secondary text\n--text-muted: #5b6370 - Muted gray for less important text\n--muted-foreground: #5b6370 - Foreground on muted backgrounds\n\nBorders:\n\n--border: #8b929e - Medium gray for main borders\n--border-light: #e5e7eb - Light gray for subtle dividers\n--input: #8b929e - Input border color\n\nStatus Colors:\n\n--success: #22c55e - Green for success states\n--warning: #f59e0b - Amber for warnings\n--danger: #ef4444 - Red for errors/destructive actions\n--accent: #f59e0b - Amber accent color\nSyntax Highlighting Colors\n\nCode Syntax:\n\n--syntax-keyword: #cc7a60 - Primary color for keywords (const, export, etc.)\n--syntax-string: #22c55e - Green for strings\n--syntax-number: #cc7a60 - Primary color for numbers\n--syntax-comment: #6a9955 - Muted green for comments\n--syntax-function: #dcdcaa - Light yellow for function names\n\nCommand Prefix:\n\nCommand prefix ($) uses fluorescent green: #39ff14 - Creates terminal-like appearance\n\nCode Elements:\n\n--text-comment: #6a9955 - Comment text color\nmacOS Window Dots\n\nTerminal Window Controls:\n\n--dot-red: #ff5f57 - Close button (macOS red)\n--dot-yellow: #febc2e - Minimize button (macOS yellow)\n--dot-green: #28c840 - Maximize button (macOS green)\nColor Usage Guidelines\n\nPrimary Color (#cc7a60) Usage:\n\nCommand keywords in navigation\nPrompt symbols (>)\nActive states and highlights\nFocus rings\nHover borders\nPrimary buttons when active\nChart lines and data visualization\n\nFluorescent Green (#39ff14) Usage:\n\nCommand prefix ($) - creates authentic terminal feel\nOnly used for dollar signs, never for other elements\n\nGreen (#22c55e) Usage:\n\nSuccess indicators\nStatus dots (online/ready)\nString literals in code\nPositive actions\n\nBlue (#3b82f6) Usage:\n\nCommand keywords (cd, watch, man, api)\nCode keywords (const, let, var)\nLinks and interactive elements\nTypography System\nFont Families\n\nPrimary Font Stack:\n\n--font-mono: \"JetBrains Mono\", \"JetBrains Mono Fallback\", 'Fira Code', 'Consolas', monospace;\n\nPrimary: JetBrains Mono (400-800 weights)\nFallbacks: Fira Code, Consolas, system monospace\nUsed for: All UI text, navigation, buttons, code blocks\n\nSans-serif Fallback:\n\n--font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n\nUsed as fallback only, monospace is preferred\nFont Size Scale\n\nBase Unit System:\n\n--text-xs: 0.75rem (12px) - Small labels, hints, window status\n--text-sm: 0.875rem (14px) - Secondary text, descriptions\n--text-base: 1rem (16px) - Body text, default size\n--text-lg: 1.125rem (18px) - Slightly emphasized text\n--text-xl: 1.25rem (20px) - Subheadings\n--text-2xl: 1.5rem (24px) - Section titles\n--text-3xl: 1.875rem (30px) - Large numbers, stats\n--text-4xl: 2.25rem (36px) - Hero numbers\n--text-5xl: 3rem (48px) - Large headings\n--text-6xl: 3.75rem (60px) - Extra large headings\n\nFont Weights:\n\n--font-weight-normal: 400 - Body text\n--font-weight-medium: 500 - Medium emphasis\n--font-weight-semibold: 600 - Semibold (keywords, labels)\n--font-weight-bold: 700 - Bold (headings, important text)\n--font-weight-extrabold: 800 - Extra bold (hero text)\n\nLine Heights:\n\n--leading-tight: 1.25 - Tight spacing for headings\n--leading-relaxed: 1.625 - Relaxed spacing for body text\nTypography Usage\n\nHeadings:\n\nHero titles: 3.5rem, weight 700, line-height 1.1\nSection titles: 2.5rem, weight 700\nFAQ titles: 2rem, weight 700\n\nBody Text:\n\nDefault: 1rem, weight 400, line-height 1.5\nSecondary: 0.875rem, color --text-secondary\nMuted: 0.75rem, color --text-muted\n\nCode/Command Text:\n\nAlways use monospace font\nCommand prefix: fluorescent green (#39ff14)\nKeywords: primary color (#cc7a60) or blue (#3b82f6)\nFlags/arguments: default foreground color\nSpacing System\n\nBase Unit: --spacing: 0.25rem (4px)\n\nSpacing Scale:\n\n--spacing-xs: 4px (0.25rem) - Tight spacing, icon padding\n--spacing-sm: 8px (0.5rem) - Small gaps, button padding\n--spacing-md: 16px (1rem) - Standard spacing, card padding\n--spacing-lg: 24px (1.5rem) - Large gaps, section spacing\n--spacing-xl: 32px (2rem) - Extra large gaps, major sections\n--spacing-2xl: 48px (3rem) - Maximum spacing, page sections\n\nUsage Guidelines:\n\nUse consistent spacing multiples (4px base)\nCard padding: --spacing-md to --spacing-lg\nSection margins: --spacing-xl to --spacing-2xl\nButton padding: --spacing-sm to --spacing-md\nGap between related elements: --spacing-sm to --spacing-md\nBorder Radius System\n\nRadius Scale:\n\n--radius-xs: 2px (0.125rem) - Minimal rounding\n--radius-sm: 4px (0.25rem) - Small elements\n--radius-md: 6px (0.375rem) - Buttons, inputs\n--radius-lg: 8px (0.5rem) - Cards, windows (most common)\n--radius-xl: 12px (0.75rem) - Large cards\n--radius-2xl: 16px (1rem) - Extra large elements\n--radius: 10px (0.625rem) - Default radius\n\nUsage:\n\nTerminal windows: --radius-lg (8px)\nButtons: --radius-lg (8px)\nCards: --radius-lg (8px)\nInputs: --radius-md (6px)\nAvatar: 9999px (fully rounded)\nShadow System\n\nShadow Scale:\n\n--shadow-sm: 0 1px 2px rgba(0,0,0,0.05) - Subtle elevation\n--shadow-md: 0 4px 6px rgba(0,0,0,0.07) - Medium elevation (cards on hover)\n--shadow-lg: 0 10px 25px rgba(0,0,0,0.1) - Large elevation (floating buttons)\n\nUsage:\n\nDefault cards: --shadow-sm\nHover states: --shadow-md\nFloating elements: --shadow-lg\nPrimary-colored shadows: rgba(204, 122, 96, 0.1) for primary-themed elements\nComponent Specifications\nTerminal Window Component\n\nStructure:\n\n
\n
\n
\n \n \n \n
\n filename.ext\n ready\n
\n
\n \n
\n
\n\n\nStyling:\n\nBackground: --bg-card (#fff)\nBorder: 1px solid --border (#8b929e)\nBorder radius: --radius-lg (8px)\nBox shadow: --shadow-sm\nHeader background: --bg-code (#fafafa)\nHeader border-bottom: 1px solid --border-light (#e5e7eb)\nHeader padding: --spacing-sm --spacing-md (8px 16px)\nContent padding: --spacing-lg (24px)\n\nWindow Dots:\n\nSize: 12px × 12px\nGap: 6px\nColors: Red (#ff5f57), Yellow (#febc2e), Green (#28c840)\nFully rounded (border-radius: 50%)\n\nWindow Title:\n\nFont size: 0.85rem\nColor: --text-secondary (#666666)\nFont: Monospace\n\nWindow Status:\n\nFont size: 0.75rem\nColor: --text-muted (#5b6370)\nPosition: Right side of header\nNavigation Bar\n\nStructure:\n\n\n\n\nStyling:\n\nPosition: sticky, top: 0\nBackground: rgba(255, 255, 255, 0.8) with backdrop-filter: blur(8px)\nBorder-bottom: 1px solid --border\nHeight: 64px (desktop), 56px (mobile)\nMax width: 80rem (1280px), centered\n\nLogo:\n\nStatus indicator: Green dot (8px) + \"ready\" text\nPath prefix: ~/ in primary color (#cc7a60)\nPath name: Bold, foreground color\nCursor blink: 2px width, primary color, animated\n\nNavigation Commands:\n\nDisplay: Flex, gap --spacing-md\nButton style: Monospace font, small padding (6px 12px)\nBorder: 1px solid --border\nBorder radius: --radius-lg\nActive state: Primary border color with pulse animation\nHover: Border color changes to primary with 50% opacity\n\nCommand Button Structure:\n\n\n\n\nCommand Colors:\n\nPrefix ($): Fluorescent green (#39ff14)\nKeyword: Primary color (#cc7a60) or blue (#3b82f6)\nFlag: Default foreground color\nCard Components\n\nSkill Card:\n\nBackground: --bg-card (#fff in light, #111 in dark)\nBorder: 1px solid --border\nBorder radius: --radius-xl (12px)\nHeight: 100% with flex column layout\nHover: Border changes to primary with 50% opacity, shadow increases (0 25px 50px -12px rgba(204, 122, 96, 0.1)), translateY(-4px)\nActive: translateY(0) scale(0.99)\nTransition: all 0.3s ease\nLine Numbers: Absolute positioned on left, 2rem width, subtle background\nAvatar: 24px × 24px, bordered, scales on hover\nStar Icon: 10px × 10px, warning color\nLike Button: SVG heart icon, changes color on hover\n\nCategory Card:\n\nSame base styling as skill card\nColor Themes: Cyan, Blue, Purple, Amber variants\nFolder Icon: SVG icon, color varies by theme, scales on hover\nCategory Dot: Small indicator dot, changes on hover\nArrow Icon: Appears on hover, positioned bottom-right\nJSON Display: Key-value pairs with theme-colored hover effects\nCommand Line: Footer with command-style text\n\nMention Card:\n\nSame base styling\nBlockquote styling with quotation marks\nSource attribution with border-top separator\nButton Components\n\nPrimary Button (Active):\n\nBackground: --primary (#cc7a60)\nColor: --primary-foreground (#fff)\nBorder: 1px solid --primary\nBorder radius: --radius-lg\nPadding: 6px 12px (small) or --spacing-md --spacing-lg (medium)\nFont: Monospace, --text-xs or --text-sm\n\nSecondary Button:\n\nBackground: --bg-card\nBorder: 1px solid --border\nColor: --foreground\nHover: Border color changes to primary with 50% opacity\nActive: transform: scale(0.95)\n\nIcon Button:\n\nSquare or rounded\nPadding: 6px 12px\nIcon size: 14px or 16px\nSame hover/active states as secondary button\nInput Components\n\nSearch Input:\n\nBackground: Transparent\nBorder: None\nFont: Monospace\nPlaceholder: --text-muted color\nFocus: No visible border (minimal design)\n\nText Input:\n\nBackground: --bg-card\nBorder: 1px solid --border\nBorder radius: --radius-sm or --radius-md\nPadding: --spacing-sm\nFont: Monospace\nCode Display Components\n\nCode Block:\n\nBackground: rgba(255, 255, 255, 0.5) with backdrop blur\nBorder: 1px solid --border\nBorder radius: --radius-lg\nPadding: --spacing-md\nFont: Monospace\nLine height: --leading-relaxed\n\nCode Line:\n\nDisplay: Flex, align baseline\nGap: --spacing-sm\nSyntax colors applied to different elements\n\nDescription Block (Comment Style):\n\nBorder-left: 4px solid rgba(204, 122, 96, 0.5)\nBackground: rgba(204, 122, 96, 0.05)\nPadding-left: --spacing-md\nBorder-radius: Right side only (--radius-lg)\nFont: Monospace\nGrid Layouts\n\nSkills Grid:\n\nDisplay: Grid\nColumns: repeat(3, 1fr) (desktop), repeat(2, 1fr) (tablet), 1fr (mobile)\nGap: --spacing-lg (24px)\n\nCategories Grid:\n\nDisplay: Grid\nColumns: repeat(4, 1fr) (desktop), repeat(2, 1fr) (tablet), 1fr (mobile)\nGap: --spacing-lg\n\nMentions Grid:\n\nDisplay: Grid\nColumns: 1fr 1fr (desktop), 1fr (mobile)\nGap: --spacing-lg\nAnimation System\nTransitions\n\nDefault Transition:\n\nDuration: 0.15s or 0.2s\nTiming: cubic-bezier(.4,0,.2,1) (ease-in-out)\nProperties: all or specific properties\n\nCommon Transitions:\n\nHover states: all 0.2s ease\nActive states: transform 0.2s ease\nColor changes: color 0.2s ease or background-color 0.2s ease\nKeyframe Animations\n\nBlink Animation (Cursor):\n\n@keyframes blink {\n 0%, 50% { opacity: 1; }\n 51%, 100% { opacity: 0; }\n}\n\nDuration: 1s\nIteration: infinite\nUsed for: Cursor blink effect\n\nPulse Border Animation:\n\n@keyframes pulse-border {\n 0%, 100% { border-color: rgba(204, 122, 96, 0.5); }\n 50% { border-color: var(--ring); }\n}\n\nDuration: 2s\nTiming: ease-in-out\nIteration: infinite\nUsed for: Active navigation items\n\nFade In Up Animation:\n\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\nDuration: 0.5s\nTiming: ease\nUsed for: Card entrance animations\nStaggered delays: 0.1s increments for grid items\nInteractive States\n\nHover States:\n\nButtons: Border color changes, background lightens\nCards: Border changes to primary, shadow increases, slight lift\nLinks: Color changes to primary\nScale: No scaling on hover (maintains stability)\n\nActive States:\n\nButtons: transform: scale(0.95) - subtle press effect\nDuration: 0.2s\n\nFocus States:\n\nOutline: 2px solid --ring with 2px offset\nUsed for: Accessibility, keyboard navigation\nBackground Patterns\nGrid Pattern (Page Background)\nbackground-image: \n linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),\n linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);\nbackground-size: 20px 20px;\n\nVery subtle grid (2% opacity black)\n20px × 20px grid cells\nCreates texture without distraction\nApplied to body background\nGradient Backgrounds\n\nAvatar Gradient:\n\nbackground: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);\n\nWarm peach gradient\n135-degree angle\nUsed for: User avatars\n\nChart Gradient:\n\nlinearGradient: #cc7a60 with opacity stops (0%: 0.6, 100%: 0)\n\nPrimary color gradient\nUsed for: Area charts, data visualization\nResponsive Design\nBreakpoints\n\nMobile: < 640px\n\nSingle column layouts\nReduced font sizes\nSimplified navigation\nStacked grids\n\nTablet: 640px - 1024px\n\nTwo column layouts\nMedium font sizes\nCollapsed navigation menu\n\nDesktop: 1024px - 1200px\n\nThree column layouts\nFull navigation visible\nStandard spacing\n\nLarge Desktop: > 1200px\n\nFour column layouts (where applicable)\nMaximum content width: 1400px\nGenerous spacing\nResponsive Adjustments\n\nNavigation:\n\nDesktop (>1024px): Full command menu visible\nTablet/Mobile: Hamburger menu, simplified layout\nStatus indicator: Hidden on mobile, visible on tablet+\n\nHero Section:\n\nDesktop: Two column grid (text + chart)\nMobile: Single column, stacked\n\nGrids:\n\nSkills: 3 → 2 → 1 columns\nCategories: 4 → 2 → 1 columns\nMentions: 2 → 1 columns\n\nTypography:\n\nHero title: 3.5rem → 2.5rem (mobile)\nSection titles: 2.5rem → 2rem (mobile)\nBody text: Maintains readability\nImplementation Guidelines\nCSS Variable Usage\n\nAlways use CSS variables for:\n\nColors (never hardcode hex values)\nSpacing (use spacing scale)\nTypography (use text size scale)\nBorder radius (use radius scale)\nShadows (use shadow scale)\n\nExample:\n\n.button {\n background: var(--bg-card);\n color: var(--foreground);\n padding: var(--spacing-sm) var(--spacing-md);\n border: 1px solid var(--border);\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-sm);\n}\n\nComponent Structure\n\nTerminal Window Pattern:\n\nContainer with border and radius\nHeader with dots, title, status\nContent area with padding\nConsistent spacing throughout\n\nCommand-Line Pattern:\n\nPrefix ($) in fluorescent green\nKeyword in primary or blue\nFlags/arguments in default color\nMonospace font throughout\nColor Application Rules\n\nPrimary Color (#cc7a60):\n\nUse for: Active states, highlights, keywords, prompts\nAvoid: Large background areas (too intense)\nOpacity variants: Use rgba(204, 122, 96, 0.5) for borders, rgba(204, 122, 96, 0.05) for backgrounds\n\nFluorescent Green (#39ff14):\n\nUse ONLY for: Command prefix ($)\nNever use for: Other text, backgrounds, or accents\n\nGreen (#22c55e):\n\nUse for: Success states, positive indicators, string literals\nAvoid: Primary actions (use primary color instead)\nTypography Rules\n\nAlways use monospace font for:\n\nNavigation elements\nButtons\nCode blocks\nCommand-line interfaces\nWindow titles\nStatus text\n\nFont weight guidelines:\n\nBody text: 400 (normal)\nLabels/keywords: 600 (semibold)\nHeadings: 700 (bold)\nHero text: 700-800 (bold-extrabold)\nSpacing Consistency\n\nUse spacing scale:\n\nNever use arbitrary values (e.g., 13px, 27px)\nStick to: 4px, 8px, 16px, 24px, 32px, 48px\nFor gaps between related items: --spacing-sm to --spacing-md\nFor section separation: --spacing-xl to --spacing-2xl\nAnimation Best Practices\n\nKeep animations subtle:\n\nDuration: 0.15s - 0.3s maximum\nEasing: Use provided cubic-bezier curves\nAvoid: Bouncy animations, long durations\nPrefer: Fade, translate, scale (small amounts)\n\nPerformance:\n\nUse transform and opacity for animations (GPU accelerated)\nAvoid animating width, height, margin, padding\nCommon Patterns\nTerminal Window Card\n
\n
\n
\n \n \n \n
\n filename.ext\n ready\n
\n
\n \n
\n
\n\nCommand Button\n\n\nCode Block Display\n
\n
\n const\n variable\n =\n 123\n ;\n
\n
\n // Comment text\n
\n
\n\nDescription Block (Comment Style)\n
\n
/**
\n
\n * Description text\n
\n
*/
\n
\n\nAccessibility Considerations\n\nColor Contrast:\n\nPrimary text (#111827) on white: WCAG AAA compliant\nSecondary text (#666666) on white: WCAG AA compliant\nPrimary color (#cc7a60) on white: WCAG AA compliant for large text\n\nFocus States:\n\nAll interactive elements have visible focus indicators\nFocus ring: 2px solid primary color with 2px offset\n\nKeyboard Navigation:\n\nAll interactive elements are keyboard accessible\nTab order follows visual hierarchy\nEnter/Space activate buttons\n\nScreen Readers:\n\nSemantic HTML structure\nARIA labels where needed\nStatus indicators use appropriate roles\nDark Mode Implementation\n\nThe design system includes a complete dark mode implementation using [data-theme=\"dark\"] attribute selector. Dark mode is fully integrated with smooth transitions and maintains all design principles.\n\nDark Mode Color System\n\nPrimary Colors (Dark Mode):\n\n--primary: #d99178 - Lighter terracotta for better contrast on dark backgrounds\n--primary-foreground: #0a0a0a - Dark text on primary backgrounds\n--primary-dark: #c57f66 - Darker shade for hover states\n--primary-light: #e5a890 - Lighter shade for subtle accents\n--ring: #d99178 - Focus ring color (lighter primary)\n\nBackgrounds (Dark Mode):\n\n--background: #0a0a0a - Deep black for main backgrounds\n--bg-main: #0a0a0a - Dark background with subtle white grid pattern\n--bg-card: #111 - Slightly lighter black for card components\n--bg-code: #18181b - Dark gray for code blocks and window headers\n--secondary: #1a1a1a - Dark gray for secondary backgrounds\n--muted: #262626 - Muted dark gray for subtle backgrounds\n\nText Colors (Dark Mode):\n\n--foreground: #ededed - Light gray for primary text\n--text-primary: #ededed - Primary text color\n--text-secondary: #a3a3a3 - Medium gray for secondary text\n--text-muted: #a3a3a3 - Muted gray for less important text\n--muted-foreground: #a3a3a3 - Foreground on muted backgrounds\n\nBorders (Dark Mode):\n\n--border: #606068 - Lighter gray for visibility on dark backgrounds\n--border-light: #27272a - Subtle dark gray for dividers\n\nSyntax Highlighting (Dark Mode):\n\n--syntax-keyword: #d99178 - Lighter primary for keywords\n--syntax-string: #22c55e - Green (same as light mode)\n--syntax-number: #d99178 - Lighter primary for numbers\n--syntax-comment: #6a9955 - Muted green (same as light mode)\nBlue keywords: #60a5fa (blue-400) - Brighter blue for better contrast\nPurple keywords: #c084fc (purple-400) - Brighter purple for better contrast\n\nShadows (Dark Mode):\n\n--shadow-sm: 0 1px 2px rgba(0,0,0,0.3) - Stronger shadows for depth\n--shadow-md: 0 4px 6px rgba(0,0,0,0.4) - Medium shadows\n--shadow-lg: 0 10px 25px rgba(0,0,0,0.5) - Large shadows\nDark Mode Background Pattern\n\nDark mode uses a subtle white grid pattern instead of black:\n\n[data-theme=\"dark\"] body {\n background-image: \n linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);\n}\n\nTheme Toggle Implementation\n\nHTML Structure:\n\n\n\n\nJavaScript Implementation:\n\nUses localStorage to persist theme preference\nDetects system preference on first load\nSmoothly transitions between themes\nUpdates icon visibility (sun/moon)\nListens to system theme changes (when no manual preference set)\n\nKey Features:\n\nAutomatic system preference detection\nManual override with localStorage persistence\nSmooth CSS transitions (0.2s ease-in-out)\nIcon state management (sun for light, moon for dark)\nDark Mode Component Adaptations\n\nNavigation Bar:\n\nBackground: rgba(10, 10, 10, 0.8) with backdrop blur\nStatus indicator: Darker background with adjusted border\n\nTerminal Windows:\n\nCard background: #111 (slightly lighter than main background)\nWindow headers: rgba(38, 38, 38, 0.3) for subtle contrast\nAll borders use darker mode colors\n\nSkill Cards:\n\nLine numbers background: rgba(38, 38, 38, 0.2)\nFooter background: rgba(38, 38, 38, 0.2)\nHover effects maintain same behavior with adjusted colors\n\nCategory Cards:\n\nEach category has theme-specific hover colors:\nCyan: #22d3ee (dark) vs #06b6d4 (light)\nBlue: #60a5fa (dark) vs #3b82f6 (light)\nPurple: #c084fc (dark) vs #a855f7 (light)\nAmber: #fbbf24 (dark) vs #f59e0b (light)\n\nCharts:\n\nGrid lines: #27272a with 0.5 opacity\nChart container: rgba(17, 17, 17, 0.3)\nAll text colors adapt to dark mode\n\nFAB Button:\n\nLight mode: Dark background #1a1a1a with white icon\nDark mode: White background with dark icon (inverted)\nDark Mode Best Practices\n\nColor Contrast:\n\nAll text maintains WCAG AA compliance in dark mode\nPrimary color is lightened for better visibility\nBorders are lighter for clear definition\n\nTransitions:\n\nAll color changes use transition: color 0.2s ease-in-out\nBackground changes use transition: background-color 0.2s ease-in-out\nSmooth theme switching without jarring changes\n\nImplementation Pattern:\n\n/* Light mode (default) */\n.component {\n background: var(--bg-card);\n color: var(--foreground);\n}\n\n/* Dark mode */\n[data-theme=\"dark\"] .component {\n background: var(--bg-card); /* Automatically uses dark value */\n color: var(--foreground); /* Automatically uses dark value */\n}\n\n\nMaintains:\n\nSame spacing system\nSame typography scale\nSame component structure\nSame animation timing\nEnhanced shadows for depth perception\nPerformance Optimization\n\nCSS Variables:\n\nAll colors/spacing use CSS variables for easy theming\nVariables defined in :root for global access\n\nAnimations:\n\nUse transform and opacity (GPU accelerated)\nAvoid layout-triggering properties\nKeep durations short (0.15s - 0.3s)\n\nFont Loading:\n\nPreconnect to Google Fonts\nUse font-display: swap for better performance\nProvide fallback fonts in stack\nBrowser Support\n\nModern Browsers:\n\nChrome/Edge: Full support\nFirefox: Full support\nSafari: Full support (with -webkit- prefixes for backdrop-filter)\n\nFeatures Used:\n\nCSS Grid: Full support in modern browsers\nCSS Variables: Full support\nBackdrop Filter: Requires -webkit- prefix for Safari\nFlexbox: Full support\nDesign Tokens Summary\n\nQuick Reference:\n\n/* Colors - Light Mode */\nPrimary: #cc7a60\nFluorescent Green: #39ff14 (command prefix only)\nSuccess: #22c55e\nBlue: #3b82f6\nForeground: #111827\nBorder: #8b929e\n\n/* Colors - Dark Mode */\nPrimary: #d99178\nForeground: #ededed\nBackground: #0a0a0a\nCard: #111\nBorder: #606068\nBlue: #60a5fa (brighter for contrast)\n\n/* Spacing */\nxs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 32px, 2xl: 48px\n\n/* Typography */\nFont: JetBrains Mono\nSizes: 0.75rem - 3.75rem scale\nWeights: 400, 500, 600, 700, 800\n\n/* Radius */\nxs: 2px, sm: 4px, md: 6px, lg: 8px, xl: 12px, 2xl: 16px\n\n/* Shadows - Light Mode */\nsm: 0 1px 2px rgba(0,0,0,0.05)\nmd: 0 4px 6px rgba(0,0,0,0.07)\nlg: 0 10px 25px rgba(0,0,0,0.1)\n\n/* Shadows - Dark Mode */\nsm: 0 1px 2px rgba(0,0,0,0.3)\nmd: 0 4px 6px rgba(0,0,0,0.4)\nlg: 0 10px 25px rgba(0,0,0,0.5)\n\nTheme Toggle JavaScript Implementation\n\nComplete Implementation:\n\n(function() {\n const themeToggles = document.querySelectorAll('.theme-toggle');\n const html = document.documentElement;\n \n // Get initial theme from localStorage or system preference\n function getInitialTheme() {\n const savedTheme = localStorage.getItem('theme');\n if (savedTheme) {\n return savedTheme;\n }\n // Check system preference\n if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {\n return 'dark';\n }\n return 'light';\n }\n \n // Set theme and update icons\n function setTheme(theme) {\n if (theme === 'dark') {\n html.setAttribute('data-theme', 'dark');\n document.querySelectorAll('.icon-sun').forEach(icon => {\n icon.style.display = 'none';\n });\n document.querySelectorAll('.icon-moon').forEach(icon => {\n icon.style.display = 'block';\n });\n } else {\n html.removeAttribute('data-theme');\n document.querySelectorAll('.icon-sun').forEach(icon => {\n icon.style.display = 'block';\n });\n document.querySelectorAll('.icon-moon').forEach(icon => {\n icon.style.display = 'none';\n });\n }\n localStorage.setItem('theme', theme);\n }\n \n // Toggle theme\n function toggleTheme() {\n const currentTheme = html.getAttribute('data-theme');\n const newTheme = currentTheme === 'dark' ? 'light' : 'dark';\n setTheme(newTheme);\n }\n \n // Initialize\n const initialTheme = getInitialTheme();\n setTheme(initialTheme);\n \n // Add event listeners\n themeToggles.forEach(button => {\n button.addEventListener('click', toggleTheme);\n });\n \n // Listen to system theme changes (only if no manual preference)\n if (window.matchMedia) {\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n mediaQuery.addEventListener('change', (e) => {\n if (!localStorage.getItem('theme')) {\n setTheme(e.matches ? 'dark' : 'light');\n }\n });\n }\n})();\n\n\nKey Features:\n\nPersists theme preference in localStorage\nDetects system preference on first load\nSmoothly transitions between themes\nUpdates icon visibility automatically\nListens to system theme changes (when no manual override)\nUsage Examples\n\nWhen implementing this design system:\n\nStart with CSS variables - Import or define all color/spacing variables (including dark mode)\nUse terminal window pattern - Wrap content in terminal-window component\nApply monospace font - Use JetBrains Mono for all UI text\nFollow spacing scale - Use defined spacing values consistently\nUse semantic colors - Apply colors based on meaning, not appearance\nImplement theme toggle - Add theme toggle button and JavaScript\nMaintain consistency - Reuse component patterns throughout\nTest responsiveness - Ensure layouts work at all breakpoints\nTest both themes - Verify light and dark modes work correctly\nOptimize animations - Keep transitions smooth and performant\n\nThis design system creates a cohesive, developer-friendly interface that feels both modern and familiar to users comfortable with terminal interfaces. The complete dark mode implementation ensures the interface works beautifully in any lighting condition."
},
"trust": {
"sourceLabel": "tencent",
"provenanceUrl": "https://clawhub.ai/chyinan/terminal-ui-website-design",
"publisherUrl": "https://clawhub.ai/chyinan/terminal-ui-website-design",
"owner": "chyinan",
"version": "1.0.0",
"license": null,
"verificationStatus": "Indexed source record"
},
"links": {
"detailUrl": "https://openagent3.xyz/skills/terminal-ui-website-design",
"downloadUrl": "https://openagent3.xyz/downloads/terminal-ui-website-design",
"agentUrl": "https://openagent3.xyz/skills/terminal-ui-website-design/agent",
"manifestUrl": "https://openagent3.xyz/skills/terminal-ui-website-design/agent.json",
"briefUrl": "https://openagent3.xyz/skills/terminal-ui-website-design/agent.md"
}
}