اسکیل گایدلاین دیزاین پارچ برای Claude Code و ایجنت‌ها

فارسی
,
1

سلام بچه‌ها،

کل PDF گایدلاین رسمی دیزاین پارچ (رنگ‌های اصلی، فونت‌های استعداد و فیراکد، تم دارک و فلت بودن) رو تبدیل کردم به یه اسکیل استاندارد (SKILL.md) برای Claude Code و بقیه ایجنت‌ها.

اینطوری هر وقت با هوش مصنوعی برای پارچ وب یا رابط کاربری می‌زنید، رنگ‌ها و استایل‌ها رو سلیقه‌ای یا خراب درنمیاره و دقیقاً طبق هویت بصری پارچ پیش میره.

فایل SKILL.md رو پیوست کردم:

متن کامل فایل SKILL.md (برای مشاهده یا کپی کلیک کنید) 
---
name: parch-design-guidelines
description: Official design system, color palette, typography rules, component patterns, and layout standards for Parch Linux software, web applications, and desktop interfaces. Use whenever designing, styling, modernizing, refactoring, or reviewing any user interface, website, graphic asset, or documentation for Parch Linux.
version: 1.0.0
platforms: [linux, darwin, windows]
metadata:
  category: ui-ux
  tags: [design-system, parch-linux, ui-ux, styling, typography, css, colors, branding, rtl, bidi]
---

# Parch Linux Official Design Guidelines

This skill provides the definitive visual identity, design tokens, typography specifications, component architectures, and layout principles for all **Parch Linux** projects (web applications, desktop apps, documentation portals, and brand assets), directly distilled from the official `ParchLinux-GuideLine` specification.

---

## 1. Brand Philosophy & Identity Lore

- **Brand Slogan**: *"Parch Linux — A distro for everyone"* (پارچ لینوکس — توزیعی برای همه).
- **Visual Identity Concept**:
  - **Boteh Jegheh (بته جقه / Paisley)**: An art form representing the sacred Cypress Tree, a historic symbol of freedom, resilience, and humility in Persian culture.
  - **Arch Linux Heritage**: Incorporates the distinctive cutouts and architectural geometry of the Arch Linux emblem, signifying Parch's foundation as an Arch-based distribution.
  - **Core Aesthetic**: High contrast, crisp geometry, clean typography, culturally grounded, modern, and accessible.

---

## 2. Official Color Palette & Design Tokens

### 2.1 Core Brand Colors

The Parch brand palette is built on 5 vibrant, high-energy signature colors:

| Token Name | Hex Code | RGB | Role / Usage |
| :--- | :--- | :--- | :--- |
| `--parch-blue` | `#0080FF` | `rgb(0, 128, 255)` | **Primary Brand Color**: Main interactive buttons, highlights, active states |
| `--parch-cyan` | `#00EAFF` | `rgb(0, 234, 255)` | **Secondary Accent / Cyan**: Key links, focus rings, badges, glow accents |
| `--parch-skyblue` | `#00A9FF` | `rgb(0, 169, 255)` | **Sky Blue**: Gradient stops, secondary links, hover highlights |
| `--parch-neongreen`| `#00FF80` | `rgb(0, 255, 128)` | **Neon Green**: Success status, action accents, terminal prompts |
| `--parch-brightgreen`| `#00FF95` | `rgb(0, 255, 149)` | **Bright Green**: Top flame accent, feature badges, notifications |

### 2.2 Surface & Elevation Tokens (Dark Mode — Default)

Parch Linux defaults to a deep, high-contrast dark theme engineered for visual clarity and reduced eye strain:

