Components

Every reading-layer component, live: the controls, overlays, forms, layout, navigation, data and brand pieces, printed the same at every volume.

85 pages, each with its live example, props and the press check.

ActionDock
The phone quote dock: one action key that shows once the hero's key has scrolled away.
Avatar
A person's picture or initials on a slab disc; a group overlaps them and counts the rest.
Badge
A 28 px label chip on its own face: neutral, outline or solid, with an optional line badge.
Before and after
Two images of the same frame split by a draggable ink divider, driven by a native range.
1. Work
2. Case studies
3. Fernlight
Breadcrumbs
The trail from the top of the site to the current page; on phones, one step back.
Button
Every action is the comic hit key: a flat face, a 3 px ink rule and a hard offset that a press closes.
Callout
Notes, tips, warnings, errors and successes on the white plate, told apart by glyph, title and rule weight.
Card
A ruled plate with media, header, body and footer; with `href` the whole card is one link that lifts on hover.
Character count
"120 of 2,000" under a field; it speaks only near the limit.
Checkbox
Native checkboxes drawn as a 24 px box, and groups as a list, toggle keys or cards.
Cluster
A wrapping row with a gap from the 4 px space steps.

app/globals.csscss

@layer theme, base, mk, site, components, utilities;
@import "@maxgrits/overprint-react/css";
@import "tailwindcss";
@import "@maxgrits/overprint-tokens/tailwind.css";
/* Fernlight's own styles go in the site layer, above the kit and under the utilities */

CodeBlock

Code in the code face, the only mono in the system, with a file name, a language badge and a copy key.

Combobox
A text field over a filtered list, for long or searchable lists. The docs search runs on it.

TemplatedSemi-customFully custom

What each website tier includes
Build
	Templated2 to 4 weeks	Semi-customMost picked4 to 6 weeks	Fully customBy scope
Pages	Up to 5	Up to 12	As many as the plan needs
Your own layoutDesigned around how Fernlight's customers actually book	Not included	Included	Included
Price	$1,800	$3,200 to $4,800	Quoted after a call
After launch
Two months of fixes	Included	Included	Included

ComparisonTable

Tiers side by side, with a one-tier switcher on phones that works without JavaScript.

