Swiftaxon design system

---
version: alpha
name: Swiftaxon
description: "Dark monochrome interface measured from swiftaxon.com: Instrument Sans type, flat surfaces and pill-shaped controls."
colors:
  background: "#0E1319"
  surface: "#0E1319"
  on-surface: "#E8ECF1"
  on-background: "#E8ECF1"
  on-surface-variant: "#8C98A6"
  overlay: "#18212D85"
  overlay-strong: "#30D8A829"
  outline: "#253040"
  primary: "#E8ECF1"
  on-primary: "#0E1319"
  secondary: "#8EC5FF"
  tertiary: "#A99BFF"
  success: "#30D8A8"
  warning: "#E9C46A"
typography:
  headline-display:
    fontFamily: Instrument Sans
    fontSize: 121px
    fontWeight: 600
    lineHeight: 0.98
    letterSpacing: -0.035em
  headline-lg:
    fontFamily: Instrument Sans
    fontSize: 76px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.035em
  headline-md:
    fontFamily: Instrument Sans
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.03em
  body-md:
    fontFamily: Instrument Sans
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
  body-lg:
    fontFamily: Instrument Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Instrument Sans
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.5
  headline-display-mobile:
    fontFamily: Instrument Sans
    fontSize: 41.5px
    fontWeight: 600
    lineHeight: 0.98
    letterSpacing: -0.035em
  headline-lg-mobile:
    fontFamily: Instrument Sans
    fontSize: 37px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.035em
rounded:
  md: 28px
  full: 9999px
spacing:
  sm: 8px
  md: 9.6px
  lg: 20px
  xl: 54px
  gutter: 9.6px
  section: 117px
  margin: 56px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.full}"
    padding: 6.4px 16px
    height: 36px
  button-primary-hover:
    backgroundColor: "#FFFFFF"
    textColor: "{colors.on-surface}"
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 10px 20px
  card:
    backgroundColor: "{colors.overlay}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.md}"
    padding: 32px
  link:
    textColor: "{colors.on-surface-variant}"
---

# Swiftaxon Design System

## Overview

Swiftaxon describes itself as: “Swiftaxon makes small, useful web apps: Spendly, Delivery, BudgetTrackerPro and My ERP. Try each one with sample data.” The interface is dark, built on **Cool Charcoal (#0E1319)** with **Cool Mist (#E8ECF1)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Instrument Sans**. Headlines run large with tight negative tracking; body text is 15px. Depth comes from hairline borders and inset highlights rather than drop shadows. Controls are pill-shaped.

Measured from [swiftaxon.com](https://swiftaxon.com/) on October 24, 2026 at 1440×900 and 390×844 from 126 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 12 roles.

- **Cool Charcoal (#0E1319):** Page background, seen 2 times. Token `background`, CSS `--storm`.
- **Cool Mist (#E8ECF1):** Primary text and headings, seen 32 times. Token `on-surface`, CSS `--cloud`.
- **Blue (#8C98A6):** Secondary text, seen 39 times. Token `on-surface-variant`, CSS `--rain`.
- **Deep Blue 52% (#18212D85):** Translucent fill for cards and controls, seen 4 times. Token `overlay`, CSS `--glass`.
- **Teal 16% (#30D8A829):** Stronger translucent fill, seen 1 time. Token `overlay-strong`.
- **Deep Blue (#253040):** Borders and dividers, seen 5 times. Token `outline`, CSS `--line`.
- **Cool Mist (#E8ECF1):** Primary buttons and calls to action, seen 38 times. Token `primary`, CSS `--cloud`.
- **Cool Charcoal (#0E1319):** Text and icons on primary. Token `on-primary`.
- **Light Blue (#8EC5FF):** Most used accent color, seen 6 times. Token `secondary`, CSS `--sky`.
- **Light Indigo (#A99BFF):** Most used accent color, seen 5 times. Token `tertiary`.
- **Teal (#30D8A8):** Success and positive states, seen 4 times. Token `success`.
- **Amber (#E9C46A):** Warnings and highlights, seen 3 times. Token `warning`, CSS `--amber`.

## Typography

**Instrument Sans** carries the whole interface. Fallback stack: `Instrument Sans, ui-sans-serif, system-ui, -apple-system`. Other loaded fonts: Cormorant Garamond.

- **headline-display:** Instrument Sans 121px at weight 600, line height 0.98, tracking -0.035em (41.5px on mobile). Page title (h1).
- **headline-lg:** Instrument Sans 76px at weight 600, line height 1, tracking -0.035em (37px on mobile). Section headings (h2).
- **headline-md:** Instrument Sans 36px at weight 600, line height 1, tracking -0.03em. Sub-section headings.
- **body-md:** Instrument Sans 15px at weight 400, line height 1.5. Body text.
- **body-lg:** Instrument Sans 16px at weight 400, line height 1.5. Lead paragraphs.
- **label-md:** Instrument Sans 15px at weight 600, line height 1.5. Buttons, navigation and labels.

## Layout

Spacing does not follow a strict grid: 55% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** sm 8px, md 9.6px, lg 20px, xl 54px.
- **Sections:** 117px vertical padding between major sections.
- **Gaps:** 9.6px is the most common gap in flex and grid layouts.
- **Page margin:** 56px on each side of full-width sections.
- **Breakpoints:** 620px, 760px, 960px.

## Elevation & Depth

Depth comes mostly from hairline rings and inset highlights:

- `rgba(232, 236, 241, 0.28) 0px 0px 0px 1px inset`

A few raised panels add a soft drop shadow: `rgba(255, 255, 255, 0.07) 0px 1px 0px 0px inset, rgba(232, 236, 241, 0.09) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.6) 0px 30px 60px -40px`.

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **full (9999px):** 48 elements.
- **md (28px):** 16 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Try the demos”):** #E8ECF1 fill, #0E1319 text, 14px/600, 999px radius, padding 6.4px 16px.
- **button-primary-hover:** background #FFFFFF, text #E8ECF1 on hover.
- **button-ghost (“How our apps work”):** transparent fill, #E8ECF1 text, 15px/600, 999px radius, padding 10px 20px, shadow `rgba(232, 236, 241, 0.28) 0px 0px 0px 1px inset`.
- **card:** #18212D85 fill, #E8ECF1 text, 16px/400, 28px radius, padding 32px, shadow `rgba(255, 255, 255, 0.07) 0px 1px 0px 0px inset, rgba(232, 236, 241, 0.09) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.6) 0px 30px 60px -40px`.
- **link:** transparent fill, #8C98A6 text, padding 0px.

## Do's and Don'ts

- Do use #0E1319 for the page.
- Do keep text in 2 levels: #E8ECF1, #8C98A6.
- Do let contrast carry emphasis; primary actions use #E8ECF1 on #0E1319.
- Do set headlines in Instrument Sans with tight tracking (-0.035em).
- Do reuse the measured spacing steps (8px, 9.6px, 20px).
- Do make buttons and chips fully rounded (9999px); most other elements use 28px corners.
- Don't use heavy drop shadows; keep depth to hairline rings.
- Don't introduce new font families beyond Instrument Sans.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.3s.

## Motion

Interface transitions are quick: 0.2s, 0.3s. Longer ambient animations run 0.9s.

- **Easing:** `ease`, `cubic-bezier(0.2, 0.7, 0.2, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/swiftaxon.com/), the free DESIGN.md generator.