# UI/UX Design System & Style Guide (Based on daylog old UI Reference)

This document serves as the **Single Source of Truth** for all frontend development. The `frontend-design` skill must adhere strictly to these visual tokens extracted from the reference dashboard.

---

## 1. Color Palette & Dark Theme Mapping

The `frontend-design` skill must use these semantic tokens. When `class="dark"` is present on the body/html, switch to the Dark Variant.

| Token                | Light Theme (Default) | Dark Theme Variant | Usage                                               |
| :------------------- | :-------------------- | :----------------- | :-------------------------------------------------- |
| `bg-main`            | #FFFFFF               | #0A0A0A            | Main application background                         |
| `bg-sidebar`         | #F8F8F8               | #121212            | Sidebar and secondary panels                        |
| `bg-surface`         | #FFFFFF               | #1C1C1E            | Cards, Modals, and Note containers                  |
| `text-primary`       | #000000               | #E5E5E5            | Main titles and primary text (Reduced Stress White) |
| `text-secondary`     | #6B7280               | #9CA3AF            | Subtitles and descriptions                          |
| `text-muted`         | #9CA3AF               | #6B7280            | Breadcrumbs and metadata                            |
| `border-default`     | #F3F4F6               | #2D2D2E            | Dividers and card outlines                          |
| `accent-pink`        | #FBCFE8               | #321626            | Darker pink base for tags                           |
| `text-accent-pink`   | #DB2777               | #F472B6            | Lighter pink text for readability                   |
| `accent-red`         | #FEE2E2               | #450A0A            | Soft red base for danger elements                   |
| `text-accent-red`    | #DC2626               | #F87171            | High-contrast red for text/actions                  |
| `accent-yellow`      | #FACC15               | #FACC15            | Bright yellow base highlighting                     |
| `text-accent-yellow` | #422006               | #422006            | High-contrast dark text over yellow background      |

## 2. Dark Mode Specific Rules

1. **Elevation:** In Dark Mode, do not use drop shadows. Instead, use a slightly lighter background color (`bg-surface`) to indicate that an element is "closer" to the user.
2. **Contrast:** Ensure all form borders in Dark Mode use `#3F3F46` so they remain visible against the `#0A0A0A` background.
3. **Images/Icons:** Reduce the brightness of images by 10% (filter: brightness(.9)) in Dark Mode to prevent eye strain.
4. **Scrollbars:** Use a dark-themed scrollbar (`thumb: #3F3F46`) when Dark Mode is active.
5. **Reduced Stress White:** Use `#E5E5E5` for primary text in dark mode to reduce eye strain.

## 3. Geometry & Shape

- **Border Radius:**
  - `radius-sm`: 6px (Input focus, small elements).
  - `radius-md`: 12px (Action buttons like "Create Board", sidebar items).
  - `radius-lg`: 20px (Main cards, "My First Board" image, "Recent Notes" container).
- **Cards:** White background with a very subtle `1px` border (no heavy shadows).

## 4. Typography Hierarchy

- **Font Family:** 'Jakarta' or 'Geist', sans-serif. Tight letter-spacing for headings.
- **H1 (Welcome Title):** 36px | Extra Bold (800) | Black.
- **H2 (Section Titles):** 24px | Bold (700) | Black.
- **Body Text:** 16px | Regular (400) | Grey-600.
- **Metadata/Breadcrumbs:** 12px | Medium (500) | Uppercase | Grey-400.

## 5. Layout Specifics

- **Sidebar Width:** 80px (Icon-only sidebar when is collapsed) and 240px (when is expanded).
- **Content Padding:** Large breathing room (40px to 60px padding on main containers).
- **Grid:** Use a clean 2-column or 3-column layout for "Boards" and masonry layout for "Notes".

## 6. Implementation Rules

1. **Consistency Check:** Every new page must use the #000000 Bold H1 and the #6B7280 secondary text.
2. **Component Style:** "Create Board" should be a dashed-border card with #F3F4F6 background and centered content.
3. **Note Cards:** Must feature a white background, `20px` radius, and a separator line above the bottom meta-info.