Container
The page width with a 16, 24 or 64 px gutter, and a query container for what it holds.
Count
A numeric pill on the slab, capped at 99+, with its meaning in words for screen readers.
Cursor
An ink ring that follows the pointer on desktops, beside the native pointer. Off at Quiet and under reduced motion.
Dialog
A modal plate over a scrim: focus trapped, Escape closes, focus returns, the page is inert.
Disclosure
Native details and summary, and the FAQ built on them, with FAQPage JSON-LD.
Drawer
The Dialog's parts sliding from a side; only the body scrolls, so the title and Send stay in reach.
Empty state
What a list or panel says while it holds nothing yet: a shape, a title, one line and one action.
Eyebrow
A label-role line over a heading, sentence case, with a line badge or a short bar.
Field
A label, an optional description, one control and an error line, with ids derived from the name.
Figure
Media with a caption and credit; space reserved by aspect ratio; proofs stay untouched.
FittedLine
Fits one display line to its slot; the first paint is the CSS clamp and the reserved height never changes.
Websites
Website builds
After launch: SEO, analytics, hosting and the odd urgent fix
Software
Products
Custom apps
Work
Fernlight
Pebblepath
Studio
About
Contact
Insights
Test your site's speed
BoneNight
Site volume
QuietPaper and type, art holds stillStudioThe house lookPressPoster heroes, more inkRaveEverything on
MAKR Labs is a one-person studio. Prices are in Canadian dollars and include two months of fixes.
Build a1b2c3d · 23 Oct 2026, Toronto
Footer
The page end on the slab: the map of the mark, studio links, the display settings, legal and the build stamp.
Form
A native form that validates like the site: quiet until it matters, literal messages, focus on the first failure.
Grid
Columns by container width, or as many tracks as fit a minimum.
Honeypot
The spam guard: an off-screen field people never reach, a timestamp, and the server check.
IconButton
An icon-only key with the Button's faces and a required name that doubles as its tooltip.
InfoPanel
A dense ruled group with a title, rows between soft rules, and an optional sticky readout from lg.
Input
A text field in the control box: hover and focus take the ink rule, invalid takes a heavier rule and a hatch strip.
Kbd
A key cap for shortcuts and key names, in the text face with a small hard offset.
LineBadge
The meaning unit: a line's ink, letter and glyph in one square, 16 to 48 px.
LineCard
The division card: a head band in the line's ink, the block on its corner, the body on the line's tint.
Link
Inline links are always underlined; standalone links carry weight and an arrow; quiet links serve footers and legal lines.
Loader
Three shape glyphs hop in turn beside a visible label, for five cycles at most, then hold still.
Logo
The lockups (horizontal, stacked, mark) drawn from `logoGeometry`, with the home link.
Main
The main landmark with the skip link's target id.
Mark
The evolved 2 × 2: M A over K R in the Process inks, overprinting where they meet.
MaxosMark
The MAX//OS wood block in 2D: a wood square with two heavy slashes.
Menu
A list of actions behind a key, with shortcuts, checkbox and radio items and submenus.
Motion toggle
Pauses the page's ambient motion and plays it again. Loops only run while one is on the page.
Websites
Work
Pricing
Site volume
QuietPaper and type, art holds stillStudioThe house lookPressPoster heroes, more inkRaveEverything on
Get a quote
Navbar
The site header: logo, items with disclosure mega panels, the display utilities and the action key.
MAKR Labs
Get a quote
Menu
Websites
Websites overview
Build
New sitesTwo to four weeks
Redesigns
Look after
Care plansFixes, updates and a monthly check
Work
Pricing
BoneNight
Site volume
QuietPaper and type, art holds stillStudioThe house lookPressPoster heroes, more inkRaveEverything on
NavSheet
The phone navigation: a full-screen sheet with the Navbar's items as disclosures and the visitor controls.
PageHero
One per page: eyebrow and status, the display title with an accent line, the sub, two keys and the spec strip.
Previous
1
2
3
7
Page 2 of 7
Next
Pagination
Previous and Next keys around numbered page squares; on phones, "Page 2 of 7".
PhoneFrame
A generic phone body around an untouched screenshot or a paused, muted video.
Plate
An opaque reading surface that re-scopes the text, rule and focus roles, so components read right on any plate.
Popover
A small plate that opens from a key with a few words or controls, and closes on Escape.
Press run
The first-visit loader: the Mark's four plates print in register, then the veil wipes off.
Progress bar
How far a task has come, as a bar or as cells, with its label and value in words.
How Fernlight went from five taps to two#
Jordan Reyes runs Fernlight with one other gardener. Their old site buried the price list three pages deep, so most visitors called to ask, and most calls came while their hands were in the soil.
We moved the ranges to the first screen, cut the quote form to four fields and kept every page under a second on a five-year-old phone. Sam Okafor tested it on a bus with Save-Data on.
- Prices on the first screen
- A four-field quote form
- Every page under a second
Prose
Long-form reading for MDX and HTML, and `mdxComponents`, the element map for Fumadocs and the site.
Quote
A quote with its source on its own line: inline with an ink rule, or a pull quote in the text family.
QuoteForm
The site's inquiry form: name, email, website, tier and budget keys, a message, and the one action key.
Radio
Native radios drawn as a 24 px ring, and groups as a list, toggle keys or cards with line badges.
Rule
A horizontal or vertical rule in four weights, or a line's 6 px top rule.
RulerReadout
The estimator's sticky readout: the band in numbers first, then a read-only ruler.
ScoreDial
A 0 to 100 score as a ring in one ink, with the band's glyph and word.
ScreenshotFrame
A client site's screenshot framed as a printed plate, with the domain linking out to the live site.
Section
The legibility structure: words print on a plate, art sits beside, above, below or around it, never under the words.
SectionHead
Eyebrow, title, sub and an action at the end; the title in the card or section heading role.
SegmentedControl
A native radio group drawn as two to five equal segments that change at once, with no sliding pill.
Select
A native select in the Input box, with an end glyph and the platform picker, best on phones.
Skeleton
Flat blocks shaped like the content that is coming. No shimmer: it holds still.
SkipLink
The first focusable element: "Skip to content", visible on focus.
Slider
Pick a value or a range; the ruler variant is the estimator's printer's ruler with a carriage thumb.
Sound toggle
Turns the wood knocks, stamp thumps and comic sounds on or off. Sound starts off.
SpecStrip
Two to four facts as a description list, one row from md and 2 × 2 below.
Stack
A column with a gap from the 4 px space steps.
Stat
Numbers you can check: values printed at once, never counting up, with a source link.
StatusChip
Status without traffic lights: a neutral pill, the literal word and a shape that repeats it.
Switch
A native switch: a pill track and a thumb that carries a dash when off and a check when on.

Projects and their Lighthouse scores
Project	Client	Year	Score
Fernlight bookings, gallery and a seasonal price list	Jordan Reyes, Fernlight Garden Studio	2026	98
Pebblepath one-pager	Sam Okafor	2026	100
Class calendar	Mei Tanaka	2025	96

Table

The ledger: captioned, tabular figures end-aligned, scrolling sideways or stacking rows on phones.

Table sort button
The sort key inside a table head: the column's name and a glyph for its order.
Tabs
Tabs on a soft baseline; the active tab is bolder and carries a 4 px ink rule, with no reflow.
Textarea
The Input box around a text area that grows with its content from four rows to sixteen, then scrolls.
ThemeToggle
Bone and Night: an icon key in the nav and a segmented pair in the footer, remembered for the next visit.
Tick
A round checkbox for task lists, with an optional running number inside.
Toast
A short confirmation on a slab pill at the foot of the screen. One at a time; never an error's only copy.
Tooltip
A slab pill that repeats a control's name or nearby words, never the only copy of a fact.
VisitorControls
The display settings: paper, the volume dial, sound and motion, for the footer and the nav sheet.
VisuallyHidden
Words for assistive tech that never paint; the focusable variant shows itself on focus.
VolumeDial
The visitor volume dial: four stops, each named in its own voice, in the nav and the footer.
Wordmark
"MAKR Labs" in Anybody: MAKR at 820, Labs at 600 in the second text ink.

Components

Pebblepath

How long does a site take?

Do I own the code?

What happens after launch?

Nothing here yet.

Estimate

Growth

Websites that win customers.

Fernlight

How Fernlight went from five taps to two#

Pebblepath

Four kinds of work.