devtemDesign

One configuration schema. Infinite animated synthesis.

devtemDesign is a lightweight, zero-dependency page engine. Pass one config object and it paints a full landing page: glass cards, ambient motion, reveal animations, a mobile drawer, pricing, FAQ and footer. Plain HTML, CSS and JS. No framework, no build step.

npm: npm i devtemdesign Docs: design.devtem.org GitHub: github.com/devtem-dev/devtemDesign

Features

7 templates: figsh, cyber, aurora, monochrome, sunset, ocean, and paper (light).
Live theme switching with an optional theme button that remembers the visitor's choice.
Sections from config: hero, brand marquee, stats, features, steps, panels, pricing, FAQ, closing CTA, footer.
Interactive: animated count-up stats, Monthly/Yearly pricing toggle, FAQ accordion, card spotlight, scroll progress bar, active nav link, back-to-top button.
Ambient motion: floating orbs, magnetic cursor, click ripples. All respect prefers-reduced-motion.
Responsive: fluid grids, slide-in mobile drawer (closes on link tap, Escape, or resize), hover effects only on devices that have hover.
Accessible: skip link, visible focus rings, ARIA on the menu, aria-current on the active link, native <details> for FAQ.
Clean lifecycle: devtemDesign() returns { setTemplate, destroy }, and calling it again on the same container cleans up first.

Quick Start

1. Add the CDN links

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devtemdesign@0.1.0/style.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/devtemdesign@0.1.0/script.min.js"></script>

Font Awesome is optional. It is only needed for feature icons and footer social icons.

2. Call the engine

<div id="app-root"></div>
<script>
  devtemDesign("app-root", {
    template: "cyber",
    logoName: "DEVTEM",
    heroTitleLine1: "Declarative UI,",
    heroTitleLine2: "Zero-Config Motion",
    heroSubtitle: "One config object. Complete animated landing.",
    primaryBtnText: "Build your page",
    primaryBtnHref: "/docs"
  });
</script>

Everything except the hero is optional. A section only renders when its config key is present.

Configuration Reference

devtemDesign(containerId, config)

Text fields are inserted as HTML so you can use icons and inline markup. Only pass trusted content.

Core

Property	Type	Default	Description
`template`	`string`	`"figsh"`	One of the 7 templates
`theme`	`object`	`{}`	Token overrides, e.g. `{ accent: "#ff4d6d" }`
`themeSwitcher`	`boolean \| string[]`	`false`	Adds a theme button. Pass an array of template names to limit the cycle. Choice is saved in `localStorage`
`cursor`	`boolean`	`true`	Set `false` to disable the custom cursor
`logo`	`string`	fscss logo	Logo image URL for navbar and footer
`logoName`	`string`	`"CORE"`	Brand name
`logoHref`	`string`	`"/"`	Where the navbar brand links to

Navigation

Property	Type	Default	Description
`navLinks`	`string[] \| object[]`	Features, How it works, Pricing	Plain strings (href `#`) or `{ label, href }`
`ctaText`	`string`	`"Get started"`	Navbar button text
`ctaHref`	`string`	`"#"`	Navbar button link

Hero

Property	Type	Default	Description
`heroBadge`	`string`	none	Small pill above the title
`heroTitleLine1`	`string`	`"Declarative UI,"`	First line of the H1
`heroTitleLine2`	`string`	`"Zero-Config Motion"`	Second line, rendered as animated gradient text
`heroSubtitle`	`string`	default copy	Paragraph below the H1
`primaryBtnText` / `primaryBtnHref`	`string`	`"Get started"` / `"#"`	Main button
`secondaryBtnText` / `secondaryBtnHref`	`string`	none	Ghost button, only rendered if text is set
`brands`	`string[]`	`[]`	Feeds the hero chips and the scrolling marquee
`brandsSubtitle`	`string`	`"Built for modern product teams"`	Caption under the chips

Stats

Property	Type	Description
`stats`	`object[]`	`{ value, label }`. Values count up when scrolled into view. Prefix, suffix, commas and decimals are kept: `"$1,200"`, `"99.9%"`, `"12k+"`
`statsId`	`string`	Anchor id for the section (default `"stats"`)

Features, Steps, Panels

