There has been confusion around:

• whether the project has started
• what exactly is being built
• how the system works

That confusion is valid.

A lot of work was done quickly, but not explained properly.

This document fixes that.

Flollama Slides = AI-powered presentation engine

It converts:

Prompt → Structured Content → Designed Slides → Export

This is not just a UI project. This is a full product pipeline.

Landing Page
   ↓
Authentication (Firebase)
   ↓
Dashboard (Projects)
   ↓
Create / Open File
   ↓
User Prompt (Chat Panel)
   ↓
Flollama AI API
   ↓
AI Response (Message + Hidden Code)
   ↓
Structured Output (Controlled format)
   ↓
Frontend Renderer
   ↓
Slide UI (Viewer Panel)

↓ (Next Phase)

Renderer → Export Pipeline → PPT / PDF

• Displays all presentations
• Sorting options
• Entry point

• Center → Slide Viewer
• Right → Chat Panel
• Bottom → Slide Thumbnails
• Top → Controls

Figma: https://www.figma.com/design/0Scd5mIui9AMJCYqBO8vxI/flollama-slides

• Figma Screenshot:

  

• Blank Working:

  

• Current Working:

  

• Dashboard:

  

• Dashboard layout
• Editor states (initial, generating, completed)
• Component system
• Typography
• Color system
• Branding

This project uses a token-based design system.

Instead of hardcoding colors everywhere, we define design tokens and map them semantically.

This allows:

• theme switching (light/dark)
• consistency across UI
• easier scaling and maintenance

The color system is divided into 4 layers:

1. Base colors
2. Raw theme tokens (light/dark)
3. Semantic tokens (used in UI)
4. Shade scale

--white: hsl(0, 0%, 100%);
--black: hsl(0, 0%, 0%);

These are absolute references.

• backgrounds (pure white sections)
• text in high contrast cases
• fallback styling

These define how the UI behaves in light mode.

--light-text: hsl(0, 0%, 11%);
--light-text-muted: hsla(0, 0%, 11%, 0.6);
--light-text-subtle: hsla(0, 0%, 0%, 0.4);

• text → primary readable content
• muted → secondary info (labels, descriptions)
• subtle → low-priority UI hints

• headings → text
• descriptions → muted
• placeholders → subtle

--light-bg: hsl(0, 0%, 96%);
--light-bg-inverted: hsl(0, 0%, 7%);
--light-bg-elevated: hsl(194, 32%, 92%);
--light-bg-hover: hsl(207, 35%, 94%);
--light-bg-popup: hsl(210, 40%, 96%);

• bg → main app background
• bg-inverted → used for contrast (dark buttons on light UI)
• bg-elevated → cards / panels
• bg-hover → hover states
• bg-popup → modals / dropdowns

Creates depth hierarchy without shadows only

• dashboard cards → elevated
• hover buttons → hover
• modal → popup

--light-accent: hsl(239, 32%, 48%);

Primary brand interaction color.

• buttons
• highlights
• active states
• links

--light-border: hsla(0, 0%, 11%, 0.1);
--light-shadow: hsla(0, 0%, 0%, 0.1);
--light-blur: hsla(0, 0%, 100%, 0.1);

• border → separation without harsh lines
• shadow → soft elevation
• blur → glass effects

• card edges
• popups
• floating UI

--light-danger: hsl(0, 74%, 42%);
--light-danger-text: hsl(0, 63%, 28%);

Error/destructive actions need strong visual signal.

• delete buttons
• warnings
• error states

--light-icon: hsl(0, 0%, 24%);

Icons shouldn’t be as strong as text.

• nav icons
• buttons
• UI controls

Same structure, inverted for dark UX.

--dark-text: hsl(0, 0%, 90%);
--dark-text-muted: hsla(0, 0%, 100%, 0.6);
--dark-text-subtle: hsla(0, 0%, 100%, 0.4);

High contrast on dark background without eye strain.

--dark-bg: hsl(0, 0%, 11%);
--dark-bg-inverted: hsl(208, 100%, 97%);
--dark-bg-elevated: hsl(0, 0%, 16%);
--dark-bg-hover: hsl(0, 0%, 18%);
--dark-bg-popup: hsl(0, 0%, 16%);

