AI Directory Styling Rules
Prompt use to generate styling for this AI Directory.
Prompt use to generate styling for this AI Directory.
--- description: globs: alwaysApply: true --- ## Application Design Rules These rules define the visual language and interaction patterns for the New Horizon Code AI directory. ### Principles - **Monochrome only**: Strict black & white palette. No color accents besides grayscale. - **Minimal, breathable, typographic**: Favor whitespace, strong hierarchy, and clarity. - **No shadows**: Depth is communicated via spacing and borders only. - **Consistency via tokens**: Use Tailwind CSS variables from `app/globals.css` and Shadcn/ui components. - **Responsive-first**: Single-column bias with clean, scalable grids. ### Color & Theme - **Palette**: Use Tailwind CSS tokens (`bg-background`, `text-foreground`, `border-border`, `accent`) only. - **Light/Dark**: Support both via `next-themes`. Do not hardcode hex colors. Respect CSS vars. - **Borders**: 1px borders using `border` + `border-border`. No drop shadows. - **States**: Hover/active via subtle background shifts (`hover:bg-accent`) and underline links. ### Typography - **Typeface**: Geist for sans. Geist Mono for code. - **Scale**: Prefer `text-base` for body, restrained heading sizes (`text-2xl`/`text-3xl` primary; avoid >`text-5xl`). - **Tracking**: Use `tracking-tight` for hero headlines. - **Readability**: Max line width ≈ 65–80ch. Use `max-w-2xl/3xl` for long text. ### Spacing & Layout - **Container**: Use `Container` (`max-w-6xl`, horizontal padding `px-6 sm:px-8`). - **Sections**: Separate sections with `border-t/b border-border/70` and generous `py-12+`. - **Grids**: `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3` with `gap-6`. - **Radius**: `rounded-none` everywhere unless the Shadcn component requires otherwise. ### Components - **Buttons**: Shadcn `<Button>`. Variants `default`, `outline`, `ghost`. Always `rounded-none`. - **Cards**: Use `Card` without shadows and without rounded corners. Add explicit `border` + `rounded-none` if needed. - **Inputs**: Shadcn inputs with clear labels. Use `rounded-none`. Include `aria-label` where applicable. - **Chips/Filters**: Links or buttons with `text-sm border px-3 py-1` and active `bg-accent`. - **ToolCard**: Left-aligned logo container (48–64px), name, short description (2 lines max), pricing/cat meta. - **Header**: Minimal top bar, inline search (Enter to submit), Theme toggle, no dividers beyond `border-b`. - **Footer**: Minimal text-only, `border-t` separator. - **Skeletons**: Use Shadcn `Skeleton`; keep blocks simple and rectangular. - **Empty States**: Single-sentence explanation in `text-sm text-muted-foreground`. ### Interactions - **Focus**: Visible focus with ring/border tokens. Do not remove focus styles. - **Hover**: Subtle background/border changes only. No scaling, no shadow. - **Active/Pressed**: Slightly stronger accent background or border. - **Animations**: Minimal; respect `prefers-reduced-motion`. ### Icons & Imagery - **Icons**: Lucide. Monochrome. Keep size ≤ 16–20px in dense UI; ≤ 24px in spacious UI. - **Logos**: `object-contain`; fixed square container with border. - **Screenshots**: Use optimized images. Prefer static aspect ratios; lazy-load non-critical. ### Accessibility - **Landmarks**: Header, `main#main`, Footer. Include a skip link. - **Keyboard**: All interactive elements reachable with clear focus styles. - **Labels**: Inputs must have `<label>` or `aria-label`. - **Contrast**: Meet WCAG AA. Rely on theme tokens. - **ARIA**: Use `aria-current` for breadcrumbs; `aria-label` on icon-only controls. ### Content & SEO - **Headlines**: Short, descriptive. Avoid marketing fluff. - **Microcopy**: Plain language. Sentence case. - **Metadata**: Pages define `Metadata`; tool pages render JSON-LD `SoftwareApplication`, OG/Twitter, canonical, breadcrumbs. ### Performance - **Rendering**: Use SSG/ISR for public pages. Revalidate conservatively (e.g., 60s). - **Prefetching**: Enable Next.js link prefetch (default) and consider hover prefetch for detail pages. - **Images**: Use `next/image` for logos when possible; lazy-load screenshots; set width/height. - **JS**: Keep client components minimal; prefer server components for data fetching. ### Do / Don’t - **Do**: Use borders, spacing, and typography to create structure. - **Do**: Keep components airy; use `gap-6` and generous paddings. - **Don’t**: Add shadows, colored accents, gradients, or rounded corners. - **Don’t**: Nest dense boxes; avoid card-in-card patterns unless necessary. ### Code Conventions (UI) - **Classes**: Prefer semantic Tailwind classes and tokens (`bg-background`, `text-foreground`). - **State in URL**: Keep filter/search state in query params on `/tools`. - **Shadcn**: Use library variants; avoid bespoke one-off components. This document governs new UI work and reviews. Deviations should be justified and documented.
