Skip to main content
SoftsasiAI for Engineers
Sign in

§ masterplan.md

AI Typography Explorer

An unconventional tool that pairs fonts using AI, previews them on sample copy and exports a CSS snippet.

All ideas
Unconventional

01

App overview and objectives

A tool that proposes font pairings from a described mood, shows them in real layouts rather than alphabet specimens, and exports ready-to-paste CSS. It answers 'what should this look like' rather than 'what fonts exist'.

02

The problem worth solving

Designers and developers waste hours scrolling font libraries because specimens do not show how type behaves in a real hero, a paragraph, a caption. Judging in context takes seconds; judging in the abstract takes hours.

03

Target audience

  • Primary — Developers and solo founders who must make type decisions without a designer.
  • Secondary — Designers exploring directions quickly at the start of a project.

04

Roles and permissions

  • Visitor — read-only public pages, can sign up.
  • Member — owns their own records, cannot see other users' data.

05

Core features

  • Mood prompt input that returns three pairings with a rationale for each
  • Live preview in three real layouts: landing hero, article, dashboard
  • Per-pairing controls for scale, weight, tracking and line height
  • Contrast and readability check with a plain-language verdict
  • One-click export of CSS variables, Tailwind theme tokens and embed tags
  • Save pairings to a personal shelf with notes

Deliberately later

  • Brand kit export with colour
  • Team libraries
  • Figma plugin

06

Technical stack

React front end, a curated open-font index, server-side AI for the pairing rationale.

Why: The value is curation plus context, not raw model output — a hand-checked font index prevents recommendations for fonts nobody can license.

Alternatives: Pure algorithmic pairing by classification metadata (deterministic and free, less inspiring) or full model freedom (creative, frequently hallucinates fonts).

07

Conceptual data model

Font — family, classification, weights, licence, source URL

Pairing — heading font, body font, mood tags, rationale, score

SavedPairing — user, pairing, overrides, notes

ExportTemplate — format, template body

08

Integrations

  • Open font hosting
  • AI text model for rationale
  • Clipboard and file export

09

UI design principles

  • Break the grid on purpose: overlapping layers, oversized type, one surprising interaction per screen.
  • Motion carries meaning — elements should morph between states instead of hard-cutting.
  • Keep exactly one experimental idea per page so the interface stays usable, not chaotic.

10

Security considerations

  • Only index fonts with clear licences and surface the licence on every card.
  • Rate-limit generation to prevent scraping the pairing engine.
  • No account required to browse; accounts only for saving.

11

Development phases

Phase 1 — Prove the core

  • — Mood prompt input that returns three pairings with a rationale for each
  • — Live preview in three real layouts: landing hero, article, dashboard
  • — Per-pairing controls for scale, weight, tracking and line height
  • — Static content and design system in place
  • — Basic analytics

Phase 2 — Make it real

  • — Contrast and readability check with a plain-language verdict
  • — One-click export of CSS variables, Tailwind theme tokens and embed tags
  • — Save pairings to a personal shelf with notes
  • — Accounts, sign-in and password reset
  • — Empty, loading and error states everywhere

Phase 3 — Polish and launch

  • — Performance, accessibility and SEO pass
  • — Legal pages, contact route and 404 handling
  • — Wire up: Open font hosting
  • — Wire up: AI text model for rationale

Phase 4 — Grow

  • — Brand kit export with colour
  • — Team libraries
  • — Figma plugin

12

Challenges and solutions

Risk — Model suggests non-existent or non-free fonts

Solution — Constrain generation to the indexed catalogue and validate every suggestion before display.

Risk — Preview font loading jank

Solution — Subset and preload only the weights on screen; show a metric-matched fallback.

Risk — Bangla and other non-Latin scripts break pairings

Solution — Tag fonts by script coverage and pair per script.

13

Future expansion

  • Full design-token generator
  • Accessibility grading
  • Paid pro catalogue of commercial fonts

14

Page list (13 pages)

  1. 01 PUBLIC Pair — Prompt input and the three generated pairings.
  2. 02 PUBLIC Gallery — Community and editor-picked pairings.
  3. 03 PUBLIC Test — Real layout previews with fine-grained controls.
  4. 04 PUBLIC Export — CSS, Tailwind and embed output.
  5. 05 PUBLIC About — How pairings are chosen and licensing notes.
  6. 06 AUTH Sign up — Create an account with email or a social provider.
  7. 07 AUTH Log in — Return to the account, with error and lockout states.
  8. 08 AUTH Reset password — Request a reset link and set a new password.
  9. 09 APP (signed in) Account settings — Profile, email, password, language and delete account.
  10. 10 PUBLIC Contact — Contact form plus real address, phone and email.
  11. 11 LEGAL & SYSTEM Privacy policy — What data is collected, why, and how to remove it.
  12. 12 LEGAL & SYSTEM Terms of service — Rules of use, liability and account termination.
  13. 13 LEGAL & SYSTEM 404 not found — Friendly dead end with search and links back.

15

Page map

PUBLIC      AUTH               APP (signed in)      LEGAL & SYSTEM
──────────  ─────────────────  ───────────────────  ───────────────────
├─ Pair     ├─ Sign up         └─ Account settings  ├─ Privacy policy
├─ Gallery  ├─ Log in                               ├─ Terms of service
├─ Test     └─ Reset password                       └─ 404 not found
├─ Export
├─ About
└─ Contact

key flows:
  Pair ──▶ Test
  Test ──▶ Export
  Gallery ──▶ Test