Layering in dark mode is subtle. Small % differences = depth.

--dark-accent: hsl(239, 78%, 87%);

Brighter accent needed to pop on dark UI.

--dark-border: hsla(0, 0%, 100%, 0.1);
--dark-shadow: hsla(0, 0%, 100%, 0.1);
--dark-blur: hsla(0, 0%, 0%, 0.1);

Dark UI uses light borders instead of dark ones.

--dark-danger: hsl(0, 63%, 31%);
--dark-danger-text: hsl(0, 63%, 64%);

Balanced red so it’s visible but not glowing aggressively.

--dark-icon: hsl(0, 0%, 76%);

Icons need to be visible but not overpower text.

--shade-50 → --shade-900

Used for:

• gradients
• subtle separators
• neutral UI tones

• skeleton loaders
• disabled states
• charts / visuals

--text: var(--dark-text);
--bg: var(--dark-bg);
--accent: var(--dark-accent);

UI should NOT depend on theme-specific names.

Instead of:

“use dark-bg”

You use:

“use bg”

Switching theme = automatic UI update No component rewrite needed

[data-theme="light"] { ... }
[data-theme="dark"] { ... }

• clean toggle system
• scalable
• no JS-heavy logic required

Colors mapped like:

text: "var(--text)"
bg: "var(--bg)"
accent: "var(--accent)"

• use Tailwind normally
• still keep design tokens

No random colors. Everything has a role.

Fonts:

• Inter (primary UI)
• Poppins (secondary)
• Ubuntu (branding)

Hierarchy ensures readability and structure.

This system is designed to ensure:

consistency scalability theme flexibility production-level UI quality

• Initial (empty)
• Generating (AI working)
• Completed (slides ready)

State-driven UI, not static.

We moved from:

Static UI playground

To:

Fully interactive AI-powered editor interface

This was not a small update.

This was:

a full phase transition

• Next.js full-stack architecture
• API routes (backend logic)
• Firebase (Auth + DB ready)
• Deployment pipeline working
• GitHub repo structured

Frontend (Next.js)
   ├── ViewerPanel
   ├── ChatPanel
   └── UI Components

Backend (Next API)
   └── Flollama AI

Database
   └── Firebase

We do NOT rely on raw AI text.

Instead:

AI → structured output → controlled rendering

• Visible message (for user)
• Hidden code (for system)

The UI only shows:

clean output

System uses:

structured logic internally

We will:

Convert structured output into:

• HTML
• Markdown
• CSS layouts
• OR custom JS

Then:

Use an npm library to render and export PPT/PDF

• Not building PPT engine from scratch
• Find best library
• integrate fast

This project is built on:

• Next.js
• TypeScript
• TailwindCSS
• Figma
• Flollama AI system

We are NOT building a Python backend.

• System already exists in JS
• Integration tightly coupled
• Switching = delay + complexity + bugs

For:

• prompt engineering
• testing
• feedback
• structure optimization

Role: System Architect + Full Stack + Product Lead

• Built core system
• Handles architecture decisions
• Controls AI pipeline + integration
• Oversees final product

Role: Manager / Coordination / HR

• Keeps team aligned
• Tracks tasks
• Ensures participation
• Helps in presentation + documentation

Role: AI Support + Prompt Engineering

• Improve prompt quality
• Test structured outputs
• Help refine AI responses

Role: Backend Logic Research / AI Structuring

• Explore alternative generation flows
• Help optimize content structure
• Assist in export logic research

Role: Frontend Enhancement

• UI polish
• UX improvements
• Component refinement

Role: Cybersecurity

• Firebase rules
• Data validation
• Security testing

• Dashboard refinement
• Landing page
• Improve AI → structure quality
• Firebase auth + DB
• Background renderer + exporter
• AI dual response (message + hidden code)
• Master prompt engineering
• UI polish

Project belongs to Flollama UnInc.

• Licensed under FUNL v1.0
• Non-commercial use only
• Attribution required

See full Terms:

• User data collected for improvement
• Not fully end-to-end encrypted
• Stored for analytics and performance

This project is not starting.

It is already built.

Now we:

refine → complete → present

If you get it, you get it. If you don’t… read again 😏