AURA

System v1.0Bone · Ink · Clay

Design thatbreathes light.

An ink-on-paper system of typography, color and motion — precise grids, transparent lettering and physics-based animation.

Ready

08Components

12Color Tokens

06Motion Presets

Bone-white systemInk on papercubic-bezier(0.16, 1, 0.3, 1)Transparent letteringBuilt with Next.js 15

01 / Foundations

Typography

A two-family system: Space Grotesk for tight architectural display, Inter for readable body, JetBrains Mono for labels — all loaded via next/font.

Display 1

Space Grotesk · 600 · -0.04em

Heading 1

Architecture

Space Grotesk · 600 · 1.0

Heading 2

Design & Strategy

Space Grotesk · 600 · 1.05

Heading 3

Case Studies

Space Grotesk · 500 · 1.1

Heading 4

Component Spec

Inter · 600 · 1.2

Body Large

The quick brown fox jumps over the lazy dog.

Inter · 400 · 1.7

Body

The quick brown fox jumps over the lazy dog.

Inter · 400 · 1.65

Label / Mono

Available · Q4 2026

JetBrains Mono · 500 · 0.18em

02 / Foundations

Color & Surfaces

Tokens live in globals.css as RGB channel triplets, exposed through Tailwind with free opacity variants (bg-ink/40, border-line/60).

Background

Canvas

#EAEAE5

--background

Surface

Section

#F4F4F0

--surface

Raised

Cards

#FFFFFF

--surface-raised

Ink

Primary text

#1C1C1C

--ink

Ink Muted

Secondary

#57534E

--ink-muted

Line

Borders

#D6D3CD

--line

Accent

Primary accent

#C64B2B

--accent

Accent Soft

Tints / glow

#E9C4B8

--accent-soft

Feedback

Success#2F855A

Warning#B7791F

Danger#C53030

Ink opacity ramp

100

Every token composes alpha the same way — `bg-ink/40`, `text-accent/70`.

03 / UI Elements

Components

Typed React components with prop-driven variants — buttons, inputs, badges, tooltips and a spring-eased modal.

Buttons

Inputs

We'll never share your address.

With error

This field is required.

Badges

SolidOutlineAccentLive

Tooltip & Modal

Cards

01Fintech

Nova Finance

Reimagining the investment flow with gamified clarity.

02Platform

Orbit Systems

A unified component library for multi-tenant analytics.

03Commerce

Canvas Supply

Minimal storefront built around immersive product imagery.

Interaction

Flashlight surface

Move your cursor across this card — a soft radial highlight tracks the pointer via CSS custom properties.

04 / Assets

Iconography

lucide-react, drawn on a consistent grid with 1.5px strokes and tokenized color.

atom

layers

palette

type

compass

box

grid

sparkles

pointer

move

zap

arrow

05 / Interaction

Motion & Animation

A shared easing language — cubic-bezier(0.16, 1, 0.3, 1) — centralized in lib/animations.ts and replayed on scroll via whileInView.

Easing 0.16 · 1 · 0.3 · 1Duration 0.7sStagger 0.08sReduced-motion safe

.fadeUp

fadeUp

Default reveal — 32px rise + fade.

.blurUp

blurUp

Rise with a 10px → 0 blur dissolve.

.scaleIn

scaleIn

Elastic pop from 0.92 scale.

Masked text reveal

Motion withintention.