| Surface Token | Hex Value | Role |
| :--- | :--- | :--- |
| `--parch-bg` | `#0c1017` | **Base Background**: App canvas, body background |
| `--parch-card-bg` | `#151c28` | **Card & Surface Background**: Content containers, panels, modals |
| `--parch-border` | `#212c3d` | **Borders & Dividers**: Crisp 1px structural boundaries |
| `--parch-text` | `#e2e8f0` | **Primary Text**: Main body copy, table text |
| `--parch-text-muted` | `#94a3b8` | **Muted Text**: Subtitles, metadata, placeholders |
| `--parch-pre-bg` | `#080c12` | **Terminal / Code Canvas**: Code blocks, pre tags, terminal outputs |

### 2.3 Surface & Elevation Tokens (Light Mode)

| Surface Token | Hex Value | Role |
| :--- | :--- | :--- |
| `--parch-bg` | `#f8fafc` | **Base Background**: Soft slate off-white canvas |
| `--parch-card-bg` | `#ffffff` | **Card Background**: Pure white panels and cards |
| `--parch-border` | `#e2e8f0` | **Borders & Dividers**: Crisp subtle gray stroke |
| `--parch-text` | `#0f172a` | **Primary Text**: Deep slate readability text |
| `--parch-text-muted` | `#64748b` | **Muted Text**: Secondary text, footnotes |
| `--parch-pre-bg` | `#f1f5f9` | **Terminal / Code Canvas**: Light preformatted code area |

### 2.4 Gradients

