devtemDesign 0.1.0: one config object paints a whole landing page

Every landing page I built started the same way: nav, hero, feature cards, pricing, FAQ, footer, then a day of making it responsive. So I wrote an engine that does that part for me. devtemDesign takes one config object and renders the whole page. No framework, no build step, no dependencies. Two tag

s and one function call. This post is both an introduction and a reference for v0.1.0. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devtemdesign@0.1.0/style.min.css"> <script src="https://cdn.jsdelivr.net/npm/devtemdesign@0.1.0/script.min.js"></script> <div id="app-root"></div> <script> devtemDesign("app-root", { template: "cyber", logoName: "MYAPP", heroTitleLine1: "Declarative UI,", heroTitleLine2: "Zero-Config Motion", heroSubtitle: "One config object. Complete animated landing.", primaryBtnText: "Get started", primaryBtnHref: "/docs" }); </script> That gives you a sticky glass navbar, an animated hero, ambient background orbs, reveal-on-scroll, a mobile drawer and a footer.

Every section except the hero is optional, and a section only renders when its config key is present. If you want to skip the code entirely, the builder generates a config from a description and lets you edit it live. 7 templates: figsh, cyber, aurora, monochrome, sunset, ocean, and paper (light). Live theming: switch at runtime, add a built-in theme button, or override any design token.

New sections: stats with count-up numbers, FAQ accordion, closing CTA, and pricing with a Monthly/Yearly toggle. Interactions: scroll progress bar, active nav link, card spotlight, seamless brand marquee, back-to-top button. A real lifecycle: devtemDesign() returns { setTemplate, destroy }. Accessibility: skip link, focus rings, aria-expanded on the menu, native <details> for FAQ, full prefers-reduced-motion support.

Override any token with the theme option: theme: { accent: "#ff4d6d", accent2: "#ffb703", "bg-deep": "#0b0710" } Token Purpose --accent, --accent2, --accent3 Brand colors and gradients --text, --muted Primary and secondary text --bg-deep Page background, and text on filled buttons --glass-bg, --glass-border, --glass-blur Card surfaces --surface, --line Subtle fills and dividers --orb Ambient orb opacity All text fields accept HTML, so icons and inline markup work. Only pass content you trust. Option Type Default Description template string "figsh" One of the 7 templates theme object {} Token overrides themeSwitcher boolean or string[] false Navbar theme button. An array limits the cycle.

Choice is saved in localStorage cursor boolean true Custom cursor on or off logo, logoName, logoHref string fscss logo, "CORE", "/" Brand image, name and link navLinks (string or { label, href })[] Features, How it works, Pricing Navbar and drawer links ctaText, ctaHref string "Get started", "#" Navbar button Option Description heroBadge Pill above the title heroTitleLine1, heroTitleLine2 H1 lines. The second has an animated gradient heroSubtitle Paragraph under the H1 primaryBtnText, primaryBtnHref Main button secondaryBtnText, secondaryBtnHref Ghost button, rendered only when text is set brands, brandsSubtitle Hero chips and a seamless marquee that pauses on hover Section Keys Anchor Stats stats: [{ value, label }] #stats Features featuresLabel, featuresTitle, featuresSub, features: [{ title, desc, icon }] #features Steps stepsLabel, stepsTitle, stepsSub, steps: [{ title, desc }] #how Panels panelsLabel, panelsTitle, panelsSub, panels: [{ tag, title, desc }] none Pricing pricingLabel, pricingTitle, pricingSub, yearlyBadge, pricing: [...] #pricing FAQ faqLabel, faqTitle, faqSub, faq: [{ q, a }] #faq CTA cta: { title, sub, text, href } none Stat values keep their prefix, suffix, commas and decimals, so "$1,200", "99.9%" and "12k+" all count up correctly. A pricing plan looks like this. A Monthly/Yearly toggle appears automatically when any plan has yearly: { tier: "Pro", amount: "$12", period: "/mo", desc: "For product landings.", features: ["Everything in Free", "Priority support"], cta: "Go Pro", href: "/signup", featured: true, badge: "Most popular", yearly: { amount: "$115", period: "/yr" } } footer: { tagline: "Declarative UI engine for the modern web.", copy: "© 2026 devtem-dev", columns: [{ heading: "Product", links: [{ label: "Docs", href: "/docs" }] }], social: [{ icon: "fab fa-github", href: "https://github.com/devtem-dev", label: "GitHub" }], legal: [{ label: "Privacy", href: "/privacy" }] } The full schema, with types and defaults, lives at design.devtem.org/api.

