interviewflow-landing

v0.6.2

Published

a month ago

Landing page for a SaaS that sells **data gathering by interviews**. Built with **design tokens only**: all colors, spacing, typography, motion, and layout come from `tokens/tokens.css`. No hardcoded design values in the page CSS.

Downloads

0High
0Medium
0Low

mkatogui

InterviewFlow — Landing Page (v0.6.2)

Landing page for a SaaS that sells data gathering by interviews. Built with design tokens only: all colors, spacing, typography, motion, and layout come from tokens/tokens.css. No hardcoded design values in the page CSS.

How to run

Open index.html in a browser (no build step). Or use a local server:

# Python
python3 -m http.server 8000

# Node
npx serve .

Token-based architecture

Single source of truth: tokens/tokens.css defines every visual decision.
Themes: Set data-theme on <html> to switch palettes. Supported: corporate, gradient-startup.
Page CSS: Uses only var(--token-name). No raw hex, px, or rem except inside the token file.

Token categories (in `tokens/tokens.css`)

| Category | Examples | Used for | |----------|----------|----------| | Spacing | --space-2 … --space-24 | Padding, gaps, margins | | Radius | --radius-sm, --radius-md, … | Buttons, cards, inputs | | Motion | --motion-duration-normal, --motion-easing-out | Transitions, animations | | Typography | --font-display, --font-ui, --font-size-body-md | Type scale, fonts | | Color (semantic) | --color-bg-primary, --color-brand-primary, --color-text-on-brand | Backgrounds, text, buttons | | Z-index | --z-sticky, --z-skip-link | Stacking order | | Focus ring | --focus-ring-width, --focus-ring-color | Accessibility focus styles | | Brand | --brand-logo-font-size, --brand-hero-content-max | Logo, hero, sections | | Size | --size-container-max, --size-touch-target-min, --hero-min-height | Layout, a11y touch targets |

Adding a new theme

In tokens/tokens.css, add a block:

[data-theme="your-theme"] {
  --color-bg-primary: #…;
  --color-brand-primary: #…;
  --color-brand-secondary: #…;
  --font-display: "Your Font", sans-serif;
  --radius-sm: 4px;
  /* override any semantic + hero/CTA tokens */
}

Set data-theme="your-theme" on <html> (or add the option to the theme switcher and persist in localStorage).

The page will pick up the new palette and radii without changing any HTML/CSS beyond the token file.

Theme switcher

The navbar includes a Theme dropdown: Corporate, Research, Gradient. Choice is stored in localStorage under interviewflow-theme and reapplied on reload. Research uses the same corporate navy/blue palette with Spectral for headings (research-oriented typography).

Brand identity

See docs/BRAND_IDENTITY.md for the full InterviewFlow brand system: palette mapping, color psychology, typography (Spectral + Inter), logo usage, voice, and visual rules — all aligned with UDS and the project tokens.

Accessibility

Skip link (first focusable), focus ring tokens, min touch target (--size-touch-target-min: 44px), reduced-motion respected.
Semantic HTML and ARIA where needed. Use tokens for any new focus or touch-target styles.

File structure

.
├── index.html          # Page structure + CSS that only uses var(--…)
├── tokens/
│   ├── tokens.css      # All design tokens (foundation + themes)
│   └── design-tokens.json  # Optional: source for token values
├── node_modules/
│   └── @mkatogui/universal-design-system/   # UDS — patterns, docs, tokens
└── README.md

Inspired by Universal Design System (node_modules)

This project uses @mkatogui/universal-design-system as a reference. The following are inspired by or aligned with UDS (all implemented with our own tokens):

| What we use / added | Where it comes from in UDS | |---------------------|-----------------------------| | Themes (corporate, gradient-startup) | tokens/design-tokens.json → color.theme.* | | Trust / Security badges section | src/data/landing.csv — Enterprise template “security-badges” | | FAQ accordion | src/data/patterns.csv — Pricing page pattern “pricing-table + … + FAQ”; components.csv — Accordion component | | Homepage section order | plugin/skills/design-system/references/patterns-and-guidelines.md — Hero → Social proof → Features → … → Pricing → CTA → Footer | | Opacity tokens | docs/playground.html — --opacity-disabled, --opacity-muted, --opacity-subtle | | Container widths | docs/component-library.html — --container-sm/md/lg/xl |

How to use node_modules for inspiration

Landing templates: node_modules/@mkatogui/universal-design-system/src/data/landing.csv — section combos and hero/CTA styles per category.
Component specs: node_modules/@mkatogui/universal-design-system/src/data/components.csv — 72 components with variants, tokens, a11y.
Patterns & anti-patterns: node_modules/@mkatogui/universal-design-system/plugin/skills/design-system/references/patterns-and-guidelines.md — homepage order, responsive grid, UX guidelines.
Live playground & component library: node_modules/@mkatogui/universal-design-system/docs/playground.html and docs/component-library.html — open in a browser to see all palettes and copy patterns (use our tokens/tokens.css names when porting).
Design tokens (source of truth): node_modules/@mkatogui/universal-design-system/tokens/design-tokens.json — import or sync values into tokens/tokens.css if you want to stay in sync with UDS.

Everything we added (trust badges, FAQ, opacity, containers) uses only our token file — no hardcoded values in the page.

Improvements you can make (still token-only)

Dark mode: Add [data-theme="corporate"][data-appearance="dark"] (and a prefers-color-scheme or toggle) and define dark semantic colors in tokens.css.
New themes: Copy a theme block, rename, and set colors/radius/font from design-tokens.json or your brand.
More tokens: If you need a new value (e.g. --section-padding), add it to :root or the right theme and use var(--section-padding) in the page.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme