GitHub Pages static hub

Kipfoot design system for engineering tools.

This page is the deployable root for the Kipfoot prototype. It collects the app surfaces, component previews, token references, and design-system documentation into a single navigable static site.

Design Principles

system behavior
01

Dark first

Near-black surfaces, quiet borders, and restrained elevation keep engineering work in focus.

02

Traceable results

KPI values, limit states, diagrams, assumptions, and equations live together in the tool surface.

03

Dense by default

The system favors compact controls and high information density over marketing-page spacing.

04

Functional color

Orange carries brand and primary action. Cyan, amber, green, purple, and red encode state and discipline.

Token Snapshot

from colors_and_type.css
--bg-base
#0c0c0f
--bg-surface
#141418
--bg-raised
#1c1c22
--accent-orange
#ff6b35
--accent-cyan
#22d3ee
--accent-green
#4ade80

Reference Files

Pages-ready structure
colors_and_type.css

Shared token source for color, type, spacing, radius, shadows, animation, and layout.

preview/index.html

Component and token gallery index for the individual preview cards.

GITHUB_PAGES.md

Deployment notes for serving this folder as a static GitHub Pages site.

README.md

Complete design-system brief, rules, file map, and usage guidance.