```css
/* Official 3-stop Brand Gradient */
--parch-gradient-brand: linear-gradient(135deg, #00EAFF 0%, #0080FF 50%, #00FF80 100%);

/* Subtle Ambient Glows (low opacity) */
--parch-radial-1: rgba(0, 234, 255, 0.08);
--parch-radial-2: rgba(0, 169, 255, 0.06);
--parch-radial-3: rgba(0, 128, 255, 0.05);

3. Typography Architecture

3.1 Strict Font Hierarchy

Context Primary Font Fallback / Secondary Purpose
Persian UI Estedad (استعداد) Vazirmatn, sans-serif Web apps, desktop menus, buttons, dialogues, headings
English / Latin UI Saira Estedad, sans-serif Latin menus, headings, navigation links, labels
Code / Terminal Fira Code JetBrains Mono, monospace Roff man pages, command snippets, configuration files
Persian Logotype Morabba (مُرَبَّع) — Official brand headers, banners, hero displays
Latin Logotype Saira (Bold/Black) — Wordmark brand text (Parch Linux)
General Brand Typography Morabba, Raleway, Estedad, Saira — Marketing, slide decks, social graphics

3.2 CSS Font-Face Declarations

When self-hosting fonts for Parch web applications:

@font-face {
    font-family: 'Estedad';
    src: url('fonts/Estedad[wght].woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('fonts/Saira[wght].woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Code';
    src: url('fonts/FiraCode[wght].woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

body, button, input, select, textarea {
    font-family: 'Estedad', 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

code, pre, .manual-text pre, .man-page-content pre {
    font-family: 'Fira Code', ui-monospace, monospace !important;
}

.parch-brand-text, .nav-menu, [lang="en"], .lang-en {
    font-family: 'Saira', 'Estedad', -apple-system, sans-serif;
}

4. Layout & Surface Rules: Solid Flat Modern

The Parch Linux design system enforces a solid flat modern design aesthetic.

4.1 The Ironclad Rule: NO Glassmorphism / NO Blur

  • :cross_mark: STRICTLY FORBIDDEN: backdrop-filter: blur(...) or -webkit-backdrop-filter: blur(...).
  • :cross_mark: NO translucent muddy cards: Never use low-opacity backgrounds (like rgba(255, 255, 255, 0.05)) over complex elements that blur readability.
  • :cross_mark: NO frosted glass effects: Frosted glass degrades contrast, consumes GPU resources, and conflicts with the Parch guideline.
  • :white_check_mark: ALWAYS USE SOLID SURFACES: Use solid #151c28 in dark mode and #ffffff in light mode with crisp 1px borders (#212c3d / #e2e8f0).

4.2 Radii & Geometry

  • Buttons & Small Controls: 9px (--d-button-border-radius: 9px).
  • Cards, Containers & Panels: 12px (border-radius: 12px).
  • Search Inputs & Pill Badges: Full pill 9999px (border-radius: 9999px or 50px).
  • Borders: 1px solid stroke. Never double borders or thick borders unless an active focus ring (outline: 2px solid var(--parch-primary)).

5. UI Component Specifications

5.1 Navigation Bar (Navbar)

  • Layout: Fixed or sticky top bar, 100% width, maximum inner container width 1280px or 1650px.
  • Background: Solid #0c1017 (Dark) / #ffffff (Light) with 1px solid bottom border (#212c3d / #e2e8f0).
  • Branding Lockup: Logo icon (32x32px) accompanied by “Parch” in white/slate and “Manuals” or service descriptor in cyan (#00EAFF).
  • Navigation Controls: Pill containers wrapping nav links (border-radius: 9px), with active/hover indicator in cyan muted (rgba(0, 234, 255, 0.12)).

5.2 Search Bar & Form Inputs

  • Shape: Rounded pill or clean rounded rectangle (9px to 9999px).
  • Styling:
    • Background: #151c28 (Dark) / #ffffff (Light).
    • Border: 1px solid #212c3d (Dark) / #cbd5e1 (Light).
    • Placeholder: Muted #94a3b8, clean ellipsis truncation.
    • Focus State: Border color shifts to #0080FF or #00EAFF with a subtle glow: box-shadow: 0 0 0 3px rgba(0, 234, 255, 0.15).
  • RTL Integrity: In RTL mode, search buttons must NEVER overlap the input text or placeholder. Always place input and submit button as distinct flex items or ensure adequate padding (padding-inline-end).

5.3 Buttons

  1. Primary Button:
    • Background: linear-gradient(135deg, #00EAFF 0%, #0080FF 50%, #00FF80 100%) or solid #0080FF.
    • Text color: Dark #0c1017 (on gradient) or #ffffff (on solid #0080FF).
    • Font weight: 600 / Semi-Bold.
    • Hover: Subtle scale transform: translateY(-1px) or opacity transition.
  2. Secondary / Outline Button:
    • Background: Transparent.
    • Border: 1px solid #0080FF or #00EAFF.
    • Text color: #00EAFF (Dark) / #0080FF (Light).
    • Hover: background: rgba(0, 234, 255, 0.10).

5.4 Segmented Controls & Filter Pills

  • Outer container: Solid surface with 1px border.
  • Active pill item: Solid brand background or cyan accent text with subtle active pill fill.
  • Font: Saira for numbers/code, Estedad for Persian text.

5.5 Code Blocks, Monospace & BiDi Rules

  • Container: Solid #080c12 background, 1px #212c3d border, rounded 9px.
  • Direction & BiDi:
    • Code syntax, commands, terminal outputs: Strictly LTR (direction: ltr !important; text-align: left !important; unicode-bidi: isolate !important;).
    • Font: Fira Code, monospace.
    • Explanatory paragraphs: RTL (direction: rtl; text-align: right;) using Estedad.
    • Inline code (code, tt): Isolated so English command names do not scramble Persian punctuation:
      unicode-bidi: isolate; display: inline-block; vertical-align: 0.05em;

6. Logo Anatomy, Geometry & Usage Guidelines

6.1 The 5 Logo Segments (Color Mapping)

When rendering vector SVGs or coloring the Parch flame emblem, map segments precisely:

          / \
         /   \
        ( #00FF95 )    <-- Top teardrop curve (Bright Green)
       /     /
     / #00A9FF \       <-- Upper left sector (Sky Blue)
    |  (Sky Blue)\
    |     \ #00EAFF \  <-- Middle right polygon (Cyan)
    |  #0080FF \      |
     \ (Primary \     |
       \  Blue)  \   /
         \  #00FF80 /  <-- Bottom curved base (Neon Green)
           \_______/

6.2 Monochrome Lockups

  • On dark backgrounds: Solid white (#ffffff).
  • On light backgrounds: Solid black / deep charcoal (#0c1017).
  • Always maintain clear space around the emblem equal to at least 1/3 of the logo width.

6.3 Photography & Media Rule: “Frame, Don’t Watermark!”

  • The Golden Rule: Instead of watermarking images, frame them! (بجای واترمارک کردن تصاویر، قاب بگیرید!).
  • Place a solid white or black outer frame around the screenshot/photo with rounded corners, and embed the Parch lockup in the lower or upper corner.
  • Contrast Protection:
    • Never place a dark logo directly on dark or busy backgrounds.
    • Never place a light logo directly on light backgrounds.
    • When using photo backgrounds, use the pure white monochrome logo or a solid contrast badge.
    • Never distort, stretch, skew, or rearrange the logo pieces.

7. Master CSS Variables Reference

Copy and paste this token block into any Parch Linux web project:

:root {
    color-scheme: dark;

    /* Official Parch Brand Palette */
    --parch-blue: #0080FF;
    --parch-cyan: #00EAFF;
    --parch-skyblue: #00A9FF;
    --parch-green: #00FF80;
    --parch-neongreen: #00FF80;
    --parch-brightgreen: #00FF95;

    /* Functional Accents */
    --parch-primary: #0080FF;
    --parch-primary-dark: #0060c0;
    --parch-secondary: #00EAFF;
    --parch-accent: #00A9FF;

    /* Dark Mode Surfaces (Default) */
    --parch-bg: #0c1017;
    --parch-card-bg: #151c28;
    --parch-border: #212c3d;
    --parch-card-border: #212c3d;
    --parch-navbar-bg: #0c1017;
    --parch-footer-bg: #0c1017;
    --parch-input-bg: #151c28;
    --parch-input-border: #212c3d;
    --parch-input-text: #f1f5f9;
    --parch-pre-bg: #080c12;
    --parch-pre-border: #212c3d;
    --parch-text: #e2e8f0;
    --parch-text-muted: #94a3b8;
    --parch-link: #00EAFF;
    --parch-link-hover: #00A9FF;

    /* Radii & Animation */
    --parch-radius-btn: 9px;
    --parch-radius-card: 12px;
    --parch-radius-pill: 9999px;
    --parch-trans-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="light"] {
    color-scheme: light;

    /* Light Mode Surfaces */
    --parch-bg: #f8fafc;
    --parch-card-bg: #ffffff;
    --parch-border: #e2e8f0;
    --parch-card-border: #e2e8f0;
    --parch-navbar-bg: #ffffff;
    --parch-footer-bg: #f8fafc;
    --parch-input-bg: #ffffff;
    --parch-input-border: #cbd5e1;
    --parch-input-text: #0f172a;
    --parch-pre-bg: #f1f5f9;
    --parch-pre-border: #e2e8f0;
    --parch-text: #0f172a;
    --parch-text-muted: #64748b;
    --parch-link: #0080FF;
    --parch-link-hover: #0060c0;
}

8. Anti-Patterns Checklist (Never Do This in Parch Projects)

  1. :cross_mark: Do NOT use glassmorphism or backdrop-filter: blur(): Parch is built on crisp, solid flat modern surfaces.
  2. :cross_mark: Do NOT mix Latin fonts into Persian body copy: Always use Estedad for Persian text. Never let Arial, Tahoma, or generic serif fonts render Persian.
  3. :cross_mark: Do NOT allow BiDi text scrambles: Wrap terminal commands and LTR package names in <bdi>, <code dir="ltr">, or unicode-bidi: isolate.
  4. :cross_mark: Do NOT clutter minimal interfaces: Do not turn simple, functional Unix/Linux tools into crowded marketing dashboards. Keep man pages and technical tools clean, fast, and keyboard-friendly.
  5. :cross_mark: Do NOT distort the Parch logo: Maintain original aspect ratio, correct segment color order, and generous clear space.
2 Likes