Prompt file imported from cyrmee/hisab (.github/prompts/design.prompt.md). Copyright stays with the author.

📐 Design Style Guide — Modern Look & Feel (Compact)

Name: design
Author: cyrmee

🎨 Theme

Light & Dark mode with color tokens:
- --color-primary, --color-secondary, --color-background, --color-surface, --color-text.
Use soft greys instead of pure black for dark mode backgrounds.
Maintain consistent color usage across all components.

🔤 Typography

Max 2 font families (e.g., Inter + system fallback).
Define a compact scale:
- H1: 20–24px
- H2: 18–20px
- Body: 14–16px
- Caption: 12px
Ensure legibility on small devices.

🧩 UI Components

Shared patterns:
- Corner radius: 8–12px (not oversized).
- Shadows: subtle (sm or md elevation).
- Padding scale: 8–16px inside components.
Keep elements centered with equal margin/padding.
Buttons, inputs, and cards should feel balanced & compact, not oversized.

↔️ Spacing

Use a compact spacing scale: 4, 8, 12, 16, 24.
Keep consistent vertical rhythm.
Center content both vertically & horizontally where possible.

📊 Depth & Layering

Use subtle shadows or elevation for separation.
Apply translucent / blurred overlays (glass effect) only for modals or important highlights.

🎬 Animations

Micro-interactions only (fast & subtle):
- Button press: scale down 0.95x or color ripple.
- Screen transitions: smooth fade/slide (≤250ms).
Use skeleton loaders for async content.

🖼️ Icons & Imagery

Use vector icons (SVG, Icon packs) with consistent weight/style.
Maintain aspect ratios for images (avoid stretching).
Prefer center alignment for icons & illustrations.

🧭 Navigation & Gestures

Familiar bottom tabs or drawer for navigation.
Back gesture support.
Provide visual cues or onboarding for gesture-based navigation.

♿ Accessibility

Text must meet WCAG contrast ratios.
Touch targets ≥44px.
Screen reader support.
Never rely on color alone for state indication.

⚡ Performance

Minimize overdraw (avoid too many transparent/shadow layers).
Lazy load screens/components.
Optimize images, fonts, and assets.

🔁 Consistency

Colors, typography, spacing, and component patterns must be applied uniformly.
Layouts should feel centered, balanced, and compact across all screens.

# 📐 Design Style Guide — Modern Look & Feel (Compact) ## 🎨 Theme - **Light & Dark mode** with color tokens: - `--color-primary`, `--color-secondary`, `--color-background`, `--color-surface`, `--color-text`. - Use **soft greys** instead of pure black for dark mode backgrounds. - Maintain **consistent color usage** across all components. ## 🔤 Typography - Max **2 font families** (e.g., Inter + system fallback). - Define a **compact scale**: - H1: 20–24px - H2: 18–20px - Body: 14–16px - Caption: 12px - Ensure **legibility on small devices**. ## 🧩 UI Components - **Shared patterns**: - Corner radius: 8–12px (not oversized). - Shadows: subtle (`sm` or `md` elevation). - Padding scale: 8–16px inside components. - Keep **elements centered** with equal margin/padding. - Buttons, inputs, and cards should feel **balanced & compact**, not oversized. ## ↔️ Spacing - Use a **compact spacing scale**: 4, 8, 12, 16, 24. - Keep **consistent vertical rhythm**. - Center content both **vertically & horizontally** where possible. ## 📊 Depth & Layering - Use **subtle shadows** or elevation for separation. - Apply **translucent / blurred overlays** (glass effect) only for modals or important highlights. ## 🎬 Animations - **Micro-interactions only** (fast & subtle): - Button press: scale down 0.95x or color ripple. - Screen transitions: smooth fade/slide (≤250ms). - Use **skeleton loaders** for async content. ## 🖼️ Icons & Imagery - Use **vector icons (SVG, Icon packs)** with consistent weight/style. - Maintain **aspect ratios** for images (avoid stretching). - Prefer **center alignment** for icons & illustrations. ## 🧭 Navigation & Gestures - Familiar **bottom tabs** or **drawer** for navigation. - Back gesture support. - Provide **visual cues or onboarding** for gesture-based navigation. ## ♿ Accessibility - Text must meet **WCAG contrast ratios**. - Touch targets ≥44px. - Screen reader support. - Never rely on color alone for state indication. ## ⚡ Performance - Minimize **overdraw** (avoid too many transparent/shadow layers). - **Lazy load** screens/components. - Optimize **images, fonts, and assets**. ## 🔁 Consistency - Colors, typography, spacing, and component patterns must be **applied uniformly**. - Layouts should feel **centered, balanced, and compact** across all screens.

