Morrow — Creative Studio HTML Template
Documentation
Thank you for choosing Morrow. This file works offline: open it from the documentation folder in any browser.
01
Getting started
- Unzip the package and open
index.htmlin a browser — it lists every demo in light and dark. - Pick the home you want as your front page and copy it over
light/index.html(ordark/index.html). - Edit texts and images directly in the HTML. No build step is needed to run the template.
- Upload the folder to any static host. Everything is local — fonts, libraries and icons — so no CDN is required.
Requirements: a modern browser (Chrome, Safari, Firefox, Edge — last two versions). Python 3 is only needed if you use the optional helper scripts in tools/.
02
Files & folders
Morrow/ ├── index.html demo picker ├── light/ 28 light pages ├── dark/ 27 dark pages (same file names) ├── assets/ │ ├── css/style.css the one theme stylesheet (built from css/src/) │ ├── css/src/ source, one file per page: 00-base, 11-home-studio, … │ ├── js/main.js shared behaviour (reveals, counters, lightbox, fit-to-width) │ ├── js/home-*.js … one script per page that needs one │ ├── vendor/ Bootstrap, jQuery, GSAP, Swiper, Magnific Popup, counterUp2, Font Awesome │ ├── fonts/ self-hosted .woff2 files │ └── images/ photos (placeholders in the download), brand mark, previews ├── documentation/ this file └── tools/ optional helpers: build-css.py, make-dark.py
Working with the CSS
You can edit assets/css/style.css directly. If you prefer the source files, edit assets/css/src/*.css and run python3 tools/build-css.py to rebuild style.css. Every page's rules are scoped under its body class (for example .home-creative), so a change on one page never leaks into another.
Light and dark pages
Each page exists twice: light/x.html and dark/x.html. The only difference is data-bs-theme="dark" on the <html> element, which switches the colour tokens. Edit the light file and run python3 tools/make-dark.py to regenerate the dark copies — or edit both by hand.
03
Pages
| Home | File | Signature |
|---|---|---|
| Studio | index.html | Still-in-use ruler, swatch fan, voice note, booking calendar |
| Creative | home-creative.html | Rising-sun hero, day counter, year index, brief row |
| Growth | home-growth.html | Compound curve drawn from data, media-mix bar, funnel, audit form |
| Design | home-design.html | Proof sheet, contact sheet with loupe, spec tables, A–Z index |
| Brand | home-brand.html | Split-flap board, before/after slider, tone sliders, live wordmark |
| Product | home-product.html | Changelog hero, sprint Gantt, keycap services, estimator |
| Web | home-web.html | Live browser with breakpoint toggles, score rings, packages |
| Agency | home-agency.html | World clocks, periodic table, sparklines, chat CTA (dark only) |
Inner pages: journal, journal-article, services, services-specs, services-shortcuts, services-elements, services-budget, services-tabs, service-details, work, work-contact-sheet, work-filter, work-by-year, work-colour, work-showcase, case-study, team, team-member, faq, legal, 404.
04
Editing content
Every drawn graphic reads its content from the HTML, so you edit data, not drawings. Each block has a comment in the HTML that explains its attributes. The most common ones:
| Block | Where the data lives |
|---|---|
| Still-in-use ruler (Studio) | <ol class="ruler__list"> — one <li data-year data-row> per project; data-start/data-end on the ruler |
| Voice note (Studio) | data-peaks (bar heights), data-duration, optional data-audio="file.mp3" |
| Swatch fan (Studio) | each <li class="swatch" style="--c:#hex;--i:n"> |
| Booking calendar | <li class="month" data-state="open|booked"> |
| Collage cards | style="--w;--h;--drop" on each card |
| One-line headlines | class="fit-line" data-fit="1" — the line is sized to fill its column automatically |
| Scroll animations | add data-reveal to any element, data-split to a headline; remove to switch off |
| Counters | <span data-counter>212</span> |
Images
The demo uses photographs from Pexels. They are for preview only and are not included in the download; the package ships grey placeholders at the same file names and sizes. Replace them with your own images of the same proportion — see each <img>'s width and height.
Contact forms
Forms are front-end only. Connect them to your own endpoint (Formspree, Netlify Forms, your backend) by setting the form's action.
05
Colours & type
All colours are CSS custom properties at the top of style.css (section 02). Dark values sit under [data-bs-theme="dark"]; each home adds its accent on its body class.
Typography
Big Shoulders Display (100 and 900) for display type, Geist (300–500) for text, JetBrains Mono (200–500) for numbers and labels. No italics are used anywhere. Change the families in the --font-display, --font-body and --font-mono tokens and replace the files in assets/fonts.
06
Scripts & plugins
main.js runs on every page; page scripts (home-studio.js, …) add each page's own behaviour. All motion respects the visitor's reduced-motion setting. The mobile menu uses Bootstrap's offcanvas component.
| Library | Version | Licence | Source |
|---|---|---|---|
| Bootstrap | 5.3.8 | MIT | getbootstrap.com |
| jQuery | 3.7.1 | MIT | jquery.com |
| GSAP (+ ScrollTrigger, ScrollSmoother, SplitText, Flip) | 3.15.0 | GSAP Standard License (no charge) | gsap.com/standard-license |
| Swiper | 14.2.0 | MIT | swiperjs.com |
| Magnific Popup | 1.2.0 | MIT | dimsemenov.com/plugins/magnific-popup/ |
| counterUp2 | 2.0.2 | MIT | github.com/bfintal/Counter-Up2 |
| Font Awesome Free | 6.7.2 | Icons CC BY 4.0 · Fonts OFL 1.1 · Code MIT | fontawesome.com/license/free |
07
Sources & credits
Fonts
| Font | Weights | Licence | Source |
|---|---|---|---|
| Big Shoulders Display | 100, 900 | SIL OFL 1.1 | fonts.google.com/specimen/Big+Shoulders+Display |
| Geist | 300, 400, 500 | SIL OFL 1.1 | vercel.com/font |
| JetBrains Mono | 200, 400, 500 | SIL OFL 1.1 | www.jetbrains.com/lp/mono/ |
Photographs (Pexels, Pexels License — preview only)
w_site06.jpg–w_site10.jpg are screenshots of Morrow’s own pages (used in the Web home’s browser mock); the photographs inside them are credited above.
08
Changelog & support
| Version | Date | Changes |
|---|---|---|
| 1.0 | 2026 | First release: 8 home pages, 21 inner pages, light and dark, responsive to 390 px. |
Support runs through the item's Support tab on ThemeForest. Please include the page name and a screenshot. Support covers questions about the template's features and bugs in its files; custom changes and third-party integrations are not included.