Brand tokens plus the preview's surface, text, line and tint mixes.

LINE Seed, -0.012em body tracking.

Banner 56px, r20. Hero 1200×360, r20, padding 40/100/40/88, art 400×280 with a 200px mark. Pager 160×4.

Managed game servers are coming in 2026

Practical software for digital communities.

haru interactive develops digital software, gaming infrastructure, and managed server solutions.

h2 22/30 left, “See all” 16/22 + 18px chevron right. Below: dark strip 48px, r20, then cards 389×139, r20.

Game servers

12plansAvailable

Web hosting

4plansAvailable

Bots

27plansAvailable

389×80, r20, 48px white icon tile r20. Slider arrow: 40px circle, 1px line.

MinecraftFrom $4.99 / monthPalworldFrom $4.99 / monthValheimFrom $4.99 / monthRustFrom $4.99 / monthTerrariaFrom $4.99 / monthARKFrom $4.99 / month

288 wide, image 288×140 r20, label 13 bold joined by |, title 17/24.

Call-out 1200×112, r20, padding 0 60, art 112×112. Placeholder min 192px.

Need a custom setup?

Tell us what you are running and we will size it for you.

Promotion variant

Mist fill instead of gray.

Coming soon!

variant: default | secondary | white | outline. size: default 48px | lg 56px, both r20 like the Menu | icon 40px circle (outline + icon is the slider arrow). Press scales to 0.96.

<RadioGroup variant="pill">. 38px, padding 8/16, r20, 15/21 600, 8px gap. On gray, give items bg-background.

<RadioGroup variant="option">. 384×60, padding 0 20, r20, 12px apart, 24px check. Selected: sakura tint.

<RadioGroup variant="card">. 100px circle, 4px border when selected, 44px inner dot (color prop), label 17/24 18px below, optional status.

Trigger is the secondary button; popup is the Menu; selected item bold with a check.

500×50, r30, padding 8/8/8/32; children go after the input. Heading 34/44, 36px above.

Field: label 13/18 bold 8px above, max 384. Input 50px, r20, gray, plum border on focus.

<NavTabs variant="segmented"> 17/24, 2×20 bar. Default tabs 46px, 1×20 dividers, scroll. LinkList: 3px plum rules, rows 24/20/24/24.

Page pattern, not a registry component. Bar 34px, r20, 13/18. Compact badge, title 20/28 16px below.

Badge variant: default (tag 3/8 r20 12/18) | neutral | chip (4/10 r20 13) | compact. Price: struck 16/22 sub, discount and final 17/24.

20px box r8 / 20px circle, 1.5px plum 30% border, plum when checked. Switch 44×26. Children become the label: 15/22, 10px gap.

FieldDescription 13/18 sub. No red in the palette: invalid fields get a tint fill and plum border; FieldError is bold with an icon.

6px track plum 12%, 20px white thumb with a 3px plum ring.

Breadcrumb 14/20 bold, / separators in the line colour. Pages 36px, r16, current page plum.

Same rules as the link list; panel on gray, height animates 200ms.

Menu r20, 8px block padding, full-width items 14/20 with 10/18 padding, hover pill inset 8px r12. Tooltip: plum, 13/18 bold, r20, 8px off.

Notice: padding 16/20, r20, tint or neutral, 20px icon. Toast: plum, r20, padding 14/20, 24px from the bottom; toast.add({ title, type }).

Bar 8px, gray track, plum fill. Steps: 32px circles, done sakura, current plum, 2px connectors.

Spinner 24px (20px inside buttons), currentColor. Skeleton gray with a white shimmer, r20.

Centred, 64px faded art, title 17/24, body 15 sub, one primary button.

No servers yet

Your servers will show up here once you order one.

Browse plans

Header row gray, r20, 13/18 bold. Cells 16px padding, 1px rules, numeric right-aligned. Avatar 40px (32 small), tint fill, groups overlap 8px.

Dialog 440×640 max, r20, body 28/32 scrolls. AlertDialog 320 wide, padding 16. Sheet 400 wide from the right, r20 on the open side (none under 480px), in 300ms, out 200ms. Backdrop plum 60%.

Group labels 12/16 bold muted. Checkbox items show a check on the right, radio items a plum dot. Submenus open to the right, first row level with the trigger.

ContextMenuContent opens at the pointer with the Menu items. Menubar is a gray r20 track with r16 triggers; the open trigger turns white.

Header nav with dropdown panels. One popup (the menu card) resizes and slides between panels; triggers turn gray while open.

Popover and PreviewCard use the menu card (r20, 150ms from 95%). PreviewCard opens on hover. Drawer is a bottom sheet, r20 top, swipe down to close.

A handle connects one popup to triggers anywhere, each passing its own payload. `backdrop` (off by default) dims the page behind a menu, popover or preview card. DrawerIndent pushes the app back while a drawer is open; DrawerSwipeArea opens it with a swipe up from the bottom edge.

Field look (50px, r20). Combobox picks from items, with a check on the chosen one; multiple shows white chips. Autocomplete keeps typed text as the value.

Number field: 50px gray group, 50px − and + cells, bold tabular value; drag the label to scrub. OTP: 50px squares, 8px apart.

Form shows Field errors on submit. Fieldset legend 17/24 bold. CheckboxGroup shares one value array; the parent checkbox toggles all.

Toggle: 40px gray, plum while pressed. ToggleGroup: segmented gray track, the pressed item is a white pill.

ARIA tabs for in-page panels (NavTabs is for links). Gray r20 track, a white r16 pill slides to the active tab in 200ms.

Gray r14 track of 36px items; arrow keys move between them. Pressed toggles turn plum; separators are 20px hairlines.

Collapsible animates height like the accordion. Separator is a 1px hairline. Meter is an 8px sakura bar with label and value. ScrollArea bars appear on hover or scroll.

840 white column on gray, content 384, title 26/36. Action bar 80px, 1px top line.

500 wide, padding 60/58, r20, 1px line, outline buttons 48px 12px apart.

Tile 160×180, padding 20, r20, 60px icon. Store row 588×124, padding 20/24/20/32, r20.

New

Minecraft

From $4.99

Palworld

From $4.99

Valheim

From $4.99

Rust

From $4.99

Terraria

From $4.99

Starter plan

Instant setupMonthly

Pro plan

Instant setupMonthly

420 image + 60 gap + 360 info. Title 22/30, price 40 below, button 40 below.