# schematik.io

Source: https://www.schematik.io/
Captured: 2026-10-27
Tags: saas, landing, light, both, playful, retro-warm, minimal, playful, technical, friendly, optimistic, energetic
Colors: #eeebe2, #c8e86a, #e6cbbb, #fb6f3f, #4ea4fb, #2b323a, #ecc607, #0a0808
Type (h1): universalSans · 14px/20px · 400 — "Build hardware with AI BUILD HARDWARE WITH AI"
Type (h2): universalSans · 24px/32px · 400 — "Start from a template"
Type (body): universalSans · 17px/24px · 400 — "Go from idea to working prototype in minutes, not weekends."
Type (small): universalSans · 12px/16px · 400 · tracking 0.12px — "Arduino"
Type (button): universalSans · 14px/20px · 400 — "Try now"
Button: "Try now" — fill #ffdf20, text #1c1917, radius 6px, border 1px, padding 0px 10px, height 32px, type 14px/400
Radii: 8px (38), 12px (22), 9999px (16), 9px (11), 6px (7)

## Images

- Hero (desktop): https://media.lvly.design/library/schematik-io/hero.webp?v=7dbcc8ff
- Page crop (mid-1): https://media.lvly.design/library/schematik-io/mid-1.webp?v=e436a745
- Page crop (mid-2): https://media.lvly.design/library/schematik-io/mid-2.webp?v=1acd9272
- Hero (mobile): https://media.lvly.design/library/schematik-io/mobile-hero.webp?v=ab9bf09a
- Full page (desktop): https://media.lvly.design/library/schematik-io/full.jpg?v=92e8420b
- Full page (mobile): https://media.lvly.design/library/schematik-io/mobile-full.jpg?v=fcd0f728
- Clip preview (mp4): https://media.lvly.design/library/schematik-io/video-fehls6.preview.mp4?v=a420e77d

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.

## Steal-worthy details

- 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.
- 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.
- 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."
- 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.
- A yellow PCB-shaped arrow, with mounting holes and all, points at the input, so the decoration is drawn as hardware.
- 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.
- 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.
- 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.
- 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.
- 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.
- A tagline in the footer corner set as three staggered lime label-tape strips, the hero's signature move repeated at the bottom.

## Style recipe

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.