Briefox is a modern web application built with Next.js and Tailwind CSS that offers free, AI-powered design utilities to boost creative productivity. From generating professional design briefs to recommending perfect Google Fonts and extracting color palettes from images — Briefox simplifies your workflow.
Briefox includes three core tools to assist designers, developers, and creators:
- Automatically generates professional and concise design briefs.
- Input your design type, industry, and style preference.
- Uses Gemini AI for smart prompt generation.
- No login or subscription required.
- Input a keyword and get font suggestions from Google Fonts.
- AI selects top 20 fonts that best represent the mood or style.
- Live preview with custom text.
- 100% free-to-use fonts.
- Upload an image and extract the top 10 dominant colors.
- Provides HEX and RGB formats.
- Download palette as PNG, JSON, or CSS Variables.
- Built using Color Thief.
- Framework: Next.js 14
- Styling: Tailwind CSS
- Animation: Shadcn UI + Magic UI
- AI Backend: Google Gemini Pro via API
- Rate Limiting: MongoDB (IP-based with TTL logic)
- Hosting: Vercel (with custom domain)
- Database: MongoDB Atlas (Rate Limit model)
git clone https://github.com/your-username/briefox.git
cd briefox
npm install
# or
yarn install
Create a .env.local file at the root and add the following:
GEMINI_API=your_gemini_api_key
GOOGLE_CLOUD_API=your_google_cloud_api_key
MONGODB_URI=your_mongodb_connection_uri
NEXT_PUBLIC_FONT_FINDER_ROUTE = /api/font-finder
NEXT_PUBLIC_PROMPT_ROUTE = /api/generate-brief
NEXT_PUBLIC_FONT_CACHE_ROUTE = /api/font-cache
Make sure Google Font API is Enabled in your Google Cloude.
npm run dev // Run dev server (localhost:3000)
npm run build // Build the app
Briefox is deployed on Vercel
- CI/CD is managed automatically via GitHub integration.
- Every push to
mainauto-deploys the latest version.