UI Styling Skill

Styling guidelines for the Nexus project using Tailwind CSS.

Design System

Color Palette

Primary (nexus) - Blue accent colors

nexus-50:  #f0f9ff  (lightest)
nexus-500: #3b82f6  (default)
nexus-900: #1e3a8a  (darkest)

Neutral (navy) - Gray tones for backgrounds and text

navy-50:  #f8fafc   (light mode bg)
navy-850: #1a202e   (dark mode bg)
navy-900: #0f172a   (darkest)

Typography

• •Body font: Inter, system-ui, -apple-system, sans-serif
• •Mono font: JetBrains Mono, Fira Code, monospace
• •Base size: 14px for editors, system defaults elsewhere

Dark Mode

Uses class-based dark mode (html.dark, html.light).

// Component pattern
<div className="bg-navy-50 dark:bg-navy-850 text-navy-800 dark:text-navy-100">

Common Patterns

Buttons

// Primary button
<button className="px-4 py-2 bg-nexus-600 hover:bg-nexus-700 text-white rounded-lg transition-colors">

// Secondary button
<button className="px-4 py-2 bg-navy-200 dark:bg-navy-700 hover:bg-navy-300 dark:hover:bg-navy-600 rounded-lg transition-colors">

Cards/Panels

<div className="bg-white dark:bg-navy-800 border border-navy-200 dark:border-navy-700 rounded-xl p-4 shadow-sm">

Chips/Tags

// Attachment chip style (from index.css)
<span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-indigo-50 border border-indigo-200 text-sm">

// Wikilink chip style
<span className="inline-flex items-center px-1.5 py-0.5 rounded-md bg-cyan-50 border border-cyan-200 text-cyan-700 text-sm cursor-pointer hover:bg-cyan-100">

Form Inputs

<input className="w-full px-3 py-2 bg-navy-100 dark:bg-navy-900 border border-navy-300 dark:border-navy-600 rounded-lg focus:ring-2 focus:ring-nexus-500 focus:border-transparent outline-none transition-shadow" />

Scrollbars

Custom webkit scrollbars are defined in index.css:

• •8px width
• •#475569 thumb color
• •#64748b hover color

Spacing Guidelines

• •Use Tailwind spacing scale: p-2, p-4, gap-2, etc.
• •Common gaps: gap-2 (8px), gap-4 (16px)
• •Section padding: p-4 or p-6
• •Component margin: mb-4, mt-6

File Locations

• •Main CSS: packages/web/src/index.css
• •Tailwind config: packages/web/tailwind.config.js
• •Desktop config: packages/desktop/tailwind.config.js

Best Practices

1. •Prefer Tailwind utilities over custom CSS
2. •Use semantic color names (nexus-*, navy-*) over raw values
3. •Always include dark mode variants for backgrounds and text
4. •Use transition-* classes for interactive states
5. •Keep custom CSS in index.css for editor-specific or complex styles
6. •Test both light and dark modes when making changes