Frontend Design

What is included

Everything needed to make the result.

• Public skill file
• Starter instructions
• Open preview

---
name: frontend-design
description: "Create frontend interfaces from scratch or restyle existing ones in the consistent Palebright/OdyvaOS visual language: warm editorial minimalism, cream and ink foundations, glass surfaces, rounded geometry, amber AI identity, evidence-led product UI, responsive layouts, accessibility, and purposeful motion. Use for React, Next.js, Tailwind, HTML/CSS, dashboards, marketing pages, forms, product flows, timelines, and reusable component systems, even when no visual reference files are available."
---

# Palebright Frontend Design

Build a complete interface from the rules in this file. Do not require palebright/ or another existing page to begin. Use repository references only to calibrate implementation details when they are available.

The goal is recognizable consistency with enough flexibility for a landing page, dashboard, settings screen, onboarding flow, marketplace, form, or internal tool.

## Design contract

Preserve these invariants on every screen:

1. Start with a warm paper-like canvas, never a default stark white or generic dark theme.
2. Use near-black ink for primary text and actions; keep secondary text quiet and readable.
3. Create depth with translucent white surfaces, thin low-opacity borders, backdrop blur, and soft warm shadows.
4. Use rounded geometry consistently: pills for actions and navigation, medium radii for controls, large radii for cards and hero frames.
5. Use small uppercase editorial labels to establish rhythm and hierarchy.
6. Give the interface one recognizable AI anchor: a warm amber orb, glow, highlight, or status marker.
7. Make evidence and state visible where the product performs work: plan, progress, result, consent, or proof.
8. Use motion only to communicate entry, interaction, progress,