Property	Type	Default	Description
`featuresLabel` / `featuresTitle` / `featuresSub`	`string`	defaults	Section heading. Anchor id is `#features`
`features`	`object[]`	`[]`	`{ title, desc, icon }`. `icon` accepts HTML or emoji
`stepsLabel` / `stepsTitle` / `stepsSub`	`string`	defaults	Section heading. Anchor id is `#how`
`steps`	`object[]`	`[]`	`{ title, desc }`, numbered automatically
`panelsLabel` / `panelsTitle` / `panelsSub`	`string`	none	Optional heading above panels
`panels`	`object[]`	`[]`	`{ tag, title, desc }`

Pricing

Property	Type	Description
`pricingLabel` / `pricingTitle` / `pricingSub`	`string`	Section heading. Anchor id is `#pricing`
`yearlyBadge`	`string`	Small label on the Yearly toggle, e.g. `"Save 20%"`
`pricing`	`object[]`	See below

Each plan:

{
  tier: "Pro",
  amount: "$12",
  period: "/mo",
  desc: "For product landings that need more.",
  features: ["Everything in Free", "Priority support"],
  cta: "Go Pro",
  href: "/signup",
  featured: true,          // highlights the card
  badge: "Most popular",   // text on the featured ribbon
  yearly: { amount: "$120", period: "/yr" }   // optional
}

The Monthly/Yearly toggle appears automatically when at least one plan has yearly. Plans without it keep their price in both views.

FAQ

Property	Type	Description
`faqLabel` / `faqTitle` / `faqSub`	`string`	Section heading. Anchor id is `#faq`
`faq`	`object[]`	`{ q, a }`. One item open at a time

Closing CTA

cta: { title: "Ready to build?", sub: "Free forever for open source.", text: "Start now", href: "/docs" }

Footer

footer: {
  tagline: "Declarative UI engine for the modern web.",
  copy: "© 2026 devtem-dev · MIT",
  columns: [
    { heading: "Product", links: [{ label: "Docs", href: "/docs" }] }
  ],
  social: [
    { icon: "fab fa-github", href: "/devtem-dev", label: "GitHub" }
  ],
  legal: [{ label: "Privacy", href: "/privacy" }]
}

All fields are optional. config.footerCopy still works as a plain copyright fallback.

Full Example

const page = devtemDesign("app-root", {
  template: "ocean",
  themeSwitcher: true,
  logoName: "DEVTEM",
  navLinks: [
    { label: "Features", href: "#features" },
    { label: "How it works", href: "#how" },
    { label: "Pricing", href: "#pricing" },
    { label: "FAQ", href: "#faq" }
  ],
  ctaText: "Try free",
  ctaHref: "/get-started",

  heroBadge: "Pure CSS + JS engine",
  heroTitleLine1: "Declarative UI,",
  heroTitleLine2: "Zero-Config Motion",
  heroSubtitle: "One config object. Complete animated landing.",
  primaryBtnText: "Build your page",
  primaryBtnHref: "/docs",
  secondaryBtnText: "View examples",
  secondaryBtnHref: "/gallery",
  brands: ["NPM", "FSCSS", "DEVTEMPLE", "ESBUILD", "CSS3"],
  brandsSubtitle: "Powered by open source",

  stats: [
    { value: "7", label: "Templates" },
    { value: "0", label: "Dependencies" },
    { value: "12kb", label: "Gzipped" }
  ],

  featuresTitle: "Stop writing the same landing boilerplate",
  features: [
    { title: "Single schema", desc: "Pass JSON, get a full animated page.", icon: '<i class="fas fa-cube"></i>' },
    { title: "Mobile drawer", desc: "Slide-in nav that closes on link tap.", icon: '<i class="fas fa-mobile-screen"></i>' },
    { title: "Ambient motion", desc: "Orbs, cursor, reveal. All optional.", icon: '<i class="fas fa-wand-magic-sparkles"></i>' }
  ],

  steps: [
    { title: "Describe content", desc: "Fill the config with your copy and links." },
    { title: "Pick a template", desc: "Seven built in, or override any token." },
    { title: "Ship", desc: "One function call paints the page." }
  ],

  yearlyBadge: "Save 20%",
  pricing: [
    { tier: "Free", amount: "$0", desc: "For experiments and open source.", features: ["All templates", "CDN ready"], cta: "Start free", href: "#" },
    { tier: "Pro", amount: "$12", period: "/mo", yearly: { amount: "$115", period: "/yr" },
      featured: true, badge: "Most popular", desc: "For product landings.", features: ["Everything in Free", "Priority support"], cta: "Go Pro", href: "#" }
  ],

  faq: [
    { q: "Do I need a build step?", a: "No. Add two tags and call one function." },
    { q: "Can I change the colors?", a: "Yes. Pass a theme object to override any token." }
  ],

  cta: { title: "Ship your landing page today", text: "Read the docs", href: "/docs" },

  footer: {
    tagline: "Declarative UI engine for the modern web.",
    columns: [
      { heading: "Product", links: [{ label: "Docs", href: "/docs" }, { label: "Gallery", href: "/gallery" }] },
      { heading: "Resources", links: [{ label: "npm", href: "https://npmjs.com/package/devtemdesign" }] }
    ],
    social: [{ icon: "fab fa-github", href: "/devtem-dev", label: "GitHub" }, { icon: "fab fa-dev", href: "https://dev.to/fscss", label: "DEV" } ],
    legal: [{ label: "Privacy", href: "/privacy" }, { label: "Terms", href: "/terms" }],
    copy: "© 2026 devtem-dev · MIT"
  }
});

