The brand ArduMaker

Logos, colors, typography and usage rules, exactly as they are in the product. For anyone who writes, designs, films or builds about ArduMaker.

What ArduMaker is

Infrastructure that people and AI agents can run: servers with real root, deploys, domains, email and projects, from a simple panel or over MCP.

Personality

Practical: the essentials make sense at a glance.
Honest: it says what it does, what it doesn't, and when another option fits better.
Technical without being cold: root, SSH and logs, explained for anyone.

Tone

Direct and in the second person: "your server", "create your account".
Short sentences, concrete verbs, no filler adjectives.
Numbers and limits are stated: price, location, what is missing.

Visual style

Clean surfaces, plenty of room and a single blue accent.
The blue, cyan and green gradient only on what should stand out.
Short, purposeful motion: nothing moves just to decorate.

Logos

The official files the site uses today. Shown on light and dark backgrounds, at their real size.

Symbol: The main logo: a white disc with the four-color ring and the infinity sign. For avatars, the site bar and documents. (PNG · 512 × 512 px · Light, Dark) Download

Favicon: The browser tab icon. (ICO · 256 × 256 px · Light, Dark) Download

**Share image (Spanish)**: The preview on WhatsApp, LinkedIn, X and search engines for pages in Spanish: the logo, the home page title and ardumaker.com on the dark background. (JPG · 1200 × 630 px · Dark) Download

**Share image (English)**: The same preview for pages in English. (JPG · 1200 × 630 px · Dark) Download

**Share image (Portuguese)**: The same preview for pages in Portuguese. (JPG · 1200 × 630 px · Dark) Download

Pending variants

They don't exist as official files yet. They are not drawn by hand or traced from the PNG: once ready, they are published here.

Vector symbol (SVG): The scalable original for print and large sizes.
Horizontal logo: Symbol and name on one line, for headers and signatures.
Vertical logo: Symbol on top and name below, for square spaces.
Monochrome: A single ink, for stamps, engraving and colored backgrounds.
Negative: For dark backgrounds without the white disc.

Symbol colors

Measured from the official PNG. They belong to the logo, not the interface: not matching the tokens is intentional, and they aren't used for buttons or text.

Yellow: #FFC837 rgb(255, 200, 55)
Red: #FF0546 rgb(255, 5, 70)
Green: #41B93C rgb(65, 185, 60)
Blue: #00A8EF rgb(0, 168, 239)
Gray: #C3C3C3 rgb(195, 195, 195)
White: #FFFFFF rgb(255, 255, 255)

Colors

The interface tokens, with their value in the light and the dark theme. In code, always use the token, never the raw value.

Brand

Token	Tailwind class	Light	Dark
`--brand`	`brand`	`#006EFF` `rgb(0, 110, 255)` `hsl(214 100% 50%)`	`#006EFF` `rgb(0, 110, 255)` `hsl(214 100% 50%)`
`--brand-foreground`	`brand-foreground`	`#FFFFFF` `rgb(255, 255, 255)` `hsl(0 0% 100%)`	`#FFFFFF` `rgb(255, 255, 255)` `hsl(0 0% 100%)`
`--primary`	`primary`	`#006EFF` `rgb(0, 110, 255)` `hsl(214 100% 50%)`	`#2986FF` `rgb(41, 134, 255)` `hsl(214 100% 58%)`
`--primary-glow`		`#338BFF` `rgb(51, 139, 255)` `hsl(214 100% 60%)`	`#66A8FF` `rgb(102, 168, 255)` `hsl(214 100% 70%)`
`--info`	`info`	`#006EFF` `rgb(0, 110, 255)` `hsl(214 100% 50%)`	`#4D9AFF` `rgb(77, 154, 255)` `hsl(214 100% 65%)`
`--info-strong`	`info-strong`	`#2463EB` `rgb(36, 99, 235)` `hsl(221 83% 53%)`	`#4E81EF` `rgb(78, 129, 239)` `hsl(221 83% 62%)`

Surfaces and text

