David Ewins

ZESTY UI: every site version

davidewins.com, TAKEOVER, TKVR and Psyche share no components. Here are 74 of them in 195 versions, each drawn with the same colours and the same content, so the only differences left are the real ones. Cut what should go; what’s left becomes the kit. Buttons that aren’t full pills are gone. Versions taller than 40px (44px for rows) are shown at that height, with their real height on the card.

Previews in

Buttons

Primary button (app)

3 versions

The main inline action inside an app screen. Three left: 32 to 40px, medium 13 or 14px.

  • PREPPERS

    1 use

    Primary (hand-written)

    40px · pill · medium 14px

  • TAKEOVER app

    511 uses (all variants)

    Button, default variant and size

    36px · pill (26px radius) · medium 14px · 1px press nudge

  • TKVR studio

    114 uses

    btnPrimary (studio, fan and public pages)

    32px · pill · medium 13px

Full-width main action

2 versions

The one big button at the bottom of a form or screen. Both 48px pills; YKYC is semibold 16px, TKVR semibold 15px.

  • YKYC

    15 uses

    Button, primary

    48px · pill · semibold 16px · full width

  • TKVR fan app

    17 uses

    btnBlock, full-width main action

    48px · pill · semibold 15px · full width

Secondary button

7 versions

A grey pill or a hairline-bordered pill, 32 to 40px, medium 13 to 16px. YKYC’s is full width.

  • davidewins.com tools

    4 uses

    Review replies smallButton

    36px · pill · medium 14px

  • YKYC

    in the 15 Button uses

    Button, secondary

    40px (48px on the site) · pill · semibold 16px · full width

    Resized to the height limit; everything else is as on the site.

  • TAKEOVER app

    288 uses

    Button, outline variant

    36px · pill (26px radius) · medium 14px · hairline border

  • TAKEOVER app

    40 uses

    Button, secondary variant

    36px · pill (26px radius) · medium 14px

  • Psyche app

    8 uses

    AppButton, secondary md

    40px (from padding) · pill · medium 14px

  • Psyche site

    3 uses

    Cookie banner buttons (hand-written)

    36px (from padding) · pill · medium 13px

  • TKVR studio

    127 uses

    btnSecondary

    32px · pill · medium 13px · 10% ink fill

Small button

3 versions

Small grey secondary buttons for toolbars, rows and copy actions. 28 or 32px tall, 12 to 14px text, plain grey fill or a hairline border.

  • PREPPERS

    4 similar

    Small secondary (hand-written)

    32px · pill · medium 13px

  • TAKEOVER app

    170 size="sm"

    Button, outline variant, size sm

    32px · pill (26px radius) · medium 14px

  • TKVR studio

    52 uses

    btnSmall

    28px · pill · medium 12px

Destructive button

3 versions

Either a red tint with red text (TAKEOVER, TKVR studio) or solid red with white text (TKVR studio).

  • TAKEOVER app

    23 uses

    Button, destructive variant

    36px · pill (26px radius) · medium 14px · tinted

  • TKVR studio

    4 uses

    btnDanger (confirm dialogs)

    32px · pill · medium 13px · solid red

  • TKVR studio

    13 uses

    btnDangerSoft + btnSmallDanger

    32px · pill · medium 13px · tinted red

Icon button

7 versions

All circles, 32 to 40px. Filled grey, bordered, glass, or empty until you hover. TKVR’s chat pair is shown at 36px.

  • TAKEOVER app

    31 uses

    Button size="icon", outline

    36px circle · hairline border

  • TAKEOVER app

    5 copies

    Checkout icon button (hand-written)

    32px circle · no fill until hover

  • Psyche app

    1 use

    Copy button (hand-written)

    32px circle · solid grey · no hover

  • Psyche app

    1 use

    Chat attach button (hand-written)

    40px circle · grey fill + border

  • Psyche site

    1 (site-wide)

    Mobile menu button

    36px circle · glass fill + border

  • TKVR studio

    18 uses

    iconBtn

    32px circle · 10% ink fill

  • TKVR fan app

    8 uses

    iconBtnLg + iconBtnLgPrimary (chat composer)

    36px circles (44px on the site) · grey and solid

    Resized to the height limit; everything else is as on the site.

Copy button

4 versions

Tap each to see the copied state. A grey pill with an icon (davidewins.com), a mono text link (TAKEOVER), an icon-only circle (Psyche), or a grey pill with no icon that says “Link copied” (TKVR).

  • davidewins.com tools

    8 uses

    CodeBlock copy button

    32px grey pill · icon + 12px label

  • TAKEOVER app

    12 uses

    Reply page copy link

    mono 12px text link · green tick when copied

  • Psyche app

    1 use

    Profile link copy

    32px grey circle · icon only

  • TKVR studio

    3 uses

    CopyLinkButton (secondary)

    32px grey pill · 13px label, no icon

