askimut
Atproto AMA app
Star
Fork
Watch
askimut DESIGN.md
8.0 kB · 213 lines
Markdown
at main

name: Askimut description: A precise, public Q&A space on AT Protocol. colors: bg: "#fafaf9" surface: "#ffffff" surface-hover: "#f5f5f4" border: "#e7e5e4" primary: "#2c5ea8" primary-hover: "#1e4a85" text: "#1c1917" text-muted: "#78716c" success: "#15803d" danger: "#c2412c" typography: display: fontFamily: "Source Serif 4, Georgia, serif" fontSize: "clamp(2rem, 5vw, 3rem)" fontWeight: 600 lineHeight: 1.1 letterSpacing: "-0.02em" body: fontFamily: "IBM Plex Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif" fontSize: "1rem" fontWeight: 400 lineHeight: 1.55 label: fontFamily: "IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace" fontSize: "0.75rem" fontWeight: 500 lineHeight: 1.3 letterSpacing: "0.04em" textTransform: "uppercase" rounded: sm: "4px" md: "6px" lg: "8px" spacing: sm: "0.5rem" md: "1rem" lg: "1.5rem" components: button-primary: backgroundColor: "{colors.primary}" textColor: "#ffffff" rounded: "{rounded.md}" padding: "0.55rem 1rem" button-primary-hover: backgroundColor: "{colors.primary-hover}" button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.text}" rounded: "{rounded.md}" padding: "0.55rem 1rem" input: backgroundColor: "{colors.bg}" textColor: "{colors.text}" rounded: "{rounded.md}" padding: "0.65rem 0.85rem" #

Design System: Askimut #

Overview #

Creative North Star: "The Open Forum Instrument"

Askimut is a public ledger for questions and answers. The interface should feel like a clean, well-lit forum where every entry is indexed, attributable, and easy to read. The name carries "azimuth" — a measured bearing — and the visual world carries that precision: everything aligns to a grid, type is tuned for authority, and the accent color is a navigational blue, not a neon signal.

This is an Operate surface. People come to ask, answer, and manage a queue. Expression must never slow the task. The aesthetic job is to make the archive feel trustworthy and the inbox feel orderly.

Key Characteristics:

  • Light, paper-forward environment with warm neutrals.
  • One measured accent (azimuth blue) used for action and orientation.
  • Editorial serif for profile identity and quoted questions; workhorse sans for UI; mono for metadata.
  • Flat, hairline borders define regions; no decorative shadows.
  • Generous whitespace and a single-column reading measure.

Colors #

The palette is built for daylight reading and precise hierarchy: warm paper, near-black text, and a single desaturated blue for primary action.

