Design System | s17 Labs

Brand

The mark is a solid accent square — the .cube — set in Aldrich next to the s17 Labs. wordmark (period included). It appears in the homepage hero, every tool header, and the footer, always at 0.82em of the surrounding type size.

s17 Labs.

brand assets — public/

favicon — favicon.ico

social card — link_preview.png · 1280×640

display font — /fonts/aldrich-latin.woff2

icon — s17labs-icon-large.png

icon — s17labs-icon-large-transparent.png

lockup — s17labs-logo-dark.png

lockup — s17labs-logo-dark-transparent.png

Voice: dark-first, minimal, no gradients on chrome. Everything ships self-hosted — fonts, icon data, styles — except Icon Maker emoji SVGs, which load from a CDN at runtime.

Foundations

Colors

Core tokens from global.css, then the tool palette from tool.css.

--primary#0e0e10Page background (global.css)

--accent#ff4136Brand red — actions, active states, logo cube

--accent-hover#e8382eAccent hover (Download All, ready buttons)

--primary-text#f1f1f1Headings, body copy, values

--secondary-text#868686Labels, hints, placeholders, meta

--btn-bg#1a1a1cDefault button fill

--accent-hover#e8382eAccent hover (Download All, ready buttons)

--surface-2#1a1a1cInputs, wells, option buttons

--surface-3#222226Slider tracks, thumbnails

--borderrgba(255, 255, 255, 0.07)Hairline borders everywhere

--accent-dimrgba(255, 65, 54, 0.12)Active option tint, hover wash

--accent-softrgba(255, 65, 54, 0.4)Hover borders

--accent-focusrgba(255, 65, 54, 0.5)Focus borders

--android#3ddc84Android export accents, success

--android-dimrgba(61, 220, 132, 0.12)Android button fill

--tile-bgrgba(255, 255, 255, 0.05)Overflow tiles

--overlay-dimrgba(14, 14, 16, 0.72)Image overflow dim, dialogs

Foundations

Typography

Three families, each with one job. Aldrich is the brand voice (self-hosted woff2, latin subset, preloaded); body copy is Verdana; anything machine-read — inputs, hex codes, badges, labels-as-data — is Courier New monospace.

Aldrich — display · headings, panel titles, badges

Build lightly. Ship fast. Aa 0123456789

Verdana — text · body, buttons, descriptions

Your data never leaves your browser. Tools run entirely on-device — fast, private, and free.

Courier New — data · inputs, hex, meta, code

#ff4136 → #ffffff @ 90° · 512×512 · ic_launcher.xml

Usage	Spec
Tool title	Aldrich 1.8rem (1.5rem under 580px), cube + 0.25em gap
Panel title	Aldrich 0.7rem, uppercase, 0.14em tracking, secondary text
Form label	Verdana 0.74rem, uppercase, 0.09em tracking, secondary text
Body / tagline	Verdana 0.95–1rem, 1.6 line-height, 520px measure
Inputs / meta	Courier New 0.88rem values · 0.65–0.75rem badges and hints

Icon Maker ships 13 typefaces for icon text (first three are system stacks, the rest bundled woff2 under SIL OFL): System Sans · System Serif · System Mono · Alien Block · Anton · Archivo Black · Bebas Neue · Lobster · Montserrat · Oswald · Playfair Display · Roboto · JetBrains Mono.

Foundations

Iconography

Product glyphs come from Font Awesome (-solid/regular/brands via npm) through a single registry — src/icons.ts. UI code renders them with the <Icon name> component (Astro) or iconSvg(name) (vanilla TS). Every bundled glyph:

github

toolbox

arrow-right

arrow-left

copy

check

icons

image

bezier-curve

font

qrcode

plus

wand-magic-sparkles

download

file-zipper

circle-notch

cloud-arrow-up

scissors

android

x

discord

globe

bootstrap

motion — .spin · s17-spin 2s linear infinite

Foundations

Spacing · Radius · Borders

One radius token (--radius: 4px) with three functional exceptions. Borders are hairlines — 1px solid var(--border) — or the 2px dashed drop-zone. Motion is a single easing (--t: 0.25s ease).

--radius · 4px

thumbs · 3px

pills/tracks · 99px

dots · 50%

Token	Spec
.page / .tool-top	680px default (ToolLayout); most tools override 640px, Icon Maker 900px · 20px side padding
Icon Maker page	900px max (ToolLayout maxWidth)
.tool-desc	520px centered measure
.panel	1.4rem padding, 1rem bottom margin
breakpoints	580px (tools, footer) · 680px (icon-maker only)

Components

Navigation

Tool cards and lowercase Courier tags carry browsing. Cards lift with an accent wash on hover — position never shifts. The .back-link (arrow + section name, top-left of each header) is how every page gets home.

.tool-tag ×3

iconsandroiddesign

.link · .link-primary · .link-secondary · .link-ghost

Normal link · Primary link · Secondary link · Ghost link

.link-icon — composes with any flavor

Normal + icon Primary + arrow Secondary + icon Ghost + icon

.tool-item icon variants — glyph · artwork · emoji

.tool-item — links /tools/<slug>/

Icon Maker

Generate and export custom icons from Font Awesome, Bootstrap Icons, custom text, Noto Emoji, or Twemoji. Includes full Android launcher package export.

iconsandroiddesign

View all repositories

Components

Buttons

One primary button that fills its container and turns accent when it has something to do (.ready), plus a family of small controls. All transitions run on var(--t).

.btn · .btn.ready · .btn:disabled · .btn-fmt

.btn-sm · .choice-btn ×3 · .btn-row · .dz-change · .result-dl

.dl-all-btn · .more-tools-btn · .android-btn (icon-maker)

View More Tools

Components

Forms

Fields stack label → control → hint with a 0.45rem rhythm. Text inputs speak Courier; selects speak Verdana with a CSS chevron. Focus is never color-shift alone — every control also draws the accent :focus-visible ring.

input · number · textarea · select · range

Text input

Number

Textarea

Your data never leaves your browser.

Select

Range — 70%

Hint

Small hint under a field.

.color-row · .color-field · .divider

Foreground

Background

Output

.checkbox-row · .drop-zone (icon-maker patterns)

Include Material You / Themed Icons Adds <monochrome> layer for Android 13+

Drop images here or click to browse

PNG, JPG, SVG, WebP — processed on-device

Components

Feedback

Messages reserve their line (min-height: 1.1em) so showing one never shifts layout. Errors speak accent red, success speaks Android green. Long operations use the 3px progress track; blocking choices use the modal.

.status-msg.error / .success · .zip-progress-* · .spin

Icon not found — check the spelling.

Done — 11 images + XMLs.

mipmap-xxhdpi/ic_launcher.png 144px…

.results-list · .result-item

icon-512x512.png

512 × 51284 KB

.modal-* — blocking choices (live demo)

Guidelines

Contributing

New tool pages must use ToolLayout plus the tool.css tokens above — no bespoke styling. Anything used twice gets promoted from the tool stylesheet into tool.css. A new tool touches exactly three places: src/pages/tools/<slug>.astro, src/scripts/tools/<slug>.ts, and the registry in src/data/tools.ts. Conventions, commits, and PR rules live in AGENTS.md.

Rule	Spec
Client-side only	No server endpoints, no analytics — data never leaves the browser
Typecheck	Client TS is checked by astro check — no Node-only APIs in tools
Commit	type(scope): short imperative summary, atomic, no AI trailers
CSS order	Page stylesheets load before tool.css in prod — beat shared rules with specificity, never order
Headers	Back-link label collapses by measurement (BackLinkFit + back-link.ts) — flash-free, no breakpoint guessing