Marketing call to action

4 versions

The main button on landing and tool pages, plus the Psyche site’s nav button. 32 to 48px, medium or semibold, and some lift or cast a shadow on hover.

  • davidewins.com tools

    6 copies

    Main call to action (hand-written)

    44px · pill · semibold 16px

  • TAKEOVER site

    66 uses

    Button size lg + className override

    48px · pill · medium 16px

  • Psyche site

    1 (site-wide)

    Nav call to action, on every page

    ~32px (from padding) · pill · medium 13px · lifts on hover

  • TKVR site

    2 copies

    Landing hero call to action

    48px · pill · medium 16px · shadow, lifts on hover

Marketing secondary button

2 versions

The second button next to a landing page call to action. Both 48px pills: TAKEOVER’s has a hairline border, TKVR’s a blurred grey fill.

  • TAKEOVER site

    every feature page

    Feature CTA second button (Button lg outline + override)

    48px · pill · medium 16px · hairline border

  • TKVR site

    1 use

    Landing hero second call to action

    48px · pill · medium 16px · blurred 10% fill

Button size scale

3 versions

Each site has its own ladder, and what survives here sets the heights for every button above.

  • davidewins.com tools

    h-8 10 · h-9 12 · h-10 12 · h-11 10 · h-12 8

    Hand-written heights across PREPPERS, tools, YKYC

    32 / 36 / 40 / 44 / 48 · medium 13px → semibold 16px

  • TAKEOVER app

    sm 170 · lg 132 · xs 2

    xs / sm / default / lg

    24 / 32 / 36 / 40 · medium 12 → 14px

  • TKVR studio

    h-7 18 · h-8 24 · h-9 15 · h-12 21

    btnSmall / btnPrimary / header pills / btnBlock

    28 / 32 / 36 / 48 · medium 12 → semibold 15px

Inputs

Text input

4 versions

Bare inputs, all at 40px or less (some resized, real height on each card). They differ on radius (12px to pill), border vs ring vs no edge, and text size.

  • davidewins.com tools

    2 uses

    Font preview inputClass

    40px (44px on the site) · 12px radius · no edge · 15px

    Resized to the height limit; everything else is as on the site.

  • YKYC

    9 uses

    inputClass

    40px (48px on the site) · 16px radius · ring · 16px

    Resized to the height limit; everything else is as on the site.

  • TAKEOVER app

    169 uses

    Input

    36px · pill (26px radius) · border · 14px

  • Psyche site

    2 uses

    Sign-in input

    40px (52px on the site) · 12px radius · border · 15px

    Resized to the height limit; everything else is as on the site.

Textarea

4 versions

A bordered 12px box (TAKEOVER, TKVR), a 16px box with a ring (YKYC), or a filled 12px box (davidewins.com tools). Text is 14 to 16px.

  • davidewins.com tools

    1 use

    Font preview textarea

    12px radius · no edge · 15px text

  • YKYC

    2 uses

    inputClass + min-h-28 resize-none

    16px radius · ring · 16px text

  • TAKEOVER app

    12 uses

    Textarea

    14px radius · border + faint fill · 14px text

  • TKVR studio

    10 uses

    textarea

    12px radius · border, darkens on focus · 14px text

Field label, help and error

3 versions

Label above, help or error below. YKYC reserves the line so nothing jumps and shows the error in the text colour, not red. TAKEOVER and TKVR show it in red.

  • YKYC

    15 uses

    Field with error

    13px grey label · 12px message · error not red

  • Enter a valid email

    TAKEOVER app

    19 FieldError

    Field + FieldLabel + FieldError

    14px label · 14px red error · 12px gap

  • TKVR studio

    94 errorText

    label + input + errorText

    14px label · 14px red error · 6px gaps

Select

3 versions

Shown open. TAKEOVER’s is a bordered pill with a floating list. davidewins.com’s is a grey pill that opens a sheet with a black selected row. TKVR uses the browser’s own select inside its input style.

  • Ireland
    United Kingdom
    France

    davidewins.com tools

    2 uses

    Currency picker trigger + list (opens in a sheet)

    40px pill trigger · 12px rows · black selected

  • Ireland
    United Kingdom
    France

    TAKEOVER app

    21 uses

    Select (SelectTrigger + SelectContent)

    36px bordered pill · floating list, 14px rows · grey highlight + check

  • TKVR studio

    8 uses

    Browser select with the input style

    40px (44px on the site) · 12px radius · border · browser’s own list

    Resized to the height limit; everything else is as on the site.

