Inspiration
Custom patterns usually mean design software, a designer, or a stock library that looks like everyone else's. Monogrammar started from the idea that a feeling, such as "moody autumn in Paris" or "Miami sunset", should be enough to get a real, usable pattern. It's meant for creators, small brand owners and makers who want a signature pattern without design skills.
What it does
Monogrammar turns a vibe, a photo or a hand-picked palette into a seamless pattern. ** Five patterns :** houndstooth, gingham, glen plaid, damask and herringbone, with 2 to 5 colors each. ** Your own artwork :** upload an SVG or PNG (up to 5 MB) and use it as a tiled pattern or a single centered monogram. ** Textures :** optional fabric textiles (linen, wool, silk, velvet) and industrial finishes (glossy metal, brushed metal, iridescent, galvanized, oxidized). ** Previews :** a live swatch plus t-shirt and yoga pants mockups ** Downloads :** SVG and PNG files at 4096 px or larger. With a texture selected, you can download with or without it.
AI has one job: it turns a vibe or photo into a color palette. It never draws the pattern. If the AI step is unavailable, a curated fallback palette keeps the app working.
How we built it
** Front end :** Vite, React and TypeScript. ** Pattern engine :** every pattern is hand-written vector geometry. The houndstooth tooth was traced from a reference image. Textures are procedural SVG layers drawn over the geometry, which stays untouched underneath. ** Server :** a small Express server calls Gemini for palettes, with a deterministic fallback. ** Cloud :** it runs on Google Cloud Run. The Gemini key lives in Secret Manager and is never in the repo.
- ** GitLab pipeline :** the pipeline covers the full DevSecOps lifecycle.
- ** Plan and create :** issues and merge requests drive the work.
- ** Verify :** unit tests, plus a houndstooth quality gate (seamless edges, one solid color per motif, symmetry, minimum export resolution). ** Package :** Docker images tagged with the commit SHA go to the GitLab registry and Google Artifact Registry, with an SBOM. ** Secure: ** SAST and Secret Detection. ** Release and configure :** staging deploys automatically, and production needs one manual approval. The Cloud Run settings are in the pipeline.
- ** Monitor :** smoke tests check staging and production. ** Govern :** a license check and a compliance summary that records who approved production.
Challenges we ran into
- ** The houndstooth geometry :** early attempts tiled correctly but didn't match the reference. Tracing a whole tooth from the image fixed it.
- ** Slow AI responses :** some Gemini models took 60 to 100 seconds. We pinned a fast model.
- ** Smooth edges :** forced pixel-snapped rendering made diagonal edges jagged. We switched non-rectangular shapes to normal anti-aliasing and kept rectangles pixel-snapped so tile seams don't show. ** Safe uploads :** uploaded SVGs can carry scripts, event handlers, remote links and hidden metadata. PNGs can carry GPS and camera data. We sanitize SVGs and strip PNGs down to the chunks needed to display them.
- ** First deploy :** the first pipeline runs failed on Google authentication before the deploy worked.
Accomplishments we're proud of
- A working end-to-end pipeline from issue to staging to a manually approved production deploy.
- A test suite of nearly 200 automated tests, including seamless-tile checks that fail when the geometry is broken on purpose.
- Safe handling of untrusted uploads, with tests for rejected file types and oversized files.
- A product that actually works for a non-designer, from typing a vibe to downloading print-ready files.
What we learned
- Writing acceptance criteria first made it easier to build and test each feature.
- A quality bar written as automated checks catches problems that eyeballing doesn't.
- Visual work needs real renders. Screenshots caught bugs the tests didn't, such as stray specks on herringbone tips.
- Pipeline details matter: base64-encoding the credential so it can be masked and keeping security scans non-blocking.
What's next for Monogrammar
- Support JPG uploads, with metadata stripped safely.
- Add more patterns and textures.
- Add monitoring beyond smoke tests, such as uptime checks and alerts.
- Strengthen governance with protected environments and approval rules.
- Add dependency and container scanning to the pipeline.
- A built in png converter for attempted uploads that don't meet the criteria of being PNG or SVG
Log in or sign up for Devpost to join the conversation.