get_slot → resolvedWUIZARD
Decode text
Characters scramble through glyphs before landing on the real word.
Brutalist UI
Hard edges and hard shadows. Loud on purpose, and fast: nothing eases when it can snap.
Habitual
TodayInsightsJournal
Good morning, Maya
4 of 6 habits done today
Read 20 min
12-day streak
Run 5k
4-day streak
Drink water
21-day streak
Last 4 weeks83% consistency
Colour
Type
Aa
Archivo / Inter
Shape & motion
radius 0/0/0 · spring 700/40
A demo app rendered only from these tokens, which make up the starting sheet for this vibe.
54 brutalist assets
Shown in this vibe’s tokens. In your sheet, they take yours.
Text effects
Ship it ↗
Hard-shadow button
Chunky button with an offset hard shadow that presses flat on click.
Taste · Motion · Ship · Taste · Motion · Ship · Taste · Motion · Ship · Taste · Motion · Ship · Taste · Motion · Ship · Taste · Motion · Ship · Taste · Motion · Ship · Taste · Motion · Ship ·
Yours · Exactly · Yours · Exactly · Yours · Exactly · Yours · Exactly · Yours · Exactly · Yours · Exactly · Yours · Exactly · Yours · Exactly ·
Kinetic ticker
Oversized type running in a band, tilted, like a sports broadcast.
Outline fill
Outlined display type that floods with the accent from left to right behind a soft edge, painted with background-clip: text and driven by a progress value or autoplayed.
Scroll velocity marquee
An endless marquee that speeds up with scroll velocity, flips direction when the scroll does and skews while you scroll fast, then eases back to cruising speed.
Crosshair guides
Hairline guides cross the region at the pointer with a gap around it, edge rulers mark its position and a coordinate readout counts along, with optional snapping to a grid.
Block reveal
A solid accent block sweeps across an image or line of type, holds a beat, then sweeps away to uncover the content beneath it.
Diagonal wipe page
Two slanted panels sweep across to cover the old page and peel away the same way to uncover the new one, whose content rises in with a stagger.
Moving stripes
Bold diagonal stripes in the accent, the text colour or both alternating drift slowly sideways behind content and fade out toward every edge through a soft rectangular mask.
Extruded type
Display type with a stepped 3D extrusion stacked from accent-toned text-shadows that springs deeper and swings its angle on hover or focus while the face lifts off the page.
Fullscreen menu
A menu button that opens a full-screen overlay in a circle growing from the button, with big numbered links rising from their masks in a stagger and the whole thing playing backwards on close; focus is trapped and Esc closes.
Type-to-confirm dialog
Destructive confirmation dialog whose delete button only arms once the resource name is typed exactly, shaking the field and swapping in an error when a mismatch is submitted.
Shutter page
A row of slats drops shut over the old page one after another like a roller shutter, then rolls open the same way to uncover the new one, in ink, accent or alternating two-tone.
Title card page
An ink panel rises over the old page as the destination's name rises into it in large display type, holds for a beat, then lifts away upward to uncover the new page.
Slam-in stamp
Items slam onto the page one after another from oversized and blurred, dipping on impact as a hard offset shadow block kicks out from underneath each one.
Outline-draw card
A card's outline traces itself around its edge (from two opposite corners meeting halfway, or in one stroke), then its surface washes in and its content rises into place.
Inline confirm
Hard-shadowed destructive button that asks twice in place: the first press flips it to the accent with a Cancel square and a draining disarm bar, and the second (after a double-click guard) runs your async action and stamps the button flat.
Form error summary
Heavy-bordered box that lands above a form after a failed submit (its offset shadow stamps out, a big count rolls, each problem links to its field) and strikes through and folds away each fix until it reads all clear.
Receipt card
Order-summary receipt that feeds out from under a printer slot in line-by-line jolts, counts its total up and thumps a rotated Paid stamp on, with a torn zigzag edge and a hard outline and shadow that follow it.
Funnel chart
Hard-edged conversion funnel whose column bars rise one after another under hatched ghosts of the users each step lost, with a readout of the step rate for the hovered or arrow-key-focused step, which lifts on a hard shadow.
Needle field
A grid of short needles behind a region swings to point at the pointer like iron filings round a magnet, the nearest growing longer and taking the accent, then settles back to a resting angle when it leaves.
Pixel trail
Every grid cell the pointer crosses inside a region lights up in the accent and fades out behind it in hard steps, filling in between samples so even fast sweeps leave a blocky, gap-free trail.
Sort toggle
Column-header sort button that cycles unsorted, ascending and descending, its three bars re-ranking short-to-long or long-to-short one after another while the arrow flips to point at the larger end, with aria-sort-ready values.
Dice roll
Shuffle button for random picks and surprise-me actions: its die hops, tumbles and squashes as it lands on a new face, its pips sliding and popping into the new layout one after another.
Stepped fill button
Slab button with a thick border, hard offset shadow and boxed arrow cell: on hover or keyboard focus the accent floods across in a few hard bands that invert the label at each band edge, the arrow hops out of its cell and back, and a press drops it flat onto its shadow.
Block progress button
Slab async button whose label cuts to a row of hard-edged block cells while its action runs (a three-block run marching across, or cells filling beside a percentage when given progress), then cuts to an accent done stamp, or jolts sideways in hard frames and offers a retry.
Slab text field
Thick-bordered text field with its label on a tab joined to the top edge: focus inverts the tab and drops a hard shadow out from under the field in two frames, an error turns the shadow accent, jolts the field and prints the message on an inverted strip, and an optional counter flips to accent near the limit.
Block switch
Rectangular on/off switch on a hard shadow whose solid block thumb slams across in a few stop-motion frames to cover the inactive half, revealing ON on an accent field or OFF on the surface, and sinks onto its shadow while pressed.
Offset lift card
Link card of bordered strips (index cell, tag, artwork on a visible grid and title block) that jumps up and left off its hard shadow in two frames on hover or keyboard focus, floods its tag with the accent, kicks its corner arrow straight, shifts the grid half a cell, and drops flat when pressed.
Tag product card
Thick-bordered product card with artwork on a visible grid, a tilted price tag that swings in hard frames when the item is added, option cells that invert in a cut as a WAI-ARIA radio group with struck-through sold-out options, and an add button that presses onto its shadow and stamps “Added”.
Folder tabs
WAI-ARIA tabs drawn as numbered folder tabs on a thick-bordered panel with a hard shadow: the chosen tab jumps up and fuses with the panel in a few hard frames while the last drops back behind it, and the new panel cuts in behind a stepped wipe travelling the way you moved.
Slam headline
Display headline whose words drop onto the page one after another from oversized and askew, accelerating all the way and stopping dead with no bounce, each landing punching out a hard accent shadow that snaps back to rest.
Grid stamp text
Headline set one character per cell in a ruled grid that starts hatched and empty, then has its letters stamped in one tick at a time in a scattered order, each landing with an accent flash and a hard two-frame press.
Grid poster hero
Landing hero laid out like a ruled poster over a visible twelve-column grid, with oversized headline lines in bordered rows that shove in from alternating sides in hard stop-motion frames, a starburst sticker that slaps on, hard-shadow CTAs and a strip of short notes.
Curtain split
A pinned cover with an oversized headline tears down the middle as you scroll, its two halves sliding apart and tipping away along an accent cut to reveal the section underneath, which settles up from a slight zoom.
Blueprint grid
A technical-drawing backdrop of fine grid lines with heavier majors, ruler ticks and coordinates along the top and left edges and blinking registration marks, swept slowly by an accent scan line.
Moiré field
Two fields of fine concentric rings, one in the text colour and one in the accent, overlap while one circles slowly around the other, so their interference ripples into shifting op-art moiré bands behind content.
Redirect notice
Moved-page or leaving-site notice showing the destination, a slab countdown bar that redirects when full, Go now and Stay here, pausing on hover or focus.
Empty collection slab
Hatched placeholder tiles in thick borders on a ruled grid, with an accent add tile that stamps down and drops a hard shadow it presses into, for empty boards, folders and galleries.
Permission primer
Explains why before the browser asks (notifications, location or camera), with a mock prompt that stamps in and Allow or Not now.
Danger zone
Hard-bordered block of destructive rows (transfer, archive, delete) where each opens in place into its own confirm step: type the name, fill in a field, or press and hold.
Uptime bars
Hard-edged daily status cells (up, degraded, down, no data) that rise in from the left, with a tooltip per day for pointer and arrow keys and an overall figure computed from the data passed in.
Session timeout dialog
Hard-edged alert dialog that warns before sign-out with big countdown numerals and a stepped bar that drains block by block, Stay signed in (onExtend) and Sign out, announcing the time left politely at a few thresholds.
Weekly review
3 highlights · 2 to finish
PublishPreviewSaved
Signal Orange palette
Loud, unapologetic pure white and pure black with a safety-orange accent and hard black lines.
Weekly review
3 highlights · 2 to finish
PublishPreviewSaved
Cobalt Pop palette
Newsprint cream, heavy black lines and a pure cobalt accent for a graphic, confident look.
Weekly review
3 highlights · 2 to finish
PublishPreviewSaved
Kiln palette
Charcoal and smoke with a hot coal-orange accent: intense and dramatic.
Weekly review
3 highlights · 2 to finish
PublishPreviewSaved
Phosphor palette
Pure black with phosphor-green text and accent: command-line nostalgia for dev products.
Aa
- Display
- Hanken Grotesk · 700
- Body
- IBM Plex Sans
Every screen, one voice
Headlines carry the character; the body face keeps people reading.
Google Fonts · Open Font License
Hanken Grotesk × IBM Plex Sans
Tight, bold grotesk headlines with a technical body for Swiss-style clarity and grids.
Aa
- Display
- Bebas Neue · 400
- Body
- Archivo
Every screen, one voice
Headlines carry the character; the body face keeps people reading.
Google Fonts · Open Font License
Bebas Neue × Archivo
Tall condensed capitals over a sturdy grotesk, with poster and title-card impact.
Aa
- Display
- Archivo Black · 400
- Body
- Archivo
Read once, remember it
One face with personality, one built for long stretches of text.
Google Fonts · Open Font License
Archivo Black × Archivo
Ultra-heavy headlines with their own family's grotesk for text: blunt and graphic.
Aa
- Display
- JetBrains Mono · 600
- Body
- IBM Plex Sans
Every screen, one voice
Headlines carry the character; the body face keeps people reading.
Google Fonts · Open Font License
JetBrains Mono × IBM Plex Sans
Monospace headlines over a technical sans, unmistakably made for developers.
Aa
- Display
- Space Mono · 700
- Body
- Familjen Grotesk
Small things, considered
Good type sets the pace, the tone and what people read first.
Google Fonts · Open Font License
Space Mono × Familjen Grotesk
Typewriter-style mono headlines with a lively grotesk for indie, zine and DIY energy.
2 stroke · 20px · square · bare
Search
Square-cut icons
Square line ends and mitred corners for a technical, blunt, graphic look.
2.5 stroke · 20px · square · solid
Settings
Block icons
Chunky square-ended strokes on solid accent blocks: loud, graphic and unmistakable.
Other vibes
Stop shipping apps that look AI-made.
Save what you love to a sheet, connect Claude or Cursor, and every screen comes out in your style. Free for 3 days on annual plans, card needed.