Ui Templates
- 57 installs
- 21 repo stars
- Updated August 3, 2026
- starchild-ai-agent/official-skills
Helps with ai & agent building tasks during AI-assisted development.
About
ui-templates is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.
- ui-templates
- AI & Agent Building
- AI-coding skill
Ui Templates by the numbers
- 57 all-time installs (skills.sh)
- +10 installs in the week ending Aug 5, 2026 (Skillselion tracking)
- Ranked #6,669 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/starchild-ai-agent/official-skills --skill ui-templatesAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 57 |
|---|---|
| repo stars | ★ 21 |
| Last updated | August 3, 2026 |
| Repository | starchild-ai-agent/official-skills ↗ |
What it does
Helps with ai & agent building tasks during AI-assisted development.
Files
[
{
"id": "startbootstrap-agency",
"source": "startbootstrap",
"dir": "startbootstrap/agency",
"name": "Agency",
"title": "Agency - Start Bootstrap Theme",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 2534,
"indexPath": "startbootstrap/agency/index.html",
"description": "Professional agency/studio one-page template built on Bootstrap 5. Fixed-top dark navbar with logo image, uppercase navigation links (Services, Portfolio, About, Team, Contact), and smooth-scroll behavior. Full-screen masthead hero with background image, subheading 'Welcome To Our Studio!', large uppercase heading, and a golden-yellow CTA button. Services section with 3 icon-in-circle cards (shopping-cart, laptop, lock) in a row, each with heading and description. Portfolio grid section (light background) with 6 items in a 3x2 grid — each item has a hover overlay with plus icon, image, caption heading, and category subheading; clicking opens a Bootstrap modal with project details, image, description, client/category info, and close button. About section features a vertical timeline with 4 entries (2009-2020), each with circular image, date, subheading, and description text, alternating left/right alignment. Team section (light background) with 3 circular team member photos, names, roles, and social media buttons. Client logos row with 4 brand logos. Contact section with dark background, map image, and a full contact form (name, email, phone, message) with validation. Footer with copyright, social buttons, and legal links.",
"colorScheme": "dark",
"primaryColor": "#ffc800",
"layout": "single-page",
"features": [
"responsive",
"smooth-scroll",
"modal",
"contact-form",
"form-validation",
"timeline",
"portfolio-grid",
"social-links",
"fixed-navbar"
],
"sections": [
"header",
"navigation",
"hero",
"services",
"portfolio",
"about",
"team",
"clients",
"contact",
"footer"
],
"techStack": [
"bootstrap-5",
"font-awesome",
"google-fonts",
"sb-forms"
],
"matchSignals": [
"agency",
"studio",
"creative",
"portfolio",
"timeline",
"team",
"services",
"contact-form",
"one-page",
"professional",
"corporate",
"modal",
"dark-hero",
"gold-accent",
"bootstrap"
],
"colorPalette": {
"background": "#ffffff (white sections)",
"sectionAlt": "#f8f9fa (light grey, portfolio/team)",
"text": "#212529 (dark)",
"heading": "#212529",
"accent": "#ffc800 (golden yellow)",
"accentHover": "#cca000 (darker gold)",
"navBg": "#212529 (dark)",
"contactBg": "#212529 with map image",
"muted": "#6c757d (grey)"
},
"typography": {
"fontFamily": "Montserrat (headings), Roboto Slab (body)",
"headingWeight": "700",
"bodyWeight": "400",
"bodySize": "1rem",
"letterSpacing": "normal",
"textTransform": "uppercase (headings, nav, buttons)",
"style": "Dual font pairing — geometric sans-serif headings with slab-serif body. Bold uppercase section headings with muted subtitles."
},
"layoutDetails": "Bootstrap 5 container with 12-column grid. Full-width sections with alternating backgrounds. Portfolio uses col-lg-4 col-sm-6 grid. Timeline uses custom CSS with alternating left/right panels. Team uses col-lg-4 grid. Contact form uses col-md-6 split.",
"visualStyle": "Professional, polished agency aesthetic. Dark hero with golden-yellow accent. Clean white sections with light grey alternation. Circular images for team and timeline. Modal overlays for portfolio details.",
"breakpoints": [
576,
768,
992,
1200
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/startbootstrap--agency.zip"
},
{
"id": "styleshout-hudson",
"source": "styleshout",
"dir": "styleshout/hudson",
"name": "Hudson",
"title": "Hudson",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 5251,
"indexPath": "styleshout/hudson/index.html",
"description": "Light-themed single-page personal portfolio with modern clean design. Preloader with dots-fade animation. Header with logo, smooth-scroll navigation (Intro, About, Works, Contact), and mobile menu toggle. Intro section with large background image: pretitle 'Hello', multi-line heading with name and title, two CTA buttons (More About Me, Get In Touch), vertical social icons sidebar (Facebook, Twitter, Instagram, Dribbble, Pinterest) with inline SVGs, Get My CV outlined button, and scroll-down indicator. About section with numbered header (01): large display title, two attention-getter paragraphs, then a 3-column grid of blocks — Experience (5 company listings with roles), Awards (5 award entries with years), and Skills (6 skill items). Works section with numbered header (02): 6 portfolio entries in a grid with images, titles, categories, and GLightbox lightbox. Testimonials subsection with Swiper slider (4 slides with avatar, name, company, quote). Numbers section: 4 counter items (Happy Customers 80+, Projects Completed 120+, Lines of Code 23k+, Positive Feedback 85+). Footer with numbered header (03): contact text, Follow Me and Contact Me columns, Message Me and Get My CV full-width buttons, social icons, copyright, and back-to-top.",
"colorScheme": "light",
"primaryColor": "#C73E1D",
"layout": "single-page",
"features": [
"responsive",
"preloader",
"smooth-scroll",
"lightbox",
"testimonials-slider",
"stats-counter",
"animation",
"social-links",
"numbered-sections",
"css-variables",
"grid-layout"
],
"sections": [
"navigation",
"intro",
"about",
"experience",
"awards",
"skills",
"portfolio",
"testimonials",
"numbers",
"contact",
"footer"
],
"techStack": [
"swiper",
"glightbox",
"google-fonts"
],
"matchSignals": [
"personal",
"portfolio",
"designer",
"developer",
"light-theme",
"modern",
"clean",
"resume",
"one-page",
"awards",
"experience",
"stats",
"numbered-sections",
"serif-accent",
"professional",
"minimal"
],
"colorPalette": {
"background": "#fbfcfb (off-white body)",
"surface": "#ffffff (white)",
"text": "#181818 (near-black text)",
"heading": "#181818 (dark headings)",
"accent": "#C73E1D (burnt orange-red primary)",
"secondary": "#2F352B (dark olive green)",
"border": "rgba(0,0,0,0.1) (subtle borders)"
},
"typography": {
"fontFamily": "\"Public Sans\", sans-serif (body) / \"Castoro\", serif (display)",
"headingWeight": "700",
"bodyWeight": "400",
"bodySize": "1.8rem",
"letterSpacing": "normal",
"textTransform": "uppercase (pretitles)",
"style": "Modern sans-serif body with elegant serif display headings, clean professional feel"
},
"layoutDetails": "CSS custom properties grid system (max-width 1200px), 16-column grid for intro, flexbox columns with xl/lg/md/tab breakpoint classes",
"visualStyle": "Clean light portfolio with burnt orange accents, serif display titles, numbered sections, and modern grid layout",
"breakpoints": [
1200,
1000,
900,
800,
600,
480,
400
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/styleshout--hudson.zip"
},
{
"id": "styleshout-infinity",
"source": "styleshout",
"dir": "styleshout/infinity",
"name": "Infinity",
"title": "Infinity 2.0",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 4686,
"indexPath": "styleshout/infinity/index.html",
"description": "Light-themed single-page creative agency website with modern design. Preloader spinner. Off-canvas slide-out navigation with close button, nav links (Intro, About, Services, Works, Contact), promotional text, and social icons (Facebook, Twitter, Instagram, Dribbble, Behance). Intro section with parallax background (using Rellax.js): pretitle 'We Are Infinity', large heading 'We Craft Stunning Digital Experiences', Learn More button, vertical social icons sidebar, and scroll-down indicator with arrow. About section: pretitle and large descriptive paragraph with highlighted brand name. Services section on dark background: centered heading 'What We Do', lead text, then 4 service items in a 2-column grid with SVG icons (Branding, UI/UX Design, Web Development, Illustration). Portfolio section on dark background: centered heading 'See Our Featured Projects', 6 portfolio items in a masonry/bricks layout with hover info overlays, category labels, and PhotoSwipe lightbox. Testimonials with Swiper slider (4 slides). Clients section with logo images. Contact section: heading, description, contact form (Name, Email, Subject, Message), contact info blocks (Where, Email, Phone), and social links. Footer with copyright and back-to-top.",
"colorScheme": "light",
"primaryColor": "#F9A828",
"layout": "single-page",
"features": [
"responsive",
"preloader",
"parallax",
"smooth-scroll",
"off-canvas-menu",
"masonry-grid",
"lightbox",
"testimonials-slider",
"client-logos",
"contact-form",
"animation",
"social-links",
"css-variables"
],
"sections": [
"navigation",
"intro",
"about",
"services",
"portfolio",
"testimonials",
"clients",
"contact",
"footer"
],
"techStack": [
"jquery",
"photoswipe",
"swiper",
"rellax",
"google-fonts"
],
"matchSignals": [
"agency",
"creative",
"digital-agency",
"light-theme",
"modern",
"portfolio",
"services",
"one-page",
"masonry",
"parallax",
"off-canvas",
"contact-form",
"client-logos",
"testimonials",
"gold-accent",
"professional"
],
"colorPalette": {
"background": "#ffffff (white body)",
"surface": "#161616 (dark services/portfolio sections)",
"text": "#161616 (near-black text)",
"heading": "#000000 (black headings)",
"accent": "#F9A828 (warm gold/amber primary)",
"secondary": "#07617D (deep teal)"
},
"typography": {
"fontFamily": "\"Lora\", serif (display) / \"Inter\", sans-serif (body)",
"headingWeight": "700",
"bodyWeight": "400",
"bodySize": "1.8rem",
"letterSpacing": "normal",
"textTransform": "uppercase (pretitles)",
"style": "Elegant serif display with clean sans-serif body, modern editorial feel"
},
"layoutDetails": "CSS custom properties grid (max-width 1200px), masonry bricks portfolio, off-canvas navigation, responsive with lg/tab/mob breakpoints",
"visualStyle": "Modern light agency site with warm gold accents, off-canvas menu, parallax intro, and masonry portfolio",
"breakpoints": [
1200,
1000,
900,
800,
600,
480,
400
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/styleshout--infinity.zip"
},
{
"id": "styleshout-kreo",
"source": "styleshout",
"dir": "styleshout/kreo",
"name": "Kreo",
"title": "Kreo",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 8006,
"indexPath": "styleshout/kreo/index.html",
"description": "Bold dark-themed agency/studio single-page template with a fullscreen hero slider and prominent call-to-action. Navigation is a fixed top bar with smooth-scroll links (Home, Works, Services, About, Contact). The hero section uses a FlexSlider with large white headings on dark backgrounds. Below the hero, a portfolio section displays 8 project thumbnails in a responsive grid with hover overlays and modal popups (Magnific Popup) showing project details with close buttons. The services section presents content in a clean layout with descriptive text. The about section features a team member slider and company description. A bold call-to-action banner with yellow (#fdc501) background invites users to start a project. The testimonials section uses a slider for client quotes. The contact section includes a validated form (name, email, subject, message) with AJAX submission and loading indicator. Footer has social links row and copyright. Preloader animation on page load.",
"colorScheme": "dark",
"primaryColor": "#fdc501",
"layout": "single-page",
"features": [
"responsive",
"preloader",
"hero-slider",
"portfolio-grid",
"modal-popups",
"contact-form",
"testimonial-slider",
"smooth-scroll",
"fixed-navigation",
"form-validation",
"ajax-form",
"back-to-top"
],
"sections": [
"header",
"hero-slider",
"portfolio",
"services",
"about",
"call-to-action",
"testimonials",
"contact",
"footer"
],
"techStack": [
"jquery",
"modernizr",
"flexslider",
"magnific-popup",
"waypoints",
"fittext",
"jquery-validate"
],
"matchSignals": [
"agency",
"studio",
"portfolio",
"dark-theme",
"slider",
"modal",
"contact-form",
"testimonials",
"bold",
"yellow-accent",
"creative",
"one-page",
"services",
"team",
"cta",
"professional"
],
"colorPalette": {
"background": "#0F1215 (very dark blue-black)",
"text": "#575859 (medium gray body text)",
"heading": "#FFFFFF (white headings)",
"accent": "#fdc501 (vibrant yellow, primary CTA)",
"accentHover": "#e4b101 (darker yellow hover)",
"accentSecondary": "#e64e04 (orange-red, secondary accent)",
"sectionAlt": "#12151B (slightly lighter dark section)",
"border": "#111417 (dark border)"
},
"typography": {
"fontFamily": "Merriweather, serif (body); Raleway, sans-serif (headings)",
"headingWeight": "700-800 (bold to heavy)",
"bodyWeight": "400 (regular)",
"bodySize": "16px",
"letterSpacing": "normal",
"textTransform": "none",
"style": "Bold sans-serif headings (Raleway Heavy) with serif body text (Merriweather). High contrast white-on-dark typography with generous line-height (30px)."
},
"layoutDetails": "Single-page scrolling with fixed top navigation. Full-width sections with centered content containers. Portfolio grid uses responsive columns. Modal popups for project details. FlexSlider for hero and testimonials.",
"visualStyle": "Dark, bold, high-contrast agency aesthetic with vibrant yellow accent on near-black backgrounds. Dramatic hero slider with large typography. Professional portfolio showcase with modal details.",
"breakpoints": [
350,
400,
450,
480,
500,
600,
768,
880,
1024,
1200,
1300
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/styleshout--kreo.zip"
},
{
"id": "styleshout-sublime",
"source": "styleshout",
"dir": "styleshout/sublime",
"name": "Sublime",
"title": "Sublime",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 6476,
"indexPath": "styleshout/sublime/index.html",
"description": "Dark-themed creative agency single-page template with a fullscreen parallax hero section featuring a large background image, company name, tagline, video play link (Vimeo lightbox), two CTA buttons (More About Us, Let's Talk), scroll indicator, and vertical social media links. About section has a large display heading describing the agency, lead paragraph, and a 2-column process grid (Define, Design, Build, Launch). Services section on a darker background presents 6 service items (Brand Identity, Illustration, Marketing, Photography, Web Design, Web Development) in a 2-column grid with icon circles. Works section shows portfolio items in a masonry/brick grid with hover overlays. Clients section displays logo images. Testimonials section with quote slider. Contact section with social links and contact form. Footer with copyright and back-to-top button. Uses AOS (Animate On Scroll) for reveal animations.",
"colorScheme": "dark",
"primaryColor": "#793ea5",
"colorPalette": {
"background": "#121212 (very dark gray)",
"text": "rgba(255,255,255,0.3) (faded white)",
"heading": "#ffffff (white)",
"accent": "#793ea5 (purple)",
"link": "#793ea5 (purple)",
"sectionDarker": "#0c0c0c"
},
"typography": {
"fontFamily": "Nunito Sans (body), Montserrat (headings)",
"headingWeight": "600",
"bodyWeight": "400",
"bodySize": "17px (1.7rem)",
"letterSpacing": "-0.1rem on h1",
"textTransform": "uppercase on h6",
"style": "Modern sans-serif pairing, light body text on dark background with bold white headings"
},
"layout": "single-page",
"layoutDetails": "Custom grid with .col-full and block-1-2 column classes. Fullscreen hero with parallax scrolling via data-parallax. Sections use bit-narrow container for readable width. AOS animations on scroll.",
"visualStyle": "Dark cinematic agency aesthetic with purple accents, parallax hero, faded body text, bold white headings, icon-driven service cards",
"features": [
"responsive",
"preloader",
"parallax",
"video-lightbox",
"smooth-scroll",
"AOS-animations",
"masonry-portfolio",
"testimonial-slider",
"contact-form",
"social-links",
"mobile-menu",
"back-to-top"
],
"sections": [
"header",
"hero",
"about",
"services",
"works",
"clients",
"testimonials",
"contact",
"footer"
],
"techStack": [
"jQuery",
"Parallax.js",
"AOS",
"Lity",
"Masonry",
"imagesLoaded",
"Slick",
"Google Fonts",
"Font Awesome",
"Modernizr"
],
"breakpoints": [
400,
600,
800,
1000,
1200
],
"matchSignals": [
"agency",
"creative",
"dark-theme",
"parallax",
"purple-accent",
"portfolio",
"services",
"video",
"testimonials",
"cinematic",
"modern",
"single-page",
"branding",
"design-studio",
"animated",
"fullscreen-hero"
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/styleshout--sublime.zip"
},
{
"id": "styleshout-waldo",
"source": "styleshout",
"dir": "styleshout/waldo",
"name": "Waldo",
"title": "Waldo",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 3296,
"indexPath": "styleshout/waldo/index.html",
"description": "Modern personal portfolio single-page template for a product designer. Header features a small avatar image, name ('Pete Waldo'), and horizontal navigation (Intro, Profile, Portfolio, Say Hello). Intro section has a large SVG text display of the name with an overline ('Crafting Digital Experiences Since 2018'), descriptive paragraph, and scroll indicator with animated line. Profile section is divided into numbered subsections: 01-About with profile photo and bio text with 'Accepting New Projects' pulse indicator, 02-Experience with 4 work history cards showing title/company/date/description, 03-Education with 4 education cards, 04-What I Do with 6 service descriptions (Visual & Brand Identity, UI/UX Design, App & Product Design, UX Research & Strategy, Creative Direction, Marketing Design), and stats (215+ Projects, 99% Client Return Rate, 2.4K+ Reviews, 119+ Clients). Works section shows 5 portfolio items in a CSS Grid with featured item spanning full width, modal popup for project details with image gallery, description, services, client, and date. Footer has contact CTA, email/phone/location info, social links, and copyright.",
"colorScheme": "light",
"primaryColor": "#c16b49",
"colorPalette": {
"background": "#f9f9f9 (near-white, neutral-50)",
"text": "#4c4f4c (neutral-800)",
"heading": "#141514 (near-black, neutral-950)",
"accent": "#c16b49 (warm terracotta, color-1)",
"accent2": "#588f5d (sage green, color-2)",
"border": "#d8ddd8 (neutral-300)"
},
"typography": {
"fontFamily": "Roboto Flex (body), Instrument Serif (display), Antonio (accent)",
"headingWeight": "600-700",
"bodyWeight": "400",
"bodySize": "18px",
"letterSpacing": "normal",
"textTransform": "uppercase on section numbers",
"style": "Triple font system: flexible sans-serif body, elegant serif display, condensed sans-serif accents"
},
"layout": "single-page",
"layoutDetails": "CSS Grid-based layout with container class. Grid-block for about section, grid-cols for info cards. Portfolio uses CSS Grid with featured item spanning columns. Modal overlay for project details. Responsive from 400px to 1400px.",
"visualStyle": "Warm minimal portfolio with terracotta and sage green accents, elegant serif display type, clean card-based info sections, professional and refined",
"features": [
"responsive",
"preloader",
"smooth-scroll",
"portfolio-modal",
"CSS-grid",
"animated-scroll-line",
"pulse-indicator",
"retina-images",
"social-links",
"mobile-menu",
"numbered-sections",
"stats-counters"
],
"sections": [
"header",
"intro",
"about",
"experience",
"education",
"services",
"stats",
"portfolio",
"footer"
],
"techStack": [
"CSS Custom Properties",
"CSS Grid",
"Google Fonts",
"SVG"
],
"breakpoints": [
400,
600,
800,
1000,
1200,
1400
],
"matchSignals": [
"portfolio",
"personal",
"designer",
"resume",
"CV",
"experience",
"education",
"services",
"modern",
"minimal",
"warm-palette",
"terracotta",
"serif-display",
"professional",
"single-page",
"modal-gallery"
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/styleshout--waldo.zip"
},
{
"id": "templatemo-art_factory",
"source": "templatemo",
"dir": "templatemo/templatemo_537_art_factory",
"name": "Art Factory",
"title": "Art Factory HTML CSS Template",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 1768,
"indexPath": "templatemo/templatemo_537_art_factory/index.html",
"description": "Clean white agency template with colorful accent buttons and illustration-style graphics. Sticky header with logo text, 6 navigation links including dropdown submenu, and hamburger menu for mobile. Welcome hero with 2-column layout: left has heading, description, and red rounded button (#f55858); right has vector illustration. About section with illustration and teal button (#00b4c6). Second about reverses layout with 3 icon-list items. Services section with Owl Carousel showing 7 service cards. FAQ section with 6 expandable accordion items. Contact section with Google Maps iframe and contact form. Footer with social icons and copyright.",
"colorScheme": "light",
"primaryColor": "#f55858",
"layout": "single-page",
"features": [
"responsive",
"preloader",
"sticky-header",
"dropdown-menu",
"owl-carousel",
"accordion-faq",
"google-maps",
"contact-form",
"scroll-reveal-animations"
],
"sections": [
"navigation",
"hero",
"about",
"about-2",
"services",
"faq",
"contact",
"footer"
],
"techStack": [
"bootstrap-4",
"font-awesome",
"owl-carousel",
"scroll-reveal",
"google-fonts",
"google-maps"
],
"matchSignals": [
"agency",
"creative",
"services",
"faq",
"accordion",
"illustration",
"clean",
"white",
"colorful",
"startup",
"business",
"corporate",
"modern",
"carousel",
"contact-form",
"google-maps"
],
"colorPalette": {
"background": "#ffffff (white)",
"text": "#4a4a4a (dark gray)",
"heading": "#232323 (near-black)",
"accent": "#f55858 (coral red)",
"accentSecondary": "#00b4c6 (teal)",
"accentTertiary": "#0088e8 (blue hover)",
"navText": "#ffffff (white on transparent)",
"selection": "#ff589e (pink)"
},
"typography": {
"fontFamily": "Roboto",
"headingWeight": "300",
"bodyWeight": "400",
"bodySize": "16px",
"letterSpacing": "1px on nav",
"textTransform": "uppercase on nav/buttons",
"style": "Clean modern sans-serif with light heading weights"
},
"layoutDetails": "Bootstrap 4 grid, sticky header transitions from transparent to white with shadow",
"visualStyle": "Clean white agency layout with colorful coral/teal accents and vector illustrations",
"breakpoints": [
991
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/templatemo--templatemo_537_art_factory.zip"
},
{
"id": "templatemo-digital_trend",
"source": "templatemo",
"dir": "templatemo/templatemo_538_digital_trend",
"name": "Digital Trend",
"title": "Digital Trend HTML Template",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 2976,
"indexPath": "templatemo/templatemo_538_digital_trend/index.html",
"description": "Multi-page digital marketing agency template with modern design using CSS custom properties. Transparent navbar with line-chart icon brand logo and 4 links. Hero section with teal (#057a8d) gradient background, left-aligned white heading with AOS fade-up animations, white pill-shaped CTA button, phone number, and right-side illustration image. About/Studio section with centered text and office illustration. Project section uses Owl Carousel for horizontal scrolling showcase of 5 project cards with category labels and arrow icon links. Testimonial section with left avatar illustration and right testimonial quote with large decorative quotation mark. Footer with dark background, large white heading, contact info, studio address, copyright, footer links, and social icons.",
"colorScheme": "light",
"primaryColor": "#057a8d",
"colorPalette": {
"background": "#ffffff (white body)",
"text": "#666262 (dark gray body text)",
"heading": "#15141a (near-black titles)",
"accent": "#057a8d (teal primary)",
"secondary": "#f1c111 (yellow secondary/strong text)",
"gray": "#909090 (gray labels)",
"projectBg": "#f0f8ff (light blue project section)",
"dark": "#171819 (dark color)",
"menuBg": "#0c8195 (teal menu background)"
},
"typography": {
"fontFamily": "Inter",
"headingWeight": "700",
"bodyWeight": "400",
"bodySize": "18px",
"letterSpacing": "1px (h4 labels)",
"textTransform": "uppercase (h4 labels)",
"style": "Modern Inter font with large body size, bold headings, yellow strong/bold text accent"
},
"layout": "multi-page",
"layoutDetails": "Bootstrap 4 grid with container-fluid for project carousel. CSS custom properties for theming. Hero uses flexbox centering. Sections padded 8em vertically. Pill-shaped buttons with 100px border-radius.",
"visualStyle": "Modern, illustration-driven digital agency aesthetic. Teal and yellow dual-accent system. Large typography with generous spacing. AOS scroll animations throughout. Clean, spacious layout.",
"features": [
"responsive",
"aos-animations",
"owl-carousel",
"smooth-scroll",
"multi-page",
"css-variables",
"illustration-based"
],
"sections": [
"navigation",
"hero",
"about",
"projects-carousel",
"testimonial",
"footer"
],
"techStack": [
"bootstrap-4",
"jquery",
"owl-carousel",
"aos",
"font-awesome",
"google-fonts"
],
"breakpoints": [
576,
768,
992,
1200
],
"matchSignals": [
"agency",
"digital-marketing",
"modern",
"teal-theme",
"carousel",
"illustrations",
"testimonial",
"multi-page",
"aos-animations",
"inter-font",
"css-variables",
"professional",
"creative",
"startup",
"marketing",
"portfolio"
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/templatemo--templatemo_538_digital_trend.zip"
},
{
"id": "templatemo-impulse",
"source": "templatemo",
"dir": "templatemo/templatemo_469_impulse",
"name": "Impulse",
"title": "Impulse Parallax Bootstrap Template",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 3173,
"indexPath": "templatemo/templatemo_469_impulse/index.html",
"description": "Agency/studio single-page parallax template with a fullscreen hero background image, large animated title (Impulse) with bounce effect, subtitle (Design Studio), and a red Get Started button. Sticky navigation bar below the hero with 7 smooth-scroll links. Intro section with centered welcome text. Work/Services section with a 2x2 grid of service blocks alternating black and red backgrounds with Font Awesome icons. Team section with 3 member photos and fade-in animations. Portfolio section with an 8-image grid using Nivo Lightbox. Pricing section with 3 plan cards (Basic $25, Business $50, Professional $75). Contact form section. Google Map embed. Footer with 7 social media icon links.",
"colorScheme": "light",
"primaryColor": "#eb5424",
"layout": "single-page",
"features": [
"responsive",
"preloader",
"parallax",
"smooth-scroll",
"wow-animations",
"lightbox",
"pricing-table",
"team-section",
"contact-form",
"google-map",
"social-links"
],
"sections": [
"preloader",
"hero",
"navigation",
"intro",
"services",
"team",
"portfolio",
"pricing",
"contact",
"map",
"footer"
],
"techStack": [
"bootstrap",
"font-awesome",
"animate-css",
"nivo-lightbox",
"custom-fonts"
],
"matchSignals": [
"agency",
"studio",
"design",
"parallax",
"one-page",
"pricing",
"portfolio",
"team",
"services",
"red-accent",
"creative",
"branding",
"digital",
"lightbox",
"animated",
"impulse"
],
"colorPalette": {
"background": "#f8f8f8 (off-white body)",
"text": "#606060 (gray body text)",
"heading": "#202020 (near-black titles)",
"accent": "#eb5424 (vibrant orange-red)",
"service-black": "#000000 (black service blocks)",
"service-red": "#eb5424 (red service blocks)"
},
"typography": {
"fontFamily": "Proxima Nova",
"headingWeight": "bold",
"bodyWeight": "400",
"bodySize": "16px",
"letterSpacing": "1px",
"textTransform": "uppercase (nav, headings)",
"style": "Custom Proxima Nova with bold variant for headings, generous letter-spacing"
},
"layoutDetails": "Bootstrap container. Fullscreen hero with flexbox centering. Sticky navbar below hero. Parallax background sections. 4x2 portfolio grid. 3-column pricing layout.",
"visualStyle": "Bold agency template with vibrant orange-red accents, fullscreen hero with animated text, alternating black/red service blocks, and clean pricing cards.",
"breakpoints": [
768,
992
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/templatemo--templatemo_469_impulse.zip"
},
{
"id": "templatemo-onix_digital",
"source": "templatemo",
"dir": "templatemo/templatemo_565_onix_digital",
"name": "Onix Digital",
"title": "Onix Digital Marketing HTML5 Template",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 6465,
"indexPath": "templatemo/templatemo_565_onix_digital/index.html",
"description": "Modern digital marketing agency single-page template with a clean white background and blue/red accent scheme. Features a preloader animation, sticky header with slide-down animation, and an Owl Carousel hero banner with multiple slides containing headlines, descriptions, and dual CTA buttons. Services section uses a horizontal Owl Carousel of service cards with icons. About section presents company info with progress bars and animated statistics counters. Portfolio section displays a filterable Isotope masonry grid of project images. Video section embeds content with a play button overlay. Contact section includes a full-width form. Built on Bootstrap 5 with Poppins font throughout.",
"colorScheme": "light",
"primaryColor": "#03a4ed",
"colorPalette": {
"background": "#ffffff",
"text": "#2a2a2a",
"accent": "#03a4ed",
"secondary": "#fe3f40",
"heading": "#2a2a2a",
"sectionBg": "#f7f7f7"
},
"typography": {
"fontFamily": "Poppins",
"headingWeight": "700",
"bodyWeight": "400",
"bodySize": "15px",
"letterSpacing": "normal",
"textTransform": "none",
"style": "Modern geometric sans-serif with clean line-height"
},
"layout": "single-page",
"layoutDetails": "Single-page scrolling layout with smooth scroll navigation. Full-width sections with centered content containers. Hero uses Owl Carousel slider. Services in horizontal carousel. Portfolio in masonry grid. Sticky header with WOW.js entrance animations.",
"visualStyle": "Clean corporate with blue and red accents. Rounded buttons, decorative background shapes, card-based service items. Modern SaaS-style with flat design and subtle shadows.",
"features": [
"responsive",
"preloader",
"sticky-header",
"carousel",
"animated-counters",
"filterable-portfolio",
"contact-form",
"smooth-scroll",
"wow-animations"
],
"sections": [
"preloader",
"header",
"hero-slider",
"services",
"about",
"portfolio",
"video",
"contact",
"footer"
],
"techStack": [
"bootstrap-5",
"font-awesome",
"owl-carousel",
"wow-js",
"isotope",
"poppins",
"jquery"
],
"breakpoints": [
576,
768,
992,
1200
],
"matchSignals": [
"digital-marketing",
"agency",
"seo",
"corporate",
"single-page",
"carousel",
"portfolio",
"counter",
"progress-bar",
"modern",
"clean",
"professional",
"services",
"blue-accent",
"poppins"
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/templatemo--templatemo_565_onix_digital.zip"
},
{
"id": "themefisher-airspace",
"source": "themefisher",
"dir": "themefisher/airspace-bootstrap",
"name": "Airspace",
"title": "Airspace | Creative Agency Bootstrap Template",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 8791,
"indexPath": "themefisher/airspace-bootstrap/theme/index.html",
"description": "Agency multi-page Bootstrap template with a fixed transparent navbar featuring dropdown menus and sub-menus. Hero section has a large heading with descriptive text and dual CTA buttons. Features include a services section with icon cards, portfolio with filterable gallery and hover overlays, team section with member cards and social links, testimonial carousel, blog section with sidebar layouts (left/right/full-width), pricing tables, and contact page with form and Google Maps. Extensive multi-page structure with portfolio single, blog grid, blog single, and various blog layout pages. Roboto + Volkhov font pairing. Purple/lavender (#655E7A) accent color.",
"colorScheme": "light",
"primaryColor": "#655E7A",
"colorPalette": {
"background": "#ffffff",
"text": "#7B7B7B",
"heading": "#333333",
"accent": "#655E7A (purple/lavender)",
"navBg": "transparent",
"footer": "#292929",
"sectionAlt": "#f5f5f5"
},
"typography": {
"fontFamily": "Roboto, Volkhov",
"headingWeight": "400",
"bodyWeight": "400",
"bodySize": "15px",
"letterSpacing": "normal",
"style": "Roboto for body with Volkhov italic for decorative elements. Elegant and refined agency typography."
},
"layout": "multi-page",
"layoutDetails": "Transparent navbar with dropdowns. Hero with dual CTAs. Container-width sections. Extensive multi-page with blog layouts, portfolio single. Bootstrap 4 grid.",
"visualStyle": "Elegant agency design with purple/lavender accents. Clean white backgrounds. Card-based layouts. Hover overlays on portfolio. Multiple blog layout options. Professional and versatile.",
"features": [
"responsive",
"dropdown-menu",
"hero-section",
"portfolio-gallery",
"team-section",
"testimonial-carousel",
"blog-layouts",
"pricing-tables",
"contact-form",
"google-maps",
"multi-page"
],
"sections": [
"header",
"hero",
"services",
"portfolio",
"team",
"testimonials",
"blog",
"pricing",
"contact",
"footer"
],
"techStack": [
"bootstrap",
"ionicons",
"google-fonts",
"slick-carousel",
"jquery"
],
"breakpoints": [
575,
768,
992,
1200
],
"matchSignals": [
"agency",
"portfolio",
"team",
"services",
"blog",
"pricing",
"multi-page",
"purple",
"elegant",
"professional",
"dropdown-menu",
"testimonials",
"google-maps",
"blog-layouts",
"versatile"
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/themefisher--airspace-bootstrap.zip"
},
{
"id": "themefisher-megakit",
"source": "themefisher",
"dir": "themefisher/megakit-bootstrap",
"name": "Megakit",
"title": "Megakit | HTML5 Agency Template",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 14398,
"indexPath": "themefisher/megakit-bootstrap/theme/index.html",
"description": "Agency/business website with light theme and red accent. Hero slider with full-screen background images, large headings, and CTA buttons. Navigation with logo and multi-page links (Home, About, Services, Portfolio, Blog, Contact). Intro section with split layout: text content and image. About section with image, text, and counter stats. Counter section with animated numbers on dark background. Services section with icon cards in grid. CTA section with background image and action button. Testimonial section with client quotes carousel. Latest Blog section with article cards on background image. Contact section with form and Google Maps. Footer with 4 columns and bottom bar.",
"colorScheme": "light",
"primaryColor": "#f52626",
"colorPalette": {
"background": "#ffffff (white body)",
"surface": "#f5f8f9 (light gray sections)",
"text": "#919194 (body text)",
"heading": "#242424 (dark headings)",
"accent": "#f52626 (vibrant red primary)",
"border": "#dedede (light borders)"
},
"typography": {
"fontFamily": "\"Hind\", serif (body) / \"Poppins\", sans-serif (headings)",
"headingWeight": "bold",
"bodyWeight": "normal",
"bodySize": "17px",
"letterSpacing": "normal",
"textTransform": "uppercase (nav, section labels)",
"style": "Serif body with geometric sans-serif headings, professional agency feel"
},
"layout": "multi-page",
"layoutDetails": "Bootstrap container, full-screen hero slider, counter stats, testimonial carousel, contact form with map, responsive at 992px/768px/480px",
"visualStyle": "Professional agency site with red accents, hero slider, counter stats, testimonial carousel, and clean corporate layout",
"features": [
"responsive",
"hero-slider",
"counter-animation",
"testimonial-carousel",
"contact-form",
"google-maps",
"blog-cards",
"multi-page",
"lightbox"
],
"sections": [
"navigation",
"hero-slider",
"intro",
"about",
"counter",
"services",
"cta",
"testimonial",
"blog",
"contact",
"footer"
],
"techStack": [
"bootstrap",
"jquery",
"slick-carousel",
"magnific-popup",
"waypoints",
"counterup"
],
"breakpoints": [
992,
768,
480,
400
],
"matchSignals": [
"agency",
"business",
"corporate",
"professional",
"red-accent",
"services",
"portfolio",
"counter",
"testimonial",
"contact-form",
"multi-page",
"company",
"startup",
"consulting",
"marketing",
"branding"
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/themefisher--megakit-bootstrap.zip"
},
{
"id": "themefisher-thomson",
"source": "themefisher",
"dir": "themefisher/thomson-bootstrap",
"name": "Thomson",
"title": "Thomson-Minimal Portfolio Temaplate",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 47266,
"indexPath": "themefisher/thomson-bootstrap/theme/index.html",
"description": "Minimal portfolio template with a clean, typography-driven design. The header features a simple logo and horizontal navigation for Home, About, Portfolio, Blog, and Contact. A large hero banner section displays animated rotating text (using animated-text.js) with the designer's specialties. Below, a portfolio section shows a filterable Shuffle.js grid of project thumbnails with hover overlays revealing project titles and categories. A services section presents three service cards with icons, titles, and descriptions separated by a top border. The footer includes multi-column widgets with about text, quick links, and social icons. Red accent color with black and white palette creates a bold, high-contrast minimal aesthetic. AOS scroll animations add subtle entrance effects.",
"colorScheme": "light",
"primaryColor": "#f44336",
"layout": "single-page",
"layoutDetails": "Full-width stacked sections. Large hero with animated text. Portfolio in filterable grid. Services in 3-column row with top border separator. Minimal footer with widgets. Clean, spacious layout.",
"visualStyle": "Bold minimal portfolio with red accent on black-and-white palette. Typography-driven hero with animated text rotation. Clean grid portfolio with hover overlays. High contrast and dramatic simplicity.",
"features": [
"responsive",
"portfolio-filter",
"animated-text",
"AOS-animations",
"counter",
"hover-effects",
"social-links"
],
"sections": [
"header",
"banner",
"portfolio",
"services",
"footer"
],
"techStack": [
"bootstrap-4",
"themify-icons",
"shuffle-js",
"animated-text-js",
"AOS",
"owl-carousel",
"magnific-popup"
],
"breakpoints": [
400,
575,
767,
991
],
"matchSignals": [
"portfolio",
"minimal",
"creative",
"designer",
"agency",
"showcase",
"red",
"bold",
"typography",
"animated-text",
"filter",
"clean",
"modern",
"freelancer",
"studio",
"high-contrast"
],
"colorPalette": {
"background": "#ffffff",
"text": "#000000",
"accent": "#f44336 (red)",
"sectionBg": "#f7f7f7 (light gray)",
"dark": "rgb(21, 21, 21)",
"muted": "#818385"
},
"typography": {
"fontFamily": "Lato, Work Sans",
"headingWeight": "700",
"bodyWeight": "400",
"bodySize": "16px",
"letterSpacing": "0.17px to 1px",
"textTransform": "none for headings, uppercase for labels",
"style": "Clean sans-serif pairing with Lato for body and Work Sans for headings. Large display sizes for hero text. Minimal decorative styling."
},
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/themefisher--thomson-bootstrap.zip"
},
{
"id": "themefisher-timer",
"source": "themefisher",
"dir": "themefisher/timer-bootstrap",
"name": "Timer",
"title": "Timer Agency Template",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 10313,
"indexPath": "themefisher/timer-bootstrap/theme/index.html",
"description": "Creative agency template with a full-screen hero area featuring animated rotating text headlines, a background slider, and CTA buttons. The navigation uses a top bar with animated header that changes on scroll. An about section presents the agency story with text blocks and WOW.js entrance animations. A works/portfolio section displays project cards in a grid with image wrappers and hover effects. A features section highlights capabilities with icon blocks. A contact section includes a form with a green submit button. The footer has a dark background with copyright info. Teal/cyan accent color (#00a4ba) gives a fresh, creative agency feel. Extensive use of WOW.js scroll-triggered animations throughout all sections.",
"colorScheme": "light",
"primaryColor": "#00a4ba",
"layout": "single-page",
"layoutDetails": "Full-width stacked sections. Full-screen hero with background slider and animated text. Portfolio in card grid. Features in icon blocks. Contact form section. Dark footer. Animated header changes on scroll.",
"visualStyle": "Creative agency with teal/cyan accent, full-screen hero slider, extensive scroll animations (WOW.js), and clean card-based portfolio. Professional with dynamic motion effects throughout.",
"features": [
"responsive",
"slider",
"animated-text",
"WOW-animations",
"scroll-header",
"contact-form",
"hover-effects",
"fancybox"
],
"sections": [
"navigation",
"hero-slider",
"about",
"works",
"features",
"contact",
"footer"
],
"techStack": [
"bootstrap-4",
"ionicons",
"animate-css",
"WOW-js",
"slick-carousel",
"fancybox"
],
"breakpoints": [
991
],
"matchSignals": [
"agency",
"creative",
"studio",
"portfolio",
"teal",
"cyan",
"animated",
"slider",
"works",
"projects",
"design",
"digital",
"marketing",
"branding",
"motion",
"dynamic"
],
"colorPalette": {
"background": "#ffffff",
"text": "#666666",
"accent": "#00a4ba (teal/cyan)",
"accentHover": "#02bdd5 (lighter teal)",
"dark": "#222222",
"muted": "#727272"
},
"typography": {
"fontFamily": "Roboto, Roboto Condensed",
"headingWeight": "600",
"bodyWeight": "300",
"bodySize": "16px",
"letterSpacing": "normal to 2px",
"textTransform": "uppercase",
"style": "Light body weight with condensed variant for special elements. Uppercase headings with wide letter-spacing. Clean and professional."
},
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/themefisher--timer-bootstrap.zip"
},
{
"id": "tooplate-digital_team",
"source": "tooplate",
"dir": "tooplate/2075_digital_team",
"name": "Digital Team",
"title": "Digital Team HTML5 Layout - Tooplate",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 2619,
"indexPath": "tooplate/2075_digital_team/index.html",
"description": "Digital agency/team template with a modern, teal-accented design. Single-page layout with smooth scroll navigation to Home, Work, About, Team, Portfolio, Pricing, and Contact sections. Hero section with large heading and CTA buttons. Work/services section with icon-based feature cards. About section with company description. Team section with member photos and social links. Portfolio gallery with lightbox. Pricing tables with three tiers. Contact form with name, email, and message. Roboto font. Teal (#00c6d7) primary accent on white backgrounds. Nivo Lightbox for gallery.",
"colorScheme": "light",
"primaryColor": "#00c6d7",
"layout": "single-page",
"features": [
"responsive",
"smooth-scroll",
"lightbox",
"pricing-tables",
"team-profiles",
"contact-form",
"animation"
],
"sections": [
"hero",
"services",
"about",
"team",
"portfolio",
"pricing",
"contact",
"footer"
],
"techStack": [
"bootstrap-3",
"jquery",
"font-awesome",
"nivo-lightbox",
"animate-css",
"google-fonts"
],
"matchSignals": [
"agency",
"digital",
"team",
"portfolio",
"pricing",
"services",
"teal-accent",
"corporate",
"creative",
"startup",
"company",
"web-design",
"contact-form",
"lightbox",
"modern",
"professional"
],
"colorPalette": {
"background": "#ffffff white",
"text": "#4B4B4B dark gray",
"heading": "#3B3B3B darker gray",
"accent": "#00c6d7 teal",
"sectionBg": "#f6f6f6 light gray",
"buttonBg": "#00c6d7 teal",
"buttonHover": "#4B4B4B dark gray",
"border": "#eeeeee"
},
"typography": {
"fontFamily": "Roboto",
"headingWeight": "500",
"bodyWeight": "400",
"bodySize": "16px",
"letterSpacing": "normal",
"textTransform": "uppercase on nav and headings",
"style": "Clean sans-serif (Roboto). Medium weight headings with uppercase transforms. Modern agency typography."
},
"layoutDetails": "Single-page with smooth scroll to 7 sections. Hero full-width. Services in icon card grid. Team in 4-column layout. Portfolio in masonry-style grid. Pricing in 3-column table layout. Contact form centered.",
"visualStyle": "Modern agency design with vibrant teal (#00c6d7) accent on clean white. Icon-based service cards. Team member photos with social links. Nivo Lightbox portfolio gallery. Three-tier pricing tables. Professional and energetic.",
"breakpoints": [
440,
500
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/tooplate--2075_digital_team.zip"
},
{
"id": "tooplate-graphite_creative",
"source": "tooplate",
"dir": "tooplate/2156_graphite_creative",
"name": "Graphite Creative",
"title": "Creative Studio - Minimal Design",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 682,
"indexPath": "tooplate/2156_graphite_creative/index.html",
"description": "Dark minimalist creative agency template with a monochrome aesthetic and no framework dependencies. Opens with a hero section featuring large display typography and a brief tagline. The services section presents four service offerings in a clean grid layout. A portfolio section showcases project thumbnails in a grid with hover overlay effects. The about section includes team/agency description with key statistics. A contact section features a styled form with dark input fields. The entire design uses shades of gray and charcoal with no color accents. Uses Segoe UI for body text and Courier New for accent elements, creating an editorial/typewriter aesthetic.",
"colorScheme": "dark",
"primaryColor": "#d0d0d0",
"layout": "single-page",
"features": [
"responsive",
"hover-effects",
"contact-form",
"smooth-scroll",
"monochrome-design"
],
"sections": [
"hero",
"services",
"portfolio",
"about",
"contact",
"footer"
],
"techStack": [
"vanilla-js",
"css-grid"
],
"breakpoints": [
768,
1024
],
"matchSignals": [
"agency",
"creative",
"studio",
"dark-theme",
"minimalist",
"monochrome",
"portfolio",
"design",
"modern",
"editorial",
"grayscale",
"typography-focused",
"no-framework",
"clean",
"professional",
"graphite"
],
"colorPalette": {
"background": "#1a1a1a (dark charcoal)",
"surface": "#222222",
"text": "#d0d0d0 (light gray)",
"textSecondary": "#777777",
"accent": "#444444",
"border": "#333333",
"hover": "#555555"
},
"typography": {
"fontFamily": "Segoe UI, Courier New",
"headingWeight": "700",
"bodyWeight": "300",
"bodySize": "16px",
"letterSpacing": "normal",
"textTransform": "none",
"style": "System sans-serif for body with monospace accent. Light body weight with bold headings. Monochrome palette emphasizes typographic hierarchy."
},
"layoutDetails": "Full-width hero with centered text. Grid-based services and portfolio sections. Single-column about and contact sections. Clean vertical flow.",
"visualStyle": "Ultra-dark monochrome aesthetic. No color accents, pure grayscale palette. Editorial feel with typewriter-style accent font. Minimal decoration, maximum typography focus.",
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/tooplate--2156_graphite_creative.zip"
},
{
"id": "tooplate-minimal_white",
"source": "tooplate",
"dir": "tooplate/2141_minimal_white",
"name": "Minimal White",
"title": "Minimal White One Page Template",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": false,
"sizeKB": 52,
"indexPath": "tooplate/2141_minimal_white/index.html",
"description": "Minimalist single-page agency template with pure black-and-white aesthetic. Hero with floating geometric shapes (circles, squares, lines) via CSS animations. About section with large pull-quote, 4-column stats grid, philosophy with numbered points, and horizontal process timeline. Services with bordered numbered cards. Contact form. Fixed navbar with backdrop blur. Fade-in scroll animations. No images - purely typographic and geometric.",
"colorScheme": "light",
"primaryColor": "#000000",
"colorPalette": {
"background": "#ffffff",
"text": "#000000",
"accent": "#000000",
"muted": "#666666",
"border": "#000000",
"navBg": "rgba(255, 255, 255, 0.98)"
},
"typography": {
"fontFamily": "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto",
"headingWeight": "700",
"bodyWeight": "400",
"bodySize": "16px",
"letterSpacing": "-1px (logo)",
"textTransform": "uppercase (nav links)",
"style": "System font stack with high contrast black-on-white."
},
"layout": "single-page",
"layoutDetails": "Single-page scrolling with max-width 1200px container. Fixed navbar with backdrop blur. Stats in 4-column grid. Timeline as horizontal flow. Fade-in animations on scroll.",
"visualStyle": "Ultra-minimalist black-and-white design with no images. Floating geometric CSS shapes, bold typography, and numbered design points. Editorial feel.",
"features": [
"responsive",
"css-animations",
"floating-shapes",
"scroll-animations",
"contact-form",
"smooth-scroll",
"backdrop-blur",
"mobile-menu"
],
"sections": [
"navbar",
"hero",
"about",
"stats",
"philosophy",
"process-timeline",
"services",
"contact",
"footer"
],
"techStack": [
"vanilla-css",
"vanilla-js"
],
"breakpoints": [
480,
768,
1024
],
"matchSignals": [
"minimal",
"minimalist",
"black-white",
"monochrome",
"agency",
"studio",
"design",
"typography",
"geometric",
"clean",
"whitespace",
"editorial",
"modern",
"no-images",
"pure-css"
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/tooplate--2141_minimal_white.zip"
},
{
"id": "tooplate-poppy_studio",
"source": "tooplate",
"dir": "tooplate/2157_poppy_studio",
"name": "Poppy Studio",
"title": "POPPY_STUDIO — Mood Board Portfolio",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 108,
"indexPath": "tooplate/2157_poppy_studio/index.html",
"description": "Whimsical mood board portfolio template styled as a corkboard with scattered sticky notes. Header with circular dashed-border logo badge and navigation strip. Content is arranged as draggable note cards pinned with washi tape strips in pastel colors. Note 1 is an intro/about card with profile photo and bio. Note 2 is a polaroid-style project card with image frame. Note 3 is a skills checklist on a sticky note. Note 4 is a testimonial with large quotation mark. Additional notes for a second project, Currently Into list, How I Work process steps, social links, and a contact CTA. Paper grain texture overlay on all cards. Sparkle decorations and doodle symbols scattered across the board. Fredoka and Special Elite fonts for handwritten feel.",
"colorScheme": "light",
"primaryColor": "#FFD1DC",
"colorPalette": {
"background": "#FFF9F0 (vanilla)",
"text": "#3A3226 (ink)",
"textLight": "#7A7060",
"pastelPink": "#FFD1DC",
"tape": "rgba(135, 206, 235, 0.4)",
"peach": "#FFDAB9",
"lavender": "#E6D8F0",
"mint": "#D4F0E7",
"butter": "#FFF5C3"
},
"typography": {
"fontFamily": "Special Elite (body), Fredoka (headings)",
"headingWeight": "700",
"bodyWeight": "400",
"bodySize": "16px",
"letterSpacing": "1px (logo)",
"textTransform": "none",
"style": "Typewriter body font with rounded display headings. Handcrafted, scrapbook feel."
},
"layout": "grid",
"layoutDetails": "CSS Grid-based mood board layout with scattered note cards. Cards are positioned with slight rotations and overlapping tape decorations. Responsive grid collapses to single column on mobile. Draggable cards via JS.",
"visualStyle": "Whimsical scrapbook/mood board aesthetic with paper grain textures, washi tape, polaroid frames, sparkle decorations, and pastel colors. Handcrafted, artsy, and playful.",
"features": [
"responsive",
"draggable-cards",
"paper-texture",
"washi-tape",
"polaroid-frames",
"sparkle-decorations",
"contact-form",
"social-links"
],
"sections": [
"header",
"about-note",
"project-card",
"skills-note",
"testimonial-note",
"project-card-2",
"interests-note",
"process-note",
"links-note",
"contact-note"
],
"techStack": [
"vanilla-css",
"vanilla-js",
"google-fonts"
],
"breakpoints": [
480,
768,
1024
],
"matchSignals": [
"agency",
"portfolio",
"creative",
"illustrator",
"designer",
"scrapbook",
"mood-board",
"whimsical",
"handcrafted",
"pastel",
"artsy",
"freelancer",
"branding",
"cute",
"playful"
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/tooplate--2157_poppy_studio.zip"
},
{
"id": "tooplate-solution",
"source": "tooplate",
"dir": "tooplate/2081_solution",
"name": "Solution",
"title": "Solution Responsive Web Template",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 3364,
"indexPath": "tooplate/2081_solution/index.html",
"description": "Full-featured agency with FlexSlider hero carousel, animated text overlays. Six icon-text service blocks in 3x2 grid. About with progress bars. Three team members with social links. Newsletter signup. Three-tier pricing. Filterable portfolio with Magnific Popup. Contact form with Google Maps.",
"colorScheme": "light",
"primaryColor": "#e74c3c",
"layout": "single-page",
"features": [
"responsive",
"image-slider",
"animation",
"progress-bars",
"pricing-table",
"portfolio-filter",
"lightbox",
"newsletter",
"contact-form",
"google-maps",
"social-links",
"smooth-scroll"
],
"sections": [
"navigation",
"hero",
"services",
"divider",
"about",
"team",
"newsletter",
"pricing",
"portfolio",
"contact",
"footer"
],
"techStack": [
"bootstrap",
"font-awesome",
"google-fonts",
"jquery",
"animate-css",
"flexslider",
"magnific-popup",
"wow-js"
],
"matchSignals": [
"agency",
"corporate",
"full-featured",
"slider",
"services",
"team",
"pricing",
"portfolio",
"newsletter",
"progress-bars",
"lightbox",
"animation",
"red-accent",
"professional",
"contact-form",
"google-maps"
],
"colorPalette": {
"background": "#ffffff",
"text": "#777777",
"accent": "#e74c3c"
},
"typography": {
"fontFamily": "Raleway",
"headingWeight": "800",
"bodyWeight": "400",
"bodySize": "14px",
"letterSpacing": "normal",
"style": "Heavy Raleway headings"
},
"layoutDetails": "Single-page with FlexSlider hero. 3x2 services. Progress bars. Three-column team/pricing. Filterable portfolio.",
"visualStyle": "Feature-rich agency with red accent. Animated entrances. Progress bars.",
"breakpoints": [
480,
768,
992
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/tooplate--2081_solution.zip"
},
{
"id": "tooplate-tween_agency",
"source": "tooplate",
"dir": "tooplate/2128_tween_agency",
"name": "Tween Agency",
"title": "Tween Digital Agency HTML Template",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 3396,
"indexPath": "tooplate/2128_tween_agency/index.html",
"description": "Digital agency with Bootstrap 5. Fullscreen hero with dark overlay and YouTube video popup. About with Bootstrap tabs (Introduction, Profile, FAQs) and accordion. Services icon cards. Portfolio gallery with Magnific Popup. Three-tier pricing. Contact form with Google Maps. Fixed nav with Download CTA.",
"colorScheme": "light",
"primaryColor": "#ff5a5f",
"layout": "single-page",
"features": [
"responsive",
"video-popup",
"tabs",
"accordion",
"lightbox",
"pricing-table",
"contact-form",
"google-maps",
"social-links"
],
"sections": [
"navigation",
"hero",
"about",
"services",
"portfolio",
"pricing",
"contact",
"footer"
],
"techStack": [
"bootstrap-5",
"bootstrap-icons",
"google-fonts",
"jquery",
"magnific-popup"
],
"matchSignals": [
"agency",
"digital-marketing",
"bootstrap-5",
"video-popup",
"tabs",
"accordion",
"faq",
"pricing",
"portfolio",
"lightbox",
"contact-form",
"google-maps",
"social-links",
"modern",
"professional",
"download-cta"
],
"colorPalette": {
"background": "#ffffff",
"text": "#717275",
"accent": "#ff5a5f"
},
"typography": {
"fontFamily": "Karla",
"headingWeight": "600",
"bodyWeight": "300",
"bodySize": "16px",
"letterSpacing": "normal",
"style": "Clean Karla font"
},
"layoutDetails": "Single-page with fixed nav. Fullscreen hero with video popup. Tabbed about with accordion. Services. Portfolio. Pricing. Contact with map.",
"visualStyle": "Modern digital agency with coral accent. Bootstrap 5. Video popup hero.",
"breakpoints": [
576,
768,
992,
1200
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/tooplate--2128_tween_agency.zip"
},
{
"id": "tooplate-vora_bold",
"source": "tooplate",
"dir": "tooplate/2161_vora_bold",
"name": "Vora Bold",
"title": "VORA — Design Studio",
"category": "agency",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": false,
"sizeKB": 44,
"indexPath": "tooplate/2161_vora_bold/index.html",
"description": "Brutalist design studio with fixed left sidebar navigation. Massive display headline with inverted dot, ghost year background text, topbar with location. Marquee strip with scrolling service keywords. About with stat counters. Four project cards with corner labels and category tags. Expandable accordion service rows with deliverable/process/timeline panels. Contact form. Custom cursor. Anton, IBM Plex Mono, Barlow Condensed fonts.",
"colorScheme": "dark",
"primaryColor": "#ffffff",
"layout": "sidebar",
"features": [
"responsive",
"custom-cursor",
"marquee",
"accordion",
"counter",
"contact-form",
"sticky-labels",
"mobile-nav"
],
"sections": [
"sidebar",
"hero",
"marquee",
"about",
"work",
"services",
"contact",
"footer"
],
"techStack": [
"google-fonts",
"vanilla-css",
"vanilla-js"
],
"matchSignals": [
"brutalist",
"design-studio",
"agency",
"dark-theme",
"sidebar",
"custom-cursor",
"marquee",
"accordion",
"counter",
"bold-typography",
"monospace",
"project-showcase",
"services",
"contact-form",
"swiss-design",
"editorial"
],
"colorPalette": {
"background": "#111111",
"text": "#999999",
"heading": "#ffffff",
"accent": "#ffffff"
},
"typography": {
"fontFamily": "Anton, IBM Plex Mono, Barlow Condensed",
"headingWeight": "400",
"bodyWeight": "300",
"bodySize": "14px",
"letterSpacing": "normal",
"style": "Brutalist with massive Anton headlines, monospace body"
},
"layoutDetails": "Fixed left sidebar. Massive hero headline. Marquee strip. Stat counters. Project cards. Expandable service accordion. Contact form.",
"visualStyle": "Brutalist dark design studio with massive typography, custom cursor, scrolling marquee, expandable panels.",
"breakpoints": [
480,
768,
1024
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/tooplate--2161_vora_bold.zip"
}
][
{
"id": "startbootstrap-new-age",
"source": "startbootstrap",
"dir": "startbootstrap/new-age",
"name": "New Age",
"title": "New Age - Start Bootstrap Theme",
"category": "app",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 2296,
"indexPath": "startbootstrap/new-age/index.html",
"description": "Mobile app landing page with gradient accents and device mockups. Fixed navbar with brand, 2 links (Features, Download), and a Send Feedback pill button that opens a modal. Masthead section (light gray bg) with 2-column layout: left has large display-1 heading, description, and app store badges (Google Play, App Store); right has an iPhone X device mockup with animated SVG gradient circle (#2937f0 to #9f1ae2), decorative geometric shapes, and a looping demo video in the phone screen. Testimonial aside with purple-blue gradient background, large quote, and logo. Features section with 2-column layout: left has another iPhone mockup with video, right has 2x2 grid of 4 feature items with gradient-colored Bootstrap Icons and Kanit font headings. Basic features section (light bg) with display-4 heading, description, and circular image. CTA section with portrait background image, dark overlay, large heading, and outline download button. App badge section (gradient bg) with centered heading and app store badges. Black footer with copyright and links. Feedback modal with contact form.",
"colorScheme": "light",
"primaryColor": "#2937f0",
"layout": "single-page",
"features": [
"responsive",
"smooth-scroll",
"fixed-nav",
"device-mockup",
"video-in-device",
"gradient-accents",
"app-store-badges",
"modal-form",
"svg-decorations"
],
"sections": [
"navigation",
"masthead",
"testimonial",
"features",
"basic-features",
"call-to-action",
"app-badges",
"footer"
],
"techStack": [
"bootstrap-5",
"bootstrap-icons",
"google-fonts",
"sb-forms"
],
"matchSignals": [
"app",
"mobile",
"landing",
"device-mockup",
"iphone",
"gradient",
"purple",
"blue",
"download",
"startup",
"saas",
"product",
"app-store",
"google-play",
"modern",
"tech"
],
"colorPalette": {
"background": "#f8f9fa (light gray, masthead)",
"white": "#ffffff (white, features section)",
"gradient": "linear-gradient(45deg, #2937f0, #9f1ae2) (purple-blue gradient)",
"text": "#212529 (near-black)",
"heading": "#212529 (near-black)",
"accent": "#2937f0 (vivid blue, primary)",
"accentSecondary": "#9f1ae2 (purple, gradient end)",
"muted": "#6c757d (gray, descriptions)",
"footer": "#000000 (black)",
"ctaBg": "background-image with rgba(0,0,0,0.5) overlay"
},
"typography": {
"fontFamily": "Mulish (body), Kanit (feature headings/brand), Newsreader (testimonial italic)",
"headingWeight": "700",
"bodyWeight": "400",
"bodySize": "1rem",
"letterSpacing": "normal",
"style": "Multi-font system with geometric Kanit for accents, soft Mulish for body, and elegant Newsreader for quotes"
},
"layoutDetails": "Fixed top navbar with shadow. Masthead uses col-lg-6 x2 split with device mockup on right. Features use col-lg-8 + col-lg-4 with inner 2x2 grid. Device mockups use SVG circles and shapes with CSS positioning. Responsive breakpoints at 576, 768, 992, 1200, 1400px with progressive circle/device sizing.",
"visualStyle": "Modern app landing with vivid purple-blue gradient accents, iPhone device mockups with live video, SVG geometric decorations, and multi-font typography. Polished and tech-forward.",
"breakpoints": [
576,
768,
992,
1200,
1400
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/startbootstrap--new-age.zip"
},
{
"id": "styleshout-booth",
"source": "styleshout",
"dir": "styleshout/booth",
"name": "Booth",
"title": "Booth",
"category": "app",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 2149,
"indexPath": "styleshout/booth/index.html",
"description": "Single-page app landing with fixed header containing logo, navigation (Intro, About, Pricing, Download), and 'Get The App' CTA button. Hero section with split layout: left side has large heading and description text with 'Get Started' button and video play icon; right side has social links vertically stacked. Scroll-down arrow indicator. Stats section with 4 counters (554k Downloads, 22k Visitors, 99% Rating, 526k Users). About section with numbered header ('01'), split title/description, and Swiper slider showing 4 feature cards. App screenshots section displaying 3 phone mockup images. How-to section ('02') with 4-step process alongside 2 phone screenshots. Features section ('03') with 3-column grid of 6 feature items with SVG icons. Testimonials slider. Pricing section with 3-tier cards. Download section with app store badges. Footer with newsletter form, social links, and copyright.",
"colorScheme": "light",
"primaryColor": "#3F885C",
"layout": "single-page",
"features": [
"responsive",
"smooth-scroll",
"stats-counter",
"swiper-slider",
"pricing-table",
"app-screenshots",
"testimonials",
"newsletter",
"preloader",
"video-lightbox",
"social-links"
],
"sections": [
"header",
"hero",
"stats",
"about",
"screenshots",
"how-to",
"features",
"testimonials",
"pricing",
"download",
"footer"
],
"techStack": [
"swiper",
"lity-lightbox",
"google-fonts"
],
"matchSignals": [
"app",
"landing",
"mobile",
"startup",
"saas",
"pricing",
"download",
"features",
"screenshots",
"testimonials",
"stats",
"counter",
"product",
"launch",
"ios",
"android"
],
"colorPalette": {
"background": "#ffffff (white)",
"primary": "#3F885C (forest green)",
"secondary": "#BA2D0B (burnt orange-red)",
"text": "#0a0a0a (near-black)",
"textLight": "#474747",
"heading": "#0a0a0a",
"body": "#ffffff",
"border": "#e0e0e0"
},
"typography": {
"fontFamily": "Inter (body), Heebo (headings)",
"headingWeight": "bold",
"bodyWeight": "400",
"bodySize": "1rem (16px)",
"letterSpacing": "normal",
"textTransform": "none",
"style": "Clean dual sans-serif pairing. Inter for body, Heebo for headings. Large display titles. Numbered section headers for visual hierarchy."
},
"layoutDetails": "Full-width sections with centered container. Stats use 4-column grid. Features use 3-column grid. Pricing uses 3-column card layout. How-to section has split layout. Responsive with stack breakpoints.",
"visualStyle": "Fresh, modern app landing with forest green accent. Clean white background with generous spacing. Phone mockup screenshots as visual anchors. Numbered section headers add structure. Stats counters provide social proof.",
"breakpoints": [
400,
600,
800,
1000,
1200
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/styleshout--booth.zip"
},
{
"id": "styleshout-dazzle",
"source": "styleshout",
"dir": "styleshout/dazzle",
"name": "Dazzle",
"title": "Dazzle",
"category": "app",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 6054,
"indexPath": "styleshout/dazzle/index.html",
"description": "Single-page app landing with fixed header containing logo, navigation (Home, About, Pricing, Testimonials, Download), and 'Sign Up' CTA button. Hero section with parallax background image, dark overlay, split layout: left side has welcome subtitle, large 3-line heading, and two stroke-style buttons (Download App, Watch Video); right side shows iPhone mockup image. Social links list on left edge and scroll-down indicator on right. About section with 2-column intro, then 6-feature grid (3x2) with line icons. How-to section with 4 numbered steps in 2-column layout. App screenshots image. Pricing section with 2-tier cards (Lite $25, Pro $50 highlighted). Testimonials carousel (Owl Carousel). Download section with App Store and Play Store badges. Footer with 4 columns: info + social icons, contact details, site links, and newsletter form.",
"colorScheme": "dark",
"primaryColor": "#39b54a",
"layout": "single-page",
"features": [
"responsive",
"parallax",
"pricing-table",
"testimonial-carousel",
"app-store-badges",
"newsletter",
"video-lightbox",
"smooth-scroll",
"scroll-animations"
],
"sections": [
"header",
"hero",
"about",
"features",
"how-to",
"screenshots",
"pricing",
"testimonials",
"download",
"footer"
],
"techStack": [
"jquery",
"modernizr",
"owl-carousel",
"aos-animate",
"parallax-js",
"lity-lightbox",
"font-awesome"
],
"matchSignals": [
"app",
"landing",
"mobile",
"startup",
"saas",
"pricing",
"download",
"features",
"iphone",
"mockup",
"testimonials",
"product",
"launch",
"green",
"dark-hero",
"parallax"
],
"colorPalette": {
"background": "#ffffff (white, dark hero)",
"primary": "#39b54a (green)",
"text": "#767676 (medium gray)",
"heading": "#151515 (near-black)",
"heroBg": "dark image with overlay",
"link": "#39b54a (green)",
"sectionBg": "#ffffff",
"footerBg": "#111111 (dark)"
},
"typography": {
"fontFamily": "Muli (body), Montserrat (headings)",
"headingWeight": "regular (Montserrat)",
"bodyWeight": "regular/light",
"bodySize": "1.6rem (large base)",
"letterSpacing": "normal",
"textTransform": "uppercase for nav and buttons",
"style": "Clean sans-serif pairing. Muli for body with light weight. Montserrat for headings. Large base font size. Uppercase navigation and buttons."
},
"layoutDetails": "Full-width sections with centered container. Hero has split layout (text left, phone mockup right). Features use 3-column grid. Pricing uses 2-column cards. How-to uses 2-column numbered steps. Responsive at 400-1024px.",
"visualStyle": "Bold app landing with green accent on dark hero. Parallax background image creates depth. iPhone mockup as hero visual. Clean white content sections. Numbered steps for how-to. Owl Carousel for testimonials.",
"breakpoints": [
400,
600,
768,
1024
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/styleshout--dazzle.zip"
},
{
"id": "styleshout-kairos",
"source": "styleshout",
"dir": "styleshout/kairos",
"name": "Kairos",
"title": "Kairos",
"category": "app",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 4556,
"indexPath": "styleshout/kairos/index.html",
"description": "Dark-themed single-page mobile app landing page. Pace.js preloader. Sticky header with logo, smooth-scroll navigation (Intro, About, Features, Pricing, Download), and a 'Get The App' CTA button. Hero section with parallax background and dark overlay: left column has large heading ('An Amazing App That Does It All'), subtitle text, and Get The App button; right column shows app screen mockup images. Social links and scroll indicator at bottom. About section: large display heading about the app, then a Slick slider carousel with 4 feature slides (Intuitive, Smart, Powerful, Secure). How It Works section: video background area with play button linking to Vimeo, stats counters (3.1M Downloads, 24K Positive Reviews), then 4-step process grid (Sign-Up, Create, Compose, Send). Features section: centered heading, 6 feature cards in a 3-column grid with icons (Cloud Based, Voice & Video, Always Secure, Play Games, Group Chat, Payments). Testimonials slider with 3 user reviews. Pricing section: 2 pricing plan cards (Free $0, Pro Plan $10/month) with feature lists and CTA buttons, popular plan highlighted. Download section with app store badges (App Store, Play Store) and phone mockup image. Footer with email subscription form, social links, site links columns, copyright, and back-to-top.",
"colorScheme": "dark",
"primaryColor": "#5b4f96",
"layout": "single-page",
"features": [
"responsive",
"preloader",
"parallax",
"smooth-scroll",
"sticky-header",
"video-lightbox",
"slider",
"stats-counter",
"pricing-table",
"app-store-badges",
"email-subscription",
"testimonials-slider",
"social-links"
],
"sections": [
"navigation",
"hero",
"about",
"how-it-works",
"features",
"testimonials",
"pricing",
"download",
"footer"
],
"techStack": [
"jquery",
"slick-slider",
"modernizr",
"pace",
"parallax",
"lity"
],
"matchSignals": [
"app",
"mobile-app",
"landing-page",
"saas",
"dark-theme",
"pricing",
"download",
"features",
"startup",
"product",
"app-store",
"play-store",
"messaging",
"purple-accent",
"subscription",
"process"
],
"colorPalette": {
"background": "#121619 (dark charcoal body)",
"surface": "#ffffff (light content sections)",
"text": "#545454 (gray body text)",
"heading": "#000000 (black headings)",
"accent": "#5b4f96 (muted purple links)",
"hover": "#000000 (black hover)"
},
"typography": {
"fontFamily": "\"Nunito Sans\", sans-serif (body) / \"Chivo\", sans-serif (headings)",
"headingWeight": "600",
"bodyWeight": "normal",
"bodySize": "1.8rem",
"letterSpacing": "-.05rem (h1), .16rem (h6)",
"textTransform": "uppercase (h6)",
"style": "Modern dual sans-serif pairing with geometric Chivo headings and friendly Nunito Sans body"
},
"layoutDetails": "12-column grid with col-block classes, block-1-3/block-1-2 grid systems, responsive with block-m and block-tab stacking",
"visualStyle": "Dark app landing page with purple accents, app mockups, pricing tables, and process steps",
"breakpoints": [
1024,
900,
768,
600,
400
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/styleshout--kairos.zip"
},
{
"id": "styleshout-woo",
"source": "styleshout",
"dir": "styleshout/woo",
"name": "Woo",
"title": "Woo - Free Responsive HTML5/CSS3 Template",
"category": "app",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 6542,
"indexPath": "styleshout/woo/index.html",
"description": "Dark-themed app/product landing page with a fixed top navigation bar featuring logo, horizontal nav links (Features, Pricing, Screenshots, Testimonials, Subscribe), and social icons. Hero section has a large headline, descriptive text, two CTA buttons (Free Trial, Learn More), and a product mockup image on a dark patterned background. Features section presents 4 alternating left-right feature blocks with device mockup images and descriptions (Simple Design, Fully Responsive, Cross-Browser Compatible, Video Support with embedded Vimeo iframe). Pricing section shows 4 pricing tiers (Starter FREE, Standard $9.99, Premium $19.99, Ultimate $29.99) in a 4-column grid with feature lists and Sign Up buttons. Call-to-action banner for web hosting. Screenshots section displays 8 product screenshots in a 4-column lightbox gallery with hover overlays. Testimonials section with FlexSlider quote carousel on a dark background. Subscribe section with MailChimp email signup form. Footer has logo, about text, address, social links, and contact info.",
"colorScheme": "dark",
"primaryColor": "#11ABB0",
"colorPalette": {
"background": "#181d21 (dark charcoal)",
"headerBg": "#13171B (darker charcoal)",
"heroBg": "#23292f (dark blue-gray with pattern)",
"text": "#676e73 (medium gray)",
"heading": "#ffffff (white)",
"accent": "#11ABB0 (teal/cyan)",
"button": "#F64B39 (red-orange)"
},
"typography": {
"fontFamily": "Montserrat (headings/nav), system sans-serif (body)",
"headingWeight": "700 (bold)",
"bodyWeight": "400",
"bodySize": "15px",
"letterSpacing": "1.5px on nav/section heads",
"textTransform": "uppercase on nav and section headings",
"style": "Bold uppercase headings with geometric sans-serif, clean body text"
},
"layout": "single-page",
"layoutDetails": "12-column custom grid. Hero centered with max-width 1040px. Features use alternating 6-column left/right layout. Pricing uses bgrid-quarters (4-col). Screenshots use bgrid-quarters with lightbox. Responsive with mobile breakpoints.",
"visualStyle": "Dark tech product landing with teal accents, patterned hero background, device mockup images, bold uppercase typography, pricing cards",
"features": [
"responsive",
"preloader",
"smooth-scroll",
"pricing-tables",
"lightbox-gallery",
"testimonial-slider",
"email-signup",
"video-embed",
"social-links",
"mobile-menu",
"back-to-top",
"CSS-animations"
],
"sections": [
"header",
"hero",
"features",
"pricing",
"call-to-action",
"screenshots",
"testimonials",
"subscribe",
"footer"
],
"techStack": [
"jQuery",
"FlexSlider",
"Waypoints",
"FitText",
"FitVids",
"imageLightbox",
"prettyPhoto",
"Modernizr",
"Font Awesome"
],
"breakpoints": [
768,
900,
1024
],
"matchSignals": [
"app",
"product",
"landing",
"dark-theme",
"pricing",
"SaaS",
"startup",
"features",
"screenshots",
"testimonials",
"subscribe",
"teal-accent",
"tech",
"mockup",
"CTA",
"freemium"
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/styleshout--woo.zip"
},
{
"id": "templatemo-app_landing",
"source": "templatemo",
"dir": "templatemo/templatemo_474_app_landing",
"name": "App Landing",
"title": "App Landing Page",
"category": "app",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 3901,
"indexPath": "templatemo/templatemo_474_app_landing/index.html",
"description": "Dark-themed app landing page with material design influences. Fixed circular menu toggle button (70px, top-right) reveals dropdown navigation with 6 links. Home section has fullscreen background image with dark blue-gray (#154558) fallback, centered content (max-width 500px) with large phone icon, app name heading, description, and two CTA buttons with material shadow hover effects. Features section with patterned background (#455a64), 4 feature boxes with thick border frames (10px solid #cecece) that animate to blue (#3399cc) on hover. Download section with background image, large counter number (100px font), and Google Play badge. Contact section with address info, centered form with material-style underline inputs, and 4 social media buttons. Footer with copyright.",
"colorScheme": "dark",
"primaryColor": "#3399cc",
"layout": "single-page",
"features": [
"responsive",
"material-shadow",
"parallax-background",
"hover-animations",
"social-links",
"contact-form",
"fixed-menu-toggle"
],
"sections": [
"navigation",
"home",
"features",
"download",
"contact",
"footer"
],
"techStack": [
"bootstrap-3",
"font-awesome",
"jquery-parallax",
"jquery-ui"
],
"matchSignals": [
"app",
"landing",
"mobile",
"dark-theme",
"material-design",
"download",
"features",
"contact",
"startup",
"product",
"android",
"google-play",
"blue-gray",
"one-page",
"parallax",
"counter"
],
"colorPalette": {
"background": "#455a64 (blue-gray)",
"homeBackground": "#154558 (dark teal)",
"text": "#ffffff (white)",
"heading": "#ffffff (white)",
"accent": "#3399cc (blue)",
"featureBorder": "#cecece (gray)",
"formButton": "#275267 (dark blue)"
},
"typography": {
"fontFamily": "Fira Sans",
"headingWeight": "200",
"bodyWeight": "300",
"bodySize": "18px",
"letterSpacing": "normal",
"textTransform": "none",
"style": "Ultra-light sans-serif with generous line-height (2em)"
},
"layoutDetails": "Bootstrap 3 grid, fullscreen sections with fixed backgrounds, max-width 500px content areas",
"visualStyle": "Dark material-inspired app landing with blue-gray palette and animated feature cards",
"breakpoints": [
768
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/templatemo--templatemo_474_app_landing.zip"
},
{
"id": "templatemo-app_starter",
"source": "templatemo",
"dir": "templatemo/templatemo_492_app_starter",
"name": "App Starter",
"title": "App Starter HTML CSS Website Template",
"category": "app",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 2265,
"indexPath": "templatemo/templatemo_492_app_starter/index.html",
"description": "Dark-themed app startup landing page with gradient overlays and modern typography. White fixed navbar with brand text, 6 navigation links including modal-triggered Contact. Home section with background image and purple-blue gradient overlay (from #4776E6 to #8E54E9), 2-column layout with phone mockup and heading/description/button. About section with team description and 2 team member cards with hover overlay. Divider with quote and CTA. Screenshots section with Owl Carousel showing 8 lightbox-enabled images. Pricing section with 3 plans ($60/$120/$200). Newsletter section with gradient overlay and subscription form. Footer with copyright and 5 social icons. Modal contact form.",
"colorScheme": "dark",
"primaryColor": "#535bd4",
"layout": "single-page",
"features": [
"responsive",
"preloader",
"wow-animations",
"owl-carousel",
"lightbox",
"modal-form",
"gradient-overlay",
"smooth-scroll",
"pricing-table",
"team-section",
"newsletter"
],
"sections": [
"navigation",
"home",
"about",
"divider",
"screenshots",
"pricing",
"newsletter",
"footer",
"modal"
],
"techStack": [
"bootstrap-3",
"font-awesome",
"owl-carousel",
"magnific-popup",
"wow-js",
"animate-css",
"google-fonts"
],
"matchSignals": [
"app",
"startup",
"landing",
"mobile",
"dark-theme",
"gradient",
"purple",
"pricing",
"screenshots",
"team",
"newsletter",
"download",
"saas",
"product",
"modern",
"carousel"
],
"colorPalette": {
"background": "#1c1c1c (near-black)",
"gradientOverlay": "linear-gradient(#4776E6, #8E54E9)",
"text": "#999999 (gray)",
"heading": "#ffffff (white)",
"accent": "#535bd4 (indigo-purple)",
"accentSecondary": "#1dc9e3 (cyan)",
"navBg": "#ffffff (white)",
"sectionBtn": "#000000 (black)"
},
"typography": {
"fontFamily": "Unica One (headings), Source Sans Pro (body)",
"headingWeight": "400",
"bodyWeight": "300",
"bodySize": "20px",
"letterSpacing": "1-2px on headings",
"textTransform": "uppercase on nav/headings",
"style": "Display cursive headings with clean sans-serif body"
},
"layoutDetails": "Bootstrap 3 grid, 100px vertical padding per section, flexbox hero at 80vh",
"visualStyle": "Modern dark app landing with purple-blue gradient overlays and bold display typography",
"breakpoints": [
768,
992
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/templatemo--templatemo_492_app_starter.zip"
},
{
"id": "templatemo-chain_app_dev",
"source": "templatemo",
"dir": "templatemo/templatemo_570_chain_app_dev",
"name": "Chain App Dev",
"title": "Chain App Dev - App Landing Page HTML5 Template",
"category": "app",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 3803,
"indexPath": "templatemo/templatemo_570_chain_app_dev/index.html",
"description": "Modern app landing page template built on Bootstrap 5 with gradient accents and animated elements. Sticky header with logo image and navigation (Home, Services, About, Pricing, Newsletter) plus a gradient Sign In Now button that opens a modal popup with social login, email/password login, and registration forms. The hero section has a 2-column layout: left with heading, description, and dual app store CTA buttons; right with decorative app mockup image. Services section displays 4 service cards in a row each with custom icon, heading, description, and Read More link. About section has 4 box items in 2x2 grid with gradient CTA button. Testimonials section uses a tabbed interface showing reviews with star ratings alongside a phone mockup. Pricing section has 3 pricing table cards (Standard $6, Business $12, Premium $28). Newsletter and Contact sections with forms. Footer has 4-column layout. Uses WOW.js for scroll animations.",
"colorScheme": "light",
"primaryColor": "#7b4dff",
"layout": "single-page",
"features": [
"responsive",
"preloader",
"sticky-header",
"modal-login",
"social-login",
"gradient-buttons",
"scroll-animations",
"owl-carousel",
"pricing-tables",
"contact-form",
"newsletter-signup",
"testimonials",
"app-store-buttons"
],
"sections": [
"header",
"hero",
"services",
"about",
"testimonials",
"pricing",
"newsletter",
"contact",
"footer"
],
"techStack": [
"bootstrap-5",
"jquery",
"owl-carousel",
"wow-js",
"font-awesome-5",
"google-fonts"
],
"matchSignals": [
"app-landing",
"saas",
"startup",
"gradient",
"modern",
"pricing",
"testimonials",
"mobile-app",
"landing-page",
"bootstrap-5",
"animated",
"sign-in",
"free-trial",
"newsletter",
"purple",
"tech"
],
"colorPalette": {
"background": "#ffffff (white)",
"text": "#707070 (gray)",
"heading": "#2a2a2a (dark)",
"accent": "#7b4dff (purple gradient start)",
"gradientEnd": "#2eaafa (blue gradient end)",
"sectionBg": "#f7f8fa (light gray)"
},
"typography": {
"fontFamily": "Roboto, sans-serif",
"headingWeight": "700",
"bodyWeight": "400",
"bodySize": "15px",
"letterSpacing": "normal",
"textTransform": "none",
"style": "Modern Roboto with bold headings and italic emphasis spans in section titles"
},
"layoutDetails": "Bootstrap 5 grid. Container-based layout with col-lg-6 hero, col-lg-3 service cards, col-lg-4 pricing cards. Sticky header. Full-width sections with alternating backgrounds. Modal popup for authentication.",
"visualStyle": "Modern, vibrant app landing page with purple-to-blue gradient accents. Rounded gradient buttons, decorative app mockup illustrations, card-based pricing tables. Smooth WOW.js scroll-triggered animations.",
"breakpoints": [
576,
768,
992,
1200
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/templatemo--templatemo_570_chain_app_dev.zip"
},
{
"id": "templatemo-parallo",
"source": "templatemo",
"dir": "templatemo/templatemo_534_parallo",
"name": "Parallo",
"title": "Parallo - App Landing Page",
"category": "app",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 4396,
"indexPath": "templatemo/templatemo_534_parallo/index.html",
"description": "App landing page template with parallax background and multi-page structure. Features a translucent white navigation bar with brand logo and horizontal menu. Hero section displays a split layout with left text content and right mobile phone mockup image. Features section shows three translucent white boxes with icons and descriptions. Call-to-action section combines a large image with a white content box containing email subscription form. Built on Bootstrap 4 with Open Sans font and Font Awesome 5 icons.",
"colorScheme": "mixed",
"primaryColor": "#006666",
"colorPalette": {
"background": "parallax background image",
"surface": "rgba(255,255,255,0.8)",
"text": "#6b6b6b",
"headings": "#333333",
"accent": "#006666",
"navLink": "#666768",
"buttonPrimary": "#0099CC"
},
"typography": {
"fontFamily": "Open Sans",
"headingWeight": "600",
"bodyWeight": "400",
"bodySize": "18px",
"letterSpacing": "normal",
"textTransform": "uppercase (brand name)",
"style": "Clean sans-serif with medium body size, professional readability"
},
"layout": "multi-page",
"layoutDetails": "Multi-page layout (5 HTML pages) with parallax background. Main page has brand row, hero with split text/image, feature boxes, and CTA section. Container max-width 1310px.",
"visualStyle": "Clean app landing with translucent white panels over nature photography parallax. Mobile mockup showcase. Rounded brand icon, flat feature boxes. Professional with teal accent palette.",
"features": [
"responsive",
"parallax-scrolling",
"multi-page",
"mobile-mockup",
"email-subscription",
"translucent-panels"
],
"sections": [
"navigation",
"hero",
"features",
"call-to-action",
"footer"
],
"techStack": [
"bootstrap-4",
"font-awesome-5",
"parallax-js",
"open-sans",
"jquery"
],
"breakpoints": [
576,
768,
992,
1200
],
"matchSignals": [
"app-landing",
"mobile-app",
"parallax",
"startup",
"saas",
"product",
"mockup",
"translucent",
"clean",
"professional",
"multi-page",
"teal",
"subscription",
"feature-boxes",
"open-sans"
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/templatemo--templatemo_534_parallo.zip"
},
{
"id": "themefisher-app-plus",
"source": "themefisher",
"dir": "themefisher/app-plus-bootstrap",
"name": "App Plus",
"title": "App plus",
"category": "app",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 1323,
"indexPath": "themefisher/app-plus-bootstrap/index.html",
"description": "App landing page single-page template with a fixed header containing logo, centered navigation, and social media icons. Hero/banner section features a large app mockup image with headline text and download CTA buttons. Service section displays feature cards with icons in a grid. Feature section highlights app capabilities with device mockup and descriptive text. Utility section shows additional app benefits with alternating image/text layout. Subscribe section has an email signup form with a colored background. Testimonial section with client quotes. Footer with multi-column links and social icons. Orange (#f48e5c) accent color with Source Sans Pro font. WOW.js scroll animations.",
"colorScheme": "light",
"primaryColor": "#f48e5c",
"colorPalette": {
"background": "#ffffff",
"text": "#666666",
"heading": "#333333",
"accent": "#f48e5c (orange)",
"subscribeBg": "#f48e5c",
"footer": "#333333",
"headerShadow": "rgba(0,0,0,0.2)"
},
"typography": {
"fontFamily": "Source Sans Pro",
"headingWeight": "600",
"bodyWeight": "200",
"bodySize": "15px",
"letterSpacing": "normal",
"style": "Ultra-light body weight (200) with medium headings. Modern app landing page feel."
},
"layout": "single-page",
"layoutDetails": "Fixed header with centered nav. Full-width sections. App mockup hero. Feature sections with device images. Subscribe banner. Bootstrap 3 grid.",
"visualStyle": "Clean app landing page with orange accent. White backgrounds with device mockups. Feature cards with icons. Subscribe banner with colored background. WOW.js entrance animations.",
"features": [
"responsive",
"app-mockup",
"scroll-animations",
"subscribe-form",
"social-links",
"testimonials",
"feature-cards",
"download-cta"
],
"sections": [
"header",
"banner",
"services",
"features",
"utility",
"subscribe",
"testimonials",
"footer"
],
"techStack": [
"bootstrap",
"font-awesome",
"google-fonts",
"animate-css",
"wow-js",
"jquery"
],
"breakpoints": [
480,
768,
992
],
"matchSignals": [
"app",
"landing-page",
"mobile-app",
"download",
"mockup",
"features",
"subscribe",
"orange",
"single-page",
"startup",
"saas",
"product-launch",
"testimonials",
"scroll-animations"
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/themefisher--app-plus-bootstrap.zip"
},
{
"id": "themefisher-small-apps",
"source": "themefisher",
"dir": "themefisher/small-apps-bootstrap",
"name": "Small Apps",
"title": "Small Apps | Bootstrap App Landing Template",
"category": "app",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 11683,
"indexPath": "themefisher/small-apps-bootstrap/theme/index.html",
"description": "Mobile app landing page template with a gradient hero banner featuring animated floating shapes, a phone mockup, headline text, and download CTA buttons. Below, a pull-up feature card section shows three icon blocks with titles and descriptions. A feature section displays app screenshots alongside descriptive text with bullet points. A testimonial section with an Owl Carousel shows user reviews in card format. A services section on a gray background presents icon-based service cards in a grid. A video promo section with a background image and play button overlay. A call-to-action section on a blue background encourages app downloads with store badges. The footer has multi-column layout with about text, links, and social icons. Blue accent with gradient effects throughout.",
"colorScheme": "light",
"primaryColor": "#2e7eed",
"layout": "single-page",
"layoutDetails": "Full-width stacked sections. Gradient hero with floating shapes and phone mockup. Feature cards pulled up over hero. Services in 3-column grid. Video section with background image. CTA section with colored background.",
"visualStyle": "Modern app landing with blue gradient hero, floating geometric shapes, phone mockup screenshots, and clean card-based sections. Smooth AOS scroll animations. Professional yet playful with rounded elements.",
"features": [
"responsive",
"slider",
"animation",
"video-popup",
"gradient-hero",
"floating-shapes",
"app-store-badges",
"social-links",
"contact-form",
"google-maps",
"AOS-animations"
],
"sections": [
"navigation",
"gradient-banner",
"feature-cards",
"app-features",
"testimonials",
"services",
"video-promo",
"cta-download",
"footer"
],
"techStack": [
"bootstrap-4",
"themify-icons",
"slick-carousel",
"fancybox",
"AOS",
"google-maps"
],
"breakpoints": [
400,
480,
768,
992
],
"matchSignals": [
"app",
"mobile",
"landing",
"download",
"startup",
"product",
"blue",
"gradient",
"phone-mockup",
"features",
"testimonials",
"iOS",
"android",
"store",
"launch",
"software"
],
"colorPalette": {
"background": "#ffffff",
"text": "#1a1b1f",
"accent": "#2e7eed (blue)",
"sectionBg": "#fafafa (off-white)",
"gradient": "blue gradient on hero",
"muted": "#808080"
},
"typography": {
"fontFamily": "Open Sans, Lora",
"headingWeight": "600",
"bodyWeight": "300",
"bodySize": "16px",
"letterSpacing": "0",
"textTransform": "uppercase for labels, capitalize for headings",
"style": "Light body weight with semi-bold headings. Lora serif for accent text. Clean and modern with generous spacing."
},
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/themefisher--small-apps-bootstrap.zip"
}
][
{
"id": "templatemo-motor",
"source": "templatemo",
"dir": "templatemo/templatemo_463_motor",
"name": "Motor",
"title": "Motor Website Template",
"category": "automotive",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 1947,
"indexPath": "templatemo/templatemo_463_motor/index.html",
"description": "Automotive/car showcase template with bold red (#b53636) accent color. Preloader animation on page load. Hero section with image carousel/slider showcasing vehicles with performance-themed headings. Content sections with car-related imagery in grid layout (9 images total). One-column and multi-column content blocks. Light gray (#EAE9EF) body background. Open Sans font with italic variant. Dark overlay effects on images. Bootstrap grid with responsive carousel.",
"colorScheme": "light",
"primaryColor": "#b53636",
"layout": "single-page",
"features": [
"responsive",
"carousel",
"preloader",
"image-gallery"
],
"sections": [
"preloader",
"hero",
"content",
"gallery",
"footer"
],
"techStack": [
"bootstrap",
"jquery",
"font-awesome",
"google-fonts"
],
"matchSignals": [
"automotive",
"car",
"vehicle",
"motor",
"speed",
"red-accent",
"carousel",
"preloader",
"showcase",
"dealership",
"racing",
"bold",
"dynamic",
"transport"
],
"colorPalette": {
"background": "#EAE9EF (light lavender gray)",
"text": "#B4B4B4 (silver gray)",
"heading": "#333333 (dark gray)",
"accent": "#b53636 (bold red)",
"hoverAccent": "#d54a4a (lighter red)",
"overlay": "rgba(0,0,0,0.7)"
},
"typography": {
"fontFamily": "Open Sans",
"headingWeight": "700",
"bodyWeight": "400",
"bodySize": "14px",
"letterSpacing": "normal",
"textTransform": "none",
"style": "Clean sans-serif with italic variant, automotive branding feel"
},
"layoutDetails": "Bootstrap grid layout. Hero carousel/slider with vehicle images. Content in single and multi-column layouts. Preloader overlay. 5 responsive breakpoints.",
"visualStyle": "Bold automotive aesthetic with red accents on light lavender-gray background. Dark overlays on images create dramatic vehicle showcase effect.",
"breakpoints": [
500,
630,
767,
991,
1199
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/templatemo--templatemo_463_motor.zip"
},
{
"id": "templatemo-verticard",
"source": "templatemo",
"dir": "templatemo/templatemo_533_verticard",
"name": "Verticard",
"title": "VertiCard by TemplateMo",
"category": "automotive",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 1135,
"indexPath": "templatemo/templatemo_533_verticard/index.html",
"description": "Minimal vertical card-style personal template with a narrow centered layout (max 600px). Features a top brand heading with italic subtitle, a right-side vertical navigation with decorative line markers, and a rounded white card containing a full-width image and text content. The card has generous border-radius (20px) on a light gray (#eeeeee) background. Multi-page structure with Intro, Gallery, and Contact pages. Gallery page uses Magnific Popup for image lightbox. Extremely minimal design with teal accent color, no hero section, no parallax — just clean card-based content presentation.",
"colorScheme": "light",
"primaryColor": "#61AEAE",
"colorPalette": {
"background": "#eeeeee (light gray page)",
"card": "#ffffff",
"text": "#6C6D6E",
"accent": "#61AEAE (teal)",
"secondary": "#0099CC (blue link)",
"navActive": "#61AEAE"
},
"typography": {
"fontFamily": "Open Sans",
"headingWeight": "600",
"bodyWeight": "400",
"bodySize": "18px",
"letterSpacing": "normal",
"style": "Clean sans-serif with larger body text for readability, minimal typographic hierarchy"
},
"layout": "single-page",
"layoutDetails": "Narrow centered container (max 600px). Vertical card layout with rounded corners. Right-side absolute-positioned navigation. No full-width sections. Minimal vertical stacking.",
"visualStyle": "Ultra-minimal card design. Light gray background with white rounded card. Teal accent color. No shadows, no gradients, no complex layouts. Focus on content within a single card container.",
"features": [
"responsive",
"lightbox",
"multi-page"
],
"sections": [
"header",
"content-card",
"footer"
],
"techStack": [
"bootstrap",
"google-fonts",
"magnific-popup"
],
"breakpoints": [
576,
768
],
"matchSignals": [
"minimal",
"card",
"personal",
"portfolio",
"vertical",
"narrow-layout",
"teal",
"clean",
"simple",
"automotive",
"gallery",
"lightbox",
"rounded-card",
"centered"
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/templatemo--templatemo_533_verticard.zip"
},
{
"id": "tooplate-garage",
"source": "tooplate",
"dir": "tooplate/2079_garage",
"name": "Garage",
"title": "Garage Bootstrap Template",
"category": "automotive",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 5187,
"indexPath": "tooplate/2079_garage/index.html",
"description": "Automotive dealership template built on Bootstrap 3 with a dark, premium feel. Opens with a full-width image carousel showcasing luxury vehicles with model names and descriptions. Below, a tabbed vehicle listing section with Most Recent and Most Popular tabs displays car cards with images, model names, year, mileage, and pricing in a masonry-style grid using Isotope. Each card features a hover overlay effect. A contact section includes a styled form. The footer displays the Garage brand, copyright, and social media links. Uses BebasNeue display font for headings with a gold/amber accent color scheme against dark backgrounds.",
"colorScheme": "dark",
"primaryColor": "#C59E47",
"layout": "single-page",
"features": [
"responsive",
"carousel",
"tabs",
"isotope-grid",
"hover-effects",
"contact-form",
"social-links"
],
"sections": [
"navigation",
"hero-carousel",
"vehicle-listings",
"contact",
"footer"
],
"techStack": [
"bootstrap-3",
"jquery",
"font-awesome",
"isotope"
],
"breakpoints": [
480,
767,
991,
1199
],
"matchSignals": [
"automotive",
"car",
"dealership",
"vehicle",
"luxury",
"garage",
"dark-theme",
"gold-accent",
"carousel",
"listing",
"showroom",
"premium",
"auto",
"motor",
"classic-cars",
"inventory"
],
"colorPalette": {
"background": "#191919 (dark charcoal)",
"surface": "#262626",
"text": "#ffffff",
"accent": "#C59E47 (gold/amber)",
"secondary": "#F8C72D (bright gold)",
"navBg": "#020243 (deep navy)",
"muted": "#6D6D6D"
},
"typography": {
"fontFamily": "BebasNeue Regular",
"headingWeight": "bold",
"bodyWeight": "400",
"bodySize": "14px",
"letterSpacing": "normal",
"textTransform": "uppercase (headings)",
"style": "Display condensed headings in BebasNeue. Gold accent color on interactive elements and highlights."
},
"layoutDetails": "Full-width hero carousel with vehicle slides. Tabbed content area with Isotope masonry grid for vehicle cards. Contact form section. Sticky top navigation bar.",
"visualStyle": "Dark premium automotive aesthetic. Gold/amber accent against charcoal backgrounds. Image-heavy vehicle showcases with hover overlays. Condensed display typography.",
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/tooplate--2079_garage.zip"
},
{
"id": "tooplate-parallax_depth",
"source": "tooplate",
"dir": "tooplate/2144_parallax_depth",
"name": "Parallax Depth",
"title": "Parallax Depth Experience from Tooplate website",
"category": "automotive",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": false,
"sizeKB": 71,
"indexPath": "tooplate/2144_parallax_depth/index.html",
"description": "Immersive parallax experience template with multi-layer scrolling depth effects. Hero with parallax layers (background, floating rectangles, glowing orbs) that move at different speeds. Custom mouse follower cursor. Stars background. SVG hexagonal logo with gradient fills. About section with orbit animation (three concentric rotating rings with dots). Features section with numbered info boxes. Gallery with hover-reveal cards. Stats with animated counters. Contact form. Section navigation with 3D pyramid and hexagon buttons. Orbitron, Space Grotesk, and Inter fonts. Neon cyan and magenta color scheme on dark background.",
"colorScheme": "dark",
"primaryColor": "#00d9ff",
"colorPalette": {
"background": "#0a0a0f",
"text": "#ffffff",
"primary": "#00d9ff (cyan)",
"secondary": "#ff00ea (magenta)",
"glow": "#00ffcc (green)",
"scrollbar": "gradient cyan-to-magenta"
},
"typography": {
"fontFamily": "Inter (body), Space Grotesk (headings), Orbitron (display)",
"headingWeight": "700",
"bodyWeight": "300",
"bodySize": "16px",
"letterSpacing": "0.02em",
"textTransform": "uppercase (titles)",
"style": "Three-tier font system: display for hero, geometric for headings, clean for body. Neon glow effects on key text."
},
"layout": "single-page",
"layoutDetails": "Single-page scrolling with multi-layer parallax hero. Section navigation with prev/next buttons. Full-width sections with gradient backgrounds. Custom scrollbar. Mouse follower cursor.",
"visualStyle": "Immersive dark parallax experience with multi-layer depth, neon cyan/magenta accents, floating geometric elements, orbit animations, and 3D navigation buttons. Cinematic and futuristic.",
"features": [
"responsive",
"parallax-layers",
"mouse-follower",
"orbit-animation",
"counter-animation",
"contact-form",
"custom-scrollbar",
"section-navigation",
"stars-background"
],
"sections": [
"hero",
"about",
"features",
"gallery",
"stats",
"contact",
"footer"
],
"techStack": [
"vanilla-css",
"vanilla-js",
"google-fonts"
],
"breakpoints": [
480,
768,
1024,
1200
],
"matchSignals": [
"automotive",
"parallax",
"immersive",
"dark-theme",
"futuristic",
"depth",
"layers",
"neon",
"experience",
"interactive",
"3d",
"cinematic",
"creative",
"showcase",
"landing"
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/tooplate--2144_parallax_depth.zip"
},
{
"id": "tooplate-the_card",
"source": "tooplate",
"dir": "tooplate/2109_the_card",
"name": "The Card",
"title": "The Card HTML5 Template by tooplate.com",
"category": "automotive",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 3246,
"indexPath": "tooplate/2109_the_card/index.html",
"description": "Card-style single-page with split-screen page loader, dark header box, horizontal nav controlling sections via JS transitions. Dark textbox intro and about. 12-image gallery with Goliath hover effect and Magnific Popup lightbox. Contact form. Decorative barcode SVG and Slick carousel at bottom. Parallax backgrounds.",
"colorScheme": "dark",
"primaryColor": "#3399cc",
"layout": "single-page",
"features": [
"responsive",
"preloader",
"parallax",
"lightbox",
"gallery",
"carousel",
"contact-form",
"hover-effects",
"page-transitions"
],
"sections": [
"header",
"navigation",
"intro",
"about",
"gallery",
"contact",
"carousel",
"footer"
],
"techStack": [
"bootstrap",
"google-fonts",
"jquery",
"magnific-popup",
"slick-carousel"
],
"matchSignals": [
"card-style",
"creative",
"portfolio",
"gallery",
"lightbox",
"dark-theme",
"parallax",
"preloader",
"hover-effects",
"carousel",
"page-transitions",
"barcode",
"unique-layout",
"contact-form",
"automotive",
"modern"
],
"colorPalette": {
"background": "parallax images",
"overlay": "rgba(0,0,0,0.7)",
"text": "#ffffff",
"accent": "#3399cc"
},
"typography": {
"fontFamily": "Open Sans",
"headingWeight": "600",
"bodyWeight": "300",
"bodySize": "16px",
"letterSpacing": "normal",
"style": "Light body on dark translucent backgrounds"
},
"layoutDetails": "Single-page with JS section transitions. Dark translucent boxes over parallax. 12-image gallery. Bottom carousel.",
"visualStyle": "Dark atmospheric card-style with translucent boxes over parallax. Goliath hover effects.",
"breakpoints": [
576,
768,
992,
1200
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/tooplate--2109_the_card.zip"
}
][
{
"id": "templatemo-sentra",
"source": "templatemo",
"dir": "templatemo/templatemo_518_sentra",
"name": "Sentra",
"title": "Sentra - Free Bootstrap Theme",
"category": "charity",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 3804,
"indexPath": "templatemo/templatemo_518_sentra/index.html",
"description": "Charity/nonprofit single-page template with a full-width hero banner featuring a large background image and centered call-to-action text with a donate button. Fixed top navigation bar with smooth scroll links. Sections include About with mission statement and feature icons, Causes section with image cards showing fundraising progress bars and donation goals, Events section with upcoming event listings, Team section with circular member photos and role descriptions, Testimonials area with client quotes, and Contact section with a form. Owl Carousel for testimonials sliding. Lightbox for image viewing. Warm, inviting color scheme with green accent suitable for charitable organizations.",
"colorScheme": "light",
"primaryColor": "#27ae60",
"layout": "single-page",
"features": [
"responsive",
"fixed-navigation",
"smooth-scroll",
"contact-form",
"owl-carousel",
"lightbox",
"progress-bars",
"team-section",
"testimonials"
],
"sections": [
"navigation",
"hero",
"about",
"causes",
"events",
"team",
"testimonials",
"contact",
"footer"
],
"techStack": [
"bootstrap",
"jquery",
"owl-carousel",
"font-awesome",
"lightbox",
"google-fonts"
],
"matchSignals": [
"charity",
"nonprofit",
"donation",
"causes",
"fundraising",
"events",
"team",
"testimonials",
"one-page",
"green",
"volunteer",
"ngo",
"progress-bar",
"bootstrap"
],
"colorPalette": {
"background": "#ffffff",
"text": "#333333",
"accent": "#27ae60 (green)",
"secondary": "#f5f5f5 (light gray)",
"dark": "#222222 (dark footer)"
},
"typography": {
"fontFamily": "'Open Sans', Arial, sans-serif",
"headingWeight": "700",
"bodyWeight": "400",
"bodySize": "14px",
"letterSpacing": "normal",
"textTransform": "uppercase on section titles",
"style": "Open Sans with clear hierarchy, warm and approachable"
},
"layoutDetails": "Fixed top navbar with anchor links. Full-width hero with CTA button. Causes in card grid with progress bars. Events in list format. Team in circular photo grid. Testimonials in carousel.",
"visualStyle": "Warm nonprofit aesthetic with green accent, white backgrounds, progress bar fundraising indicators, circular team photos, and inviting typography.",
"breakpoints": [
768,
992,
1200
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/templatemo--templatemo_518_sentra.zip"
},
{
"id": "templatemo-upright",
"source": "templatemo",
"dir": "templatemo/templatemo_555_upright",
"name": "Upright",
"title": "Upright",
"category": "charity",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 7818,
"indexPath": "templatemo/templatemo_555_upright/index.html",
"description": "Charity/nonprofit single-page template with a fixed left sidebar navigation and parallax image column. The sidebar contains the brand name, icon-based nav links (Home, Gallery, About, Contact) with triangle-right active indicators, and a footer credit. The main content area scrolls vertically with parallax background images that change per section. Home section features two-column text blocks with large FontAwesome icons, media list posts with dates, and a testimonial slider. Gallery section displays a filterable image grid with Magnific Popup lightbox. About section has team member cards with circular photos and social links. Contact section includes a styled form with map placeholder. Clean, modern layout with blue accent color on white backgrounds.",
"colorScheme": "light",
"primaryColor": "#006699",
"colorPalette": {
"background": "#ffffff",
"text": "#666666",
"accent": "#006699 (blue primary)",
"secondary": "#009999 (teal secondary)",
"border": "#cccccc",
"navBackground": "#f2f2f2"
},
"typography": {
"fontFamily": "Kumbh Sans",
"headingWeight": "700",
"bodyWeight": "400",
"bodySize": "16px",
"letterSpacing": "normal",
"style": "Clean sans-serif with consistent weight, modern geometric feel"
},
"layout": "sidebar",
"layoutDetails": "Fixed left sidebar (nav + brand) with scrollable main content area. Parallax image column between sidebar and content. Sections stack vertically. Bootstrap grid for internal layouts.",
"visualStyle": "Clean, modern with parallax depth. Blue accent on white. Card-based team section, media list posts, filterable gallery grid. Subtle transitions on hover.",
"features": [
"responsive",
"parallax",
"lightbox",
"image-filter",
"slider",
"contact-form",
"social-links",
"smooth-scroll"
],
"sections": [
"header",
"home",
"gallery",
"about",
"contact",
"footer"
],
"techStack": [
"bootstrap",
"font-awesome",
"google-fonts",
"magnific-popup",
"slick-carousel",
"jquery"
],
"breakpoints": [
576,
768,
992,
1200
],
"matchSignals": [
"charity",
"nonprofit",
"sidebar",
"parallax",
"gallery",
"lightbox",
"team",
"contact-form",
"single-page",
"blue-accent",
"modern",
"clean",
"filterable-gallery",
"testimonials",
"media-list"
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/templatemo--templatemo_555_upright.zip"
}
][
{
"id": "tooplate-constructive",
"source": "tooplate",
"dir": "tooplate/2102_constructive",
"name": "Constructive",
"title": "Constructive HTML Template",
"category": "construction",
"hasIndex": true,
"hasCss": true,
"hasJs": true,
"hasImages": true,
"sizeKB": 4706,
"indexPath": "tooplate/2102_constructive/index.html",
"description": "Construction company template with a sidebar navigation layout. Left sidebar with company logo and main navigation links that stays fixed. Content area features fullscreen background images that change per section with smooth transitions. Four main sections: hero with company intro and construction imagery, services/about section with project descriptions, gallery/portfolio with construction project photos, and contact section with a form (name, email, message). Preloader animation. Cyan (#33ccff) accent color on dark (#222222) backgrounds. Open Sans font. Responsive with sidebar collapsing on mobile.",
"colorScheme": "dark",
"primaryColor": "#33ccff",
"layout": "sidebar",
"features": [
"responsive",
"sidebar-navigation",
"background-transitions",
"contact-form",
"preloader",
"carousel"
],
"sections": [
"sidebar-nav",
"hero",
"services",
"gallery",
"contact"
],
"techStack": [
"bootstrap-4",
"jquery",
"google-fonts"
],
"matchSignals": [
"construction",
"building",
"contractor",
"sidebar",
"dark-theme",
"cyan-accent",
"industrial",
"architecture",
"engineering",
"project",
"gallery",
"preloader",
"fullscreen-bg",
"company",
"corporate",
"services"
],
"colorPalette": {
"background": "#222222 dark gray",
"text": "#ffffff white",
"heading": "#ffffff white",
"accent": "#33ccff bright cyan",
"sidebarBg": "#000000c4 semi-transparent black",
"overlay": "rgba(0,0,0,0.7)",
"border": "#33ccff",
"muted": "#999999"
},
"typography": {
"fontFamily": "Open Sans",
"headingWeight": "400",
"bodyWeight": "300",
"bodySize": "16px",
"letterSpacing": "normal",
"textTransform": "none",
"style": "Clean sans-serif (Open Sans) with light weight. Airy feel on dark backgrounds. Professional construction industry typography."
},
"layoutDetails": "Sidebar layout with fixed left navigation. Content area fills remaining width. Fullscreen background images per section with CSS transitions. Sidebar collapses to hamburger on mobile. Sections stack vertically in content area.",
"visualStyle": "Dark industrial aesthetic with bright cyan (#33ccff) accents. Fixed sidebar navigation. Fullscreen construction photography backgrounds with transitions. Preloader animation. Bold contrast between dark backgrounds and cyan highlights.",
"breakpoints": [
500,
600,
640,
767,
991,
1199,
1400
],
"downloadUrl": "https://storage.googleapis.com/starchild-bucket-testnet/ui-templates/tooplate--2102_constructive.zip"
}
]Related skills
Setup Matt Pocock SkillsScaffold the per-repo configuration that Matt Pocock’s engineering agent skills rely on so they understand the issue tracker, triage labels, and domain documentation la495k196k
Lark AppsConnect Claude, Cursor or custom agents directly to Lark (Feishu) for messaging, document automation, approval workflows and enterprise data access.402k
CavemanSlash token usage by roughly 75% while keeping every technical detail intact when working with Claude Code, Cursor or similar agents.391k94.7k
Lark Skill MakerQuickly turn any Lark/Feishu OpenAPI call or multi-step workflow into a reusable agent skill with its own SKILL.md.386k16k
Running Claude Code Via Litellm CopilotRun Claude Code at a fraction of the cost by routing requests through LiteLLM to the GitHub Copilot Chat API.270k72
Codex PetGenerate a complete Codex Pet spritesheet and metadata from one reference image without needing an OpenAI key or Codex Pro.246k10AI & Agent Buildingagents