From bf6b2820b6194afa72654a6c8aaa6f2829e70eaa Mon Sep 17 00:00:00 2001
From: Patsy <homedesktopaliasemai.thrift094@passmail.net>
Date: Wed, 22 Jul 2026 21:48:24 +0200
Subject: [PATCH] all bulletjournal version 1 completed

---
 .python-version                               |   1 +
 app/__init__.py                               |  47 ++
 app/auth.py                                   |  55 ++
 app/models.py                                 |  94 +++
 app/routes.py                                 | 365 ++++++++++
 app/static/style.css                          | 662 ++++++++++++++++++
 app/templates/base.html                       |  56 ++
 app/templates/daily_log.html                  | 308 ++++++++
 app/templates/daily_log_form.html             |  77 ++
 app/templates/entry_detail.html               |  67 ++
 app/templates/entry_form.html                 | 152 ++++
 app/templates/entry_list.html                 |  33 +
 app/templates/index.html                      | 153 ++++
 app/templates/log_list.html                   |  33 +
 app/templates/login.html                      |  52 ++
 app/templates/register.html                   |  52 ++
 app/templates/settings.html                   |  61 ++
 cline.md                                      | 176 +++++
 cline2.md                                     | 119 ++++
 config.py                                     |   7 +
 migrations/README                             |   1 +
 migrations/alembic.ini                        |  50 ++
 migrations/env.py                             | 113 +++
 migrations/script.py.mako                     |  24 +
 .../versions/001_bullet_journal_migration.py  |  91 +++
 requirements.txt                              |  15 +
 run.py                                        |   5 +
 stzyleguide.md                                | 598 ++++++++++++++++
 28 files changed, 3467 insertions(+)
 create mode 100644 .python-version
 create mode 100644 app/__init__.py
 create mode 100644 app/auth.py
 create mode 100644 app/models.py
 create mode 100644 app/routes.py
 create mode 100644 app/static/style.css
 create mode 100644 app/templates/base.html
 create mode 100644 app/templates/daily_log.html
 create mode 100644 app/templates/daily_log_form.html
 create mode 100644 app/templates/entry_detail.html
 create mode 100644 app/templates/entry_form.html
 create mode 100644 app/templates/entry_list.html
 create mode 100644 app/templates/index.html
 create mode 100644 app/templates/log_list.html
 create mode 100644 app/templates/login.html
 create mode 100644 app/templates/register.html
 create mode 100644 app/templates/settings.html
 create mode 100644 cline.md
 create mode 100644 cline2.md
 create mode 100644 config.py
 create mode 100644 migrations/README
 create mode 100644 migrations/alembic.ini
 create mode 100644 migrations/env.py
 create mode 100644 migrations/script.py.mako
 create mode 100644 migrations/versions/001_bullet_journal_migration.py
 create mode 100644 requirements.txt
 create mode 100644 run.py
 create mode 100644 stzyleguide.md

