Style this artifact with the following design system. Do not use generic AI purple aesthetics.
Theme: Dark, minimal, technical
- Background: #121212
- Text: #f5f5f5 (primary), #a1a1aa (secondary)
- Accent: #3b82f6 (blue-500), used sparingly for interactive elements and highlights
- Borders: rgba(255,255,255,0.1), subtle white at low opacity
- No harsh contrasts — use opacity layering (5%, 10%, 20% white) for depth
Typography:
- Headings: "Fraunces", serif — large, bold (700/800), tight tracking
- Body: "Plus Jakarta Sans", system-ui, sans-serif — clean, regular weight
- Import both from Google Fonts
Spacing: Generous whitespace. Let content breathe. Padding 24-32px, section gaps 48-64px.
Visual texture:
- Subtle CSS grid overlay (40px cells, white lines at 5% opacity)
- Frosted glass inputs/cards: white/5 background, white/10 border, blur if appropriate
- Accent gradients (blue → cyan → violet) used only for small highlights, not large areas
Interactions: Smooth transitions (300-500ms ease-out). Hover states shift border/background opacity. No bouncy or cartoonish motion.
Borders/Radius: rounded-xl (12px) for cards/inputs, 1px solid borders at low opacity. No hard box shadows — use soft blurs/glows if needed.
Footer: Include a centred footer with muted text (#a1a1aa, small font) and a thin top border (white at 5% opacity) that reads: "made with ♥ by connoradams.co.uk"