{ "prompt": "# 📐 Design Style Guide — Modern Look & Feel (Compact)\n\n## 🎨 Theme\n- **Light & Dark mode** with color tokens: \n - `--color-primary`, `--color-secondary`, `--color-background`, `--color-surface`, `--color-text`. \n- Use **soft greys** instead of pure black for dark mode backgrounds. \n- Maintain **consistent color usage** across all components. \n\n## 🔤 Typography\n- Max **2 font families** (e.g., Inter + system fallback). \n- Define a **compact scale**: \n - H1: 20–24px \n - H2: 18–20px \n - Body: 14–16px \n - Caption: 12px \n- Ensure **legibility on small devices**. \n\n## 🧩 UI Components\n- **Shared patterns**: \n - Corner radius: 8–12px (not oversized). \n - Shadows: subtle (`sm` or `md` elevation). \n - Padding scale: 8–16px inside components. \n- Keep **elements centered** with equal margin/padding. \n- Buttons, inputs, and cards should feel **balanced & compact**, not oversized. \n\n## ↔️ Spacing\n- Use a **compact spacing scale**: 4, 8, 12, 16, 24. \n- Keep **consistent vertical rhythm**. \n- Center content both **vertically & horizontally** where possible. \n\n## 📊 Depth & Layering\n- Use **subtle shadows** or elevation for separation. \n- Apply **translucent / blurred overlays** (glass effect) only for modals or important highlights. \n\n## 🎬 Animations\n- **Micro-interactions only** (fast & subtle): \n - Button press: scale down 0.95x or color ripple. \n - Screen transitions: smooth fade/slide (≤250ms). \n- Use **skeleton loaders** for async content. \n\n## 🖼️ Icons & Imagery\n- Use **vector icons (SVG, Icon packs)** with consistent weight/style. \n- Maintain **aspect ratios** for images (avoid stretching). \n- Prefer **center alignment** for icons & illustrations. \n\n## 🧭 Navigation & Gestures\n- Familiar **bottom tabs** or **drawer** for navigation. \n- Back gesture support. \n- Provide **visual cues or onboarding** for gesture-based navigation. \n\n## ♿ Accessibility\n- Text must meet **WCAG contrast ratios**. \n- Touch targets ≥44px. \n- Screen reader support. \n- Never rely on color alone for state indication. \n\n## ⚡ Performance\n- Minimize **overdraw** (avoid too many transparent/shadow layers). \n- **Lazy load** screens/components. \n- Optimize **images, fonts, and assets**. \n\n## 🔁 Consistency\n- Colors, typography, spacing, and component patterns must be **applied uniformly**. \n- Layouts should feel **centered, balanced, and compact** across all screens.", "variables": [], "notes": "📐 Design Style Guide — Modern Look & Feel (Compact) Mode: agent.", "metadata": { "source": { "provider": "github-prompts", "repository": "https://github.com/cyrmee/hisab", "path": ".github/prompts/design.prompt.md", "ref": "55e8b1c6006a1f531a13ca7f2cdff01694e3a2fc", "url": "https://github.com/cyrmee/hisab/blob/55e8b1c6006a1f531a13ca7f2cdff01694e3a2fc/.github/prompts/design.prompt.md", "key": "cyrmee/hisab/.github/prompts/design.prompt.md" } } }

design

About