GranitCorp · SparkAudit · AgenticAiNation
One system, three brands, two languages.
Navy-and-gold tokens, a full component set, and the three brand lockups, built once and shared by every site and app in the family — themed light or dark, read left-to-right or right-to-left, from the same markup.
Tokens
Every look decision in this system lives in tokens/tokens.json and compiles to --aain-* CSS variables. Change a value once and every component, in both themes, follows.
Colour — light and dark
Light
Dark
Fills (theme-independent)
Used for solid buttons, badges, and chips — paired with a fixed on-*-fill text colour, never checked against the page background.
Type scale
Spacing
Radius & elevation
0 1px 2px -1px rgba(5,10,18,.3)0 16px 40px -12px rgba(5,10,18,.5)Motion
Three durations (fast 140ms for button press, base 200ms for dropdowns and the nav panel, slow 280ms for the app-shell drawer) and three easing curves (out, in-out, drawer). Everything respects prefers-reduced-motion; see the motion note at the bottom of this page.
Icons
13 own-drawn outline icons, one consistent 24px/1.75px-stroke set, built into dist/icons.svg as a sprite.
Components
Every component below is plain HTML and CSS classes from dist/aain.css — the markup you see in each snippet is exactly what renders above it.
Buttons
Primary, secondary, ghost, and danger, in two extra sizes, plus a loading state.
<button class="aain-btn aain-btn--primary">Primary action</button>
<button class="aain-btn aain-btn--danger">Delete audit</button>Links
<a class="aain-link--arrow" href="/pricing">Learn more
<svg><use href="icons.svg#aain-icon-arrow"></use></svg>
</a>Nav — desktop + 390px phone drawer
The nav at the top of this page is the live component. Below is the same nav inside a 390px frame with a real, keyboard-operable toggle (aain.js wires data-aain-toggle — no framework required).
Cards
Plain, feature (with icon), and stat variants share one base card.
Plain card
A simple content container — background and radius, nothing else.
Feature card
Icon tile above a short title and description.
<div class="aain-card aain-card--feature">
<div class="aain-card__icon">…</div>
<h4>Feature card</h4>
<p>Icon tile above a short title.</p>
</div>Pricing card
One illustrative sample price — not a real rate card.
SparkAudit — fixed-price audit
One report, one price, no retainer.
- A two-week automation audit of one workflow
- A written report with ranked recommendations
- One 45-minute walkthrough call
How it works
A genuine three-step sequence — numbers are used because the content really is ordered.
Share one workflow
Tell us which process takes the most manual time today.
We map and test
We trace the steps, flag what can automate safely, and test it.
You get the report
A ranked list of fixes, each with an estimated time saved.
Form fields and states
Default, focus, error, disabled, and success, plus a two-column contact-form layout. Every field stays within the 390px column on phone.
KPI strip + data table
Sample small-business workflow data, for layout only.
| Workflow | Status | Hours saved / mo |
|---|---|---|
| Invoice follow-up | Live | 6.5 |
| Lead intake triage | In review | 3.0 |
| Weekly reporting | Planned | — |
Badges
Alerts
Tabs
Brand
Three lockups, one shared amber/blue block-mark language. Full rules in brand/BRAND_NOTE.md.
GranitCorp — parent, wordmark only
SparkAudit — existing mark, unmodified
AgenticAiNation — new sibling mark
GranitCorp stays mark-free on purpose — it is the name behind the two products, not a third competing for the same block-mark language. AgenticAiNation's mark reuses SparkAudit's exact construction rules (two mitred polylines, same stroke weight, same amber-then-blue order) resolved into a different silhouette, so the two read as siblings rather than a copy.
App shell
Sidebar + top bar + content, for internal tools. The sidebar collapses to a drawer under 640px — resize this window to see it.
Invoice follow-up
Last ran 2 hours ago · 6.5 hours saved this month
Motion notes
Three real animations ship in this system: a button press (scale(0.97), 140ms), the nav panel and app-shell drawer opening (200–280ms with a custom ease-out / drawer curve), and a focus ring transition. Nothing fades or slides in on scroll — motion only answers something the person did. prefers-reduced-motion removes the movement-based parts and keeps opacity-only fallbacks.