类型：Site模板 · 收录：2026-11-05 01:12:31 · 源码：会员可见
# Prompt: TOKA creative studio hero ("Electric Cobalt")
Build a single-file, one-screen **creative-studio hero** for a fictional studio, **TOKA**. Use plain HTML, CSS and vanilla JS, with no framework and no build step. The look is bold and poster-like: a vivid electric-cobalt field and a giant chunky white "TOKA" wordmark across the top. A young woman seen from behind, with her hair in a neat bun and a crisp cream shirt, stands in front of the wordmark so her head cuts through the letters.
## Media
- **Figure:** `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/24ba54b0-bad3-4973-ab32-195849b03050.webp` (1331×1536, transparent cut-out). She's seen from behind with a small gold hoop earring and cool blue rim light.
- **Field texture:** `https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/cb893e80-50ea-4a7e-a79e-dfda2eb150bd.png`, a tiny blue gradient map stretched to cover the page, over a radial gradient from `#2a63ff` (glow, lower centre) through `#003df8` to `#0031d9` (top corners).
- **Rule:** the scene is still. Only the UI animates.
## Frame and scaling
- **Frame:** a **1672×941 design artboard** scaled uniformly to cover the viewport. Extra room appears as more cobalt field.
- **Portrait:** a recomposed layout with the wordmark on top, the figure centred and the copy at the bottom.
## Type and colour
- **Typeface:** one geometric grotesk (DM Sans style, variable).
- **Colours:** text white, CTA black.
- **"CREATIVE STUDIO":** each line's first letter fades from 30% to full white.
## Layout (design px)
- **Wordmark:** "TOKA" as a single white SVG path spanning about x 90–1485, y 46–346. The letters are chunky and rounded-square: a T bar, a rounded O with a rectangular counter, and an angular K and A. It sits behind the figure.
- **Figure:** centred around x 820. It's scaled so the head overlaps the middle letters and the shirt runs off the bottom edge.
- **Menu:** a thin-outlined hamburger box at the top right.
- **Left column:** "UNLOCK / YOUR / BRAND / POTENTIAL" in uppercase (about 42px, tight), then a black "GET STARTED" button with a ↗ arrow.
- **Right column:**
- "CREATIVE / STUDIO" at about 78px.
- Two lines of lede: "A creative studio based in **Jakarta, Indonesia** helping startups / and small businesses grow to their **full potential.**"
- **Clock:** at the bottom right, a live clock ("8:07 AM", Asia/Jakarta) above "JAKARTA, ID".
## Motion (UI)
- **Entrance:**
- The wordmark wipes up letter block by letter block.
- The figure rises 20px and fades in.
- The left and right columns rise and stagger, then the clock and menu fade in.
- **Hover:** the CTA arrow nudges.
- **Reduced motion:** no entrance.
## Phones (portrait)
- **Top:** the clock top-left and the menu top-right.
- **Wordmark and figure:** the full-width wordmark, with the figure centred and large.
- **Copy:** "CREATIVE STUDIO", the lede, the headline and the full-width CTA at the bottom, over a cobalt gradient scrim so the white text stays readable on the shirt.
## Acceptance check (1440×960)
- The cobalt field shows the giant white TOKA with the woman's head in front of it.
- The headline and black CTA sit on the left, CREATIVE STUDIO and the lede on the right, and the clock bottom-right.
- **Content:** no real brands.