Segmented control

3 versions

A grey track with a white chip (TAKEOVER) or a black chip that slides (davidewins.com fonts tool, TKVR). All 36 to 40px.

  • davidewins.com tools

    1 use

    Font preview tabs, sliding thumb

    40px track (48px on the site) · black chip slides · medium 14px

    Resized to the height limit; everything else is as on the site.

  • TAKEOVER app

    11 triggers

    Tabs (TabsList + TabsTrigger)

    36px track · white chip selected · medium 14px

  • TKVR studio

    15 uses

    Segmented, sliding thumb

    40px track · black chip slides · medium 13px

Filter chips

1 version

Loose 28px pills for picking a filter or an amount. Only TKVR has them.

  • TKVR fan app

    7 uses

    chip + chipOn / chipOff (tips, slots, explore)

    28px loose pills · black selected · medium 12px

Radio choice

3 versions

A 16px dot (TAKEOVER), a white row with a round tick (PREPPERS), or a card that turns black when picked (TKVR). Rows shown at about 40px with one line.

  • PREPPERS

    5 uses

    Pill row with Tick (single select)

    40px white rows (56px on the site, with a second line) · 20px round tick

    Resized to the height limit; everything else is as on the site.

  • TAKEOVER app

    3 uses

    RadioGroup + RadioGroupItem

    16px dot · 14px label · no row

  • TKVR studio

    12 uses

    TierChoice (card radio)

    42px cards (62px on the site, with a second line) · picked card goes solid black

    Resized to the height limit; everything else is as on the site.

Checkbox

3 versions

A 16px box (TAKEOVER), a white row with a round tick (PREPPERS), or the browser’s checkbox in a row (YKYC). Rows shown at 40 to 44px.

  • PREPPERS

    ~6 groups

    Pill row with Tick

    20px circle on a 40px row (56px on the site, with a second line) · whole row taps

    Resized to the height limit; everything else is as on the site.

  • YKYC

    1 use

    Browser checkbox in a row

    20px browser checkbox · 44px row (52px on the site)

    Resized to the height limit; everything else is as on the site.

  • TAKEOVER app

    13 uses

    Checkbox + Label

    16px square · 6px radius

Switch

3 versions

From TAKEOVER’s 32 by 18px up to the iOS size, 51 by 31px. Black when on except Psyche, which goes green. TKVR’s sits in a 44px grey row.

  • davidewins.com tools

    1 use

    Glass playground switch

    51 × 31px (iOS size) · black on

  • TAKEOVER app

    19 uses

    Switch, default size

    32 × 18px · black on

  • Psyche app

    1 use

    Sentinel switch (hand-written)

    48 × 28px · green on

Code input

2 versions

Six joined 36px boxes in a pill (TAKEOVER) or six separate rounded boxes (TKVR, shown at 40px).

  • 4
    8
    2

    TAKEOVER app

    0 uses

    InputOTP (0 uses in the app)

    six joined 36px boxes · pill ends · 14px digits

  • 4
    8
    2

    TKVR site

    1 use

    CodeInput (sign-in)

    six separate 40px boxes (56px on the site) · 12px radius · semibold digits

    Resized to the height limit; everything else is as on the site.

Slider

3 versions

TAKEOVER has a styled 12px track with a round thumb. davidewins.com and TKVR use the browser’s own range input tinted with the accent colour.

  • davidewins.com tools

    1 use

    Browser range input

    browser slider · accent tint

  • TAKEOVER app

    1 use

    Slider

    12px track · 16px white thumb with a border

  • TKVR site

    1 use

    Pricing calculator range

    browser slider · 8px tall · accent tint

Quantity stepper

2 versions

Only TAKEOVER has one, in two forms: two round buttons around a big number, or a bordered pill with − and + inside.

  • 2

    TAKEOVER app

    2 uses

    Product sheet quantity

    36px round buttons · 24px semibold number

  • 2

    TAKEOVER app

    3 refs

    QuantityInput (shadcnblocks)

    36px bordered pill · − and + inside · 14px number

File upload

2 versions

TKVR has a dashed dropzone that shows the image once it’s added. YKYC styles the browser’s file input with a grey pill button.

  • YKYC

    1 use

    Browser file input, styled

    16px radius field · grey pill “choose file” button

  • TKVR studio

    5 uses

    ImagePicker, cover dropzone

    144px tall · 12px radius · 2px dashed border

Calendar

1 version

Only TAKEOVER has a month calendar: round 32px days, black when selected, grey for today.

  • October 2026
    MoTuWeThFrSaSu

    TAKEOVER app

    11 uses

    Calendar (react-day-picker)

    32px round days · black selected · grey today

Day and time picker

All cut

