schematik.io

AI Hardware IDE for Arduino, ESP32, and Pico | Schematiksaved 1h ago · captured 1h ago

Eleven details, eleven pinned.

View as Markdown ↗

Colors8 colors · ground #EEEBE2

ground#eeebe2·74.53%#c8e86a·10.01%#e6cbbb·4.30%accent#fb6f3f·3.92%#4ea4fb·0.53%#2b323a·0.51%#ecc607·0.42%#0a0808·0.39%

Sized by coverage · click to copy.

Typography1 family · 4 styles · universalSans

Build hardware with AI BUILD HARDWARE WITH AI

universalSans · 14/20 · 400 · normal

Start from a template

universalSans · 24/32 · 400 · normal

Body

Go from idea to working prototype in minutes, not weekends.

universalSans · 17/24 · 400 · normal

Small

Arduino

universalSans · 12/16 · 400 · 0.12px

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsTry now1 style

Try now

primary · fill #ffdf20 · label #1c1917 · radius 6px · border 1px · padding 0px 10px · height 32px · type 14px / 400

Shape5 radii · 94 uses

8px38 uses · 40%

12px22 uses · 23%

9999px16 uses · 17%

9px11 uses · 12%

6px7 uses · 7%

AnalysisAn AI hardware IDE dressed like a maker's workbench: a warm off-white (#eeebe2) page laid over faint engineering graph paper, with the headline built from three mismatched label strips (sky blue #4…

An AI hardware IDE dressed like a maker's workbench: a warm off-white (#eeebe2) page laid over faint engineering graph paper, with the headline built from three mismatched label strips (sky blue #4ea4fb, lime #c8e86a, orange #fb6f3f), each set in a different chunky display face like labeler tape slapped on a project box. Everything around that loud moment is quiet. Nav, body and section headings run in a single regular-weight grotesk (universalSans, 400 throughout, with no bold anywhere), hairline-bordered cards sit flat on the cream, and the one big interactive object, a white prompt box, floats on a soft orange glow. Below the fold the color comes in solid bands (a lime template carousel, then a deep circuit-board green footer), and the label-tape idea recurs as small section stickers ("IN THE WILD", "DESCRIBE"), so the toy energy runs through the whole page without taking it over.

Style recipeBuild the page on a warm paper ground (#eeebe2 to #f0ede4) with near-black ink (#0a0808, secondary text in a warm gray around #6b665e).

Build the page on a warm paper ground (#eeebe2 to #f0ede4) with near-black ink (#0a0808, secondary text in a warm gray around #6b665e). Use one regular-weight grotesk for everything: 60/60 display at weight 400 with normal tracking, 24/32 section titles, 17/24 body, 14/20 UI and 12/16 chips with +0.01em tracking. Never bold. Personality comes from a second, chunky condensed or stencil display face used only on label strips: words set in caps on solid color blocks (sky #4ea4fb, lime #c8e86a, orange #fb6f3f, yellow #ecc607), with tight padding, no radius and a staggered offset, like labeler tape. Use them for the hero headline, small section eyebrows and step labels, and nowhere else. Put a faint 1px graph-paper grid (~12px cells, ~8% ink) under the hero only. Keep surfaces flat: hairline 1px borders in a slightly darker cream, 8px radius for cards and inputs, 12px for media, pills (9999px) for round icon controls, and 6px for buttons. The primary CTA is a compact 32px-tall #ffdf20 button with #1c1917 text, a 1px darker-yellow border and a trailing arrow. Give depth to the single key object only, as a wide soft colored glow (orange-peach, about 60px blur) instead of a gray drop shadow. Draw decorative shapes as hardware: PCB outlines with mounting holes, screw dots in card corners, trace-style outline lettering. Change color by section in full-bleed solid bands (lime, then a deep PCB green around #1f4a3e for the footer) and keep the orange for announcements, arrows and send buttons. Yellow is the fallback accent if orange is already taken.

Details11 worth noting

schematik.io — the captured page — Landing, 1440 × 900 · captured Oct 27, 2026

1Label-tape stacked headline
Headline as stacked label tape: each word gets its own solid color block, its own display typeface and a staggered offset, so the H1 reads like stickers rather than type.
2Graph-paper hero background
Graph-paper hero ground: a 1px gray grid (~12px cells) on the cream, limited to the hero band, which marks the product as engineering without a single illustration.
3Capsule arrow glyph
A black stadium capsule with an orange bent arrow wedged between headline and prompt. It works as a component-like glyph that also says "scroll here."
4Glowing prompt-box hero CTA
The prompt box as the hero CTA: a plain white 8px-radius textarea with a muted placeholder, a pale-yellow send square, and a wide orange-peach blur glow beneath it in place of a drop shadow.
5PCB-shaped pointer arrow
A yellow PCB-shaped arrow, with mounting holes and all, points at the input, so the decoration is drawn as hardware.
6Index card with chip tab
A flat context card with a tab of platform chips (Arduino · ESP32 · Raspberry Pi Pico) hanging off its bottom edge, both hairline-bordered, like an index card with a label strip.
7Hairline-divided proof strip
A one-line proof strip under the hero: user count, follower count and a WIRED wordmark with a pull quote, split by vertical hairlines, quieter than a logo wall.
8Two-part step label chips
Paired step labels: a small gray "Step 1" chip butts against a condensed all-caps verb on a tinted block, which makes a numbered process feel like part labels.
9Screw-dot testimonial panels
Testimonial cards as dark device panels: tall photo cards with corner screw dots and thin inset frame rules, plus the source icon (X, Discord) top right.
10Trace-outline footer wordmark
The footer wordmark is drawn as a lime single-line outline on PCB-green, like a copper trace, with a breadboard illustration plugged into the top edge.
11Label-tape footer sign-off
A tagline in the footer corner set as three staggered lime label-tape strips, the hero's signature move repeated at the bottom.