Houtos Labs · Web design servicesCustom design, measured
Web design & development servicesTest the craft before you hire it.
Web design services for websites, web apps and the five specialist practices behind them, engineered from first principles. Your site gets a grade before we start and another when we ship, on a rubric anyone can read. The exhibits below do the selling.
100% in-house development · Oregon & California, USA · 25+ years building production systems
25+ yrsDesign & technologyCA & ORFounded in CaliforniaGlobalWho we design forIn-houseZero contractors
Performanceread ✓
Accessibilityread ✓
SEO & AEOread ✓
Securityread ✓
Trustread ✓
Reputationread ✓
The grading pass, illustratedWhat a full report looks like: sample report
Scroll · the exhibits below are working code, not screenshotsThe rubric is public: how we grade · the registry
01
We measure first, design to the findings, then grade it again.
Updated September 2026 · reviewed with every release
Houtos Labs is a web design studio that measures its own work. We design and build custom websites, e-commerce stores, web apps and redesigns. Every engagement is graded on the same public six-lens rubric before we start and after we ship, so you can see what changed for yourself instead of taking our word for it.
Founded in California, with 25+ years across design and technology. We work in-house from California and Oregon for clients anywhere. Every engagement starts with a conversation and a reading. The contract comes later.
"Evaluation-led" describes the order we work in. Before we design anything, we measure what exists (speed, accessibility, findability, security, trust), so the work aims at evidence. While we build, every decision traces back to a finding. When we ship, we grade it again and hand you the before-and-after in writing. If a number didn't move, you'll see that too.
The standard is public. The rubric is published, the sample reporting is open to anyone, and this page runs on the same system we ship to clients. That's why the demonstrations below work when you touch them. We don't guess. We grade.
Graded before & afterPublic rubricPlain-language reporting100% in-house
Built by hand, in this page
The portfolio you're standing in.
The type, the motion, the theming, the accessibility, the way it holds together on your phone: every technique on this page is the product. Inspect it, operate it, and grade it with our own instrument.
02
Seven working exhibits. Break them if you can.
Everything below runs on the system and standards we ship to clients. Each exhibit is built by hand in this page, without libraries, screenshots or video.
Exhibit 01 · RedesignLive demo
The redesign, under your thumb
Two versions of the same imaginary storefront. On the left, the site a lot of businesses live with: cramped, shouting, three things fighting to be clicked. On the right, the same content with discipline: one hierarchy, one action, room to breathe. Drag the divider and watch the readings move.
C · beforeA · after
Performance74
Accessibility68
SEO & AEO69
Trust67
What this demonstrates: hierarchy, restraint and one primary action, the moves that turn browsing into buying. The wireframes and readings are an illustrative model, not client work or a live scan.
Exhibit 02 · The Measurement EngineLive demo
Break a website. Watch it get caught.
This is how we work, shrunk to one panel. The site starts healthy, you introduce six common mistakes, and the instrument re-reads it instantly. Each fault is one we design out of every build, and one The Grader's rubric is built to catch.
Flip the faults. The lenses respond.
AComposite
95 / 100
Healthy. Every lens reads clean. This is the state a build should leave in.
Performance96
Accessibility94
SEO & AEO95
Security97
Trust93
Simplified demonstration model: five lenses, illustrative weights. The real rubric reads 26 metrics and labels each one Measured or Estimated: the method.
Exhibit 03 · TypographyLive demo
Type that knows its job
One sentence, three voices. Display type sells, editorial type explains and mono type measures. A page works when each one shows up in the right place.
We don't guess. We grade.
Satoshi 900 · display · −0.04em tracking
display
heading
body 16px
mono label
What this demonstrates: the Satoshi + IBM Plex Mono pairing this whole platform runs on, with scale, weight and tracking doing the hierarchy work.
Exhibit 04 · MotionLive demo
Motion with manners
Interface motion is there to orient you. This choreography moves only transform and opacity, the two properties browsers can animate without redoing layout, staggered 60ms apart.
What this demonstrates: entrance choreography tuned to be felt rather than noticed. Switch on reduced motion and this exhibit stays still on purpose. That's part of the craft too.
Exhibit 05 · ThemingLive demo
Two rooms, one system
Theming done properly is a token system. Every component reads named values, and the room decides what the names mean. Flip it.
Reservation
Same markup, same class names, same components. Only the token values changed.
Token-true
What this demonstrates: the same discipline behind this site's theme toggle (top right, and that one works too).
Exhibit 06 · ResponsiveLive demo
Designed at every width
Small screens deserve a layout of their own, designed on purpose. This frame reflows by container width: squeeze it and watch three columns become two, then one.
What this demonstrates: container-query reflow. Drag the frame's right edge on desktop, or use the width presets. The layout listens to its container instead of a stack of breakpoint hacks.
Exhibit 07 · AccessibilityLive demo
Craft you can feel with a keyboard
Accessibility is design quality, and you can test it right now. Press Tab and watch the focus land where it should. The contrast figures below are computed from this site's own color tokens.
ink / paper 15.7:1accent / paper 5.75:1button text 6.44:1stage ink 17.53:1
What this demonstrates: visible focus, contrast that passes and respect for reduced motion. It's the lens we grade every site on (the ADA/WCAG lens), practiced here first. All four ratios clear WCAG AA for their roles.
The exit gate
No build leaves without the reading.
Graded before · graded after · in writing · the same pass every exhibit above just made
If your project doesn't fit a room, general web, app and platform work runs through the build studio. Same standard, same gate.
04
Every stage of the loop, in writing
One loop on every engagement, held to the standard the exhibits above run on, and measured against the public six-lens rubric: Performance · Accessibility · SEO & AEO · Security · Trust · Reputation (how we grade).
Before · the baseline
Your site, read straight
We measure what you have today and put the reading in plain English: what's strong, what's costing you customers, and what's worth fixing first.
During · the build
Every decision tied to a signal
Layout, copy and code each trace back to a finding from the baseline, so the effort lands where it moves the score.
After · the exit gate
The difference, in writing
We grade the finished work again and hand you the before-and-after. If a number stayed flat, that's in there too.
1
The reading
We measure your current site (or your market) and walk you through what it says.
2
The blueprint
Scope, timeline and cost in writing, aimed at the findings and agreed before work begins.
3
Design & build
In-house design and engineering, with progress you can see and question.
4
The re-grade
The exit gate. Before-and-after readings side by side, in plain terms.
5
Ship & hold
Launch, then keep re-grading, so the quality holds after the ribbon is cut.
05
The proof is public
You won't find borrowed client logos or stock testimonials here. You'll find something more useful: the instrument we're judged by, and work labeled exactly as it is.
The standing rule: an estimate is never dressed up as a measurement, a concept is never dressed up as a shipped product, and we grade ourselves on the rubric we grade clients on. If you want that discipline applied to your website, we should talk.
Most agencies ask for trust. We hand you the instrument.
The rubric is public. So is the sample report. The Grader points anywhere, including at us. Judge the work the way we do: read it.
You've been holding the instrument this whole time.
Every exhibit you just operated is how we'll work on yours. Point it at your business.
Designed · measured · graded · shipped · yours next
06
Start your project
Tell us what you're building. We'll reply with a reading of it: what we'd measure first, what we'd fix or design, and a straight sense of scope. A person writes it.
Want a diagnostic before we talk? The Grader is where our readings start, and it's free to run. Prefer plain email? hello@houtoslabs.com works too.
Project intake
Open
07
Fair questions
Q1What do web design services include?
Web design services cover everything customer-facing about a website: layout and visual design, content structure and copy support, mobile responsiveness, accessibility, on-page SEO, and the build itself. At Houtos Labs they also include a measured baseline of your current site before work starts, and a second grade when it ships, so the change is on the record.
Q2How much do web design services cost at Houtos Labs?
Every project is scoped on its own, after a reading of your goals and your current site if you have one. Cost follows scope, and the scope is in writing before you commit to anything. We don't publish flat prices, because a five-page marketing site and an e-commerce platform are different animals. The first step is free: run your site through The Grader and you'll see what we'd be fixing and why.
Q3How long does a custom website take to design and build?
It depends on scope, and anyone who quotes a timeline before understanding the project is guessing. What we commit to is a written scope with a timeline attached before work begins, progress you can see while we build, and a second grade at the end that shows the result in measured terms. Simple sites move in weeks. Platforms take longer. The scope document says which one yours is.
Q4Do you redesign existing websites, or only build new ones?
Both. Redesigns are where evaluation-led design earns its keep. We grade the current site first, so the redesign starts from measured evidence of what's weak (speed, accessibility, findability, security, trust) instead of taste alone. When we finish, we grade it again and show you what moved, in the same terms.
Q5What makes Houtos Labs different from other web design companies?
The instrument. Most agencies ask you to judge them on a portfolio and a pitch. We publish the rubric we grade websites with, grade our own work with it before and after every build, and label every number as measured or estimated. You don't have to take our word for the quality of the work. You can read it. (Choosing between firms? Our plain-language guide on how to choose a web design company discloses up front that we are one.)
Q6Do I need to buy a report before commissioning design work?
No. The instant grade is free and always will be, and a design engagement starts with a conversation. No purchase required. The $50 Deep Report is a separate product for owners who want the full written audit. It isn't on sale yet, and buying it is never a requirement for working with the studio.
GRADED
Commission design you can hold to a number.
The intake takes two minutes, and the reply is a reading of your project. If all you do today is grade your current site, that's a good day's work too.
100% in-house development · Oregon & California, USA · 25+ years building production systems
development-led brief? try the build studio · for the curious: the hidden lab · questions go to hello@houtoslabs.com