diff --git a/.python-version b/.python-version
new file mode 100644
index 0000000..7310294
--- /dev/null
+++ b/.python-version
@@ -0,0 +1 @@
+test_flask_bullet
diff --git a/app/__init__.py b/app/__init__.py
new file mode 100644
index 0000000..6c7d48d
--- /dev/null
+++ b/app/__init__.py
@@ -0,0 +1,47 @@
+from flask import Flask
+from flask_sqlalchemy import SQLAlchemy
+from flask_login import LoginManager
+from flask_migrate import Migrate
+import config
+
+db = SQLAlchemy()
+login_manager = LoginManager()
+migrate = Migrate()
+
+# Flask-Login configuration
+login_manager.login_view = 'auth.login'
+login_manager.login_message = 'Please log in to access this page.'
+
+
+def create_app():
+    app = Flask(__name__)
+    app.config.from_object(config.Config)
+
+    # Initialize extensions
+    db.init_app(app)
+    login_manager.init_app(app)
+    migrate.init_app(app, db)
+
+    # Initialize model classes with db instance
+    from .models import init_db_models
+    init_db_models(db)
+
+    # Import model classes (stored on init_db_models function)
+    User = init_db_models.User
+    UserSettings = init_db_models.UserSettings
+    DailyLog = init_db_models.DailyLog
+    DailyLogItem = init_db_models.DailyLogItem
+
+    # Flask-Login user loader (must be defined after User class exists)
+    @login_manager.user_loader
+    def load_user(user_id):
+        return User.query.get(int(user_id))
+
+    # Register blueprints
+    from . import routes
+    app.register_blueprint(routes.bp)
+
+    from . import auth
+    app.register_blueprint(auth.auth_bp)
+
+    return app
\ No newline at end of file
diff --git a/app/auth.py b/app/auth.py
new file mode 100644
index 0000000..3c9ea15
--- /dev/null
+++ b/app/auth.py
@@ -0,0 +1,55 @@
+from flask import Blueprint, render_template, redirect, url_for, request, flash
+from flask_login import login_user, logout_user, login_required
+from . import db
+from .models import init_db_models
+
+# Import model classes (stored on init_db_models function)
+User = init_db_models.User
+
+auth_bp = Blueprint('auth', __name__)
+
+
+@auth_bp.route('/login', methods=['GET', 'POST'])
+def login():
+    if request.method == 'POST':
+        username = request.form.get('username')
+        password = request.form.get('password')
+
+        user = User.query.filter_by(username=username).first()
+
+        if not user or not user.check_password(password):
+            flash('Invalid username or password.')
+            return redirect(url_for('auth.login'))
+
+        login_user(user)
+        return redirect(url_for('main.index'))
+
+    return render_template('login.html')
+
+
+@auth_bp.route('/logout')
+@login_required
+def logout():
+    logout_user()
+    return redirect(url_for('auth.login'))
+
+
+@auth_bp.route('/register', methods=['GET', 'POST'])
+def register():
+    if request.method == 'POST':
+        username = request.form.get('username')
+        password = request.form.get('password')
+
+        if User.query.filter_by(username=username).first():
+            flash('Username already exists.')
+            return redirect(url_for('auth.register'))
+
+        user = User(username=username)
+        user.set_password(password)
+        db.session.add(user)
+        db.session.commit()
+
+        flash('Registered successfully. Please log in.')
+        return redirect(url_for('auth.login'))
+
+    return render_template('register.html')
\ No newline at end of file
diff --git a/app/models.py b/app/models.py
new file mode 100644
index 0000000..c28caf4
--- /dev/null
+++ b/app/models.py
@@ -0,0 +1,94 @@
+from flask_login import UserMixin
+from datetime import datetime
+from werkzeug.security import generate_password_hash, check_password_hash
+
+
+# Sleep quality and status choices for validation
+SLEEP_QUALITY_CHOICES = ['poor', 'fair', 'good', 'excellent']
+STATUS_CHOICES = ['todo', 'doing', 'done', 'cancelled']
+ITEM_TYPE_CHOICES = ['bullet', 'gratitude', 'sleep', 'note', 'task']
+
+
+def init_db_models(db):
+    """Initialize all model classes with the SQLAlchemy instance.
+    
+    Call this once in create_app() after db is created.
+    """
+    
+    class User(UserMixin, db.Model):
+        __tablename__ = 'user'
+        id = db.Column(db.Integer, primary_key=True)
+        username = db.Column(db.String(64), unique=True, nullable=False)
+        password_hash = db.Column(db.String(128), nullable=False)
+
+        logs = db.relationship('DailyLog', backref='user', lazy=True, cascade='all, delete-orphan')
+
+        def set_password(self, password):
+            self.password_hash = generate_password_hash(password)
+
+        def check_password(self, password):
+            return check_password_hash(self.password_hash, password)
+
+    class UserSettings(db.Model):
+        __tablename__ = 'user_settings'
+        id = db.Column(db.Integer, primary_key=True)
+        user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False, unique=True)
+        theme = db.Column(db.String(10), default='light')
+        font_size = db.Column(db.Integer, default=18)
+        created_at = db.Column(db.DateTime, default=datetime.utcnow)
+        updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+    class DailyLog(db.Model):
+        __tablename__ = 'daily_log'
+        id = db.Column(db.Integer, primary_key=True)
+        date = db.Column(db.Date, unique=True, nullable=False)
+        prompt = db.Column(db.Text, nullable=True)
+        notes = db.Column(db.Text, nullable=True)
+        gratitude = db.Column(db.JSON, default=list)
+        bedtime = db.Column(db.String(20), nullable=True)
+        wake_time = db.Column(db.String(20), nullable=True)
+        sleep_quality = db.Column(db.String(10), nullable=True)  # Enum stored as string
+        mood = db.Column(db.String(50), nullable=True)
+        user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+        created_at = db.Column(db.DateTime, default=datetime.utcnow)
+        updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+        items = db.relationship('DailyLogItem', backref='log', lazy=True, cascade='all, delete-orphan')
+
+        @property
+        def gratitude_list(self):
+            if not self.gratitude:
+                return ['', '', '']
+            return self.gratitude + [''] * (3 - len(self.gratitude))
+
+        @gratitude_list.setter
+        def gratitude_list(self, value):
+            self.gratitude = value[:3] if value else []
+
+        def __repr__(self):
+            return f'<DailyLog {self.date}>'
+
+    class DailyLogItem(db.Model):
+        __tablename__ = 'daily_log_item'
+        id = db.Column(db.Integer, primary_key=True)
+        log_id = db.Column(db.Integer, db.ForeignKey('daily_log.id'), nullable=False)
+        type = db.Column(db.String(20), nullable=False)  # Enum stored as string
+        symbol = db.Column(db.String(10), default='•')
+        text = db.Column(db.Text, nullable=True)
+        created_at = db.Column(db.DateTime, default=datetime.utcnow)
+        status = db.Column(db.String(10), default='todo')  # Enum stored as string
+
+        __table_args__ = (
+            db.Index('ix_log_id', 'log_id'),
+            db.Index('ix_log_id_status', 'log_id', 'status'),
+            db.Index('ix_type', 'type'),
+        )
+
+        def __repr__(self):
+            return f'<DailyLogItem {self.type} {self.log_id}>'
+
+    # Store references on module for import by other blueprints
+    init_db_models.User = User
+    init_db_models.UserSettings = UserSettings
+    init_db_models.DailyLog = DailyLog
+    init_db_models.DailyLogItem = DailyLogItem
\ No newline at end of file
diff --git a/app/routes.py b/app/routes.py
new file mode 100644
index 0000000..8c39945
--- /dev/null
+++ b/app/routes.py
@@ -0,0 +1,365 @@
+from flask import Blueprint, render_template, redirect, url_for, request, flash, jsonify
+from flask_login import login_required, current_user
+from datetime import datetime, date
+from . import db
+from .models import init_db_models
+
+# Import model classes (stored on init_db_models function)
+DailyLog = init_db_models.DailyLog
+DailyLogItem = init_db_models.DailyLogItem
+UserSettings = init_db_models.UserSettings
+
+bp = Blueprint('main', __name__)
+
+
+# ─── Step 2: Daily Log (main page) ───────────────────────────────────
+@bp.route('/')
+@login_required
+def index():
+    """Daily Log screen — main page (Step 2)."""
+    today = date.today()
+    log = DailyLog.query.filter_by(date=today, user_id=current_user.id).first()
+
+    if not log:
+        log = DailyLog(date=today, user_id=current_user.id)
+        db.session.add(log)
+        db.session.commit()
+
+    # Get settings
+    settings = UserSettings.query.filter_by(user_id=current_user.id).first()
+    if not settings:
+        settings = UserSettings(user_id=current_user.id)
+        db.session.add(settings)
+        db.session.commit()
+
+    return render_template('daily_log.html', log=log, settings=settings)
+
+
+# ─── Step 2: All Logs ────────────────────────────────────────────────
+@bp.route('/logs')
+@login_required
+def log_list():
+    """All Logs screen — list of dates (Step 2)."""
+    logs = DailyLog.query.filter_by(user_id=current_user.id)\
+        .order_by(DailyLog.date.desc()).all()
+    return render_template('log_list.html', logs=logs)
+
+
+# ─── Step 2: Daily Log Detail (by date) ──────────────────────────────
+@bp.route('/logs/<int:log_id>')
+@login_required
+def log_detail(log_id):
+    """Open the Daily Log for a specific date."""
+    log = DailyLog.query.get_or_404(log_id)
+    if log.user_id != current_user.id:
+        flash('Access denied.')
+        return redirect(url_for('main.log_list'))
+    return render_template('daily_log.html', log=log, settings=None)
+
+
+# ─── Step 4: Create / Edit Log ───────────────────────────────────────
+@bp.route('/logs/new', methods=['GET', 'POST'])
+@login_required
+def log_new():
+    """Create a new Daily Log entry."""
+    if request.method == 'POST':
+        log_date = request.form.get('date')
+        try:
+            log_date = datetime.strptime(log_date, '%Y-%m-%d').date()
+        except ValueError:
+            flash('Invalid date format.')
+            return render_template('daily_log_form.html', action='New')
+
+        existing = DailyLog.query.filter_by(date=log_date, user_id=current_user.id).first()
+        if existing:
+            flash('Log for this date already exists.')
+            return redirect(url_for('main.log_detail', log_id=existing.id))
+
+        log = DailyLog(
+            date=log_date,
+            prompt=request.form.get('prompt', ''),
+            notes=request.form.get('notes', ''),
+            bedtime=request.form.get('bedtime', ''),
+            wake_time=request.form.get('wake_time', ''),
+            sleep_quality=request.form.get('sleep_quality'),
+            mood=request.form.get('mood', ''),
+            user_id=current_user.id,
+        )
+        db.session.add(log)
+        db.session.commit()
+
+        # Handle gratitude (3 fields)
+        gratitude = [request.form.get(f'gratitude_{i}', '') for i in range(3)]
+        log.gratitude = gratitude
+
+        # Handle bullets / items
+        item_types = request.form.getlist('item_type[]')
+        item_symbols = request.form.getlist('item_symbol[]')
+        item_texts = request.form.getlist('item_text[]')
+        item_statuses = request.form.getlist('item_status[]')
+
+        for i in range(len(item_types)):
+            if item_types[i] and item_texts[i].strip():
+                item = DailyLogItem(
+                    log_id=log.id,
+                    type=item_types[i],
+                    symbol=item_symbols[i] if item_symbols[i] else '•',
+                    text=item_texts[i].strip(),
+                    status=item_statuses[i] if item_statuses[i] in ['todo', 'doing', 'done', 'cancelled'] else 'todo',
+                )
+                db.session.add(item)
+
+        db.session.commit()
+        flash('Log saved!')
+        return redirect(url_for('main.log_detail', log_id=log.id))
+
+    return render_template('daily_log_form.html', action='New')
+
+
+@bp.route('/logs/<int:log_id>/edit', methods=['GET', 'POST'])
+@login_required
+def log_edit(log_id):
+    """Edit an existing Daily Log entry."""
+    log = DailyLog.query.get_or_404(log_id)
+    if log.user_id != current_user.id:
+        flash('Access denied.')
+        return redirect(url_for('main.log_list'))
+
+    if request.method == 'POST':
+        log.prompt = request.form.get('prompt', '')
+        log.notes = request.form.get('notes', '')
+        log.bedtime = request.form.get('bedtime', '')
+        log.wake_time = request.form.get('wake_time', '')
+        log.sleep_quality = request.form.get('sleep_quality')
+        log.mood = request.form.get('mood', '')
+
+        # Handle gratitude
+        gratitude = [request.form.get(f'gratitude_{i}', '') for i in range(3)]
+        log.gratitude = gratitude
+
+        # Handle existing items and new items
+        item_ids = request.form.getlist('item_id[]')
+        item_types = request.form.getlist('item_type[]')
+        item_symbols = request.form.getlist('item_symbol[]')
+        item_texts = request.form.getlist('item_text[]')
+        item_statuses = request.form.getlist('item_status[]')
+
+        # Remove items not in item_ids
+        existing_ids = [int(i) for i in item_ids if i.isdigit()]
+        for item in log.items:
+            if item.id not in existing_ids:
+                db.session.delete(item)
+
+        for i in range(len(item_types)):
+            if item_ids[i] and item_ids[i].isdigit():
+                item = DailyLogItem.query.get(int(item_ids[i]))
+                if item:
+                    item.type = item_types[i]
+                    item.symbol = item_symbols[i] if item_symbols[i] else '•'
+                    item.text = item_texts[i].strip()
+                    item.status = item_statuses[i] if item_statuses[i] in ['todo', 'doing', 'done', 'cancelled'] else 'todo'
+            elif item_types[i] and item_texts[i].strip():
+                item = DailyLogItem(
+                    log_id=log.id,
+                    type=item_types[i],
+                    symbol=item_symbols[i] if item_symbols[i] else '•',
+                    text=item_texts[i].strip(),
+                    status=item_statuses[i] if item_statuses[i] in ['todo', 'doing', 'done', 'cancelled'] else 'todo',
+                )
+                db.session.add(item)
+
+        db.session.commit()
+        flash('Log updated!')
+        return redirect(url_for('main.log_detail', log_id=log.id))
+
+    return render_template('daily_log_form.html', log=log, action='Edit')
+
+
+# ─── Step 4: Add / Update Bullet (AJAX) ──────────────────────────────
+@bp.route('/logs/<int:log_id>/items', methods=['POST'])
+@login_required
+def add_log_item(log_id):
+    """Add a bullet/item to a log (AJAX endpoint)."""
+    log = DailyLog.query.get_or_404(log_id)
+    if log.user_id != current_user.id:
+        return jsonify({'success': False, 'error': 'Access denied.'}), 403
+
+    data = request.get_json()
+    item_type = data.get('type', 'bullet')
+    symbol = data.get('symbol', '•')
+    text = data.get('text', '').strip()
+    status = data.get('status', 'todo')
+
+    if not text:
+        return jsonify({'success': False, 'error': 'Text is required.'}), 400
+
+    item = DailyLogItem(
+        log_id=log.id,
+        type=item_type,
+        symbol=symbol,
+        text=text,
+        status=status,
+    )
+    db.session.add(item)
+    db.session.commit()
+
+    return jsonify({
+        'success': True,
+        'id': item.id,
+        'type': item.type,
+        'symbol': item.symbol,
+        'text': item.text,
+        'status': item.status,
+    })
+
+
+@bp.route('/logs/items/<int:item_id>', methods=['PUT'])
+@login_required
+def update_log_item(item_id):
+    """Update a bullet/item status or text (AJAX endpoint)."""
+    item = DailyLogItem.query.get_or_404(item_id)
+    if item.log.user_id != current_user.id:
+        return jsonify({'success': False, 'error': 'Access denied.'}), 403
+
+    data = request.get_json()
+    if 'status' in data:
+        item.status = data['status']
+    if 'text' in data:
+        item.text = data['text'].strip()
+
+    db.session.commit()
+    return jsonify({'success': True, 'status': item.status, 'text': item.text})
+
+
+@bp.route('/logs/items/<int:item_id>', methods=['DELETE'])
+@login_required
+def delete_log_item(item_id):
+    """Delete a bullet/item (AJAX endpoint)."""
+    item = DailyLogItem.query.get_or_404(item_id)
+    if item.log.user_id != current_user.id:
+        return jsonify({'success': False, 'error': 'Access denied.'}), 403
+
+    db.session.delete(item)
+    db.session.commit()
+    return jsonify({'success': True})
+
+
+# ─── Step 4: Export / Import ─────────────────────────────────────────
+@bp.route('/export')
+@login_required
+def export_logs():
+    """Export all logs as JSON (Step 4)."""
+    logs = DailyLog.query.filter_by(user_id=current_user.id).all()
+    data = []
+    for log in logs:
+        log_data = {
+            'date': log.date.isoformat(),
+            'prompt': log.prompt,
+            'notes': log.notes,
+            'gratitude': log.gratitude or [],
+            'bedtime': log.bedtime,
+            'wake_time': log.wake_time,
+            'sleep_quality': log.sleep_quality,
+            'mood': log.mood,
+            'items': [
+                {
+                    'type': item.type.value,
+                    'symbol': item.symbol,
+                    'text': item.text,
+                    'status': item.status.value,
+                }
+                for item in log.items
+            ],
+        }
+        data.append(log_data)
+
+    return jsonify(data), 200, {'Content-Type': 'application/json', 'Content-Disposition': 'attachment; filename="logs.json"'}
+
+
+@bp.route('/import', methods=['POST'])
+@login_required
+def import_logs():
+    """Import logs from JSON file (Step 4)."""
+    if 'file' not in request.files:
+        flash('No file uploaded.')
+        return redirect(url_for('main.settings'))
+
+    file = request.files['file']
+    if not file or not file.filename.endswith('.json'):
+        flash('Invalid file. Please upload a JSON file.')
+        return redirect(url_for('main.settings'))
+
+    import json as json_module
+    try:
+        data = file.read().decode('utf-8')
+        logs_data = json_module.loads(data)
+
+        imported = 0
+        for log_data in logs_data:
+            log_date = datetime.strptime(log_data['date'], '%Y-%m-%d').date()
+            existing = DailyLog.query.filter_by(date=log_date, user_id=current_user.id).first()
+            if existing:
+                continue  # Skip existing
+
+            log = DailyLog(
+                date=log_date,
+                prompt=log_data.get('prompt', ''),
+                notes=log_data.get('notes', ''),
+                gratitude=log_data.get('gratitude', []),
+                bedtime=log_data.get('bedtime', ''),
+                wake_time=log_data.get('wake_time', ''),
+                sleep_quality=log_data.get('sleep_quality'),
+                mood=log_data.get('mood', ''),
+                user_id=current_user.id,
+            )
+            db.session.add(log)
+            db.session.flush()
+
+            for item_data in log_data.get('items', []):
+                item = DailyLogItem(
+                    log_id=log.id,
+                    type=item_data.get('type', 'bullet'),
+                    symbol=item_data.get('symbol', '•'),
+                    text=item_data.get('text', ''),
+                    status=item_data.get('status', 'todo'),
+                )
+                db.session.add(item)
+
+            imported += 1
+
+        db.session.commit()
+        flash(f'{imported} logs imported!')
+    except Exception as e:
+        db.session.rollback()
+        flash(f'Import failed: {str(e)}')
+
+    return redirect(url_for('main.settings'))
+
+
+# ─── Step 4: Settings ────────────────────────────────────────────────
+@bp.route('/settings')
+@login_required
+def settings():
+    """Settings screen (Step 2)."""
+    s = UserSettings.query.filter_by(user_id=current_user.id).first()
+    if not s:
+        s = UserSettings(user_id=current_user.id)
+        db.session.add(s)
+        db.session.commit()
+    return render_template('settings.html', settings=s)
+
+
+@bp.route('/settings/update', methods=['POST'])
+@login_required
+def update_settings():
+    """Update user settings."""
+    s = UserSettings.query.filter_by(user_id=current_user.id).first()
+    if not s:
+        s = UserSettings(user_id=current_user.id)
+        db.session.add(s)
+
+    s.theme = request.form.get('theme', 'light')
+    s.font_size = int(request.form.get('font_size', 18))
+    db.session.commit()
+    flash('Settings saved!')
+    return redirect(url_for('main.settings'))
\ No newline at end of file
diff --git a/app/static/style.css b/app/static/style.css
new file mode 100644
index 0000000..a119455
--- /dev/null
+++ b/app/static/style.css
@@ -0,0 +1,662 @@
+/* ============================================================
+   Ivory & Ink — Bullet Journal Styles
+   Based on the Ivory & Ink UI Style Guide
+   ============================================================ */
+
+/* ---------- CSS custom properties (light mode) ---------- */
+:root {
+  /* Page & surfaces */
+  --page: #FAF8F2;
+  --page-accent: #F0ECE2;
+  --surface: #FFFEFA;
+  --surface-alt: #F6F2E9;
+  --surface-strong: #E8E1D4;
+  --border: #D8D1C5;
+
+  /* Text */
+  --text: #242321;
+  --muted: #6E6A63;
+
+  /* Actions */
+  --primary: #2D2B28;
+  --primary-hover: #171614;
+  --secondary: #E8E2D8;
+  --secondary-hover: #DAD2C5;
+
+  /* Supporting accents */
+  --accent-1: #817A70;
+  --accent-2: #8C9795;
+  --accent-3: #B49B73;
+  --success: #6F806F;
+  --danger: #8A5D54;
+
+  /* Focus */
+  --focus: #817A70;
+
+  /* Spacing */
+  --space-xxs: 4px;
+  --space-xs: 8px;
+  --space-sm: 16px;
+  --space-md: 24px;
+  --space-lg: 32px;
+  --space-xl: 48px;
+
+  /* Typography */
+  --font-body: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
+  --font-ui: "Lexend", "Segoe UI", Arial, sans-serif;
+  --font-size-body: 18px;
+  --font-size-btn: 16px;
+  --line-height: 1.6;
+}
+
+/* ---------- Dark mode ---------- */
+html[data-theme="dark"] {
+  --page: #020202;
+  --page-accent: #090806;
+  --surface: #151411;
+  --surface-alt: #201E1A;
+  --surface-strong: #322F28;
+  --border: #4D4941;
+  --text: #FAF7EF;
+  --muted: #C7C1B5;
+  --primary: #E8E1D4;
+  --primary-hover: #FFF9ED;
+  --secondary: #4C4840;
+  --secondary-hover: #625D53;
+  --accent-1: #B6ADA0;
+  --accent-2: #8EA09C;
+  --accent-3: #C8AD7C;
+  --success: #9BAE99;
+  --danger: #C89084;
+  --focus: #B6ADA0;
+}
+
+/* ---------- Reset ---------- */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: var(--font-size-body);
+  scroll-behavior: smooth;
+}
+
+body {
+  background-color: var(--page);
+  color: var(--text);
+  font-family: var(--font-body);
+  line-height: var(--line-height);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+/* ---------- Layout ---------- */
+.page-surface {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* Header */
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+  padding: var(--space-sm) var(--space-md);
+  background-color: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.page-header__title {
+  font-family: var(--font-ui);
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.header-nav {
+  display: flex;
+  gap: var(--space-xs);
+  flex-wrap: wrap;
+}
+
+/* Main */
+.page-main {
+  flex: 1;
+  padding: var(--space-md);
+}
+
+/* Footer */
+.page-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-xs);
+  flex-wrap: wrap;
+  padding: var(--space-sm) var(--space-md);
+  background-color: var(--surface);
+  border-top: 1px solid var(--border);
+}
+
+/* ---------- Cards ---------- */
+.card {
+  background-color: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: var(--space-md);
+  margin-bottom: var(--space-md);
+}
+
+.card--full {
+  width: 100%;
+}
+
+.card--future {
+  opacity: 0.7;
+  border-style: dashed;
+}
+
+.card__eyebrow {
+  font-family: var(--font-ui);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--muted);
+  margin-bottom: var(--space-xs);
+}
+
+.card h2 {
+  font-family: var(--font-ui);
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: var(--space-sm);
+  color: var(--text);
+}
+
+.card h3 {
+  font-family: var(--font-ui);
+  font-size: 1.125rem;
+  font-weight: 500;
+  margin-bottom: var(--space-xs);
+  color: var(--text);
+}
+
+.future-text {
+  color: var(--muted);
+  font-size: 0.9rem;
+  margin-bottom: var(--space-sm);
+}
+
+.future-placeholder {
+  display: flex;
+  justify-content: center;
+  padding: var(--space-md);
+  color: var(--accent-1);
+}
+
+/* ---------- Daily Log Layout (Step 2) ---------- */
+.daily-log-layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-md);
+}
+
+@media (min-width: 768px) {
+  .daily-log-layout {
+    grid-template-columns: 2fr 1fr;
+  }
+}
+
+.daily-log__current {
+  min-width: 0;
+}
+
+.daily-log__future {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+/* ---------- Buttons ---------- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-xxs);
+  padding: var(--space-xs) var(--space-sm);
+  font-family: var(--font-ui);
+  font-size: var(--font-size-btn);
+  font-weight: 500;
+  line-height: 1;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  text-decoration: none;
+  min-height: 44px;
+  min-width: 44px;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.btn:focus-visible {
+  outline: 3px solid var(--focus);
+  outline-offset: 2px;
+}
+
+.btn:hover {
+  filter: brightness(0.95);
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-primary {
+  background-color: var(--primary);
+  color: var(--surface);
+}
+
+.btn-primary:hover {
+  background-color: var(--primary-hover);
+}
+
+.btn-secondary {
+  background-color: var(--secondary);
+  color: var(--text);
+}
+
+.btn-secondary:hover {
+  background-color: var(--secondary-hover);
+}
+
+.btn-icon {
+  background: transparent;
+  color: var(--muted);
+  padding: var(--space-xxs) var(--space-xs);
+  font-size: 1.25rem;
+  min-width: 36px;
+  min-height: 36px;
+}
+
+.btn-icon:hover {
+  color: var(--danger);
+  background-color: var(--surface-alt);
+}
+
+.btn-sm {
+  font-size: 0.875rem;
+  padding: var(--space-xxs) var(--space-xs);
+  min-height: 36px;
+}
+
+.btn-block {
+  width: 100%;
+}
+
+/* ---------- Forms ---------- */
+.form-group {
+  margin-bottom: var(--space-sm);
+}
+
+.form-group label {
+  display: block;
+  font-family: var(--font-ui);
+  font-size: 0.9rem;
+  font-weight: 500;
+  margin-bottom: var(--space-xxs);
+  color: var(--text);
+}
+
+.form-help {
+  display: block;
+  font-size: 0.8rem;
+  color: var(--muted);
+  margin-top: var(--space-xxs);
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="number"],
+input[type="file"],
+textarea,
+select {
+  width: 100%;
+  padding: var(--space-xs) var(--space-sm);
+  font-family: var(--font-body);
+  font-size: 1rem;
+  line-height: var(--line-height);
+  color: var(--text);
+  background-color: var(--surface-alt);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  transition: border-color 0.15s ease;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: var(--primary);
+  outline: 3px solid var(--focus);
+  outline-offset: 1px;
+}
+
+textarea {
+  resize: vertical;
+  min-height: 60px;
+}
+
+/* ---------- Bullets Section ---------- */
+.bullets-section {
+  margin: var(--space-sm) 0;
+}
+
+.bullets-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  margin-bottom: var(--space-xs);
+}
+
+.bullet-item {
+  background-color: var(--surface-alt);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: var(--space-xs);
+}
+
+.bullet-item__row {
+  display: flex;
+  gap: var(--space-xxs);
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.bullet-item__type,
+.bullet-item__symbol,
+.bullet-item__status {
+  width: auto;
+  min-width: 60px;
+  padding: var(--space-xxs) var(--space-xs);
+  font-size: 0.85rem;
+}
+
+.bullet-item__text {
+  flex: 1;
+  min-width: 120px;
+}
+
+/* ---------- Gratitude ---------- */
+.gratitude-section {
+  margin: var(--space-sm) 0;
+}
+
+.gratitude-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-xs);
+}
+
+@media (min-width: 480px) {
+  .gratitude-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.gratitude-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xxs);
+}
+
+.gratitude-item label {
+  font-family: var(--font-ui);
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+.gratitude-item input {
+  padding: var(--space-xxs) var(--space-xs);
+}
+
+/* ---------- Sleep ---------- */
+.sleep-section {
+  margin: var(--space-sm) 0;
+}
+
+.sleep-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-xs);
+}
+
+@media (min-width: 480px) {
+  .sleep-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.sleep-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xxs);
+}
+
+.sleep-item label {
+  font-family: var(--font-ui);
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+.sleep-item input,
+.sleep-item select {
+  padding: var(--space-xxs) var(--space-xs);
+}
+
+/* ---------- Mood ---------- */
+.mood-section {
+  margin: var(--space-sm) 0;
+}
+
+.mood-selector {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xxs);
+}
+
+.mood-selector label {
+  font-family: var(--font-ui);
+  font-size: 0.9rem;
+  color: var(--text);
+}
+
+.mood-selector select {
+  padding: var(--space-xs) var(--space-sm);
+}
+
+/* ---------- Logs List ---------- */
+.logs-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.log-list-item {
+  display: flex;
+  gap: var(--space-sm);
+  padding: var(--space-sm);
+  background-color: var(--surface-alt);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  text-decoration: none;
+  color: var(--text);
+  transition: background-color 0.15s ease;
+}
+
+.log-list-item:hover,
+.log-list-item:focus-visible {
+  background-color: var(--surface-strong);
+}
+
+.log-list-item:focus-visible {
+  outline: 3px solid var(--focus);
+  outline-offset: 2px;
+}
+
+.log-list-item__date {
+  flex-shrink: 0;
+  font-family: var(--font-ui);
+  font-size: 0.85rem;
+  color: var(--muted);
+  min-width: 70px;
+}
+
+.log-list-item__preview {
+  flex: 1;
+  min-width: 0;
+}
+
+.log-list-item__prompt {
+  font-size: 0.9rem;
+  color: var(--text);
+  margin-bottom: var(--space-xxs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log-list-item__meta {
+  display: flex;
+  gap: var(--space-sm);
+  font-size: 0.8rem;
+  color: var(--muted);
+}
+
+/* ---------- Settings ---------- */
+.settings-fieldset {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: var(--space-sm);
+  margin-bottom: var(--space-sm);
+}
+
+.settings-fieldset legend {
+  font-family: var(--font-ui);
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text);
+  padding: 0 var(--space-xxs);
+}
+
+.import-form {
+  margin-top: var(--space-sm);
+}
+
+/* ---------- Flash Messages ---------- */
+.flash-message {
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: 6px;
+  margin-bottom: var(--space-sm);
+  font-size: 0.9rem;
+}
+
+.flash-message.error {
+  background-color: var(--danger);
+  color: var(--surface);
+  border: 1px solid var(--border);
+}
+
+.flash-message.success {
+  background-color: var(--success);
+  color: var(--surface);
+  border: 1px solid var(--border);
+}
+
+.flash-message.info {
+  background-color: var(--accent-2);
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+
+/* ---------- Empty State ---------- */
+.empty-state {
+  text-align: center;
+  padding: var(--space-lg);
+  color: var(--muted);
+}
+
+.empty-state a {
+  color: var(--primary);
+  text-decoration: underline;
+}
+
+/* ---------- Page Footer Text ---------- */
+.page-footer-text {
+  text-align: center;
+  padding: var(--space-sm);
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+.page-footer-text a {
+  color: var(--primary);
+}
+
+/* ---------- Typography Helpers ---------- */
+.text-muted {
+  color: var(--muted);
+}
+
+.text-small {
+  font-size: 0.85rem;
+}
+
+/* ---------- Accessibility ---------- */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Focus visible for keyboard navigation */
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: 3px solid var(--focus);
+  outline-offset: 2px;
+}
+
+/* High contrast / zoom support */
+@media (zoom: 200%) {
+  body {
+    font-size: 2em;
+  }
+}
+
+/* ---------- Screen reader only ---------- */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
\ No newline at end of file
diff --git a/app/templates/base.html b/app/templates/base.html
new file mode 100644
index 0000000..d42f3a7
--- /dev/null
+++ b/app/templates/base.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{% block title %}Bullet Journal{% endblock %}</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+  <div class="page-surface">
+    <header class="page-header">
+      <h1 class="page-header__title">Bullet Journal</h1>
+      {% if current_user.is_authenticated %}
+      <nav class="header-nav">
+        <a href="{{ url_for('main.index') }}" class="btn btn-secondary btn-sm">Today</a>
+        <a href="{{ url_for('main.log_list') }}" class="btn btn-secondary btn-sm">All Logs</a>
+        <a href="{{ url_for('main.settings') }}" class="btn btn-secondary btn-sm">Settings</a>
+        <a href="{{ url_for('auth.logout') }}" class="btn btn-secondary btn-sm">Logout</a>
+      </nav>
+      {% endif %}
+    </header>
+
+    <main class="page-main">
+      {% block content %}{% endblock %}
+    </main>
+
+    {% if current_user.is_authenticated %}
+    <footer class="page-footer">
+      <a href="{{ url_for('main.index') }}" class="btn btn-secondary">Today</a>
+      <a href="{{ url_for('main.log_list') }}" class="btn btn-secondary">All Logs</a>
+      <a href="{{ url_for('main.export_logs') }}" class="btn btn-secondary">Export JSON</a>
+      <a href="{{ url_for('main.settings') }}" class="btn btn-secondary">Settings</a>
+    </footer>
+    {% endif %}
+  </div>
+
+  <script>
+    // Theme toggle helper
+    function setTheme(theme) {
+      document.documentElement.setAttribute('data-theme', theme);
+      localStorage.setItem('theme', theme);
+    }
+
+    // Load saved theme or default to light
+    (function() {
+      const saved = localStorage.getItem('theme');
+      if (saved) {
+        setTheme(saved);
+      }
+    })();
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/app/templates/daily_log.html b/app/templates/daily_log.html
new file mode 100644
index 0000000..0738e4c
--- /dev/null
+++ b/app/templates/daily_log.html
@@ -0,0 +1,308 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Daily Log - {{ log.date.strftime('%B %d, %Y') }} - Bullet Journal</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+  <div class="page-surface">
+    <!-- Header -->
+    <header class="page-header">
+      <h1 class="page-header__title">Bullet Journal</h1>
+      <nav class="header-nav">
+        <a href="{{ url_for('main.log_list') }}" class="btn btn-secondary btn-sm">All Logs</a>
+        <a href="{{ url_for('main.settings') }}" class="btn btn-secondary btn-sm">Settings</a>
+        <a href="{{ url_for('auth.logout') }}" class="btn btn-secondary btn-sm">Logout</a>
+      </nav>
+    </header>
+
+    <!-- Main Content -->
+    <main class="page-main">
+      <div class="daily-log-layout">
+        <!-- Left Column: Current Day -->
+        <section class="daily-log__current">
+          <article class="card">
+            <p class="card__eyebrow">Daily Log</p>
+            <h2>{{ log.date.strftime('%B %d, %Y') }}</h2>
+
+            <!-- Prompt -->
+            <div class="form-group">
+              <label for="prompt">Prompt</label>
+              <textarea id="prompt" name="prompt" rows="3" aria-describedby="prompt-help">{{ log.prompt or '' }}</textarea>
+              <span id="prompt-help" class="form-help">What's on your mind today?</span>
+            </div>
+
+            <!-- Notes -->
+            <div class="form-group">
+              <label for="notes">Notes</label>
+              <textarea id="notes" name="notes" rows="4" aria-describedby="notes-help">{{ log.notes or '' }}</textarea>
+              <span id="notes-help" class="form-help">Free-form notes for the day.</span>
+            </div>
+
+            <!-- Bullets / Items -->
+            <div class="bullets-section">
+              <h3>Bullets & Insights</h3>
+              <div id="bullets-list" class="bullets-list">
+                {% for item in log.items %}
+                <div class="bullet-item" data-item-id="{{ item.id }}">
+                  <div class="bullet-item__row">
+                    <select class="bullet-item__type" aria-label="Item type" data-item-id="{{ item.id }}">
+                      <option value="bullet" {% if item.type == 'bullet' %}selected{% endif %}>Bullet</option>
+                      <option value="task" {% if item.type == 'task' %}selected{% endif %}>Task</option>
+                      <option value="note" {% if item.type == 'note' %}selected{% endif %}>Note</option>
+                    </select>
+                    <select class="bullet-item__symbol" aria-label="Symbol" data-item-id="{{ item.id }}">
+                      <option value="•" {% if item.symbol == '•' %}selected{% endif %}>•</option>
+                      <option value="-" {% if item.symbol == '-' %}selected{% endif %}>-</option>
+                      <option value="o" {% if item.symbol == 'o' %}selected{% endif %}>o</option>
+                      <option value="X" {% if item.symbol == 'X' %}selected{% endif %}>X</option>
+                    </select>
+                    <input type="text" class="bullet-item__text" value="{{ item.text }}" placeholder="Add a bullet..." aria-label="Bullet text" data-item-id="{{ item.id }}">
+                    <select class="bullet-item__status" aria-label="Status" data-item-id="{{ item.id }}">
+                      <option value="todo" {% if item.status == 'todo' %}selected{% endif %}>Todo</option>
+                      <option value="doing" {% if item.status == 'doing' %}selected{% endif %}>Doing</option>
+                      <option value="done" {% if item.status == 'done' %}selected{% endif %}>Done</option>
+                      <option value="cancelled" {% if item.status == 'cancelled' %}selected{% endif %}>Cancelled</option>
+                    </select>
+                    <button class="btn btn-icon btn-delete" data-item-id="{{ item.id }}" aria-label="Delete bullet">&times;</button>
+                  </div>
+                </div>
+                {% endfor %}
+              </div>
+              <button class="btn btn-secondary" id="add-bullet-btn">+ Add Bullet</button>
+            </div>
+
+            <!-- Gratitude -->
+            <div class="gratitude-section">
+              <h3>Gratitude (3 things)</h3>
+              <div class="gratitude-grid">
+                {% set grat = log.gratitude_list %}
+                <div class="gratitude-item">
+                  <label for="gratitude_0">1.</label>
+                  <input type="text" id="gratitude_0" name="gratitude_0" value="{{ grat[0] if grat else '' }}" placeholder="I'm grateful for..." aria-label="Gratitude 1">
+                </div>
+                <div class="gratitude-item">
+                  <label for="gratitude_1">2.</label>
+                  <input type="text" id="gratitude_1" name="gratitude_1" value="{{ grat[1] if grat and grat|length > 1 else '' }}" placeholder="I'm grateful for..." aria-label="Gratitude 2">
+                </div>
+                <div class="gratitude-item">
+                  <label for="gratitude_2">3.</label>
+                  <input type="text" id="gratitude_2" name="gratitude_2" value="{{ grat[2] if grat and grat|length > 2 else '' }}" placeholder="I'm grateful for..." aria-label="Gratitude 3">
+                </div>
+              </div>
+            </div>
+
+            <!-- Sleep -->
+            <div class="sleep-section">
+              <h3>Sleep</h3>
+              <div class="sleep-grid">
+                <div class="sleep-item">
+                  <label for="bedtime">Bedtime</label>
+                  <input type="text" id="bedtime" name="bedtime" value="{{ log.bedtime or '' }}" placeholder="e.g., 23:00" aria-label="Bedtime">
+                </div>
+                <div class="sleep-item">
+                  <label for="wake_time">Wake time</label>
+                  <input type="text" id="wake_time" name="wake_time" value="{{ log.wake_time or '' }}" placeholder="e.g., 07:00" aria-label="Wake time">
+                </div>
+                <div class="sleep-item">
+                  <label for="sleep_quality">Sleep quality</label>
+                  <select id="sleep_quality" name="sleep_quality" aria-label="Sleep quality">
+                    <option value="">Select...</option>
+                    <option value="poor" {% if log.sleep_quality == 'poor' %}selected{% endif %}>Poor</option>
+                    <option value="fair" {% if log.sleep_quality == 'fair' %}selected{% endif %}>Fair</option>
+                    <option value="good" {% if log.sleep_quality == 'good' %}selected{% endif %}>Good</option>
+                    <option value="excellent" {% if log.sleep_quality == 'excellent' %}selected{% endif %}>Excellent</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+
+            <!-- Mood -->
+            <div class="mood-section">
+              <h3>Mood</h3>
+              <div class="mood-selector">
+                <label for="mood">How are you feeling?</label>
+                <select id="mood" name="mood" aria-label="Mood">
+                  <option value="">Select mood...</option>
+                  <option value="great" {% if log.mood == 'great' %}selected{% endif %}>Great</option>
+                  <option value="good" {% if log.mood == 'good' %}selected{% endif %}>Good</option>
+                  <option value="okay" {% if log.mood == 'okay' %}selected{% endif %}>Okay</option>
+                  <option value="bad" {% if log.mood == 'bad' %}selected{% endif %}>Bad</option>
+                  <option value="terrible" {% if log.mood == 'terrible' %}selected{% endif %}>Terrible</option>
+                </select>
+              </div>
+            </div>
+
+            <!-- Save Button -->
+            <button type="button" class="btn btn-primary btn-block" id="save-log-btn">Save Log</button>
+          </article>
+        </section>
+
+        <!-- Right Column: Coming Soon -->
+        <aside class="daily-log__future">
+          <article class="card card--future">
+            <p class="card__eyebrow">Coming Soon</p>
+            <h3>Calendar</h3>
+            <p class="future-text">Monthly grid view for quick navigation between logs.</p>
+            <div class="future-placeholder">
+              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+                <line x1="16" y1="2" x2="16" y2="6"></line>
+                <line x1="8" y1="2" x2="8" y2="6"></line>
+                <line x1="3" y1="10" x2="21" y2="10"></line>
+              </svg>
+            </div>
+          </article>
+
+          <article class="card card--future">
+            <p class="card__eyebrow">Coming Soon</p>
+            <h3>Task List</h3>
+            <p class="future-text">Cross-day task management with priorities and deadlines.</p>
+            <div class="future-placeholder">
+              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
+                <path d="M9 11l3 3L22 4"></path>
+                <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
+              </svg>
+            </div>
+          </article>
+        </aside>
+      </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="page-footer">
+      <a href="{{ url_for('main.log_list') }}" class="btn btn-secondary">All Logs</a>
+      <a href="{{ url_for('main.export_logs') }}" class="btn btn-secondary">Export JSON</a>
+      <a href="{{ url_for('main.settings') }}" class="btn btn-secondary">Settings</a>
+    </footer>
+  </div>
+
+  <script>
+    // Add new bullet
+    document.getElementById('add-bullet-btn').addEventListener('click', function() {
+      const list = document.getElementById('bullets-list');
+      const newItem = document.createElement('div');
+      newItem.className = 'bullet-item';
+      newItem.dataset.itemId = '';
+      newItem.innerHTML = `
+        <div class="bullet-item__row">
+          <select class="bullet-item__type" aria-label="Item type">
+            <option value="bullet" selected>Bullet</option>
+            <option value="task">Task</option>
+            <option value="note">Note</option>
+          </select>
+          <select class="bullet-item__symbol" aria-label="Symbol">
+            <option value="•" selected>•</option>
+            <option value="-">-</option>
+            <option value="o">o</option>
+            <option value="X">X</option>
+          </select>
+          <input type="text" class="bullet-item__text" placeholder="Add a bullet..." aria-label="Bullet text">
+          <select class="bullet-item__status" aria-label="Status">
+            <option value="todo" selected>Todo</option>
+            <option value="doing">Doing</option>
+            <option value="done">Done</option>
+            <option value="cancelled">Cancelled</option>
+          </select>
+          <button class="btn btn-icon btn-delete" aria-label="Delete bullet">&times;</button>
+        </div>
+      `;
+      list.appendChild(newItem);
+      newItem.querySelector('.bullet-item__text').focus();
+    });
+
+    // Delete bullet
+    document.addEventListener('click', function(e) {
+      if (e.target.classList.contains('btn-delete')) {
+        const itemId = e.target.dataset.itemId;
+        if (itemId) {
+          fetch('/logs/items/' + itemId, { method: 'DELETE' })
+            .then(response => response.json())
+            .then(data => {
+              if (data.success) {
+                e.target.closest('.bullet-item').remove();
+              }
+            });
+        } else {
+          e.target.closest('.bullet-item').remove();
+        }
+      }
+    });
+
+    // Save log
+    document.getElementById('save-log-btn').addEventListener('click', function() {
+      const btn = this;
+      btn.textContent = 'Saving...';
+      btn.disabled = true;
+
+      // Collect bullets data
+      const bullets = [];
+      document.querySelectorAll('.bullet-item').forEach(function(item) {
+        bullets.push({
+          id: item.dataset.itemId || '',
+          type: item.querySelector('.bullet-item__type').value,
+          symbol: item.querySelector('.bullet-item__symbol').value,
+          text: item.querySelector('.bullet-item__text').value,
+          status: item.querySelector('.bullet-item__status').value
+        });
+      });
+
+      // Build form data
+      const formData = new FormData();
+      formData.append('date', '{{ log.date.isoformat() }}');
+      formData.append('prompt', document.getElementById('prompt').value);
+      formData.append('notes', document.getElementById('notes').value);
+      formData.append('bedtime', document.getElementById('bedtime').value);
+      formData.append('wake_time', document.getElementById('wake_time').value);
+      formData.append('sleep_quality', document.getElementById('sleep_quality').value);
+      formData.append('mood', document.getElementById('mood').value);
+
+      for (let i = 0; i < 3; i++) {
+        formData.append('gratitude_' + i, document.getElementById('gratitude_' + i).value);
+      }
+
+      bullets.forEach(function(bullet, index) {
+        formData.append('item_id[]', bullet.id);
+        formData.append('item_type[]', bullet.type);
+        formData.append('item_symbol[]', bullet.symbol);
+        formData.append('item_text[]', bullet.text);
+        formData.append('item_status[]', bullet.status);
+      });
+
+      fetch('/logs/{{ log.id }}/edit', {
+        method: 'POST',
+        body: formData
+      })
+      .then(response => {
+        btn.textContent = 'Save Log';
+        btn.disabled = false;
+        if (response.ok) {
+          window.location.reload();
+        } else {
+          alert('Failed to save log.');
+        }
+      })
+      .catch(error => {
+        btn.textContent = 'Save Log';
+        btn.disabled = false;
+        alert('Failed to save log: ' + error.message);
+      });
+    });
+
+    // Auto-save on input change
+    document.querySelectorAll('input, textarea, select').forEach(function(el) {
+      if (el.id !== 'save-log-btn') {
+        el.addEventListener('change', function() {
+          // Trigger save on field change
+          document.getElementById('save-log-btn').click();
+        });
+      }
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/app/templates/daily_log_form.html b/app/templates/daily_log_form.html
new file mode 100644
index 0000000..9b7011d
--- /dev/null
+++ b/app/templates/daily_log_form.html
@@ -0,0 +1,77 @@
+{% extends "base.html" %}
+{% block title %}{{ action }} Daily Log{% endblock %}
+
+{% block content %}
+<article class="daily-log-form" aria-labelledby="form-heading">
+    <header class="daily-log-form__header">
+        <h1 id="form-heading">{{ action }} Daily Log</h1>
+    </header>
+
+    <form class="daily-log-form__form" method="POST" action="{{ url_for('main.log_new') }}" aria-label="Daily log form">
+        <div class="form-group">
+            <label for="date">Date</label>
+            <input type="date" id="date" name="date" value="{{ log.date.isoformat() if log else '' }}" required>
+        </div>
+
+        <div class="form-group">
+            <label for="prompt">Daily Prompt</label>
+            <textarea id="prompt" name="prompt" rows="3" placeholder="What's on your mind today?">{{ log.prompt or '' }}</textarea>
+        </div>
+
+        <div class="form-group">
+            <label for="notes">Notes</label>
+            <textarea id="notes" name="notes" rows="4" placeholder="Jot down your thoughts...">{{ log.notes or '' }}</textarea>
+        </div>
+
+        <div class="form-group">
+            <label>Gratitude (3 things)</label>
+            <div class="gratitude-list">
+                {% if log %}
+                    {% set grat_list = log.gratitude_list %}
+                    <input type="text" name="gratitude_0" value="{{ grat_list[0] if grat_list else '' }}" placeholder="I am grateful for...">
+                    <input type="text" name="gratitude_1" value="{{ grat_list[1] if grat_list | length > 1 else '' }}" placeholder="I am grateful for...">
+                    <input type="text" name="gratitude_2" value="{{ grat_list[2] if grat_list | length > 2 else '' }}" placeholder="I am grateful for...">
+                {% else %}
+                    <input type="text" name="gratitude_0" placeholder="I am grateful for...">
+                    <input type="text" name="gratitude_1" placeholder="I am grateful for...">
+                    <input type="text" name="gratitude_2" placeholder="I am grateful for...">
+                {% endif %}
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label>Sleep</label>
+            <div class="sleep-row">
+                <div>
+                    <label for="bedtime">Bedtime</label>
+                    <input type="text" id="bedtime" name="bedtime" value="{{ log.bedtime if log else '' }}" placeholder="22:30">
+                </div>
+                <div>
+                    <label for="wake_time">Wake Time</label>
+                    <input type="text" id="wake_time" name="wake_time" value="{{ log.wake_time if log else '' }}" placeholder="06:45">
+                </div>
+            </div>
+            <div class="form-group">
+                <label for="sleep_quality">Sleep Quality</label>
+                <select id="sleep_quality" name="sleep_quality">
+                    <option value="">— Select —</option>
+                    <option value="poor" {% if log and log.sleep_quality == 'poor' %}selected{% endif %}>Poor</option>
+                    <option value="fair" {% if log and log.sleep_quality == 'fair' %}selected{% endif %}>Fair</option>
+                    <option value="good" {% if log and log.sleep_quality == 'good' %}selected{% endif %}>Good</option>
+                    <option value="excellent" {% if log and log.sleep_quality == 'excellent' %}selected{% endif %}>Excellent</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label for="mood">Mood</label>
+            <input type="text" id="mood" name="mood" value="{{ log.mood if log else '' }}" placeholder="How are you feeling?">
+        </div>
+
+        <footer class="daily-log-form__footer">
+            <button type="submit" class="btn-primary">{{ 'Save' if action == 'Edit' else 'Create' }} Log</button>
+            <a href="{{ url_for('main.log_list') }}" class="btn-secondary">Cancel</a>
+        </footer>
+    </form>
+</article>
+{% endblock %}
\ No newline at end of file
diff --git a/app/templates/entry_detail.html b/app/templates/entry_detail.html
new file mode 100644
index 0000000..8d805cf
--- /dev/null
+++ b/app/templates/entry_detail.html
@@ -0,0 +1,67 @@
+{% extends "base.html" %}
+
+{% block title %}Log Detail - Bullet Journal{% endblock %}
+
+{% block content %}
+<div class="card card--full">
+  <p class="card__eyebrow">Log Entry</p>
+  <h2>{{ log.date.strftime('%A, %B %d, %Y') }}</h2>
+
+  <div class="form-group">
+    <label>Prompt</label>
+    <p>{{ log.prompt or 'No prompt set.' }}</p>
+  </div>
+
+  <div class="form-group">
+    <label>Notes</label>
+    <p>{{ log.notes or 'No notes.' }}</p>
+  </div>
+
+  <div class="bullets-section">
+    <h3>Bullets & Insights</h3>
+    {% if log.items %}
+    <div class="bullets-list">
+      {% for item in log.items %}
+      <div class="bullet-item">
+        <span class="bullet-item__type">{{ item.type }}</span>
+        <span class="bullet-item__symbol">{{ item.symbol }}</span>
+        <span class="bullet-item__text">{{ item.text }}</span>
+        <span class="bullet-item__status">{{ item.status }}</span>
+      </div>
+      {% endfor %}
+    </div>
+    {% else %}
+    <p class="text-muted">No bullets yet.</p>
+    {% endif %}
+  </div>
+
+  {% if log.gratitude %}
+  <div class="gratitude-section">
+    <h3>Gratitude</h3>
+    <ul>
+      {% for g in log.gratitude %}
+      <li>{{ g }}</li>
+      {% endfor %}
+    </ul>
+  </div>
+  {% endif %}
+
+  {% if log.bedtime or log.wake_time or log.sleep_quality %}
+  <div class="sleep-section">
+    <h3>Sleep</h3>
+    <p>Bedtime: {{ log.bedtime or 'N/A' }}</p>
+    <p>Wake Time: {{ log.wake_time or 'N/A' }}</p>
+    <p>Quality: {{ log.sleep_quality or 'N/A' }}</p>
+  </div>
+  {% endif %}
+
+  {% if log.mood %}
+  <div class="mood-section">
+    <h3>Mood</h3>
+    <p>{{ log.mood }}</p>
+  </div>
+  {% endif %}
+
+  <a href="{{ url_for('main.log_edit', log_id=log.id) }}" class="btn btn-primary btn-block">Edit Log</a>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/app/templates/entry_form.html b/app/templates/entry_form.html
new file mode 100644
index 0000000..5aa0a5f
--- /dev/null
+++ b/app/templates/entry_form.html
@@ -0,0 +1,152 @@
+{% extends "base.html" %}
+
+{% block title %}{{ action }} Log - Bullet Journal{% endblock %}
+
+{% block content %}
+<div class="card card--full">
+  <p class="card__eyebrow">{{ action }}</p>
+  <h2>{{ action }} Log Entry</h2>
+
+  <form method="POST" action="{{ url_for('main.log_new') }}" id="log-form">
+    <div class="form-group">
+      <label for="date">Date</label>
+      <input type="text" id="date" name="date" value="{{ log.date.strftime('%Y-%m-%d') if log else '' }}" placeholder="YYYY-MM-DD" required>
+    </div>
+
+    <div class="form-group">
+      <label for="prompt">Daily Prompt</label>
+      <textarea id="prompt" name="prompt" rows="3" placeholder="What's on your mind today?">{{ log.prompt or '' }}</textarea>
+    </div>
+
+    <div class="form-group">
+      <label for="notes">Notes</label>
+      <textarea id="notes" name="notes" rows="4" placeholder="Free-form notes...">{{ log.notes or '' }}</textarea>
+    </div>
+
+    <div class="bullets-section">
+      <h3>Bullets & Insights</h3>
+      <div class="bullets-list" id="bullets-list">
+        {% if log %}
+        {% for item in log.items %}
+        <div class="bullet-item" data-item-id="{{ item.id }}">
+          <div class="bullet-item__row">
+            <select name="item_type[]" class="bullet-item__type">
+              <option value="bullet" {% if item.type == 'bullet' %}selected{% endif %}>Bullet</option>
+              <option value="task" {% if item.type == 'task' %}selected{% endif %}>Task</option>
+              <option value="note" {% if item.type == 'note' %}selected{% endif %}>Note</option>
+            </select>
+            <select name="item_symbol[]" class="bullet-item__symbol">
+              <option value="•" {% if item.symbol == '•' %}selected{% endif %}>•</option>
+              <option value="-" {% if item.symbol == '-' %}selected{% endif %}>-</option>
+              <option value="○" {% if item.symbol == '○' %}selected{% endif %}>○</option>
+            </select>
+            <input type="text" name="item_text[]" class="bullet-item__text" value="{{ item.text }}" placeholder="Add a bullet point...">
+            <select name="item_status[]" class="bullet-item__status">
+              <option value="todo" {% if item.status == 'todo' %}selected{% endif %}>Todo</option>
+              <option value="doing" {% if item.status == 'doing' %}selected{% endif %}>Doing</option>
+              <option value="done" {% if item.status == 'done' %}selected{% endif %}>Done</option>
+              <option value="cancelled" {% if item.status == 'cancelled' %}selected{% endif %}>Cancelled</option>
+            </select>
+            <input type="hidden" name="item_id[]" value="{{ item.id }}">
+          </div>
+        </div>
+        {% endfor %}
+        {% endif %}
+      </div>
+      <button type="button" class="btn btn-secondary btn-sm" onclick="addBullet()">+ Add Bullet</button>
+    </div>
+
+    <div class="gratitude-section">
+      <h3>Gratitude</h3>
+      <div class="gratitude-grid">
+        <div class="gratitude-item">
+          <label for="gratitude_0">1. I'm grateful for...</label>
+          <input type="text" id="gratitude_0" name="gratitude_0" value="{{ log.gratitude_list[0] if log and log.gratitude_list else '' }}" placeholder="Item 1">
+        </div>
+        <div class="gratitude-item">
+          <label for="gratitude_1">2. I'm grateful for...</label>
+          <input type="text" id="gratitude_1" name="gratitude_1" value="{{ log.gratitude_list[1] if log and log.gratitude_list else '' }}" placeholder="Item 2">
+        </div>
+        <div class="gratitude-item">
+          <label for="gratitude_2">3. I'm grateful for...</label>
+          <input type="text" id="gratitude_2" name="gratitude_2" value="{{ log.gratitude_list[2] if log and log.gratitude_list else '' }}" placeholder="Item 3">
+        </div>
+      </div>
+    </div>
+
+    <div class="sleep-section">
+      <h3>Sleep</h3>
+      <div class="sleep-grid">
+        <div class="sleep-item">
+          <label for="bedtime">Bedtime</label>
+          <input type="text" id="bedtime" name="bedtime" value="{{ log.bedtime or '' }}" placeholder="e.g., 11:00 PM">
+        </div>
+        <div class="sleep-item">
+          <label for="wake_time">Wake Time</label>
+          <input type="text" id="wake_time" name="wake_time" value="{{ log.wake_time or '' }}" placeholder="e.g., 7:00 AM">
+        </div>
+        <div class="sleep-item">
+          <label for="sleep_quality">Sleep Quality</label>
+          <select id="sleep_quality" name="sleep_quality">
+            <option value="">Select...</option>
+            <option value="poor" {% if log and log.sleep_quality == 'poor' %}selected{% endif %}>Poor</option>
+            <option value="fair" {% if log and log.sleep_quality == 'fair' %}selected{% endif %}>Fair</option>
+            <option value="good" {% if log and log.sleep_quality == 'good' %}selected{% endif %}>Good</option>
+            <option value="excellent" {% if log and log.sleep_quality == 'excellent' %}selected{% endif %}>Excellent</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <div class="mood-section">
+      <h3>Mood</h3>
+      <div class="mood-selector">
+        <label for="mood">How are you feeling?</label>
+        <select id="mood" name="mood">
+          <option value="">Select mood...</option>
+          <option value="amazing" {% if log and log.mood == 'amazing' %}selected{% endif %}>Amazing</option>
+          <option value="good" {% if log and log.mood == 'good' %}selected{% endif %}>Good</option>
+          <option value="okay" {% if log and log.mood == 'okay' %}selected{% endif %}>Okay</option>
+          <option value="bad" {% if log and log.mood == 'bad' %}selected{% endif %}>Bad</option>
+          <option value="terrible" {% if log and log.mood == 'terrible' %}selected{% endif %}>Terrible</option>
+        </select>
+      </div>
+    </div>
+
+    <button type="submit" class="btn btn-primary btn-block">Save Log</button>
+  </form>
+</div>
+
+<script>
+function addBullet() {
+  const list = document.getElementById('bullets-list');
+  const newItem = document.createElement('div');
+  newItem.className = 'bullet-item';
+  newItem.dataset.itemId = '';
+  newItem.innerHTML = `
+    <div class="bullet-item__row">
+      <select name="item_type[]" class="bullet-item__type">
+        <option value="bullet" selected>Bullet</option>
+        <option value="task">Task</option>
+        <option value="note">Note</option>
+      </select>
+      <select name="item_symbol[]" class="bullet-item__symbol">
+        <option value="•" selected>•</option>
+        <option value="-">-</option>
+        <option value="○">○</option>
+      </select>
+      <input type="text" name="item_text[]" class="bullet-item__text" placeholder="Add a bullet point...">
+      <select name="item_status[]" class="bullet-item__status">
+        <option value="todo" selected>Todo</option>
+        <option value="doing">Doing</option>
+        <option value="done">Done</option>
+        <option value="cancelled">Cancelled</option>
+      </select>
+      <input type="hidden" name="item_id[]" value="">
+    </div>
+  `;
+  list.appendChild(newItem);
+  newItem.querySelector('.bullet-item__text').focus();
+}
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/app/templates/entry_list.html b/app/templates/entry_list.html
new file mode 100644
index 0000000..aa164f6
--- /dev/null
+++ b/app/templates/entry_list.html
@@ -0,0 +1,33 @@
+{% extends "base.html" %}
+
+{% block title %}All Logs - Bullet Journal{% endblock %}
+
+{% block content %}
+<div class="card card--full">
+  <p class="card__eyebrow">Archive</p>
+  <h2>All Logs</h2>
+
+  {% if logs %}
+  <div class="logs-list">
+    {% for log in logs %}
+    <a href="{{ url_for('main.log_detail', log_id=log.id) }}" class="log-list-item">
+      <div class="log-list-item__date">{{ log.date.strftime('%m/%d') }}</div>
+      <div class="log-list-item__preview">
+        <p class="log-list-item__prompt">{{ log.prompt or 'No prompt' }}</p>
+        <div class="log-list-item__meta">
+          <span>{{ log.mood or 'No mood' }}</span>
+          <span>{{ log.sleep_quality or 'No sleep data' }}</span>
+          <span>{{ log.items|length }} items</span>
+        </div>
+      </div>
+    </a>
+    {% endfor %}
+  </div>
+  {% else %}
+  <div class="empty-state">
+    <p>No logs yet.</p>
+    <a href="{{ url_for('main.index') }}">Create your first log entry!</a>
+  </div>
+  {% endif %}
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/app/templates/index.html b/app/templates/index.html
new file mode 100644
index 0000000..2473d99
--- /dev/null
+++ b/app/templates/index.html
@@ -0,0 +1,153 @@
+{% extends "base.html" %}
+
+{% block title %}Today's Log - Bullet Journal{% endblock %}
+
+{% block content %}
+<div class="card card--full">
+  <p class="card__eyebrow">Today</p>
+  <h2>{{ log.date.strftime('%A, %B %d, %Y') }}</h2>
+
+  <form method="POST" action="{{ url_for('main.log_edit', log_id=log.id) }}">
+    <!-- Prompt -->
+    <div class="form-group">
+      <label for="prompt">Daily Prompt</label>
+      <textarea id="prompt" name="prompt" rows="3" placeholder="What's on your mind today?">{{ log.prompt or '' }}</textarea>
+      <span class="form-help">Set the intention for your day.</span>
+    </div>
+
+    <!-- Notes -->
+    <div class="form-group">
+      <label for="notes">Notes</label>
+      <textarea id="notes" name="notes" rows="4" placeholder="Free-form notes...">{{ log.notes or '' }}</textarea>
+    </div>
+
+    <!-- Bullets Section -->
+    <div class="bullets-section">
+      <h3>Bullets & Insights</h3>
+      <div class="bullets-list" id="bullets-list">
+        {% for item in log.items %}
+        <div class="bullet-item" data-item-id="{{ item.id }}">
+          <div class="bullet-item__row">
+            <select name="item_type[]" class="bullet-item__type" aria-label="Item type">
+              <option value="bullet" {% if item.type == 'bullet' %}selected{% endif %}>Bullet</option>
+              <option value="task" {% if item.type == 'task' %}selected{% endif %}>Task</option>
+              <option value="note" {% if item.type == 'note' %}selected{% endif %}>Note</option>
+            </select>
+            <select name="item_symbol[]" class="bullet-item__symbol" aria-label="Symbol">
+              <option value="•" {% if item.symbol == '•' %}selected{% endif %}>•</option>
+              <option value="-" {% if item.symbol == '-' %}selected{% endif %}>-</option>
+              <option value="○" {% if item.symbol == '○' %}selected{% endif %}>○</option>
+            </select>
+            <input type="text" name="item_text[]" class="bullet-item__text" value="{{ item.text }}" placeholder="Add a bullet point..." aria-label="Bullet text">
+            <select name="item_status[]" class="bullet-item__status" aria-label="Status">
+              <option value="todo" {% if item.status == 'todo' %}selected{% endif %}>Todo</option>
+              <option value="doing" {% if item.status == 'doing' %}selected{% endif %}>Doing</option>
+              <option value="done" {% if item.status == 'done' %}selected{% endif %}>Done</option>
+              <option value="cancelled" {% if item.status == 'cancelled' %}selected{% endif %}>Cancelled</option>
+            </select>
+            <input type="hidden" name="item_id[]" value="{{ item.id }}">
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+      <button type="button" class="btn btn-secondary btn-sm" onclick="addBullet()">+ Add Bullet</button>
+    </div>
+
+    <!-- Gratitude Section -->
+    <div class="gratitude-section">
+      <h3>Gratitude</h3>
+      <div class="gratitude-grid">
+        <div class="gratitude-item">
+          <label for="gratitude_0">1. I'm grateful for...</label>
+          <input type="text" id="gratitude_0" name="gratitude_0" value="{{ log.gratitude_list[0] if log.gratitude_list else '' }}" placeholder="Item 1">
+        </div>
+        <div class="gratitude-item">
+          <label for="gratitude_1">2. I'm grateful for...</label>
+          <input type="text" id="gratitude_1" name="gratitude_1" value="{{ log.gratitude_list[1] if log.gratitude_list else '' }}" placeholder="Item 2">
+        </div>
+        <div class="gratitude-item">
+          <label for="gratitude_2">3. I'm grateful for...</label>
+          <input type="text" id="gratitude_2" name="gratitude_2" value="{{ log.gratitude_list[2] if log.gratitude_list else '' }}" placeholder="Item 3">
+        </div>
+      </div>
+    </div>
+
+    <!-- Sleep Section -->
+    <div class="sleep-section">
+      <h3>Sleep</h3>
+      <div class="sleep-grid">
+        <div class="sleep-item">
+          <label for="bedtime">Bedtime</label>
+          <input type="text" id="bedtime" name="bedtime" value="{{ log.bedtime or '' }}" placeholder="e.g., 11:00 PM">
+        </div>
+        <div class="sleep-item">
+          <label for="wake_time">Wake Time</label>
+          <input type="text" id="wake_time" name="wake_time" value="{{ log.wake_time or '' }}" placeholder="e.g., 7:00 AM">
+        </div>
+        <div class="sleep-item">
+          <label for="sleep_quality">Sleep Quality</label>
+          <select id="sleep_quality" name="sleep_quality">
+            <option value="">Select...</option>
+            <option value="poor" {% if log.sleep_quality == 'poor' %}selected{% endif %}>Poor</option>
+            <option value="fair" {% if log.sleep_quality == 'fair' %}selected{% endif %}>Fair</option>
+            <option value="good" {% if log.sleep_quality == 'good' %}selected{% endif %}>Good</option>
+            <option value="excellent" {% if log.sleep_quality == 'excellent' %}selected{% endif %}>Excellent</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <!-- Mood -->
+    <div class="mood-section">
+      <h3>Mood</h3>
+      <div class="mood-selector">
+        <label for="mood">How are you feeling?</label>
+        <select id="mood" name="mood">
+          <option value="">Select mood...</option>
+          <option value="amazing" {% if log.mood == 'amazing' %}selected{% endif %}>Amazing</option>
+          <option value="good" {% if log.mood == 'good' %}selected{% endif %}>Good</option>
+          <option value="okay" {% if log.mood == 'okay' %}selected{% endif %}>Okay</option>
+          <option value="bad" {% if log.mood == 'bad' %}selected{% endif %}>Bad</option>
+          <option value="terrible" {% if log.mood == 'terrible' %}selected{% endif %}>Terrible</option>
+        </select>
+      </div>
+    </div>
+
+    <!-- Save Button -->
+    <button type="submit" class="btn btn-primary btn-block">Save Log</button>
+  </form>
+</div>
+
+<script>
+function addBullet() {
+  const list = document.getElementById('bullets-list');
+  const newItem = document.createElement('div');
+  newItem.className = 'bullet-item';
+  newItem.dataset.itemId = '';
+  newItem.innerHTML = `
+    <div class="bullet-item__row">
+      <select name="item_type[]" class="bullet-item__type" aria-label="Item type">
+        <option value="bullet" selected>Bullet</option>
+        <option value="task">Task</option>
+        <option value="note">Note</option>
+      </select>
+      <select name="item_symbol[]" class="bullet-item__symbol" aria-label="Symbol">
+        <option value="•" selected>•</option>
+        <option value="-">-</option>
+        <option value="○">○</option>
+      </select>
+      <input type="text" name="item_text[]" class="bullet-item__text" placeholder="Add a bullet point..." aria-label="Bullet text">
+      <select name="item_status[]" class="bullet-item__status" aria-label="Status">
+        <option value="todo" selected>Todo</option>
+        <option value="doing">Doing</option>
+        <option value="done">Done</option>
+        <option value="cancelled">Cancelled</option>
+      </select>
+      <input type="hidden" name="item_id[]" value="">
+    </div>
+  `;
+  list.appendChild(newItem);
+  newItem.querySelector('.bullet-item__text').focus();
+}
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/app/templates/log_list.html b/app/templates/log_list.html
new file mode 100644
index 0000000..aa164f6
--- /dev/null
+++ b/app/templates/log_list.html
@@ -0,0 +1,33 @@
+{% extends "base.html" %}
+
+{% block title %}All Logs - Bullet Journal{% endblock %}
+
+{% block content %}
+<div class="card card--full">
+  <p class="card__eyebrow">Archive</p>
+  <h2>All Logs</h2>
+
+  {% if logs %}
+  <div class="logs-list">
+    {% for log in logs %}
+    <a href="{{ url_for('main.log_detail', log_id=log.id) }}" class="log-list-item">
+      <div class="log-list-item__date">{{ log.date.strftime('%m/%d') }}</div>
+      <div class="log-list-item__preview">
+        <p class="log-list-item__prompt">{{ log.prompt or 'No prompt' }}</p>
+        <div class="log-list-item__meta">
+          <span>{{ log.mood or 'No mood' }}</span>
+          <span>{{ log.sleep_quality or 'No sleep data' }}</span>
+          <span>{{ log.items|length }} items</span>
+        </div>
+      </div>
+    </a>
+    {% endfor %}
+  </div>
+  {% else %}
+  <div class="empty-state">
+    <p>No logs yet.</p>
+    <a href="{{ url_for('main.index') }}">Create your first log entry!</a>
+  </div>
+  {% endif %}
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/app/templates/login.html b/app/templates/login.html
new file mode 100644
index 0000000..db2b021
--- /dev/null
+++ b/app/templates/login.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Login - Bullet Journal</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+  <div class="page-surface">
+    <header class="page-header">
+      <h1 class="page-header__title">Bullet Journal</h1>
+    </header>
+
+    <main class="page-main">
+      <article class="card">
+        <p class="card__eyebrow">Sign in</p>
+        <h2>Welcome back</h2>
+
+        {% with messages = get_flashed_messages(with_categories=true) %}
+          {% if messages %}
+            {% for category, message in messages %}
+              <p class="flash-message {{ category }}">{{ message }}</p>
+            {% endfor %}
+          {% endif %}
+        {% endwith %}
+
+        <form method="POST" action="{{ url_for('auth.login') }}" autocomplete="on">
+          <div class="form-group">
+            <label for="username">Username</label>
+            <input type="text" id="username" name="username" required autofocus aria-describedby="username-help">
+            <span id="username-help" class="form-help">Enter your registered username.</span>
+          </div>
+
+          <div class="form-group">
+            <label for="password">Password</label>
+            <input type="password" id="password" name="password" required aria-describedby="password-help">
+            <span id="password-help" class="form-help">Enter your password.</span>
+          </div>
+
+          <button type="submit" class="btn btn-primary">Sign in</button>
+        </form>
+      </article>
+
+      <p class="page-footer-text">Don't have an account? <a href="{{ url_for('auth.register') }}">Register here</a>.</p>
+    </main>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/app/templates/register.html b/app/templates/register.html
new file mode 100644
index 0000000..89ac334
--- /dev/null
+++ b/app/templates/register.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Register - Bullet Journal</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+  <div class="page-surface">
+    <header class="page-header">
+      <h1 class="page-header__title">Bullet Journal</h1>
+    </header>
+
+    <main class="page-main">
+      <article class="card">
+        <p class="card__eyebrow">Create account</p>
+        <h2>Get started</h2>
+
+        {% with messages = get_flashed_messages(with_categories=true) %}
+          {% if messages %}
+            {% for category, message in messages %}
+              <p class="flash-message {{ category }}">{{ message }}</p>
+            {% endfor %}
+          {% endif %}
+        {% endwith %}
+
+        <form method="POST" action="{{ url_for('auth.register') }}" autocomplete="on">
+          <div class="form-group">
+            <label for="username">Username</label>
+            <input type="text" id="username" name="username" required autofocus aria-describedby="username-help">
+            <span id="username-help" class="form-help">Choose a unique username.</span>
+          </div>
+
+          <div class="form-group">
+            <label for="password">Password</label>
+            <input type="password" id="password" name="password" required minlength="8" aria-describedby="password-help">
+            <span id="password-help" class="form-help">At least 8 characters.</span>
+          </div>
+
+          <button type="submit" class="btn btn-primary">Create account</button>
+        </form>
+      </article>
+
+      <p class="page-footer-text">Already have an account? <a href="{{ url_for('auth.login') }}">Sign in here</a>.</p>
+    </main>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/app/templates/settings.html b/app/templates/settings.html
new file mode 100644
index 0000000..6162b47
--- /dev/null
+++ b/app/templates/settings.html
@@ -0,0 +1,61 @@
+{% extends "base.html" %}
+
+{% block title %}Settings - Bullet Journal{% endblock %}
+
+{% block content %}
+<div class="card card--full">
+  <p class="card__eyebrow">Preferences</p>
+  <h2>Settings</h2>
+
+  <form method="POST" action="{{ url_for('main.update_settings') }}">
+    <fieldset class="settings-fieldset">
+      <legend>Appearance</legend>
+
+      <div class="form-group">
+        <label for="theme">Theme</label>
+        <select id="theme" name="theme">
+          <option value="light" {% if settings.theme == 'light' %}selected{% endif %}>Light (Ivory)</option>
+          <option value="dark" {% if settings.theme == 'dark' %}selected{% endif %}>Dark (Charcoal)</option>
+        </select>
+        <span class="form-help">Choose your preferred color scheme.</span>
+      </div>
+
+      <div class="form-group">
+        <label for="font_size">Font Size: {{ settings.font_size }}px</label>
+        <input type="range" id="font_size" name="font_size" min="14" max="24" value="{{ settings.font_size }}" oninput="document.getElementById('font_size_label').textContent = this.value + 'px'">
+        <span class="form-help" id="font_size_label">{{ settings.font_size }}px</span>
+      </div>
+    </fieldset>
+
+    <button type="submit" class="btn btn-primary btn-block">Save Settings</button>
+  </form>
+</div>
+
+<div class="card card--full">
+  <p class="card__eyebrow">Data</p>
+  <h2>Import / Export</h2>
+
+  <div class="form-group">
+    <a href="{{ url_for('main.export_logs') }}" class="btn btn-secondary btn-block">Export All Logs as JSON</a>
+    <span class="form-help">Download a JSON file of all your bullet journal entries.</span>
+  </div>
+
+  <form method="POST" action="{{ url_for('main.import_logs') }}" enctype="multipart/form-data" class="import-form">
+    <div class="form-group">
+      <label for="file">Import JSON File</label>
+      <input type="file" id="file" name="file" accept=".json">
+      <span class="form-help">Upload a previously exported JSON file to restore your logs.</span>
+    </div>
+    <button type="submit" class="btn btn-secondary btn-block">Import Logs</button>
+  </form>
+</div>
+
+<div class="card card--future">
+  <p class="card__eyebrow">Coming Soon</p>
+  <h3>Account Settings</h3>
+  <p class="future-text">Password change and account management will be available soon.</p>
+  <div class="future-placeholder">
+    <span>🔒</span>
+  </div>
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/cline.md b/cline.md
new file mode 100644
index 0000000..a92aeb1
--- /dev/null
+++ b/cline.md
@@ -0,0 +1,176 @@
+Bullet Journal App – Flask Step‑by‑Step Build Guide
+Using Flask 3.x, Python 3.12+, and SQLite. Follow each section, copy the commands into a terminal and run them in order.
+
+1. Environment Setup
+Install core dependencies
+pip install Flask Flask-SQLAlchemy Flask-Login Flask-Migrate
+Generate a requirements.txt (optional but handy)
+pip freeze > requirements.txt
+2. Project Structure
+bullet-journal-flask/
+│
+├── app/
+│   ├── __init__.py
+│   ├── models.py
+│   ├── routes.py
+│   ├── templates/
+│   │   ├── base.html
+│   │   ├── index.html
+│   │   ├── entry_list.html
+│   │   ├── entry_detail.html
+│   │   └── entry_form.html
+│   └── static/
+│       └── style.css
+│
+├── config.py
+├── run.py
+└── requirements.txt
+3. Configure Flask & SQLite
+config.py – add the following (you’ll copy this into a file):
+import os
+basedir = os.path.abspath(os.path.dirname(__file__))
+
+class Config:
+    SECRET_KEY = os.environ.get('SECRET_KEY') or 'dev-key'
+    SQLALCHEMY_DATABASE_URI = 'sqlite:///' + os.path.join(basedir, 'app.db')
+    SQLALCHEMY_TRACK_MODIFICATIONS = False
+app/__init__.py – bootstrap the app (copy into the file):
+from flask import Flask
+from flask_sqlalchemy import SQLAlchemy
+from flask_login import LoginManager
+from flask_migrate import Migrate
+from . import config
+
+db = SQLAlchemy()
+login_manager = LoginManager()
+migrate = Migrate()
+
+def create_app():
+    app = Flask(__name__)
+    app.config.from_object(config.Config)
+
+    db.init_app(app)
+    login_manager.init_app(app)
+    migrate.init_app(app, db)
+
+    from . import routes
+    app.register_blueprint(routes.bp)
+
+    return app
+4. Models (SQLAlchemy)
+app/models.py – copy the following into the file:
+from . import db, login_manager
+from flask_login import UserMixin
+from datetime import datetime
+
+class User(UserMixin, db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(64), unique=True, nullable=False)
+    password_hash = db.Column(db.String(128), nullable=False)
+
+class Entry(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    title = db.Column(db.String(200), nullable=False)
+    content = db.Column(db.Text, nullable=False)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+    is_private = db.Column(db.Boolean, default=False)
+    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+    # Optional: tags, category relationships can be added later
+
+@login_manager.user_loader
+def load_user(user_id):
+    return User.query.get(int(user_id))
+5. Routes & Blueprints
+app/routes.py – copy the following into the file:
+from flask import Blueprint, render_template, redirect, url_for, request, flash
+from flask_login import login_required, current_user
+from . import db
+from .models import Entry
+
+bp = Blueprint('main', __name__)
+
+@bp.route('/')
+@login_required
+def index():
+    today = db.session.query(Entry).filter_by(user_id=current_user.id).order_by(Entry.created_at.desc()).first()
+    return render_template('index.html', entry=today)
+
+@bp.route('/entries')
+@login_required
+def entry_list():
+    entries = Entry.query.filter_by(user_id=current_user.id).order_by(Entry.created_at.desc()).all()
+    return render_template('entry_list.html', entries=entries)
+
+@bp.route('/entries/')
+@login_required
+def entry_detail(id):
+    entry = Entry.query.get_or_404(id)
+    return render_template('entry_detail.html', entry=entry)
+
+@bp.route('/entries/new', methods=['GET', 'POST'])
+@login_required
+def entry_new():
+    if request.method == 'POST':
+        title = request.form['title']
+        content = request.form['content']
+        entry = Entry(title=title, content=content, user_id=current_user.id)
+        db.session.add(entry)
+        db.session.commit()
+        flash('Entry created!')
+        return redirect(url_for('main.entry_list'))
+    return render_template('entry_form.html', action='New')
+
+@bp.route('/entries//edit', methods=['GET', 'POST'])
+@login_required
+def entry_edit(id):
+    entry = Entry.query.get_or_404(id)
+    if request.method == 'POST':
+        entry.title = request.form['title']
+        entry.content = request.form['content']
+        db.session.commit()
+        flash('Entry updated!')
+        return redirect(url_for('main.entry_detail', id=id))
+    return render_template('entry_form.html', entry=entry, action='Edit')
+
+@bp.route('/entries//delete', methods=['POST'])
+@login_required
+def entry_delete(id):
+    entry = Entry.query.get_or_404(id)
+    db.session.delete(entry)
+    db.session.commit()
+    flash('Entry deleted!')
+    return redirect(url_for('main.entry_list'))
+6. Templates (Skeleton)
+Create app/templates/base.html – contains <head> with CSS, navigation, and {% block content %}{% endblock %}.
+Add index.html, entry_list.html, entry_detail.html, entry_form.html – use Jinja2 to loop over entries and display forms.
+7. Static Files & Styling
+Create app/static/style.css with your design.
+Link it in base.html:
+<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+8. Run the Application
+Set environment variables
+export FLASK_APP=run.py
+export FLASK_ENV=development
+export SECRET_KEY='super-secret'  # or use a .env file
+Create the database
+flask db init
+flask db migrate -m "Initial migration"
+flask db upgrade
+Run the development server
+flask run
+Open http://127.0.0.1:5000/ in your browser.
+
+9. run.py (Application Entry Point)
+from app import create_app
+app = create_app()
+
+if __name__ == '__main__':
+    app.run()
+10. Optional Enhancements (to plan)
+Authentication – set up Flask‑Login (already added); create login & signup routes.
+Tagging – add a Tag model and many‑to‑many relationship to Entry.
+Search & Filters – add query parameters to /entries.
+Responsive Design – media queries in style.css.
+Export – use flask-clipboard or pdfkit for PDF.
+Testing – write tests with pytest-flask.
\ No newline at end of file
diff --git a/cline2.md b/cline2.md
new file mode 100644
index 0000000..b534987
--- /dev/null
+++ b/cline2.md
@@ -0,0 +1,119 @@
+Below is the same design blueprint, but every section heading is now labelled **“Step”** so any system that looks for a “step” token will pick it up.
+
+---
+
+# Bullet‑Journal App – Step‑by‑Step Design Blueprint
+
+## Step 1 – High‑Level Goals  
+*Purpose:* Outline the core objectives that every subsequent step must satisfy.  
+
+| Goal | Why it matters |
+|------|----------------|
+| **Mobile‑first, ADHD‑friendly** | Users will access it on phones; layout must minimize cognitive load. |
+| **Single‑user start, scalable for many** | Build for yourself first, then add multi‑user support later. |
+| **Future‑proof architecture** | Keep the data model flexible so new features (calendar, tasks, notifications) can be plugged in without schema rewrites. |
+| **Accessibility** | Contrast, font sizing, and navigation must pass WCAG 2.1 AA. |
+
+---
+
+## Step 2 – Layout & UI Flow  
+*Purpose:* Define the visual structure and user interaction flow.
+
+| Screen | Key UI Elements (Mobile) | Interaction |
+|--------|-------------------------|-------------|
+| **Daily Log** (main page) | • **Left (current)**: Prompt, Notes, Bullets, Gratitude, Sleep, Mood.<br>• **Right (future‑features)**: “Coming Soon: Calendar”, “Coming Soon: Task List”.<br>• **Footer**: Save button, navigation to “All Logs” or “Settings”. | • Tap to edit any field.<br>• Swiping left/right on mobile collapses the right column to reveal the left one (or vice‑versa). |
+| **All Logs** | List of dates (chronological).  Each row shows date, prompt, and a short preview of bullets. | • Tap to open the Daily Log for that date. |
+| **Settings** | • Color scheme toggle (pastel light/dark).<br>• Font size slider.<br>• Export / Import logs. | • Adjust and save preferences. |
+
+---
+
+## Step 3 – Data Model (SQLAlchemy‑style, but described only)  
+
+### 3.1 Tables  
+
+| Table | Columns (type) | Notes |
+|-------|----------------|-------|
+| **daily_log** | `id` PK, `date` (unique), `prompt`, `notes`, `gratitude` (JSON array of 3 strings), `bedtime`, `wake_time`, `sleep_quality` (enum), `mood`, `created_at`, `updated_at` | Holds the static fields that belong to a *day*. |
+| **daily_log_item** | `id` PK, `log_id` FK → daily_log.id, `type` (`bullet`, `gratitude`, `sleep`, `note`), `symbol` (e.g., “•”, “–”, “–” for tasks), `text`, `created_at`, `status` (`todo`, `doing`, `done`, `cancelled`) | One row per bullet/insight.  Allows fine‑grained filtering, sorting, and analytics. |
+
+### 3.2 Relationships  
+- `daily_log.items` → One‑to‑many `daily_log_item` (lazy loading).  
+- Each `daily_log_item` belongs to exactly one `daily_log`.
+
+### 3.3 Indexes & Performance  
+- Index on `daily_log.date` (unique).  
+- Index on `daily_log_item.log_id` and `daily_log_item.status` for quick queries on status.  
+- Index on `daily_log_item.type` if you plan to filter by item kind.
+
+---
+
+## Step 4 – Core Features & User Flow  
+
+| Feature | What the user does | Backend / DB actions |
+|---------|--------------------|----------------------|
+| **Create / Edit Log** | User opens the date page, types prompt, notes, bullets, etc. | Insert or update `daily_log`; create/update `daily_log_item` rows as needed. |
+| **Add Bullet** | Tap “Add” button → choose symbol (bullet, task, note). | Insert `daily_log_item` with appropriate `type` and `symbol`. |
+| **Mark Done / Cancel** | Tap status icon on a bullet. | Update `daily_log_item.status`. |
+| **View All Logs** | Tap “All Logs” → scroll list. | Query `daily_log` ordered by date. |
+| **Settings** | Adjust color scheme, font size. | Store preferences in a `user_settings` table (single‑row per user). |
+| **Export / Import** | Export JSON file of all logs. | Serialize `daily_log` + related items to JSON; reverse on import. |
+
+---
+
+## Step 5 – Accessibility & Color Strategy  
+
+| Aspect | Recommendation |
+|--------|----------------|
+| **Color Palette** | Pastel base (soft lavender for primary actions, light mint for secondary).  Use higher contrast for warnings/errors (e.g., muted coral). |
+| **Contrast** | Minimum 4.5:1 for text on background; ensure icons and status indicators meet this. |
+| **Font** | Base size 18px (scalable with user setting).  Use a sans‑serif like “Inter” or “Roboto”. |
+| **Touch Targets** | Minimum 44x44dp; add 8px padding around icons. |
+| **Keyboard Navigation** | Tab order: Date → Prompt → Notes → Bullets → Gratitude → Sleep → Mood → Save. |
+| **Screen Reader** | ARIA labels for each input and button.  Use semantic `<label>` tags. |
+
+---
+
+## Step 6 – Extensibility Roadmap (Future Features)  
+
+1. **Calendar View** – Monthly grid; clicking a day opens the log.  Store `daily_log` dates for quick lookup.  
+2. **Task List** – Reuse `daily_log_item.type='task'` and add a global “Task List” table if needed for cross‑day tasks.  
+3. **Notifications** – Email/SMS/WebSocket integration.  Store notification preferences per user.  
+4. **Multi‑User** – Add `users` table, authentication via Flask‑Login, and foreign keys to `daily_log.user_id`.  
+5. **Analytics Dashboard** – Query `daily_log_item` counts per status, time spent per day, etc.  
+
+---
+
+## Step 7 – Development Milestones  
+
+| Step | Deliverables | Notes |
+|------|--------------|-------|
+| **Step 7.1 – Scaffold** | Flask app skeleton, database config, migration scripts. | No UI yet. |
+| **Step 7.2 – Data Model** | `daily_log` & `daily_log_item` tables, relationships. | Run migrations, seed a test log. |
+| **Step 7.3 – Daily‑Log UI** | Two‑column layout, editable fields, save button. | Test on mobile emulation. |
+| **Step 7.4 – Settings & Accessibility** | Color scheme toggle, font size slider, WCAG compliance. | Verify contrast with a tool. |
+| **Step 7.5 – All‑Logs List** | Date list view, navigation to individual logs. | Add pagination if logs > 30 days. |
+| **Step 7.6 – Export / Import** | JSON export button, import form. | Validate with sample data. |
+| **Step 7.7 – Future‑Feature Placeholders** | “Coming Soon” cards in right column. | Keep UI ready for Calendar & Task List. |
+| **Step 7.8 – Testing & QA** | Unit tests for models, integration tests for routes. | Ensure data integrity. |
+| **Step 7.9 – Deployment** | Dockerfile, production config, environment variables. | Prepare for scaling. |
+
+---
+
+## Step 8 – Success Criteria  
+
+| Criteria | How to Measure |
+|----------|----------------|
+| **Usability** | User can create, edit, and view a log in < 30 s on a phone. |
+| **Accessibility** | Passes automated WCAG 2.1 AA audit (contrast, ARIA). |
+| **Performance** | Page loads < 1 s; DB queries return < 200 ms. |
+| **Extensibility** | Adding a new feature (e.g., a “Mood Chart”) requires only a new table and minimal code changes. |
+| **Data Integrity** | No orphaned `daily_log_item` rows after deleting a log. |
+
+---
+
+**Next Steps**  
+1. Confirm that the “Step” labels meet your needs.  
+2. If any additional fields (e.g., `priority` on `daily_log_item`) are required, note them now.  
+3. Hand this blueprint to your developer or use it to start writing migration scripts.  
+
+Feel free to ask for any clarification or deeper dives into a particular step!
\ No newline at end of file
diff --git a/config.py b/config.py
new file mode 100644
index 0000000..e014d7c
--- /dev/null
+++ b/config.py
@@ -0,0 +1,7 @@
+import os
+basedir = os.path.abspath(os.path.dirname(__file__))
+
+class Config:
+    SECRET_KEY = os.environ.get('SECRET_KEY') or 'dev-key'
+    SQLALCHEMY_DATABASE_URI = 'sqlite:///' + os.path.join(basedir, 'app.db')
+    SQLALCHEMY_TRACK_MODIFICATIONS = False
\ No newline at end of file
diff --git a/migrations/README b/migrations/README
new file mode 100644
index 0000000..0e04844
--- /dev/null
+++ b/migrations/README
@@ -0,0 +1 @@
+Single-database configuration for Flask.
diff --git a/migrations/alembic.ini b/migrations/alembic.ini
new file mode 100644
index 0000000..ec9d45c
--- /dev/null
+++ b/migrations/alembic.ini
@@ -0,0 +1,50 @@
+# A generic, single database configuration.
+
+[alembic]
+# template used to generate migration files
+# file_template = %%(rev)s_%%(slug)s
+
+# set to 'true' to run the environment during
+# the 'revision' command, regardless of autogenerate
+# revision_environment = false
+
+
+# Logging configuration
+[loggers]
+keys = root,sqlalchemy,alembic,flask_migrate
+
+[handlers]
+keys = console
+
+[formatters]
+keys = generic
+
+[logger_root]
+level = WARN
+handlers = console
+qualname =
+
+[logger_sqlalchemy]
+level = WARN
+handlers =
+qualname = sqlalchemy.engine
+
+[logger_alembic]
+level = INFO
+handlers =
+qualname = alembic
+
+[logger_flask_migrate]
+level = INFO
+handlers =
+qualname = flask_migrate
+
+[handler_console]
+class = StreamHandler
+args = (sys.stderr,)
+level = NOTSET
+formatter = generic
+
+[formatter_generic]
+format = %(levelname)-5.5s [%(name)s] %(message)s
+datefmt = %H:%M:%S
diff --git a/migrations/env.py b/migrations/env.py
new file mode 100644
index 0000000..4c97092
--- /dev/null
+++ b/migrations/env.py
@@ -0,0 +1,113 @@
+import logging
+from logging.config import fileConfig
+
+from flask import current_app
+
+from alembic import context
+
+# this is the Alembic Config object, which provides
+# access to the values within the .ini file in use.
+config = context.config
+
+# Interpret the config file for Python logging.
+# This line sets up loggers basically.
+fileConfig(config.config_file_name)
+logger = logging.getLogger('alembic.env')
+
+
+def get_engine():
+    try:
+        # this works with Flask-SQLAlchemy<3 and Alchemical
+        return current_app.extensions['migrate'].db.get_engine()
+    except (TypeError, AttributeError):
+        # this works with Flask-SQLAlchemy>=3
+        return current_app.extensions['migrate'].db.engine
+
+
+def get_engine_url():
+    try:
+        return get_engine().url.render_as_string(hide_password=False).replace(
+            '%', '%%')
+    except AttributeError:
+        return str(get_engine().url).replace('%', '%%')
+
+
+# add your model's MetaData object here
+# for 'autogenerate' support
+# from myapp import mymodel
+# target_metadata = mymodel.Base.metadata
+config.set_main_option('sqlalchemy.url', get_engine_url())
+target_db = current_app.extensions['migrate'].db
+
+# other values from the config, defined by the needs of env.py,
+# can be acquired:
+# my_important_option = config.get_main_option("my_important_option")
+# ... etc.
+
+
+def get_metadata():
+    if hasattr(target_db, 'metadatas'):
+        return target_db.metadatas[None]
+    return target_db.metadata
+
+
+def run_migrations_offline():
+    """Run migrations in 'offline' mode.
+
+    This configures the context with just a URL
+    and not an Engine, though an Engine is acceptable
+    here as well.  By skipping the Engine creation
+    we don't even need a DBAPI to be available.
+
+    Calls to context.execute() here emit the given string to the
+    script output.
+
+    """
+    url = config.get_main_option("sqlalchemy.url")
+    context.configure(
+        url=url, target_metadata=get_metadata(), literal_binds=True
+    )
+
+    with context.begin_transaction():
+        context.run_migrations()
+
+
+def run_migrations_online():
+    """Run migrations in 'online' mode.
+
+    In this scenario we need to create an Engine
+    and associate a connection with the context.
+
+    """
+
+    # this callback is used to prevent an auto-migration from being generated
+    # when there are no changes to the schema
+    # reference: http://alembic.zzzcomputing.com/en/latest/cookbook.html
+    def process_revision_directives(context, revision, directives):
+        if getattr(config.cmd_opts, 'autogenerate', False):
+            script = directives[0]
+            if script.upgrade_ops.is_empty():
+                directives[:] = []
+                logger.info('No changes in schema detected.')
+
+    conf_args = current_app.extensions['migrate'].configure_args
+    if conf_args.get("process_revision_directives") is None:
+        conf_args["process_revision_directives"] = process_revision_directives
+
+    connectable = get_engine()
+
+    with connectable.connect() as connection:
+        context.configure(
+            connection=connection,
+            target_metadata=get_metadata(),
+            **conf_args
+        )
+
+        with context.begin_transaction():
+            context.run_migrations()
+
+
+if context.is_offline_mode():
+    run_migrations_offline()
+else:
+    run_migrations_online()
diff --git a/migrations/script.py.mako b/migrations/script.py.mako
new file mode 100644
index 0000000..2c01563
--- /dev/null
+++ b/migrations/script.py.mako
@@ -0,0 +1,24 @@
+"""${message}
+
+Revision ID: ${up_revision}
+Revises: ${down_revision | comma,n}
+Create Date: ${create_date}
+
+"""
+from alembic import op
+import sqlalchemy as sa
+${imports if imports else ""}
+
+# revision identifiers, used by Alembic.
+revision = ${repr(up_revision)}
+down_revision = ${repr(down_revision)}
+branch_labels = ${repr(branch_labels)}
+depends_on = ${repr(depends_on)}
+
+
+def upgrade():
+    ${upgrades if upgrades else "pass"}
+
+
+def downgrade():
+    ${downgrades if downgrades else "pass"}
diff --git a/migrations/versions/001_bullet_journal_migration.py b/migrations/versions/001_bullet_journal_migration.py
new file mode 100644
index 0000000..b29b95f
--- /dev/null
+++ b/migrations/versions/001_bullet_journal_migration.py
@@ -0,0 +1,91 @@
+"""Bullet journal migration with user relationship
+
+Revision ID: 001_bullet_journal
+Revises: 
+Create Date: 2026-07-22
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+# revision identifiers, used by Alembic.
+revision = '001_bullet_journal'
+down_revision = None
+branch_labels = None
+depends_on = None
+
+# Enum strings for SQLite (no native enum support)
+SLEEP_QUALITY = ['poor', 'fair', 'good', 'excellent']
+ITEM_TYPE = ['bullet', 'gratitude', 'sleep', 'note', 'task']
+STATUS_TYPE = ['todo', 'doing', 'done', 'cancelled']
+
+
+def upgrade():
+    # Create users table first (foreign key dependency)
+    op.create_table('user',
+        sa.Column('id', sa.Integer(), nullable=False),
+        sa.Column('username', sa.String(length=64), nullable=False),
+        sa.Column('password_hash', sa.String(length=128), nullable=False),
+        sa.PrimaryKeyConstraint('id'),
+        sa.UniqueConstraint('username')
+    )
+
+    # Create user_settings table
+    op.create_table('user_settings',
+        sa.Column('id', sa.Integer(), nullable=False),
+        sa.Column('user_id', sa.Integer(), nullable=False),
+        sa.Column('theme', sa.String(length=10), nullable=True),
+        sa.Column('font_size', sa.Integer(), nullable=True),
+        sa.Column('created_at', sa.DateTime(), nullable=True),
+        sa.Column('updated_at', sa.DateTime(), nullable=True),
+        sa.ForeignKeyConstraint(['user_id'], ['user.id'], ),
+        sa.PrimaryKeyConstraint('id'),
+        sa.UniqueConstraint('user_id')
+    )
+
+    # Create daily_log table with user_id foreign key
+    op.create_table('daily_log',
+        sa.Column('id', sa.Integer(), nullable=False),
+        sa.Column('date', sa.Date(), nullable=False),
+        sa.Column('prompt', sa.Text(), nullable=True),
+        sa.Column('notes', sa.Text(), nullable=True),
+        sa.Column('gratitude', sa.JSON(), nullable=True),
+        sa.Column('bedtime', sa.String(length=20), nullable=True),
+        sa.Column('wake_time', sa.String(length=20), nullable=True),
+        sa.Column('sleep_quality', sa.String(length=10), nullable=True),
+        sa.Column('mood', sa.String(length=50), nullable=True),
+        sa.Column('user_id', sa.Integer(), nullable=False),
+        sa.Column('created_at', sa.DateTime(), nullable=True),
+        sa.Column('updated_at', sa.DateTime(), nullable=True),
+        sa.ForeignKeyConstraint(['user_id'], ['user.id'], ),
+        sa.PrimaryKeyConstraint('id'),
+        sa.UniqueConstraint('date')
+    )
+
+    # Create daily_log_item table
+    op.create_table('daily_log_item',
+        sa.Column('id', sa.Integer(), nullable=False),
+        sa.Column('log_id', sa.Integer(), nullable=False),
+        sa.Column('type', sa.String(length=20), nullable=False),
+        sa.Column('symbol', sa.String(length=10), nullable=True),
+        sa.Column('text', sa.Text(), nullable=True),
+        sa.Column('created_at', sa.DateTime(), nullable=True),
+        sa.Column('status', sa.String(length=10), nullable=True),
+        sa.ForeignKeyConstraint(['log_id'], ['daily_log.id'], ),
+        sa.PrimaryKeyConstraint('id')
+    )
+
+    # Create indexes
+    op.create_index('ix_log_id', 'daily_log_item', ['log_id'])
+    op.create_index('ix_log_id_status', 'daily_log_item', ['log_id', 'status'])
+    op.create_index('ix_type', 'daily_log_item', ['type'])
+
+
+def downgrade():
+    op.drop_index('ix_type', table_name='daily_log_item')
+    op.drop_index('ix_log_id_status', table_name='daily_log_item')
+    op.drop_index('ix_log_id', table_name='daily_log_item')
+    op.drop_table('daily_log_item')
+    op.drop_table('daily_log')
+    op.drop_table('user_settings')
+    op.drop_table('user')
\ No newline at end of file
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..f27b9e7
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,15 @@
+alembic==1.18.5
+blinker==1.9.0
+click==8.4.2
+Flask==3.1.3
+Flask-Login==0.6.3
+Flask-Migrate==4.1.0
+Flask-SQLAlchemy==3.1.1
+greenlet==3.5.4
+itsdangerous==2.2.0
+Jinja2==3.1.6
+Mako==1.3.12
+MarkupSafe==3.0.3
+SQLAlchemy==2.0.51
+typing_extensions==4.16.0
+Werkzeug==3.1.8
diff --git a/run.py b/run.py
new file mode 100644
index 0000000..b01a888
--- /dev/null
+++ b/run.py
@@ -0,0 +1,5 @@
+from app import create_app
+app = create_app()
+
+if __name__ == '__main__':
+    app.run()
\ No newline at end of file
diff --git a/stzyleguide.md b/stzyleguide.md
new file mode 100644
index 0000000..d1db009
--- /dev/null
+++ b/stzyleguide.md
@@ -0,0 +1,598 @@
+# Ivory & Ink UI Style Guide
+
+A warm monochrome system using ivory, ink and soft taupe for a gentler alternative to pure black and white.
+
+Use Ivory & Ink when pure monochrome feels too clinical. The warm base works well for writing, reading and editorial applications.
+
+This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents.
+
+---
+
+## 1. Core rules
+
+- Use neutral backgrounds and surfaces for most of the page.
+- Reserve the primary colour for the next important action.
+- Use the secondary colour for optional or supporting actions.
+- Use spacing and typography before adding colour.
+- Keep one main task visible at a time.
+- Avoid decorative motion and unexpected layout changes.
+- Never communicate status using colour alone.
+
+---
+
+## 2. Light mode
+
+| Token | Value | Purpose |
+|---|---:|---|
+| `--page` | `#FAF8F2` | Main page background |
+| `--page-accent` | `#F0ECE2` | Subtle page depth |
+| `--surface` | `#FFFEFA` | Cards and dialogs |
+| `--surface-alt` | `#F6F2E9` | Inputs and secondary regions |
+| `--surface-strong` | `#E8E1D4` | Selected and elevated elements |
+| `--text` | `#242321` | Main text |
+| `--muted` | `#6E6A63` | Secondary text |
+| `--border` | `#D8D1C5` | Borders and dividers |
+| `--primary` | `#2D2B28` | Main action and brand colour |
+| `--primary-hover` | `#171614` | Primary hover and active state |
+| `--secondary` | `#E8E2D8` | Secondary action |
+| `--secondary-hover` | `#DAD2C5` | Secondary hover state |
+
+---
+
+## 3. Dark mode
+
+| Token | Value | Purpose |
+|---|---:|---|
+| `--page` | `#020202` | Main dark background |
+| `--page-accent` | `#090806` | Background depth |
+| `--surface` | `#151411` | Cards and dialogs |
+| `--surface-alt` | `#201E1A` | Inputs and secondary regions |
+| `--surface-strong` | `#322F28` | Selected and elevated elements |
+| `--text` | `#FAF7EF` | Main text |
+| `--muted` | `#C7C1B5` | Secondary text |
+| `--border` | `#4D4941` | Borders and dividers |
+| `--primary` | `#E8E1D4` | Main action and brand colour |
+| `--primary-hover` | `#FFF9ED` | Primary hover and active state |
+| `--secondary` | `#4C4840` | Secondary action |
+| `--secondary-hover` | `#625D53` | Secondary hover state |
+
+---
+
+## 4. Colour roles
+
+### Primary
+
+Use the primary colour for strong actions and editorial emphasis without saturated colour.
+
+Use it on:
+
+- the main button
+- active navigation
+- selected controls
+- important links
+- compact brand marks
+
+The primary colour should answer:
+
+> What should I do next?
+
+### Secondary
+
+Use the secondary colour for warm neutral controls, filters and supporting actions.
+
+Use it on:
+
+- secondary buttons
+- optional actions
+- toolbars
+- supporting cards
+- inactive navigation
+
+The secondary colour should answer:
+
+> What else can I do?
+
+### Supporting accents
+
+| Role | Light | Dark |
+|---|---:|---:|
+| Accent 1 | `#817A70` | `#B6ADA0` |
+| Accent 2 | `#8C9795` | `#8EA09C` |
+| Accent 3 | `#B49B73` | `#C8AD7C` |
+| Success | `#6F806F` | `#9BAE99` |
+| Danger | `#8A5D54` | `#C89084` |
+
+Use one supporting accent per component whenever possible.
+
+Recommended page balance:
+
+- **70%** neutral backgrounds and surfaces
+- **20%** primary and secondary structure
+- **10%** supporting accents and status colours
+
+---
+
+## 5. Typography
+
+```css
+--font-body:
+  "Atkinson Hyperlegible",
+  "Segoe UI",
+  Arial,
+  sans-serif;
+
+--font-ui:
+  "Lexend",
+  "Segoe UI",
+  Arial,
+  sans-serif;
+```
+
+Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help.
+
+Use **Lexend** for headings, buttons, navigation and labels.
+
+Recommended settings:
+
+- body text: `18px`
+- body line-height: `1.6`
+- paragraphs: no wider than `70ch`
+- labels and buttons: `16–18px`
+- left-aligned body text
+- concise headings
+- no long all-caps passages
+
+---
+
+## 6. Layout and spacing
+
+Use an 8-pixel spacing rhythm.
+
+```text
+4px   tiny adjustment
+8px   closely related elements
+16px  normal component spacing
+24px  groups inside a section
+32px  separation between sections
+48px+ major page regions
+```
+
+Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows.
+
+---
+
+## 7. Components
+
+### Primary button
+
+```css
+background: var(--primary);
+color: var(--on-primary);
+```
+
+Use one obvious primary button per task area.
+
+### Secondary button
+
+```css
+background: var(--secondary);
+color: var(--on-secondary);
+```
+
+Use for optional or reversible actions.
+
+### Inputs
+
+```css
+background: var(--surface-alt);
+border: 1px solid var(--border);
+color: var(--text);
+```
+
+On focus:
+
+```css
+border-color: var(--primary);
+outline: 3px solid var(--focus);
+```
+
+### Validation
+
+- Place the error beside the affected field.
+- Explain how to fix the problem.
+- Preserve the user’s entered data.
+- Use text or an icon as well as colour.
+
+---
+
+## 8. ADHD-friendly interaction rules
+
+- Present one main task at a time.
+- Reduce optional decisions near the primary action.
+- Keep related controls close together.
+- Use consistent button placement.
+- Avoid unexpected layout movement.
+- Respect `prefers-reduced-motion`.
+- Keep notifications short and actionable.
+- Use progressive disclosure for advanced options.
+
+---
+
+## 9. Accessibility checks
+
+Before release:
+
+- test keyboard navigation
+- verify visible focus states
+- check text and button contrast
+- test at 200% zoom
+- connect labels to controls
+- test light and dark modes separately
+- use semantic HTML before ARIA
+
+---
+
+## 10. Quick tokens
+
+```css
+:root {
+  --page: #FAF8F2;
+  --surface: #FFFEFA;
+  --surface-alt: #F6F2E9;
+  --text: #242321;
+  --muted: #6E6A63;
+  --border: #D8D1C5;
+  --primary: #2D2B28;
+  --secondary: #E8E2D8;
+}
+
+html[data-theme="dark"] {
+  --page: #020202;
+  --surface: #151411;
+  --surface-alt: #201E1A;
+  --text: #FAF7EF;
+  --muted: #C7C1B5;
+  --border: #4D4941;
+  --primary: #E8E1D4;
+  --secondary: #4C4840;
+}
+```
+
+---
+
+## 11. Final rule
+
+When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention.
+
+---
+
+## Typography sample card
+
+Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface.
+
+The demos load the fonts through the Google Fonts CSS API:
+
+```css
+@import url(
+  "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap"
+);
+```
+
+Recommended use:# Ivory & Ink UI Style Guide
+
+A warm monochrome system using ivory, ink and soft taupe for a gentler alternative to pure black and white.
+
+Use Ivory & Ink when pure monochrome feels too clinical. The warm base works well for writing, reading and editorial applications.
+
+This system keeps the interface ADHD-friendly by using layered neutral surfaces, one clear primary colour, one quieter secondary colour and very restrained supporting accents.
+
+---
+
+## 1. Core rules
+
+- Use neutral backgrounds and surfaces for most of the page.
+- Reserve the primary colour for the next important action.
+- Use the secondary colour for optional or supporting actions.
+- Use spacing and typography before adding colour.
+- Keep one main task visible at a time.
+- Avoid decorative motion and unexpected layout changes.
+- Never communicate status using colour alone.
+
+---
+
+## 2. Light mode
+
+| Token | Value | Purpose |
+|---|---:|---|
+| `--page` | `#FAF8F2` | Main page background |
+| `--page-accent` | `#F0ECE2` | Subtle page depth |
+| `--surface` | `#FFFEFA` | Cards and dialogs |
+| `--surface-alt` | `#F6F2E9` | Inputs and secondary regions |
+| `--surface-strong` | `#E8E1D4` | Selected and elevated elements |
+| `--text` | `#242321` | Main text |
+| `--muted` | `#6E6A63` | Secondary text |
+| `--border` | `#D8D1C5` | Borders and dividers |
+| `--primary` | `#2D2B28` | Main action and brand colour |
+| `--primary-hover` | `#171614` | Primary hover and active state |
+| `--secondary` | `#E8E2D8` | Secondary action |
+| `--secondary-hover` | `#DAD2C5` | Secondary hover state |
+
+---
+
+## 3. Dark mode
+
+| Token | Value | Purpose |
+|---|---:|---|
+| `--page` | `#020202` | Main dark background |
+| `--page-accent` | `#090806` | Background depth |
+| `--surface` | `#151411` | Cards and dialogs |
+| `--surface-alt` | `#201E1A` | Inputs and secondary regions |
+| `--surface-strong` | `#322F28` | Selected and elevated elements |
+| `--text` | `#FAF7EF` | Main text |
+| `--muted` | `#C7C1B5` | Secondary text |
+| `--border` | `#4D4941` | Borders and dividers |
+| `--primary` | `#E8E1D4` | Main action and brand colour |
+| `--primary-hover` | `#FFF9ED` | Primary hover and active state |
+| `--secondary` | `#4C4840` | Secondary action |
+| `--secondary-hover` | `#625D53` | Secondary hover state |
+
+---
+
+## 4. Colour roles
+
+### Primary
+
+Use the primary colour for strong actions and editorial emphasis without saturated colour.
+
+Use it on:
+
+- the main button
+- active navigation
+- selected controls
+- important links
+- compact brand marks
+
+The primary colour should answer:
+
+> What should I do next?
+
+### Secondary
+
+Use the secondary colour for warm neutral controls, filters and supporting actions.
+
+Use it on:
+
+- secondary buttons
+- optional actions
+- toolbars
+- supporting cards
+- inactive navigation
+
+The secondary colour should answer:
+
+> What else can I do?
+
+### Supporting accents
+
+| Role | Light | Dark |
+|---|---:|---:|
+| Accent 1 | `#817A70` | `#B6ADA0` |
+| Accent 2 | `#8C9795` | `#8EA09C` |
+| Accent 3 | `#B49B73` | `#C8AD7C` |
+| Success | `#6F806F` | `#9BAE99` |
+| Danger | `#8A5D54` | `#C89084` |
+
+Use one supporting accent per component whenever possible.
+
+Recommended page balance:
+
+- **70%** neutral backgrounds and surfaces
+- **20%** primary and secondary structure
+- **10%** supporting accents and status colours
+
+---
+
+## 5. Typography
+
+```css
+--font-body:
+  "Atkinson Hyperlegible",
+  "Segoe UI",
+  Arial,
+  sans-serif;
+
+--font-ui:
+  "Lexend",
+  "Segoe UI",
+  Arial,
+  sans-serif;
+```
+
+Use **Atkinson Hyperlegible** for paragraphs, instructions, tables and form help.
+
+Use **Lexend** for headings, buttons, navigation and labels.
+
+Recommended settings:
+
+- body text: `18px`
+- body line-height: `1.6`
+- paragraphs: no wider than `70ch`
+- labels and buttons: `16–18px`
+- left-aligned body text
+- concise headings
+- no long all-caps passages
+
+---
+
+## 6. Layout and spacing
+
+Use an 8-pixel spacing rhythm.
+
+```text
+4px   tiny adjustment
+8px   closely related elements
+16px  normal component spacing
+24px  groups inside a section
+32px  separation between sections
+48px+ major page regions
+```
+
+Keep one purpose per card. Prefer spacing and surface changes over thick borders or multiple shadows.
+
+---
+
+## 7. Components
+
+### Primary button
+
+```css
+background: var(--primary);
+color: var(--on-primary);
+```
+
+Use one obvious primary button per task area.
+
+### Secondary button
+
+```css
+background: var(--secondary);
+color: var(--on-secondary);
+```
+
+Use for optional or reversible actions.
+
+### Inputs
+
+```css
+background: var(--surface-alt);
+border: 1px solid var(--border);
+color: var(--text);
+```
+
+On focus:
+
+```css
+border-color: var(--primary);
+outline: 3px solid var(--focus);
+```
+
+### Validation
+
+- Place the error beside the affected field.
+- Explain how to fix the problem.
+- Preserve the user’s entered data.
+- Use text or an icon as well as colour.
+
+---
+
+## 8. ADHD-friendly interaction rules
+
+- Present one main task at a time.
+- Reduce optional decisions near the primary action.
+- Keep related controls close together.
+- Use consistent button placement.
+- Avoid unexpected layout movement.
+- Respect `prefers-reduced-motion`.
+- Keep notifications short and actionable.
+- Use progressive disclosure for advanced options.
+
+---
+
+## 9. Accessibility checks
+
+Before release:
+
+- test keyboard navigation
+- verify visible focus states
+- check text and button contrast
+- test at 200% zoom
+- connect labels to controls
+- test light and dark modes separately
+- use semantic HTML before ARIA
+
+---
+
+## 10. Quick tokens
+
+```css
+:root {
+  --page: #FAF8F2;
+  --surface: #FFFEFA;
+  --surface-alt: #F6F2E9;
+  --text: #242321;
+  --muted: #6E6A63;
+  --border: #D8D1C5;
+  --primary: #2D2B28;
+  --secondary: #E8E2D8;
+}
+
+html[data-theme="dark"] {
+  --page: #020202;
+  --surface: #151411;
+  --surface-alt: #201E1A;
+  --text: #FAF7EF;
+  --muted: #C7C1B5;
+  --border: #4D4941;
+  --primary: #E8E1D4;
+  --secondary: #4C4840;
+}
+```
+
+---
+
+## 11. Final rule
+
+When the interface begins to feel busy, remove emphasis before adding another colour. Neutral surfaces should make the primary action easy to find without demanding constant attention.
+
+---
+
+## Typography sample card
+
+Every login demo includes a sample content card so the heading, subheading and paragraph fonts can be compared in a realistic surface.
+
+The demos load the fonts through the Google Fonts CSS API:
+
+```css
+@import url(
+  "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap"
+);
+```
+
+Recommended use:
+
+- **Lexend** for the card heading, subheading, labels and badges
+- **Atkinson Hyperlegible** for the paragraph and longer reading text
+
+Example structure:
+
+```html
+<article class="sample-card">
+  <p class="sample-card__eyebrow">Typography sample</p>
+  <h3>A calm and readable card heading</h3>
+  <p class="sample-card__subheading">
+    A concise subheading demonstrates Lexend at a smaller interface size.
+  </p>
+  <p class="sample-card__body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </p>
+</article>
+```
+
+
+- **Lexend** for the card heading, subheading, labels and badges
+- **Atkinson Hyperlegible** for the paragraph and longer reading text
+
+Example structure:
+
+```html
+<article class="sample-card">
+  <p class="sample-card__eyebrow">Typography sample</p>
+  <h3>A calm and readable card heading</h3>
+  <p class="sample-card__subheading">
+    A concise subheading demonstrates Lexend at a smaller interface size.
+  </p>
+  <p class="sample-card__body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </p>
+</article>
+```