Token	Tailwind class	Light	Dark
`--background`	`background`	`#FFFFFF` `rgb(255, 255, 255)` `hsl(0 0% 100%)`	`#151619` `rgb(21, 22, 25)` `hsl(220 8% 9%)`
`--foreground`	`foreground`	`#020817` `rgb(2, 8, 23)` `hsl(222.2 84% 4.9%)`	`#F5F5F5` `rgb(245, 245, 245)` `hsl(0 0% 96%)`
`--card`	`card`	`#FFFFFF` `rgb(255, 255, 255)` `hsl(0 0% 100%)`	`#212326` `rgb(33, 35, 38)` `hsl(220 7% 14%)`
`--popover`	`popover`	`#FFFFFF` `rgb(255, 255, 255)` `hsl(0 0% 100%)`	`#26282C` `rgb(38, 40, 44)` `hsl(220 7% 16%)`
`--secondary`	`secondary`	`#F5F4F5` `rgb(245, 244, 245)` `hsl(260 4% 96%)`	`#2D2F34` `rgb(45, 47, 52)` `hsl(220 7% 19%)`
`--muted`	`muted`	`#EFEFF0` `rgb(239, 239, 240)` `hsl(260 4% 94%)`	`#1C1E21` `rgb(28, 30, 33)` `hsl(220 7% 12%)`
`--muted-foreground`	`muted-foreground`	`#65758B` `rgb(101, 117, 139)` `hsl(215 16% 47%)`	`#AFB1B6` `rgb(175, 177, 182)` `hsl(220 5% 70%)`
`--accent`	`accent`	`#E1E7EF` `rgb(225, 231, 239)` `hsl(214 32% 91%)`	`#34373C` `rgb(52, 55, 60)` `hsl(220 7% 22%)`
`--border`	`border`	`#E2E8F0` `rgb(226, 232, 240)` `hsl(214.3 31.8% 91.4%)`	`#4B4F58` `rgb(75, 79, 88)` `hsl(220 8% 32%)`
`--input`	`input`	`#E2E8F0` `rgb(226, 232, 240)` `hsl(214.3 31.8% 91.4%)`	`#42464C` `rgb(66, 70, 76)` `hsl(220 7% 28%)`
`--ring`	`ring`	`#020817` `rgb(2, 8, 23)` `hsl(222.2 84% 4.9%)`	`#2986FF` `rgb(41, 134, 255)` `hsl(214 100% 58%)`

States

Token	Tailwind class	Light	Dark
`--success`	`success`	`#21C45D` `rgb(33, 196, 93)` `hsl(142 71% 45%)`	`#2DD269` `rgb(45, 210, 105)` `hsl(142 65% 50%)`
`--success-strong`	`success-strong`	`#16A249` `rgb(22, 162, 73)` `hsl(142 76% 36%)`	`#25D064` `rgb(37, 208, 100)` `hsl(142 70% 48%)`
`--warning`	`warning`	`#F59F0A` `rgb(245, 159, 10)` `hsl(38 92% 50%)`	`#F7B23B` `rgb(247, 178, 59)` `hsl(38 92% 60%)`
`--warning-strong`	`warning-strong`	`#DB7706` `rgb(219, 119, 6)` `hsl(32 95% 44%)`	`#F98C10` `rgb(249, 140, 16)` `hsl(32 95% 52%)`
`--destructive`	`destructive`	`#EF4444` `rgb(239, 68, 68)` `hsl(0 84.2% 60.2%)`	`#F26363` `rgb(242, 99, 99)` `hsl(0 85% 67%)`
`--destructive-strong`	`destructive-strong`	`#DC2828` `rgb(220, 40, 40)` `hsl(0 72% 51%)`	`#F47B7B` `rgb(244, 123, 123)` `hsl(0 85% 72%)`

Services

Token	Tailwind class	Light	Dark
`--service-cloud`	`service-cloud`	`#3C83F6` `rgb(60, 131, 246)` `hsl(217 91% 60%)`	`#639CF8` `rgb(99, 156, 248)` `hsl(217 91% 68%)`
`--service-whatsapp`	`service-whatsapp`	`#21C45D` `rgb(33, 196, 93)` `hsl(142 71% 45%)`	`#35D46F` `rgb(53, 212, 111)` `hsl(142 65% 52%)`
`--service-router`	`service-router`	`#895AF6` `rgb(137, 90, 246)` `hsl(258 90% 66%)`	`#A581F8` `rgb(165, 129, 248)` `hsl(258 90% 74%)`
`--service-email`	`service-email`	`#14B8A5` `rgb(20, 184, 165)` `hsl(173 80% 40%)`	`#25D0BC` `rgb(37, 208, 188)` `hsl(173 70% 48%)`
`--service-search`	`service-search`	`#EC4699` `rgb(236, 70, 153)` `hsl(330 81% 60%)`	`#EF6BAD` `rgb(239, 107, 173)` `hsl(330 81% 68%)`
`--service-domains`	`service-domains`	`#F59F0A` `rgb(245, 159, 10)` `hsl(38 92% 50%)`	`#F6AE31` `rgb(246, 174, 49)` `hsl(38 92% 58%)`
`--service-mcp`	`service-mcp`	`#6467F2` `rgb(100, 103, 242)` `hsl(239 84% 67%)`	`#7C7EF4` `rgb(124, 126, 244)` `hsl(239 84% 72%)`

Footer and terminal

Token	Tailwind class	Light	Dark
`--footer`	`footer`	`#1A212D` `rgb(26, 33, 45)` `hsl(220 26% 14%)`	`#0E0F11` `rgb(14, 15, 17)` `hsl(220 10% 6%)`
`--footer-foreground`	`footer-foreground`	`#FFFFFF` `rgb(255, 255, 255)` `hsl(0 0% 100%)`	`#F5F5F5` `rgb(245, 245, 245)` `hsl(0 0% 96%)`
`--terminal`	`terminal`	`#09090B` `rgb(9, 9, 11)` `hsl(240 10% 4%)`	`#09090B` `rgb(9, 9, 11)` `hsl(240 10% 4%)`
`--terminal-foreground`	`terminal-foreground`	`#E0E0E0` `rgb(224, 224, 224)` `hsl(0 0% 88%)`	`#E0E0E0` `rgb(224, 224, 224)` `hsl(0 0% 88%)`
`--terminal-accent`	`terminal-accent`	`#21C45D` `rgb(33, 196, 93)` `hsl(142 71% 45%)`	`#21C45D` `rgb(33, 196, 93)` `hsl(142 71% 45%)`