JavaScript API

const page = devtemDesign("app-root", config);

page.setTemplate("sunset");   // switch theme at runtime
page.destroy();               // remove listeners, observers and markup

devtemDesign.version;         // "0.1.0"
devtemDesign.templates;       // ["figsh", "cyber", "aurora", ...]

Templates

Template	Vibe	Accents
`figsh`	Futuristic glass	Cyan, purple, pink
`cyber`	Neon cyberpunk	Cyan, magenta, red
`aurora`	Organic nature	Emerald, violet, blue
`monochrome`	Minimal grayscale	White, silver
`sunset`	Warm dusk	Orange, rose, gold
`ocean`	Cool depth	Sky, teal, indigo
`paper`	Light mode	Indigo, pink, cyan

Custom tokens

Override any token with theme. Keys work with or without the -- prefix.

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 (also used for text on filled buttons)
`--glass-bg`, `--glass-border`, `--glass-blur`	Card surfaces
`--surface`, `--line`	Subtle fills and dividers
`--orb`	Ambient orb opacity

Browser Support

Modern evergreen browsers. 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.

Upgrading from 0.0.2

Most configs work unchanged. A few key names were corrected to match the code:

Old (0.0.2 docs)	Use now
`heroTag`	`heroBadge`
`featuresSectionLabel`	`featuresLabel`
`featuresSectionTitle`	`featuresTitle`

New in 0.1.0: three templates, theme, themeSwitcher, stats, faq, cta, yearly pricing, ctaHref, logoHref, cursor, and the returned { setTemplate, destroy } handle.

File Structure

devtemDesign/
├── fscss/  # source styling using shorthands properties 
├── style.css    # compiled tokens, glass, grids, marquee, nav, drawer, footer, motion from fscss/... 
├── script.js    # engine: devtemDesign() and all interaction handlers
└── README.md

Contributing

Fork the repo: github.com/devtem-dev/devtemDesign
Create a branch: git checkout -b feature/your-idea
Commit and push, then open a Pull Request

Ideas welcome: more templates, marqueeSpeed, testimonials section, RTL support, more footer layouts.

Local development

git clone https://github.com/devtem-dev/devtemDesign.git
cd devtemDesign
# open index.html in a browser. No build step.

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
fscss		fscss
node_modules		node_modules
.gitattributes		.gitattributes
.gitignore		.gitignore
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
devtemdesign.jpg		devtemdesign.jpg
package-lock.json		package-lock.json
package.json		package.json
script.js		script.js
style.css		style.css

Navigation Menu

Repository navigation

About

Repository files navigation

devtemDesign

Features

Quick Start

1. Add the CDN links

2. Call the engine

Configuration Reference

Core

Navigation

Hero

Stats

Features, Steps, Panels

Pricing

FAQ

Closing CTA

Footer

Full Example

JavaScript API

Templates

Custom tokens

Browser Support

Upgrading from 0.0.2

File Structure

Contributing

Local development

License

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

devtemDesign

Features

Quick Start

1. Add the CDN links

2. Call the engine

Configuration Reference

Core

Navigation

Hero

Stats

Features, Steps, Panels

Pricing

FAQ

Closing CTA

Footer

Full Example

JavaScript API

Templates

Custom tokens

Browser Support

Upgrading from 0.0.2

File Structure

Contributing

Local development

License

About

Resources

Contributing

Security policy

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages