# Lofi Login Screen — Artwork Specification

## Concept

Một màn hình đăng nhập desktop mang cảm giác “phòng nhạc đêm”: yên tĩnh, ấm, hơi hoài niệm nhưng vẫn đủ rõ ràng để sử dụng. Visual language ưu tiên giấy ấm, kính mờ, ánh đèn cam và các chi tiết hình học tối giản.

## Canvas & layout

- Canvas: `1440 × 1024 px`, desktop 16:10.
- Main glass card: `1100 × 800 px`, bo góc `28 px`, đặt giữa canvas.
- Internal split: visual/brand area khoảng `48%`, form area khoảng `52%`.
- Form width: `388 px`; field height `56 px`; button height `58 px`.
- Spacing rhythm: baseline `8 px`, primary gaps `24–32 px`.
- Artwork file: `docs/design/lofi-login-screen.svg`.

## Art direction

- Style: lofi nocturne, cozy dark mode, soft glassmorphism, grain nhẹ, editorial typography.
- Mood: dịu, riêng tư, tập trung, không quá “cyberpunk”.
- Illustration: mascot hình mèo/trăng trừu tượng, nét phẳng mềm, không dùng icon hệ thống chung chung.
- Lighting: ambient navy background, warm amber key light, muted mauve secondary glow.
- Texture: film grain rất nhẹ, không làm giảm độ tương phản của form.

## Palette

- Background navy: `#18212A` / HSL `207 27% 13%`.
- Deep surface: `#10171D` / HSL `205 28% 9%`.
- Warm cream text: `#F6E9D8` / HSL `33 65% 91%`.
- Muted beige text: `#CBB8A7` / HSL `29 25% 70%`.
- Amber accent/button: `#D89B68` / HSL `26 58% 63%`.
- Mauve glow: `#9F7FB0` / HSL `281 24% 59%`.
- Cool sage detail: `#7B8E8D` / HSL `177 8% 52%`.

## Image-generation prompt

`A polished desktop login screen mockup for a fictional cozy journaling app called “moonroom”, lofi nocturne art direction, dark navy glassmorphism panel centered on a 1440x1024 canvas, warm amber desk-lamp glow, muted mauve atmospheric bloom, subtle film grain, split layout with a small abstract moon-cat mascot and brand lockup on the left, clean email and password fields on the right, warm cream editorial serif heading “Welcome back”, muted beige helper copy, amber rounded primary button, tiny hand-crafted mascot illustration in a quote card, calm intimate bedroom-at-night mood, soft shadows, premium product design presentation, high contrast readable UI, no generic system icons, no gradients inside form fields, no extra screens, no browser chrome.`

## Negative prompt

`generic stock dashboard, neon cyberpunk, excessive glass blur, harsh pure black and white, corporate blue SaaS, 3D photorealism, cluttered decorations, placeholder boxes, system emoji, generic icon pack, illegible text, distorted typography, extra buttons, mobile layout.`

## Export notes

- Keep the SVG at native `1440 × 1024` for handoff.
- Raster preview target: PNG, `2880 × 2048 px`, 2× scale.
- Preserve the amber button, cream heading, and field outlines as the primary contrast anchors.