Typography

ArduMaker uses each device's system typeface: it reads crisply, loads instantly and opens no third-party connections.

System sans: All interface text. ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" — SF Pro, Segoe UI, Roboto
System monospace: Code, commands, paths, tokens and values. ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace — SF Mono, Consolas

No font files are distributed: each typeface belongs to its maker and is downloaded from its official site.

Hierarchy

Servers for agents (h1, 44 / 48 / 72 px) text-[2.75rem] font-bold leading-[1.05] tracking-tight sm:text-5xl md:text-7xl
Everything in one panel (h2, 30 / 36 px) text-3xl font-bold tracking-tight sm:text-4xl
Deploy from GitHub (h3, 18 px) text-lg font-semibold
Real root, NVMe and a domain with HTTPS. (p, 18 px) text-lg text-muted-foreground
Connect a repository and every push updates the app. (p, 16 px) text-base
Last deploy 2 minutes ago. (p, 14 px) text-sm text-muted-foreground
Free (span, 12 px) text-xs font-semibold
claude mcp add --transport http ardumaker (code, 14 px) font-mono text-sm

Components

The real interface pieces, the same ones the panel uses. Go ahead and try them.

Radii

rounded-sm: 4 px
rounded-md: 6 px
rounded-lg: 8 px
rounded-xl: 12 px
rounded-2xl: 16 px
rounded-full: 9999 px

Shadows

shadow-sm: Cards at rest.
shadow-md: What floats over the page.
shadow-lg: The hero's main action and the logo in the bar.

Motion

Two curves and short durations. Only transform, opacity and clip-path are animated, and with "reduce motion" there is no animation.

cubic-bezier(0.23, 1, 0.32, 1): Entrances and hover: starts fast and eases out.
cubic-bezier(0.77, 0, 0.175, 1): What crosses the screen: speeds up and slows down.
Color change: 150 ms
Press, rotation and menus: 200 ms
View change: 180 ms
Page change: 220 ms
Staggered list: 320 ms
Reveal on scroll: 400 ms
Window: open: 520 ms
Window: close: 440 ms

Correct and incorrect use

With the real logo. If a use case is not here, the rule is simple: the symbol is used whole, sharp and unchanged.

Clear space: Keep at least a quarter of its diameter free around the symbol. Minimum on-screen size: 24 px.
Contrast and backgrounds: The white disc separates it from any flat background, light or dark. On busy photos, place it on a flat plate.
The name: One word, with capital A and M. It isn't translated or split. “ArduMaker Developer” is a valid synonym for the same brand. (Don't: Ardumaker · ARDUMAKER · Ardu Maker · ardu-maker)

Alterations to avoid

Stretching or squashing it
Rotating it
Changing its colors
Adding shadows or effects
Cropping the disc
Placing it on a busy background

Started audiovisual identity

Started teaches ArduMaker with short videos. These are the shared guidelines; each video builds its own script.

Teach with a real problem and its solution, not with ads. There is no single script: there is an order that helps.

Format: 9:16 · 1080 × 1920 px
Length: Up to 60 s
File: MP4 · H.264 + AAC
Subtitles: WebVTT
Thumbnail: JPG 1080 × 1920

Look: Elegant and technological: the theme's dark background, real product screens and blue as the only accent.
Typography: System sans in bold with tight tracking for titles; monospace for commands and code.
Subtitles: Always, in the video's language. Semibold, two lines at most, on a dark plate and inside the safe zone.
Motion: The same curves as the interface. Clean cuts, a gentle zoom on what matters; no template transitions.
Music: In the background and low, licensed for use. It never covers the voice.
Narration: A natural human voice, like explaining something to a colleague. No robotic voice, no announcer tone.
Colors: The tokens on this page. The blue, cyan and green gradient only for the word that should stand out.
Thumbnails: A real screenshot and the problem in a few words. No red arrows or surprised faces.
Logo: The whole symbol, small, at the end. It is not animated, not distorted and not placed over the product screen.
Educational ending: What was learned in one sentence and where to continue: the topic's documentation at /docs.

An order that helps

The problem, in one sentence.
The solution, on the real screen.
The visible result.
The takeaway and where to continue.

Downloads

Everything available today, one file at a time. The full guide also comes as JSON and Markdown.

Resources for AI agents

An agent putting together a deck, a video or a page about ArduMaker can read the whole brand from these files. They come from the same source as this page.

https://ardumaker.com/branding/marca.json: Tokens, logos with their URL, usage rules and audiovisual guidelines, in all three languages.
https://ardumaker.com/en/branding/marca.md: The same guide in Markdown, ready to paste into a context.
https://ardumaker.com/llms.txt: The site index for agents.