Getting started
Introduction
the parts the meowda sites are made of. dark, square, mono labels, one amber accent.
Copy the markup, link /static/app.css and it looks like print, admin and dash. Every component here is a Solid JS component, rendered to plain html and styled by the real stylesheet.
Layout
- Cardthe ticket: a gradient panel with a perforated divider and a stub.
- Separatorplain rule, or a rule with a label in the middle.
- Typographyoutfit for display, manrope for body, plex mono for labels.
- Description listlabels and values, two columns.
- Statsa strip of small facts that wrap.
- Stepsnumbered list with square counters.
- Mastheadsticky blurred header with the brand lockup and an account menu.
- Install cardnudge to install the app to the home screen.
- Footermono credit line with a top rule.
Forms
- Buttonsquare, mono, uppercase. five tones, three sizes, plus shapes, hover motion and buttons that keep state.
- Button groupjoined buttons that share borders.
- Inputsquare 48px field. 16px text so phones never zoom.
- Textareamulti line mono text, resizes vertically.
- Selectnative select with the chevron drawn in the background.
- Checkboxnative checkbox tinted with the accent.
- Radio groupround radio with an accent dot.
- Switchsquare on and off toggle for settings.
- Toggle groupsegmented control, one value at a time.
- Input OTPsix digit pin, big mono digits with wide tracking.
- Code platea one time code someone reads out loud.
- Scan buttonthe big call to action that opens the camera.
- Field stylestext fields in six styles: underline, floating label, prefixed, search, code boxes and a counter.
- Choice controlscheckbox, option cards, switch, filter chips and a rating with labels.
Data display
- Avatarround image or two letter fallback.
- Badgestamps for state, counts for totals, chips for tags.
- Tablemono caps headers, hairline rows.
- Thumbnailsquare image with a short label fallback.
- Swatch listcolor swatch, name, amount.
- Skeletonshimmering placeholders while data loads.
- Emptydashed box for lists with nothing in them.
- Kbda keyboard key.
- Progressthin bar for completion.
- Surfacesstat card, lift card, status ticket, empty state, list rows and an avatar stack.
- Table and accordiona table with a row marker and an accordion that eases open.
Feedback
- Alerta bordered notice in the tone of the message.
- Toasta short message pinned to the bottom of the screen.
- Dialognative dialog. a bottom sheet on phones, a centered box above 560px.
- Statusthe hazard sweep marks something that needs a decision.
- Tooltipcss only hint on hover and focus.
- Scannerfull screen camera overlay with a viewfinder. shown here in a frame.
- Feedback stylesnotices, badges, progress, skeleton and a tooltip that morphs its text.
Navigation
- Tabssection chips that scroll sideways. hot marks something waiting.
- Breadcrumbwhere you are, as mono caps.
- Paginationsmall buttons with a current page.
- Dropdown menua details element with a menu panel. closes on outside click.
- Accordionstacked details. give them a shared name so only one opens.
- Navigation stylessliding and boxed tabs, breadcrumb, pagination, a step tracker and a morphing dropdown.
Dash
- Status pillsquare pill with a square led. ok, warn or bad.
- Stat tilea label, one big number, a sub line and a meter.
- Meter rowname, bar, amount. used for disks and gpus.
- Chart carda line chart in plain svg: a title, a legend, axes and 1px grid lines.
- Uptime bars90 days of service health, one bar a day.
- Dash headerbrand, status pill, host line and a button group.