Scientific Swiss Style demo
Scientific Swiss Style

An academic, precise Swiss Style design with strict grids, neutral typography, and generous white space suited to scientific publications.
Category: Minimalism & Swiss
Era: 2020s Modern
Prompt: 15.9 KB · 2167 words
# SYSTEM PROMPT — CODING AI: "Scientific Swiss" Landing Page for an Online Scientific Publication

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt. Theme: **Scientific Swiss** — academic, precise, structured, authoritative. Output category: **Minimalism & Swiss**. The page promotes a fictional online open-access scientific publication. Generate the final code immediately, following every rule below.

**Language Rule:** All user-facing copy (headlines, labels, buttons, testimonials, FAQ answers, footer text) must be written in **English**. All class names, CSS variables, and file names must be ASCII English.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
* **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML. No `<style>` blocks in the HTML either — every rule lives in `style.css`.
* **Class/ID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors.
* **Minimal HTML Modifications:** HTML must remain clean, semantic (header, nav, main, section, footer, h1–h4 hierarchy), and agnostic of visual styling. Changing the site's look must require editing only `style.css`.

### 1.2 CSS Variables & Theme Tokens
Store all visual tokens in `:root` and override them in the dark theme (see 1.3). Define exactly:

```css
:root {
  /* Color — Light mode (default) */
  --primary: #0047AB;        /* Scientific Blue — interactive elements, links */
  --primary-deep: #0047AB;   /* Fixed band background, identical in both themes */
  --secondary: #006400;      /* Dark Green — verified/success accents */
  --bg-primary: #fefefe;     /* Near-white page background */
  --bg-secondary: #EFEFEF;   /* Light Gray — alternate surfaces, footer */
  --text-primary: #000000;   /* Black */
  --text-secondary: #6C757D; /* Medium Gray — meta text, captions */
  --text-success: #006400;
  --text-error: #8B0000;     /* Dark Red */
  --accent-gold: #FFD700;    /* Gold — highlight marker background ONLY */
  --border-default: #C0C0C0;
  --border-error: #8B0000;
  --border-success: #006400;

  /* Shape, depth, motion, stacking */
  --radius-sm: 0;  --radius-md: 2px;  --radius-lg: 4px;   /* Swiss = sharp edges */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --spacing-gap: 1.5rem;
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.2s ease-in-out;
  --ease-standard: ease-in-out;
  --z-dropdown: 1000;  --z-modal: 2000;  --z-toast: 3000;

  /* Type */
  --font-base: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Roboto Mono", "Courier New", monospace;
}
```

* **Pure White Exception:** Where the source palette specifies `#FFFFFF` as a background, substitute `#fefefe` per token rules. Reserve pure white only for text on dark backgrounds.
* **Contrast Pairing:** Every light background token must pair with dark text and every dark background token with light text — enforced in both themes, not just the default.
* **Gold Restriction:** `--accent-gold` must never be used as a text color on light backgrounds (fails contrast). Use it only as a highlighter background behind black text, or as a chart accent.
* **Required Class Names:** The classes `.article-grid`, `.data-table-clean`, and `.link-highlight` must exist verbatim in `style.css` and be used in the page (see Sections 4–5).

### 1.3 Mandatory Dark Mode Support
* **Implementation:** Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`. Suggested dark palette: `--bg-primary: #0A0A0A`, `--bg-secondary: #161616`, `--text-primary: #fefefe`, `--text-secondary: #A9B0BA`, `--primary: #4D9FFF` (lightened for AA contrast on dark), `--text-success: #6FBF73`, `--text-error: #E57373`, `--border-default: #3A3A3A`, with matching `--border-error`/`--border-success` lightened variants. `--primary-deep` stays `#0047AB` in both themes (white text on it passes contrast in both).
* **Theme Switching:** Background and text variables must swap seamlessly with no HTML restructuring. First visit falls back to `prefers-color-scheme`; afterwards the choice persists in `localStorage`.
* **Toggle Control:** A visible header toggle using a Google Material icon (`light_mode`/`dark_mode`), with correct `aria-pressed` and `aria-label` state, synced in `script.js`.
* **Exception Clause:** The source style specification requested light-mode-only; dark mode is architecturally mandatory — implement it as a high-contrast "midnight laboratory" variant that preserves the Swiss scientific aesthetic.