TKVR’s version is cut. This gets designed fresh.

Every version is cut. This one gets designed fresh for the kit.

    Lists and overlays

    Grouped list

    4 versions

    The same three rows in every version, all 40 to 44px (some resized, real height on each card). Cards differ on radius (14 to 22px), fill and border.

      PREPPERS

      6 row strings

      Pack and card list rows

      40px rows · 16px radius · medium 14px

    • YKYC

      ~15 rows

      Panel + Row

      44px rows (52px on the site) · 16px radius · medium 15px · no chevron

      Resized to the height limit; everything else is as on the site.

    • TAKEOVER app

      7 cards

      Bordered card with button rows (hand-written)

      44px rows · 14px radius · border · 14px

    • Psyche app

      compact prop

      ListSection + MetricRow compact

      44px rows · 22px radius · border · medium 14px, semibold value

      Psyche’s standard 52px list is the same design, so it’s shown here at its compact size.

    Table

    2 versions

    Same three rows in both. TAKEOVER has 48px header cells in the text colour. TKVR has a smaller 12px grey header and wider side padding.

    • OrderCustomerTotal
      #1042Aoife€24.00
      #1043Cian€18.50
      #1044Niamh€31.00

      TAKEOVER app

      211 Table refs

      Table

      48px header · 14px medium headings · 12px cell padding

    • OrderCustomerTotal
      #1042Aoife€24.00
      #1043Cian€18.50
      #1044Niamh€31.00

      TKVR studio

      1 use

      Payouts table

      12px grey header · 20px side padding · medium totals

    Dialog

    8 versions

    Shown open and static, all with the same copy. Corners run 12 to 26px, the panel is white or grey, and titles are 16 or 18px.

    • Delete this item?

      It comes off your page straight away. This can’t be undone.

      PREPPERS

      4 uses

      Sheet, md, desktop

      16px radius · page grey panel · semibold 16px title · 50% scrim

    • Delete this item?

      It comes off your page straight away. This can’t be undone.

      TAKEOVER app

      20 uses

      Dialog + DialogFooter

      26px radius · 24px padding · medium 16px title · 80% scrim (shown at 50%)

    • Delete this item?

      It comes off your page straight away. This can’t be undone.

      TKVR studio

      21 uses

      ConfirmDialog (<dialog> element)

      12px radius · white panel · semibold 18px title · 40% scrim (shown at 50%)

    • TKVR studio

      53 uses

      input

      40px (44px on the site) · 12px radius · border, darkens on focus · 14px

      Resized to the height limit; everything else is as on the site.

    • TKVR studio

      6 uses + 4 copies

      OnOffSwitch row

      48 × 28px · black on · 44px grey row (60px on the site, with a second line)

      Resized to the height limit; everything else is as on the site.

    • TKVR fan app

      14 uses

      SettingsGroup + SettingsLinkRow, shown without row icons

      44px rows (52px on the site) · 18px radius · medium 15px, 12px value

      Resized to the height limit; everything else is as on the site.

    • TKVR fan app

      1 sheet

      Chat action sheet rows

      44px rows (48px on the site) · 22px radius · medium 15px · no value

      Resized to the height limit; everything else is as on the site.

    • TKVR site

      1 use

      Explore search

      40px (44px on the site) · pill · grey fill · ring on focus · 15px

      Resized to the height limit; everything else is as on the site.

    Side sheet

    3 versions

    A panel that slides in from the right. TAKEOVER’s has no header bar. Psyche’s has a faded close X. TKVR’s has a 56px header with a title and a round close button, and turns into a bottom sheet on phones.

    • Edit product

      Changes show on your storefront straight away.

      TAKEOVER app

      7 uses

      Sheet, side="right"

      384px max · 24px padding · 16px medium title

    • Edit product

      Psyche app

      3 uses

      Sheet, side="right"

      384px max · 24px padding · 16px semibold title · faded X

    • Edit product

      TKVR studio

      12 uses

      Drawer (right panel from sm up)

      440px · 56px header bar · 17px semibold title · footer bar

    Bottom sheet

    3 versions

    The sheet that rises from the bottom on phones, with the same content in each. PREPPERS has no grabber. TKVR has a small grabber and a 56px header bar. TAKEOVER floats a 26px-corner card with a wide grabber.

    • Edit product

      PREPPERS

      4 uses

      Sheet on a phone

      16px top corners · no grabber · 16px semibold title

    • Edit product

      TAKEOVER app

      1 use

      Drawer (vaul), bottom

      floating card · 26px corners · 100px grabber · centred title

    • Edit product

      TKVR studio

      12 uses

      Drawer on a phone

      16px top corners · 40px grabber · 56px header bar

    Popover

    1 version

    Only TAKEOVER has a general popover: a white 18px-corner card with a big soft shadow. TKVR’s only popovers are chat pickers.

    • Share

      Anyone with the link can view this page.

      TAKEOVER app

      8 refs

      Popover (shown open)

      288px · 18px radius · 16px padding · shadow-2xl

    Tooltip

    1 version

    Only TAKEOVER has one: a black 18px-corner bubble with a small arrow. The other three sites use the browser’s own title tooltip.

    • Copy link

      TAKEOVER app

      12 uses

      Tooltip (shown open)

      black bubble · 18px radius · 12px text · arrow

    Command palette

    2 versions

    Same three commands in both. TAKEOVER’s is a 26px-corner card with 14px items in rounded rows. Psyche’s is a bordered panel with 13px items, hints and full-width rows.

    • Search…

      Suggestions

      Orders
      Settings
      New product

      TAKEOVER app

      1 use

      CommandDialog (cmdk)

      26px radius · 36px search · 14px items in 18px rows

    • Search…
      OrdersGo to
      SettingsGo to
      New productCreate

      Psyche app

      app shell

      AppCommandPalette

      12px radius · border · 13px items · full-width rows + hints

    Content

    Card

    4 versions

    Same title and text in each. TAKEOVER adds a hairline ring and 24px padding. davidewins.com, Psyche and TKVR use a flat fill with 16 to 20px padding.

    • Pro plan

      Everything in Free, plus custom domains.

      YKYC

      9 uses

      Panel + p-5

      16px radius · flat white · 20px padding

    • Pro plan

      Everything in Free, plus custom domains.

      TAKEOVER app

      195 uses

      Card + CardHeader + CardTitle + CardDescription

      18px radius · hairline ring · 24px padding · 16px medium title

    • Pro plan

      Everything in Free, plus custom domains.

      Psyche app

      100 uses

      Card (padded)

      16px radius · flat fill · 16px padding

    • Pro plan

      Everything in Free, plus custom domains.

      TKVR studio

      7 copies

      Panel card (hand-written)

      12px radius · flat fill · 20px padding

    Stat

    3 versions

    Same number in each. TAKEOVER labels in 10px mono caps. Psyche uses 11px caps and a 30px bold number in its own card. TKVR uses a 13px grey label and a 24px semibold number.

    • Revenue

      €3,980

      +12% this week

      TAKEOVER app

      19 uses

      KpiCell

      10px mono caps label · 24px semibold · mono caps sub

    • Revenue

      €3,980

      +12% this week

      Psyche app

      0 uses

      StatCard (bevel)

      11px caps label · 30px bold · coloured delta · 20px radius card

    • Revenue

      €3,980

      +12% this week

      TKVR studio

      17 uses

      StatCell

      13px grey label · 24px semibold · 12px grey sub

    Badge

    4 versions

    The same three statuses in every version: Live, Draft, Failed. They differ on height (20 to 24px), whether text is white on a solid fill or coloured on a tint, caps, and a dot.

    • LiveDraftFailed

      TAKEOVER app

      165 uses

      Badge: default, secondary, destructive

      20px · pill · medium 12px · Failed is tinted red

    • LiveDraftFailed

      Psyche app

      13 uses

      Badge: success, default, warning

      ~20px · pill · semibold 11px caps · tinted text

      Has no red tone, so Failed uses its warning tone.

    • LiveDraftFailed

      Psyche app

      8 uses

      Tag (bevel): success, neutral, danger

      ~22px · pill · border + dot · semibold 11px · coloured text

    • LiveDraftFailed

      TKVR studio

      32 uses

      StatusPill, blue / amber / red tones

      24px · pill · semibold 11px · white text + dot

    Avatar

    3 versions

    TAKEOVER: grey initials with a hairline. TKVR: solid ink initials or a coloured ring. Psyche: bordered, with a status dot.

    • DEDEDE

      TAKEOVER app

      19 uses

      Avatar + AvatarFallback, sizes sm / default / lg

      24 / 32 / 40px · hairline ring · 14px initials

    • DE

      Psyche app

      2 uses

      Avatar (bevel) with status dot

      40px · border · semibold initials · status dot

    • DEDEDE

      TKVR fan app

      23 uses

      MemberAvatar sm / md + CreatorAvatar 40 with accent ring

      28 / 32px solid ink · 40px with a coloured ring

    Avatar group

    2 versions

    Same four people in both. TAKEOVER’s is 32px grey initials with a count bubble (unused in the app). TKVR’s is 36px solid initials.

    • AOCMNBRK

      TAKEOVER app

      0 uses

      AvatarGroup + AvatarGroupCount

      32px grey initials · 8px overlap · has a count bubble, not shown

    • AOCMNBRK

      TKVR site

      1 use

      Fan stack (marketing)

      36px solid initials · 8px overlap · no count

    Empty state

    3 versions

    All have an icon: a 40px grey square (TAKEOVER), a 64px circle (Psyche) or a 3D Thiings icon (TKVR). Titles are 17 or 18px.

    • No orders yet

      Orders show up here as soon as someone checks out.

      TAKEOVER app

      2 uses

      Empty (EmptyHeader, EmptyMedia icon, EmptyTitle, EmptyDescription, EmptyContent)

      icon in 40px square · medium 18px title · 48px padding

      Most TAKEOVER empty states are hand-written instead.

    • No orders yet

      Orders show up here as soon as someone checks out.

      Psyche app

      10 uses

      EmptyState (bevel)

      icon in 64px circle · semibold 18px title · pill action

    • No orders yet

      Orders show up here as soon as someone checks out.

      TKVR studio

      35 uses

      EmptyState with a Thiings icon

      88px 3D icon · semibold 17px title · pill action

      Icon by thiings.co.

    Accordion

    3 versions

    Same two questions in each, the first open. TAKEOVER puts them in a bordered card with 14px text. Psyche uses a bigger bordered card. TKVR uses open rows with a round chevron that turns black when open.

    • Payouts land in your bank every Monday for the week before.

      TAKEOVER app

      9 uses

      Accordion

      18px radius · border · 14px medium · grey when open

    • Payouts land in your bank every Monday for the week before.

      Psyche site

      1 page

      Support FAQ

      16px radius · border · 16px medium questions · 24px padding

    • Payouts land in your bank every Monday for the week before.

      Yes. Your page stays up until the end of the month you paid for.

      TKVR site

      1 use

      Faq (one open at a time)

      no card · 15px medium · 32px round chevron · animated open

    Code block

    2 versions

    davidewins.com’s is a white 16px card with a title bar and a grey copy pill. TAKEOVER’s (internal pages only) is a bordered 10px box with a mono caps label and a text copy link.

    • Terminal
      npm install zesty-ui

      davidewins.com tools

      27 uses

      CodeBlock

      16px radius · title bar · 32px copy pill · 13px code

    • sh
      npm install zesty-ui

      TAKEOVER app

      internal only

      CodeBlock (internal design pages)

      10px radius · border · mono caps label · text copy link · 12px code

    Keyboard key

    2 versions

    Only the Psyche app actually uses one. TAKEOVER’s exists but nothing imports it.

    • ⌘K

      TAKEOVER app

      0 uses

      Kbd

      20px · 6px radius · Geist 12px

    • ⌘K

      Psyche app

      6 uses

      Kbd

      ~20px · 4px radius · border · mono 10px

    Separator

    1 version

    One 1px line in the border colour. TAKEOVER’s and Psyche’s are identical.

    • Above

      Below

      TAKEOVER app

      22 uses

      Separator

      1px · border colour

      Psyche’s separator is identical, so it’s merged here.

    Chat messages

    3 versions

    Same two messages in each. TKVR uses iOS-style bubbles with one tight corner. PREPPERS uses 16px rounded bubbles in a white card. TAKEOVER uses 10px corners and more padding.

    • Is the 7pm slot free?

      Yes, booked you in.

      PREPPERS

      1 use

      GuideChat

      16px corners · 14px text · inside a white card

    • Is the 7pm slot free?
      Yes, booked you in.

      TAKEOVER app

      1 use

      Message (contained)

      10px corners · 14px text · 16px padding

    • Is the 7pm slot free?

      Yes, booked you in.

      TKVR fan app

      all chat

      MessageBubble

      18px corners, one 6px corner · 15px text

    Rating

    2 versions

    Same 4.5 in both. TAKEOVER shows one amber star and the number. Psyche shows five stars in the text colour and the number.

    • 4.5

      TAKEOVER app

      2 uses

      Menu rating (display)

      one 16px amber star + number

    • 4.5

      Psyche app

      2 uses

      StarRating

      five 16px stars · 12px grey number

    App page header

    3 versions

    The title at the top of a logged-in screen, with the same title and line under it in each. 15 or 28px semibold.

    • Orders

      142 this week

      TAKEOVER app

      every dashboard page

      Dashboard PageHeader

      Geist semibold 28px · mono 10px caps sub

    • Orders

      142 this week

      Psyche app

      10 pages

      AppPageHeader

      Geist semibold 15px · 13px grey desc · hairline under

      Its action button is square (rounded-md), so it’s left out here.

    • Orders

      142 this week

      TKVR studio

      32 uses

      PageHeader (also the fan app h1)

      Geist semibold 28px · 14px grey lede

    Section header

    4 versions

    A section title with an optional link on the right. TAKEOVER’s link is tiny mono caps and TKVR’s is a grey pill. davidewins.com and Psyche have no link slot.

    • Recent orders

      davidewins.com tools

      23 headings

      Section h2

      20px semibold · no action

    • Recent orders

      All orders

      TAKEOVER app

      12 uses

      SectionBar

      14px medium · 10px mono caps link · hairline under

    • Recent orders

      Psyche app

      43 refs

      SectionLabel

      15px semibold · no action

    • Recent orders

      All orders

      TKVR studio

      35 uses

      Section title bar + sectionLink

      15px semibold · 32px grey pill link · hairline under

    Feedback

    Toast

    1 version

    Only TAKEOVER has toasts: sonner’s default card in the corner, with no styling of its own.

    • Saved. Your page is updated.

      TAKEOVER app

      80 toast calls

      sonner toast (default style)

      10px radius · border + shadow · 13px text · icon

      Drawn from sonner’s default styles, since TAKEOVER adds none.

    Save bar

    1 version

    Only TKVR has one: a bar along the bottom with the status on the left and the actions on the right.

    • Saved. Your page is updated.

      TKVR studio

      2 bars

      Settings save bar

      full-width bar · hairline on top · 14px status + 32px pills

    Inline error

    1 version

    A plain red line, no box. davidewins.com’s and Psyche’s are the same, so they’re merged.

    • davidewins.com tools

      3 uses

      Error line (review replies)

      red 14px medium line · no box

      Psyche’s inline error is the same red line at regular weight, so it’s merged here.

    Error box

    3 versions

    The same error in every version. A white card with red text and an icon (TAKEOVER’s Alert), or a red-tinted box with a border, with or without an icon (TAKEOVER, TKVR).

    • TAKEOVER app

      13 uses

      Alert, destructive variant

      10px radius · white card, border · red text + icon

    • Couldn’t save. Check your connection and try again.

      TAKEOVER app

      7 copies

      Error box (hand-written)

      10px radius · red tint + red border · no icon

    • Couldn’t save. Check your connection and try again.

      TKVR site

      1 use

      Sign-in error box

      12px radius · red tint + red border · icon

    Warning banner

    All cut

    Both versions are cut. This gets designed fresh.

    Every version is cut. This one gets designed fresh for the kit.

      Skeleton

      4 versions

      The same two placeholder rows in every version, a 40px block and a short line, drawn with each site’s own skeleton class. They differ on radius (4px to full) and on whether they sit in a card. The Psyche app has no skeletons.

      • davidewins.com tools

        1 use

        Review replies skeleton (pill bars in a card)

        full pills · inside a white card

      • YKYC

        6 uses

        Skeleton

        12px radius · grey

      • TAKEOVER app

        106 uses

        Skeleton

        14px radius · grey

      • TKVR studio

        114 animate-pulse

        Inline animate-pulse blocks

        4px radius lines · 12px radius blocks · surface grey

      Spinner

      2 versions

      A CSS ring (YKYC) or the lucide Loader2 icon (TAKEOVER, and Psyche’s identical one).

      • YKYC

        Button loading

        Button loading ring

        16px CSS ring · 2px stroke

      • TAKEOVER app

        174 Loader2

        Spinner (and inline Loader2)

        16px icon

        Psyche’s spinner is the same icon at 18px, so it’s merged here.

      Progress bar

      3 versions

      The same 60% in every version, bar only. Bars are 6 to 12px tall, black on grey. One sits in a white card.

      • PREPPERS

        1 use

        StorageMeter

        6px bar in a white card

        Its built-in label and value line is left off so every bar compares alone.

      • TAKEOVER app

        4 uses

        Progress

        12px bar · no label

      • TKVR studio

        3 uses

        FeeMeter

        8px bar

        Its scale line underneath is left off so every bar compares alone. Psyche’s ProgressBar looks the same (8px, black on grey), so it’s merged here.

      Step progress

      2 versions

      Both show step 2 of 4 as a row of bars. PREPPERS uses 4px bars that fill as you go. TKVR uses 6px bars.

        PREPPERS

        1 use

        Onboarding steps

        4px bars · 4px gaps

      • TKVR studio

        1 use

        Onboarding Progress

        6px bars · 6px gaps

      Navigation

      App top bar

      3 versions

      The bar above a logged-in screen. All 56px with a hairline under it. TAKEOVER shows the title only, Psyche adds a sub line, TKVR adds the account avatar.

      • Orders

        TAKEOVER app

        every dashboard page

        Dashboard top bar (desktop)

        56px · 14px semibold title

      • Orders

        142 this week

        Psyche app

        every app page

        AppShell top bar (desktop)

        56px · 15px semibold title + 12px sub

      • BOrders142 this week

        TKVR studio

        every studio page

        StudioShell top bar (desktop)

        56px · avatar + 14px semibold name + 14px sub

      Page tabs

      3 versions

      Tabs that switch the page’s content. TAKEOVER has an underline style. davidewins.com and TKVR use rows of pills instead, black when selected.

      • davidewins.com tools

        1 use

        Export panel tabs

        40px pills · grey idle · black selected

      • TAKEOVER app

        1 page

        Tabs, line variant

        text tabs · 2px underline on the selected one

      • TKVR fan app

        every fan page

        Fan app nav pills

        36px pills · bordered white idle · black selected

      Mobile tab bar

      3 versions

      The bar along the bottom on phones. TAKEOVER and Psyche change the icon and text colour only. TKVR puts the active icon in a black pill.

      • TAKEOVER app

        every dashboard page

        MobileBottomTabs

        20px icons · 10px labels · colour change only

      • Psyche app

        every app page

        AppShell bottom bar

        18px icons, bolder when active · 10px labels

      • TKVR fan app

        every fan page

        FanShell bottom bar

        18px icons in a 28×48 pill · 11px labels

      Pagination

      1 version

      Only TAKEOVER has numbered pages: 36px round page buttons with the current one outlined.

      • TAKEOVER app

        2 uses

        Pagination

        36px round page buttons · outlined current

      Earlier and later paging

      1 version

      Only TKVR has one: two grey pill buttons with a short note between them.

      • Page 2 of 9

        TKVR fan app

        1 use

        SlotPicker week paging

        32px pill buttons · 12px note between

      Marketing

      Marketing page title

      4 versions

      The h1 on landing and tool pages. davidewins.com and TKVR are Geist semibold, TAKEOVER is Geist at 400 with tight tracking, and the Psyche site is a Fraunces serif.

      • Online ordering for independents

        Take orders on your own storefront and keep your customer list.

        davidewins.com tools

        14 pages

        Tool page h1 + lede

        Geist semibold 36px · medium 18px grey lede

      • Online ordering for independents

        Take orders on your own storefront and keep your customer list.

        TAKEOVER site

        43 headings

        Feature page h2 + lead

        Geist regular 48px, tight tracking · 18px lead

      • Online ordering for independents

        Take orders on your own storefront and keep your customer list.

        Psyche site

        ~30 headings

        Index and legal page h1 + lede

        Fraunces 38 to 64px (light asked for, 400 loaded) · 17px lede

        Psyche asks for Fraunces 300 but only loads 400 to 600, so it renders at 400. Shown the same way here.

      • Online ordering for independents

        Take orders on your own storefront and keep your customer list.

        TKVR site

        ~15 headings

        Section h2 + lede (content and legal h1 too)

        Geist semibold 48px, very tight tracking · 18px lede

      Plan card

      2 versions

      The same plan in both. TAKEOVER uses a big 64px price, a mono caps label and a full-width bordered button. TKVR uses a 40px price, the plan name on top and a black button.

      • Pro

        €12/mo

        Pro plan

        • Custom domain
        • Unlimited products
        • Priority support

        TAKEOVER site

        pricing page

        PricingTierCard

        16px radius · 28px padding · 64px price · full-width button

      • Pro plan

        €12a month

        • Custom domain
        • Unlimited products
        • Priority support

        TKVR site

        creator pages

        TierCard

        12px radius · 24px padding · 40px price · black button

      Closing call to action

      2 versions

      The last block on a landing page, with the same copy in both. TAKEOVER is left-aligned Geist at 400. TKVR is centred semibold with tighter tracking (and three 3D icons above, not shown).

      • Start selling today

        Set up your storefront in ten minutes.

        TAKEOVER site

        every feature page

        FeatureCTA

        left-aligned · Geist 400 heading · two 48px pills

      • Start selling today

        Set up your storefront in ten minutes.

        TKVR site

        home page

        FinalCta

        centred · semibold, very tight tracking · 48px pills

      Legal and long-form text

      2 versions

      The same heading and paragraph. davidewins.com uses a 20px heading and 16px body in the text colour. TKVR uses a 21px tighter heading and a 15px grey body.

      • How we use your data

        We keep your orders so you can see them later. We never sell your details.

        davidewins.com tools

        legal and guide pages

        .prose-legal

        20px semibold heading · 16px body, 1.65 line height

      • How we use your data

        We keep your orders so you can see them later. We never sell your details.

        TKVR site

        legal pages

        LegalPage + ContentPage blocks

        21 to 24px semibold heading · 15 to 16px grey body

      Cut what should go