## 7. Form & Input Consistency (New)

To maintain the "clean and spacious" look from the dashboard, all forms must follow these strict rules:

### A. Input Anatomy

- **Height:** Standardized at `48px` for main inputs and `40px` for secondary ones.
- **Border Radius:** Always use `radius-md` (12px) to match the "Create Board" button style.
- **Background:** - Default: `#FFFFFF` (White) with a `1px` border in `#E5E7EB`.
  - Focused: Background stays white, but border changes to `#000000` or adds a `2px` ring.
- **Placeholder Text:** Use `text-muted` (#9CA3AF) in `14px` Regular.

### B. Form Layout

- **Labels:** Must be `12px` Bold, All-Caps, using `text-secondary` (#6B7280). Always placed 8px above the input.
- **Spacing:** Vertical gap of `8px` between form fields to maintain the "airy" feel of the dashboard.
- **Validation:** - Error states must use a soft red border and `12px` error text below the input.
  - Never shift the layout when showing error messages (use absolute positioning or reserved space).

### C. Buttons in Forms

- **Primary Action:** Black background (#000000), white text, `radius-md` (12px), centered or full-width depending on modal size.
- **Secondary/Cancel:** Transparent background with `text-secondary` (#6B7280), no border, or subtle grey background (#F3F4F6).
- **Danger Action:** Use `accent-red` background with `text-accent-red` text for soft danger actions, or solid `bg-red-600` with white text for critical destructive actions.

### D. Danger Alerts & Elements

- **Alert Backgrounds:** Use `accent-red` for the background block to ensure visual distinction.
- **Alert Text/Icons:** Use `text-accent-red` for high contrast and to signify danger/error states.

---

## 8. Destructive Confirmation Dialogs

Use this pattern for **any action that is permanent or removes access** (delete note, delete board, remove shared content, revoke permissions, etc.). Do NOT use `AlertDialog` — always use `Dialog` with the structure below.

### Structure

```
Dialog (max-w-[480px], p-10)
├── DialogHeader (mb-6)
│   ├── Label — "Security Verification" in text-destructive
│   └── DialogTitle — action name (e.g. "Delete Note", "Remove Shared Content")
├── Body (space-y-8)
│   ├── <p> — plain-language description of what will happen, mentions the item name
│   └── Warning box — bg-[var(--color-accent-red)], rounded-[12px], border border-destructive/20
│       └── <p> — AlertOctagon icon + short warning text, text-[12px] text-destructive font-medium
└── DialogFooter (mt-8)
    ├── Cancel button — variant="ghost", rounded-[12px], text-muted-foreground, font-bold
    └── Confirm button — variant="danger", font-bold, px-8, shadow-none
```

### Rules

1. **Always use `Dialog` with `open`/`onOpenChange` state** — not `AlertDialog`, which lacks the required visual structure.
2. **Label above title** reads "Security Verification" (translated) in `text-destructive`.
3. **Warning box** uses `bg-[var(--color-accent-red)]` and an `AlertOctagon` icon from `lucide-react`.
4. **Cancel** is ghost, never outlined; it closes the dialog without side effects.
5. **Confirm** uses `variant="danger"` (not `variant="destructive"`). Show a loading label (e.g. "Deleting...") while the async action runs.
6. **Close the dialog** after a successful action, before calling `router.refresh()`.
7. **Translations** must include: `security`, `title/confirm`, `description` (with item name interpolation), `warning`, `cancel`, `deleting/removing` (loading state), `confirmButton`.

---

## 10. Implementation Rules for AI

1. **Consistency Check:** Every new page must use the #000000 Bold H1 and the #6B7280 secondary text.
2. **Form Generation:** When the `frontend-design` skill generates a form, it must ensure all `input`, `select`, and `textarea` elements share the exact same `12px` border-radius and `#E5E7EB` border color.
3. **Note Cards:** Must feature a white background, `20px` radius, and a separator line above the bottom meta-info.

---

_Reference Image: daylog old UI - Updated Feb 2026_