Primary #

  • Azimuth Blue (#2c5ea8): Primary action, links, focus rings, and selected states. Used sparingly — it is the navigational bearing, not the wallpaper.
  • Azimuth Blue Hover (#1e4a85): Hover and pressed states for primary controls.

Neutral #

  • Paper (#fafaf9): Default page background. Warm, not clinical.
  • Card (#ffffff): Elevated surfaces and input backgrounds.
  • Card Hover (#f5f5f4): Hover state for cards and list rows.
  • Hairline (#e7e5e4): Borders, dividers, and rules.
  • Ink (#1c1917): Primary text and headings.
  • Stone (#78716c): Secondary text, metadata, placeholders, and disabled states.

Feedback #

  • Success (#15803d): Confirmed states and positive feedback.
  • Danger (#c2412c): Errors, destructive actions, and warnings.

Named Rules #

The One Blue Rule. Azimuth blue appears on ≤10% of any screen. It marks action and orientation; it does not tint backgrounds, borders, or large fields.

Typography #

Display Font: Source Serif 4 (Georgia fallback) Body Font: IBM Plex Sans (system fallback) Label/Mono Font: IBM Plex Mono

Character: The pairing pairs the authority of an editorial serif with the clarity of a scientific sans. Serif is reserved for identity and quoted voice; sans carries every control and body line; mono labels sections and timestamps.

Hierarchy #

  • Display (600, clamp(2rem, 5vw, 3rem), 1.1): Profile names, hero questions, and major headings.
  • Headline (600, 1.25rem, 1.3): Card titles, section headers, and form labels.
  • Body (400, 1rem, 1.55): Questions, answers, descriptions, and form copy. Comfortable reading measure.
  • Label (500, 0.75rem, 1.3, 0.04em uppercase, mono): Metadata, timestamps, section kickers, and badges.

Named Rules #

The Serif Is Voice Rule. Source Serif 4 is only for profile names and quoted question text. UI labels, buttons, and metadata stay in sans or mono.

Layout #

A single centered reading column (max-width ~640px) keeps the archive scannable. The header is sticky and minimal. Cards and forms stack vertically with consistent rhythm. Responsive padding scales from 1rem on narrow viewports to 1.5rem on desktop.

  • Page max-width: 640px for reading surfaces.
  • Container padding: 1.25rem–1.5rem horizontal.
  • Card internal padding: 1.1rem–1.2rem.
  • Section rhythm: 1.5rem between major regions.

Elevation & Depth #

No drop shadows. Depth is conveyed through tone, hairline borders, and white cards resting on warm paper. Hover states use a subtle background shift, never lift or glow.

Shadow Vocabulary #

None. The system is flat by decision.

Named Rules #

The Flat-By-Default Rule. Surfaces are flat at rest. State changes are communicated through border-color or background-color shifts, not by elevation.

Shapes #

Corners are precise but not clinical: 6px radius on buttons and inputs, 8px on cards and larger surfaces. Avatars and icon placeholders are circular. Borders are consistently 1px hairlines.

  • Buttons / inputs: 6px radius.
  • Cards / dialogs: 8px radius.
  • Avatars: fully circular.

Components #

Buttons #

  • Shape: 6px radius, padding 0.55rem 1rem.
  • Primary: Azimuth blue background (#2c5ea8), white text, no border. Hover shifts to #1e4a85.
  • Secondary: White background, ink text, 1px hairline border. Hover uses surface-hover background.
  • Focus: 2px azimuth-blue outline, 2px offset.

Inputs / Fields #

  • Style: Warm paper background (#fafaf9), 1px hairline border, 6px radius.
  • Focus: Border color shifts to azimuth blue.
  • Placeholder: Stone color.

Cards / Containers #

  • Corner Style: 8px radius.
  • Background: White (#ffffff).
  • Border: 1px hairline (#e7e5e4).
  • Shadow Strategy: None.
  • Internal Padding: 1.1rem–1.2rem.
  • Hover: Background shifts to #f5f5f4; border may shift to azimuth blue for clickable cards.
  • Header: Sticky, white surface, 1px bottom border, compact padding.
  • Brand: Sans-serif, ink color, bold. Hover shifts to azimuth blue.
  • User meta: Right-aligned, stone color, small text.

Question Card #

  • White card with hairline border.
  • Author row uses circular avatar + sans name + mono handle.
  • Quoted question text is set in Source Serif 4, italic, with a small left padding to mark the quoted voice.
  • Meta column (time, source, unconfirmed badge) is right-aligned mono/stone.

Answer Block #

  • Sits below its question, same card surface, no extra border by default.
  • Answer text in IBM Plex Sans body size.

Do's and Don'ts #

Do: #

  • Do use azimuth blue only for primary actions, links, and focus states.
  • Do set quoted questions and profile names in Source Serif 4.
  • Do keep cards flat with 1px hairline borders.
  • Do use IBM Plex Mono for timestamps, handles, and section labels.
  • Do maintain generous whitespace and a single-column reading measure.

Don't: #

  • Don't add drop shadows or hover lift effects.
  • Don't use azimuth blue for backgrounds, borders, or large fills.
  • Don't set body text or UI labels in the serif.
  • Don't use bright neon accents or gradients.
  • Don't nest cards inside cards.