Galaxy creative portfolio

Live example

Try the sample interactions. Open the standalone demo for a full-width view. No data is sent to a server.

Verification results

Captured 2026-10-04T13:21:40.285Z in Chromium 153.0.8010.12. The checks below match the current example assets.

• Project filters and visible counts
• Project dialog, Escape, close action, and restored keyboard focus
• No horizontal page overflow at 1440px and 390px
• No browser runtime errors
• Automated WCAG A/AA checks at both viewports

Automated accessibility violations: 0. These checks cover the tested pages and states. They do not establish complete accessibility compliance.

• Desktop uses a wider interface study beside two smaller studies.
• Mobile keeps the project order and wraps category filters. Text stays outside the orbital artwork.

Recorded prompt and source

This implementation was produced by the coding agent from the saved themx setup, then corrected during browser verification. The ZIP contains runnable HTML, assets, source templates, tokens, documents, and the saved prompt. Source templates are built in the themx repository.

You are building a web application using Plain HTML with Vanilla CSS.
Read existing project instructions and reuse installed components where available.

## Project
Project brief: Build a sample portfolio called Galaxy Studies with three fictional design projects: an interface library, a visual identity, and an editorial layout. Use a large asymmetric introduction with an orbital illustration. Include category filters and a project-details dialog. Label the portfolio as sample work. Do not invent clients, testimonials, awards, or performance statistics.
Target users: Visitors exploring design work on phones and laptops
Page purpose: Portfolio
Framework: Plain HTML
CSS approach: Vanilla CSS
UI library: Custom / no library
Tone: Professional

## Visual direction
Base theme: Galaxy (visual-style)
- Deep plum background with one static nebula near the illustration
- Large Syne display headings at 40-72px and readable DM Sans body text
- An elliptical orbital illustration with small star details
- Coral primary actions, lavender links, and restrained pale-gold details
- Opaque plum panels with varied widths and thin lavender borders
- Asymmetric composition with a clear mobile reading order

## Resolved style
Use this final token set. It already includes the selected layers. These values take precedence over conflicting base characteristics.
Color palette: primary #FFA18C, secondary #C4AEFF, accent #F8D983, background #110C23, text #FAF3FF
Typography: Syne for headings, DM Sans for body text
Load the declared fonts with the required weights. Use system fallbacks when a font is unavailable.
```css
:root {
  --tx-surface-bg: #110C23;
  --tx-font-heading: "Syne", sans-serif;
  --tx-font-body: "DM Sans", sans-serif;
  --tx-surface-bg-image: radial-gradient(ellipse 35% 35% at 82% 22%, rgba(196,174,255,0.18), transparent 75%);
  --tx-card-bg: #211832;
  --tx-card-border: #68567E;
  --tx-card-border-width: 1px;
  --tx-card-radius: 1.25rem;
  --tx-card-shadow: none;
  --tx-card-backdrop-blur: 0px;
  --tx-card-border-hover: #C4AEFF;
  --tx-card-shadow-hover: none;
  --tx-font-heading-weight: 700;
  --tx-font-body-weight: 400;
  --tx-text-muted: #D5C5E5;
  --tx-text-subtle: #B9A4CC;
  --tx-link-color: #C4AEFF;
  --tx-button-radius: 0.75rem;
  --tx-input-bg: #110C23;
  --tx-input-border: #88709F;
  --tx-text: #FAF3FF;
  --tx-primary: #FFA18C;
  --tx-secondary: #C4AEFF;
  --tx-accent: #F8D983;
  --tx-media-filter: none;
}
```
Use the CSS variables in your own components. Apply the heading and body font variables to their respective elements.

## Layout
- Use an asymmetric two-column introduction with a large left-aligned heading and an orbital illustration on the right.
- Group work or features by importance. Use varied panel widths rather than repeating identical cards. Collapse to a continuous single-column reading order on phones.

## Interaction
- Use coral for primary actions and lavender for links. Keep controls on opaque surfaces and show keyboard focus with a clear outline.
- Limit slow rotation to the orbital illustration. Make motion optional and stop it for reduced motion. Use a static nebula background.

## Additional user requirements
These explicit requirements take precedence over general layout and interaction defaults. Report any conflict with exact tokens before changing them.
Layout: Give the interface project more space than the other studies. Keep the reading order continuous on mobile. Use opaque project panels and one static nebula near the orbital art.
Interaction: Filters must hide unrelated projects and report the visible count. The detail dialog must support keyboard close and restore focus. Keep orbital motion optional.

## Suitability notes
Use these limitations to assess the chosen page purpose. Explain any mismatch before applying an unsuitable treatment.
- Galaxy: Dense operational dashboards, clinical interfaces, or long articles that need a neutral background.

## Components
Generate the following components in this style:
- Hero
- Navbar
- Cards
- Buttons
- Footer

## Quality requirements
Choose section order and visual emphasis from the real content and page purpose. Add only sections needed for the task.
Use supplied content. Label sample data. Do not invent testimonials, customer logos, statistics, or compliance claims.
Every interactive control must perform its declared action or be clearly labeled as a demo.
Include loading, empty, error, success, disabled, and focus states where applicable.
Use semantic HTML, visible keyboard focus, readable text contrast, and labeled form fields.
Ensure responsive design (mobile-first). Preserve reading order and avoid horizontal page overflow.
Respect prefers-reduced-motion. Keep essential content visible when animations are disabled.

## Supporting skills
Use these skills if they are installed in the target agent. If unavailable, report that and follow the supplied design requirements. Installation commands are references for the user; do not run them automatically.
- Anti-slop: https://github.com/miqdadbadjuber/anti-slop
  Purpose: Check content, controls, and decoration against the selected design direction.
  Install: npx skills add miqdadbadjuber/anti-slop
- Frontend Design: https://github.com/anthropics/skills/tree/main/skills/frontend-design
  Purpose: Resolve unspecified visual decisions while preserving the selected theme and tokens.
  Install: npx skills add anthropics/skills --skill frontend-design
Use antislop during for this session.
The chosen theme and layers are intentional. Check their purpose and implementation. If a skill rule conflicts with them, identify the conflict and ask the user to keep or change the named element.
Use Frontend Design only for unspecified decisions. Keep the chosen theme, typography, and resolved tokens.

## Verification
Check representative desktop and mobile widths, keyboard interaction, and relevant component states. Run available project checks and report what was actually verified.
Use Vanilla CSS.