# What Programming Languages Are Used in the Nutlope/hallmark Repository?
> Discover the programming languages used in the Nutlope/hallmark repository. This project utilizes JavaScript, HTML, CSS, JSON, and Markdown for its front-end development.
- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: getting-started
- Published: 2026-08-10
---
**The Nutlope/hallmark repository is built entirely with front-end web technologies—JavaScript, HTML, CSS, JSON, and Markdown—with no server-side languages present.**
The Nutlope/hallmark project is a static, client-side design skill that runs entirely in the browser. Understanding the programming languages used in the Nutlope/hallmark repository reveals a deliberate focus on lightweight, browser-native technologies rather than complex backend infrastructure. Every interactive feature, visual theme, and structural element is implemented using standard web stack files that execute directly in the user's browser.
## JavaScript: The Core Interaction Engine
**JavaScript** drives all interactive behavior in the application. The primary logic resides in [[`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js), which handles theme selection, component swapping, copy-to-clipboard functionality, keyboard shortcuts, and dynamic UI updates.
The `applyTheme()` function demonstrates how the application manages state transitions and view updates:
```javascript
function applyTheme(theme) {
if (!THEMES[theme]) return;
const apply = () => {
root.dataset.theme = theme; // CSS picks up the theme
swapArchetypes(theme); // load the appropriate hero/footer
setPressed(theme); // update UI state
localStorage.setItem(STORAGE_KEY, theme);
};
// Use view‑transition when supported
if (!reduced && document.startViewTransition) {
document.startViewTransition(apply);
} else {
apply();
}
}
```
This implementation leverages modern browser APIs including `localStorage` for persistence and the View Transitions API for smooth theme switches. The `swapArchetypes()` and `setPressed()` helper functions work in concert to update the DOM and reflect the current selection in the interface.
## HTML: Structural Foundation
**HTML** provides the markup backbone for every example page, the landing page, and the component templates referenced by the JavaScript. The entry point [[`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html)](https://github.com/Nutlope/hallmark/blob/main/site/index.html) defines the structural slots that the JavaScript populates dynamically.
The landing page uses a clean skeleton with data attributes that enable the theme system:
```html
```
These `data-slot` attributes serve as insertion points where the JavaScript injects theme-specific components, allowing the HTML to remain semantic while supporting dynamic content swapping.
## CSS: Theme-Driven Styling
**CSS** supplies the visual styling, layout, token definitions, and animation keyframes that give each theme its distinct appearance. The stylesheets in [`site/css/`](https://github.com/Nutlope/hallmark/blob/main/site/css/) including [`base.css`](https://github.com/Nutlope/hallmark/blob/main/base.css) and [`tokens.css`](https://github.com/Nutlope/hallmark/blob/main/tokens.css) define the design language through CSS custom properties.
Each theme inherits a palette defined in CSS variables, activated by the `data-theme` attribute toggled by JavaScript:
```css
:root[data-theme="hum"] {
--color-bg: oklch(95% 0.02 260);
--color-accent: oklch(60% 0.12 30);
}
```
This approach decouples the visual logic from the application logic, allowing the JavaScript to change themes by modifying a single attribute while the CSS handles the actual color calculations and layout adjustments.
## JSON and Markdown: Configuration and Documentation
**JSON** stores package metadata and defines the skill entry point. The [[`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json)](https://github.com/Nutlope/hallmark/blob/main/package.json) file declares the skill package, its entry point, and lists available harnesses for AI assistants.
**Markdown** serves a specialized role in this repository. Rather than being rendered as web content, Markdown files in [`skills/hallmark/`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/) contain the human-readable skill definition. The [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) file and reference documentation in `skills/hallmark/references/*.md` are parsed by host AI assistants including Claude Code, Cursor, and Codex to understand the skill's capabilities and design guidelines.
## Summary
The Nutlope/hallmark repository demonstrates a pure front-end architecture using browser-native programming languages:
- **JavaScript** ([`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)) powers all user interactions, theme switching, and state management through functions like `applyTheme()` and `swapArchetypes()`.
- **HTML** ([`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html)) provides the semantic structure with data attributes that enable dynamic component injection.
- **CSS** ([`site/css/base.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/base.css), [`tokens.css`](https://github.com/Nutlope/hallmark/blob/main/tokens.css)) implements the visual design system using custom properties and theme-specific selectors.
- **JSON** ([`package.json`](https://github.com/Nutlope/hallmark/blob/main/package.json)) handles package metadata and skill configuration without requiring a backend runtime.
- **Markdown** ([`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md)) defines the skill specification for AI assistant integration.
No server-side languages such as Python, Ruby, or Go are present; the repository is deliberately limited to front-end assets that execute entirely within the browser environment.
## Frequently Asked Questions
### Does the Nutlope/hallmark repository use any backend programming languages?
No. The repository contains no server-side languages like Python, Ruby, Go, or Node.js backend code. It is a static, client-side application that runs entirely in the browser using only front-end web technologies including JavaScript, HTML, and CSS.
### What is the purpose of the `applyTheme()` function in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)?
The `applyTheme()` function manages the complete theme switching lifecycle. It validates the theme selection, updates the root element's `data-theme` attribute for CSS activation, calls `swapArchetypes()` to load appropriate components, updates the UI state via `setPressed()`, persists the choice to `localStorage`, and optionally uses the View Transitions API for smooth animations.
### How does Hallmark implement themes across different programming languages?
The implementation spans three languages: JavaScript toggles the `data-theme` attribute on the HTML element and manages component swapping; HTML provides the structural slots (`data-slot` attributes) where themed content is injected; and CSS defines the actual visual appearance through custom properties scoped to specific `[data-theme]` selectors.
### What role do Markdown files play in the Hallmark repository?
The Markdown files in `skills/hallmark/` serve as the skill's declarative definition and documentation. Unlike typical web content, these files are consumed by AI assistants such as Claude Code, Cursor, and Codex. The [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) file defines the skill's entry point and capabilities, while files in `skills/hallmark/references/` provide design guidelines and component documentation for AI systems to reference.