name: AlexandrAI Tools Design System
description: Editorial flat design system for single-purpose browser utilities.
colors:
ink: "#18181b"
paper: "#fbfaf9"
surface: "#ffffff"
muted: "#52525b"
faint: "#71717a"
line: "#e5e4e2"
line-strong: "#d4d4d8"
accent: "#0f766e"
accent-strong: "#115e59"
accent-tint: "#f0f7f5"
danger: "#dc2626"
ok: "#15803d"
ring: "#0f766e"
typography:
body: { fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif", fontSize: 16px, fontWeight: 400, lineHeight: 1.6, letterSpacing: 0 }
h1: { fontFamily: "Inter, system-ui, sans-serif", fontSize: "1.7rem to 2.25rem", fontWeight: 650, lineHeight: 1.2, letterSpacing: "-0.01em" }
h2: { fontFamily: "Inter, system-ui, sans-serif", fontSize: "1.3125rem", fontWeight: 650, lineHeight: 1.2, letterSpacing: "-0.01em" }
h3: { fontFamily: "Inter, system-ui, sans-serif", fontSize: "1.0625rem", fontWeight: 650, lineHeight: 1.2, letterSpacing: "-0.01em" }
mono: { fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace", fontSize: "0.9375rem", fontWeight: 400, lineHeight: 1.55, letterSpacing: 0 }
spacing:
s1: 4px
s2: 8px
s3: 12px
s4: 16px
s5: 24px
s6: 32px
s7: 48px
s8: 64px
rounded:
sm: 3px
md: 6px
full: 999px
components:
wrap: { maxWidth: 1120px, paddingInline: 24px }
readingMeasure: { maxWidth: 700px }
button: { minHeight: 38px, padding: "8px 14px", radius: 6px, border: "1px solid {colors.line-strong}" }
input: { padding: "10px 12px", radius: 6px, border: "1px solid {colors.line-strong}" }
textArea: { minHeight: 220px, fontFamily: "{typography.mono.fontFamily}" }
segmentedControl: { radius: 6px, activeBackground: "{colors.accent-tint}" }
toolGridCard: { padding: "16px 12px", borderBottom: "1px solid {colors.line}" }Overview
AlexandrAI Tools uses a deliberately flat editorial interface for a growing catalog of no-signup browser utilities. The system is optimized for fast scanning, direct manipulation, and trust: a quiet ink-on-paper surface, one teal action color, clear form affordances, and little ornamental styling.
The design source is the shared stylesheet under src/styles/global.css. Individual tools are expected to reuse global classes such as .wrap, .tool-head, .io-grid, .field, .toolbar, .btn, .seg, .stats, .related, and .toolgrid instead of defining local visual systems.
Colors
The palette is mostly monochrome. paper is the page background, surface is the form and output background, ink carries primary reading text, and muted or faint carries labels, breadcrumbs, helper text, footer copy, and secondary navigation.
accent is reserved for primary actions, links, current segmented-control states, category highlights, and focused inputs. accent-tint is a pale background for active or hovered utility-list states. danger and ok are semantic states for validation and success notes, not brand colors.
Typography
Use Inter as the primary font for all UI and prose. Use JetBrains Mono only for code-like inputs, transformed output, counters that need stable spacing, and generated text blocks.
Headings are compact and functional. The site has no marketing-style oversized section titles inside tool surfaces. Labels use small, heavy text so forms remain scannable. Numeric stats use tabular figures.
Layout
The standard content width is 1120px with side padding. Long explanatory prose should cap at 700px, while tools can use the full content width.
Tool pages start with a short head area, then a single-column input/output grid that becomes a split two-column grid at wider screens. Toolbars wrap rather than overflow. The hub page uses category blocks and list-like tool cards with borders only where the list needs structure.
Elevation & Depth
Do not use shadows, gradients, blurred panels, or glass effects. Depth is expressed through paper, surface, line, and spacing. A tool output area is framed with a thin border, not raised.
Hover states should change border color, background tint, or text color. Active button press may use a tiny scale transform, but motion should be subtle and disabled for reduced-motion users.
Shapes
The default radius is 6px. Use 3px for focus-ring clipping and small details, and 999px only for trust chips or pill-like compact metadata. Avoid large card radii on this product; the visual language should stay utilitarian and editorial.
Components
Header navigation is a simple horizontal bar with a brand mark, tool links, a language menu, and an accent home link. Tool pages use .field labels, .input, textarea, .out, .toolbar, .btn, and .seg.
Primary action buttons use the accent background with white text. Secondary buttons are white with a strong line. Related tools and hub tool cards are border-separated list items, not floating cards.
Ad slots reserve space without implying a loaded ad. The placeholder should be quiet and should never shift adjacent content when a slot becomes active.
Do's and Don'ts
Do reuse the global classes for each new tool page.
Do keep tool logic visually close to its input, output, and action toolbar.
Do keep labels, validation messages, and helper notes concise.
Don't introduce per-tool palettes, gradients, decorative shadows, or heavy card shells.
Don't let code blocks wrap in a way that changes the meaning of code-like output.
Don't use the accent color for large background fields; it should remain an action and focus signal.