### 1.4 Flexbox Layout & Mobile-First Alignment
* **Default Alignment Rule:** Every flex container must default to `align-items: center` unless an exception is explicitly justified in a CSS comment (e.g., top-aligned step numbers in "How It Works", left-aligned card text).
* **Mobile-Friendly First:** All layouts must be responsive out of the box — rows convert to columns below ~640px, pricing table stacks, no horizontal scrolling ever (`overflow-x: clip` on body as a guard).
* **Grid Exception Clause:** The Swiss specification explicitly demands grid-based macro layouts; use CSS Grid (12-column, max-width ~1200px container) for section-level composition, while all component-level containers (nav, buttons, cards, steps, forms) use Flexbox with the `align-items: center` default.

### 1.5 Styling Approach
* Use **clean custom CSS** in `style.css` — no framework build, no utility-class soup. Organize the file with comment banners in this order: `TOKENS`, `BASE`, `LAYOUT`, `COMPONENTS`, `SECTIONS`, `UTILITIES`, `MEDIA QUERIES`.
* Base rules from the specification must be applied: `body { font-family: var(--font-base); line-height: 1.6; color: var(--text-primary); background: var(--bg-primary); }`, and interactive elements transition with `var(--transition-normal)` (the spec's `all 0.2s ease-in-out`).

### 1.6 Typography & Icons (Google Fonts Mandatory)
* **Text:** Load **Roboto** (weights 400, 500, 700, 900) and **Roboto Mono** (400, 500) via Google Fonts `<link>` in `<head>`. Bind them to `--font-base` and `--font-mono`.
* **Akzidenz Exception Clause:** Akzidenz-Grotesk is not distributed on Google Fonts; use Roboto — the specification's own listed alternative — as the sole grotesque.
* **Typographic System:** Oversized display headings with tight tracking (`-0.02em` to `-0.04em`), fluid sizing via `clamp()`; uppercase micro-labels with wide tracking (`0.12em`); all data, metrics, prices, and step numbers set in `--font-mono`.
* **Icons:** Google Material Symbols (Outlined) via Google Fonts. **Explicitly forbidden:** raw inline SVGs, local icon files, emoji used as icons.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component (`.btn`)
Style all states via CSS classes only:
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Modifiers: `.btn--primary` (blue bg, white text), `.btn--secondary` (transparent, 1px black border), `.btn--ghost`, `.btn--inverse` (white bg, blue text — for use on the blue CTA band), `.btn--danger` (dark red, visually distinct in both themes).
* **Hover:** Brightness shift and/or `--shadow-sm`, `cursor: pointer`.
* **Focus:** Distinct `:focus-visible` ring via `outline: 2px solid var(--primary); outline-offset: 2px` (lightened variant in dark mode).
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading (`.is-loading`):** Disables interaction, prevents double-clicks, swaps the label for a rotating Material `progress_activity` icon (or CSS spinner) without changing button dimensions; set `aria-busy="true"` in JS.
* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
* **Success/Error:** Temporary feedback styles driven by `--text-success` / `--text-error`, always paired with text or icon (never color alone).

### 2.2 Card Component (`.card`)
* **Default:** Flex column layout (left-aligned text — a justified `align-items` exception), `background: var(--bg-primary)`, 1px `--border-default` border, generous padding, sharp corners.
* **Hover:** Border color shifts to `--primary` plus `--shadow-sm` (optionally `translateY(-2px)`).
* **Focus-within:** Card border highlights when a child link/button receives focus.
* **Loading (Skeleton):** Define a `.card--skeleton` shimmer keyframe animation in CSS to prevent layout jumps.
* **Empty State:** Define an `.empty-state` block (Material icon + short guidance text) in CSS for any dynamically filtered content.

### 2.3 Form & Input (`.input-group`)
* **Structure:** Flex container wrapping a `<label>`, an `<input>`, and a dedicated error feedback element with `aria-live="polite"`.
* **States — all styled in CSS:** Empty, Focused (2px ring in `--primary`), Filled, Valid (`--border-success` + Material `check` icon), Invalid (`--border-error`, error text in `--text-error`, Material `error` icon), Disabled, Read-only.
* **Behavior:** The Final CTA newsletter form is validated in `script.js` (email pattern), simulates async submit with a loading state, then shows success ("Subscribed. Check your inbox.") or error ("Enter a valid email address.") feedback — always text + icon, never color alone.

### 2.4 Modal / Popup (`.modal`)
* **Conditional Mandate:** If any dialog is implemented (e.g., a "Citation & Ethics" detail dialog opened from the Final CTA or footer), it must include: centered flex overlay (`align-items: center`) with backdrop, `--z-modal` stacking, Material `close` icon button, animated opening/closing via `var(--transition-normal)`, keyboard focus trapping, `role="dialog"` + `aria-modal="true"`, and closing via `Esc` or overlay click. The FAQ must use an accordion, not modals.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** Fluid `clamp()` typography, breakpoints at ~640px and ~1024px, zero horizontal overflow.
* **Smooth Animations:** All state changes transition with `var(--transition-normal)`; fully respect `prefers-reduced-motion` (disable transforms, spinner animations, and smooth scrolling).
* **Accessibility (a11y):** Skip-to-content link; semantic landmarks; a single `h1`; logical DOM/focus order; full keyboard operability for the mobile menu, accordion, toggle, and form; `aria-live` regions for form feedback; AA contrast verified in both modes (use `--text-secondary` only at ≥16px, or darken it on gray surfaces); never rely on color alone for any state.
* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible change.
* **Micro-Interactions (specification-mandated):**
  * `.link-highlight` — nav and inline links get a 2px underline in `--primary` that sweeps in from the left (`transform: scaleX`, 0.2s).
  * `.text-highlight` — key hero phrase gets a gold marker sweep (animated `background-size` reveal of `--accent-gold` behind black text; works in both themes).
* **Fast Direct Transitions:** `scroll-behavior: smooth` for anchor navigation (auto under reduced motion); optional subtle IntersectionObserver section reveals (opacity/translate, 0.2s), disabled under reduced motion.
* **Destructive Actions:** `.btn--danger` must be visually distinct in both light and dark themes, even if unused on this page.

---

## 4. THEME DIRECTION — SCIENTIFIC SWISS

* **Aesthetic:** Flat, minimal, authoritative. 1px hairline rules (`--border-default`) as the primary structural device; sharp corners; generous whitespace; strict grid alignment; numbered sections ("01 — Features", "02 — Process"…) with uppercase micro-labels.
* **No Decoration:** No photographs, no gradients, no illustrations, no external images. All visuals are typography, rules, and CSS-built data graphics.
* **Palette Semantics:** Blue = interactive/primary; green = success/verified; red = errors/danger; gold = highlight marker only; grays = structure and meta text.
* **Data Graphics:** Build a CSS-only bar chart in the Hero (`.chart` with `.chart__bar` divs, percentage heights, `--primary` fill, `--font-mono` axis labels, e.g., "Citations 2021–2026"), with a grow-on-load animation that respects reduced motion.

---

## 5. PAGE STRUCTURE & SECTION REQUIREMENTS

**Header (sticky):** Text wordmark for a credible invented journal brand (e.g., "AXIOM — An Open Scientific Press"); anchor nav (Features, Process, Pricing, FAQ) using `.link-highlight`; theme toggle (1.3); "Submit Manuscript" `.btn--primary`; accessible hamburger menu on mobile (`aria-expanded`, panel at `--z-dropdown`, `Esc` closes, focus managed). Background `--bg-primary`, `border-bottom: 1px solid var(--border-default)`.

1. **Hero:** 12-column grid — oversized headline spanning ~7 cols with one `.text-highlight` phrase; uppercase meta eyebrow ("EST. 2026 · OPEN ACCESS · PEER REVIEWED"); subheadline; two CTAs (`.btn--primary` "Submit Your Research", `.btn--secondary` "Browse the Archive"); data panel spanning ~5 cols with the CSS bar chart plus three mono metrics (Impact Factor, Acceptance Rate, Days to First Decision).
2. **Features (3 cards):** `.article-grid` with three `.card` blocks numbered 01–03, Material icons (`fact_check`, `public`, `analytics`), titles (Rigorous Peer Review / Open Access Publishing / Structured Data & Metrics), real descriptive copy, and a "Learn more" `.link-highlight` link each.
3. **How It Works (3 steps):** Numbered 01 Submit Your Manuscript → 02 Peer Review → 03 Publish & Index; mono step numbers, 1px connector rules between steps, flex row on desktop → column on mobile (top-aligned numbers — justified exception).
4. **Testimonials:** Three `<blockquote>` + `<cite>` quotes from invented researchers (name, role, affiliation), each with an initials monogram in a 1px-bordered square — no photos.
5. **Pricing (3 tiers):** Researcher (Free), Laboratory ($49/month, highlighted with 2px `--primary` border and a "Recommended" badge), Institution (Custom). Feature lists use Material `check` icons in `--text-success`; per-tier CTA buttons. Below the cards, include a `.data-table-clean` comparison table (feature rows × tier columns, 1px rules, mono numerals) that stacks gracefully on mobile.
6. **FAQ:** 5–6 real questions (APCs, CC BY licensing, review timeline, indexing, data policies) in an accessible accordion — `button` + `aria-expanded` + controlled panel (or styled `details`/`summary`), Material `expand_more` icon rotating 180°, smooth height animation, fully keyboard operable.
7. **Final CTA:** Full-bleed band with `background: var(--primary-deep)` and `#fefefe` text in both themes; big headline ("Publish with precision."); newsletter `.input-group` + `.btn--inverse` submit with full form states and `aria-live` feedback; secondary `.link-highlight` "Read the submission guidelines".
8. **Footer:** `--bg-secondary` background, 1px top border; brand + one-line mission + ISSN-style detail line; three secondary link groups (Journal / Policies / Connect) using `.link-highlight`; bottom bar with "© 2026 [Brand]. All rights reserved." and secondary links (Privacy, Terms, Ethics). Links must resolve to on-page anchors or realistic hrefs — no dead `#`-only links.

---

## 6. DELIVERABLE & OUTPUT FORMAT

* **File Structure:** Three files — `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond a single `<script src="script.js" defer>`. Google Fonts and Material Symbols `<link>` tags in `<head>`.
* **Naming Convention:** BEM throughout (`block__element--modifier`) — never mix conventions. The blocks `.article-grid`, `.data-table-clean`, and `.link-highlight` must exist verbatim.
* **No Unrequested Placeholders:** No lorem ipsum — write all real English copy, including realistic testimonial names and affiliations. Placeholders are permitted only for genuinely unspecified data (e.g., the ISSN).
* **script.js Scope:** Theme toggle with `localStorage` persistence and `prefers-color-scheme` fallback, mobile menu, FAQ accordion, newsletter validation/submit simulation, optional reveal observer — all progressive enhancement with no errors if an element is absent.
* **Forbidden:** Inline styles, inline SVGs, external/local images, icon font files, horizontal scrolling, mouse-only interactions.