Three option names changed to match what the code actually reads: 0.0.2 docs Use now heroTag heroBadge featuresSectionLabel featuresLabel featuresSectionTitle featuresTitle Font Awesome is optional. It is only needed for icon fields and footer social icons. The hamburger, checkmarks and accordions are pure CSS. Theming uses color-mix(), so you need Chrome 111+, Safari 16.2+ or Firefox 113+.

Older browsers still render the page but lose some tinted surfaces. Rendering replaces the container's contents. Give the engine its own wrapper element. Docs: https://design.devtem.org/docs Schema reference: https://design.devtem.org/api Examples: https://design.devtem.org/examples Builder: https://design.devtem.org/builder npm: https://www.npmjs.com/package/devtemdesign GitHub: https://github.com/devtem-dev/devtemDesign It is MIT licensed and open to contributions.

If you build something with it, I'd like to see it. Drop a link in the comments, and tell me which section you want next

devtemDesign 0.1.0: one config object paints a whole landing page

If you build something with it, I'd like to see it. Drop a link in the comments, and tell me which section you want next

devtemDesign 0.1.0: one config object paints a whole landing page

Key Takeaways

Related Articles

The Reply Comes From the Model

Building an Autonomous AI Incident Knowledge Engine with Cognee and Uptime Kuma

Storing Retell Call Recordings for Client Portals: Expiring Links, Retention and Per-Tenant Access

SlothDesk: Your Local AI File Organizer That Does the Heavy Lifting

Discussion

devtemDesign 0.1.0: one config object paints a whole landing page

Key Takeaways

Related Articles

The Reply Comes From the Model

Building an Autonomous AI Incident Knowledge Engine with Cognee and Uptime Kuma

Storing Retell Call Recordings for Client Portals: Expiring Links, Retention and Per-Tenant Access

SlothDesk: Your Local AI File Organizer That Does the Heavy Lifting

Discussion

Related Articles

Dev.to
The Reply Comes From the Model
The Reply Comes From the Model "What should we do today?" The ThinkPad answered, in the model's own words, "i should probably go to the market today." That sentence took 667 milliseconds to generate. Savindu Thathsara, savithathsara.me. This is a Hearthlen note from the laptop. The greeting used t

Dev.to
Building an Autonomous AI Incident Knowledge Engine with Cognee and Uptime Kuma
In modern infrastructure management, keeping services online is only half the battle. When downtime, degraded performance, or cascading outages occur, engineering teams scramble across alert histories, heartbeat charts, and incident post-mortems to understand what failed, when, and why. While monit

Dev.to
Storing Retell Call Recordings for Client Portals: Expiring Links, Retention and Per-Tenant Access
Disclosure: I'm Nabeel, founder of VoiceDash, a client portal for Retell agencies. This post is about the plumbing, not the product, and every Retell behaviour below is taken from Retell's own docs (linked inline). TL;DR: Retell recording URLs do not expire unless you opt in to secure URLs, and Rete

Dev.to
SlothDesk: Your Local AI File Organizer That Does the Heavy Lifting
This is a submission for the Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady What if your computer could clean up your messy folders without sending your personal file metadata to a cloud AI service? We all have that one folder. Hundreds of screenshots, PDFs with meaningless names, do