justin/provenance
1
0
Fork 0
Code Issues 173 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'Frontend rebrand: ink + bronze + paper' (#2) from frontend-rebrand into main
build-frontend / build (push) Successful in 1m16s
Details

Browse Source
This commit was merged in pull request #2.
This commit is contained in:
Justin Paul
2026-06-06 11:51:13 -04:00
parent 9e6cf6e5b7 b8f5c35045
commit 11f0f79866
13 changed files with 121 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/globals.css
+29 -4
View File
@@ -1,14 +1,31 @@
@import "tailwindcss"; @import "tailwindcss";
/* Brand palette (docs/brand): warm ink + bronze + paper. */
@theme {
--color-bronze: #a06a42;
--color-bronze-deep: #8a5836;
--color-paper: #f7f3ec;
--color-ink: #1a1a17;
--font-serif: Georgia, "Times New Roman", "Liberation Serif", ui-serif, serif;
}
/* Adaptive tokens (ink/paper flip for light/dark; bronze + paper are constant). */
:root { :root {
--background: #ffffff; --background: #f7f3ec; /* paper */
--foreground: #0a0a0a; --foreground: #1a1a17; /* ink */
--muted: #6b6862;
--surface: #fbf8f2;
--border: #e4dccb;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--background: #0a0a0a; --background: #1a1a17; /* warm near-black */
--foreground: #ededed; --foreground: #f2eee6; /* warm off-white */
--muted: #9a968e;
--surface: #232019;
--border: #3a352c;
} }
} }
@@ -17,3 +34,11 @@ body {
color: var(--foreground); color: var(--foreground);
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
} }
/* Headings use the heritage serif register. */
h1,
h2,
h3,
.font-serif {
font-family: var(--font-serif);
}
frontend/app/layout.tsx
+15 -8
View File
@@ -6,28 +6,35 @@ import "./globals.css";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Provenance", title: "Provenance",
description: "Where it came from matters — family and land, every fact sourced.", description: "Where it came from matters — family and land, every fact sourced.",
icons: { icon: "/favicon.svg" },
}; };
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({ children }: { children: React.ReactNode }) {
return ( return (
<html lang="en"> <html lang="en">
<body> <body className="flex min-h-screen flex-col">
<header className="border-b border-neutral-200"> <header className="border-b border-[var(--border)]">
<div className="mx-auto flex max-w-3xl items-center justify-between px-4 py-3"> <div className="mx-auto flex max-w-3xl items-center justify-between px-4 py-3">
<Link href="/" className="font-semibold"> <Link href="/" className="flex items-center" aria-label="Provenance — home">
Provenance {/* eslint-disable-next-line @next/next/no-img-element */}
<img src="/provenance-logo-plain.svg" alt="Provenance" className="h-7 w-auto" />
</Link> </Link>
<nav className="flex gap-4 text-sm"> <nav className="flex gap-5 text-sm">
<Link href="/trees" className="hover:underline"> <Link href="/trees" className="text-[var(--muted)] transition-colors hover:text-bronze">
Trees Trees
</Link> </Link>
<Link href="/login" className="hover:underline"> <Link href="/login" className="text-[var(--muted)] transition-colors hover:text-bronze">
Sign in Sign in
</Link> </Link>
</nav> </nav>
</div> </div>
</header> </header>
<main className="mx-auto max-w-3xl px-4 py-8">{children}</main> <main className="mx-auto w-full max-w-3xl flex-1 px-4 py-10">{children}</main>
<footer className="border-t border-[var(--border)]">
<div className="mx-auto max-w-3xl px-4 py-6 text-sm italic text-[var(--muted)]">
where it came from matters
</div>
</footer>
</body> </body>
</html> </html>
); );
frontend/app/login/page.tsx
+2 -2
View File
@@ -62,9 +62,9 @@ export default function LoginPage() {
{loading ? "Signing in…" : "Sign in"} {loading ? "Signing in…" : "Sign in"}
</Button> </Button>
</form> </form>
<p className="mt-4 text-sm text-neutral-600"> <p className="mt-4 text-sm text-[var(--muted)]">
No account?{" "} No account?{" "}
<Link href="/register" className="underline"> <Link href="/register" className="text-bronze underline">
Create one Create one
</Link> </Link>
</p> </p>
frontend/app/page.tsx
+9 -7
View File
@@ -4,15 +4,17 @@ import { Button } from "@/components/ui/button";
export default function Home() { export default function Home() {
return ( return (
<div className="space-y-6"> <div className="space-y-8 py-4">
<div className="space-y-2"> <div className="space-y-4">
<h1 className="text-3xl font-bold">Provenance</h1> <h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">
<p className="text-neutral-600"> Where it came from matters
Trace where you come from — your family and your land — with every fact linked to a </h1>
source, on infrastructure you control. <p className="max-w-prose text-lg text-[var(--muted)]">
Trace where you come from — your family <span className="text-bronze">and</span> your
land — with every fact linked to a source, on infrastructure you control.
</p> </p>
</div> </div>
<div className="flex gap-3"> <div className="flex flex-wrap gap-3">
<Link href="/register"> <Link href="/register">
<Button>Create an account</Button> <Button>Create an account</Button>
</Link> </Link>
frontend/app/register/page.tsx
+2 -2
View File
@@ -70,9 +70,9 @@ export default function RegisterPage() {
{loading ? "Creating…" : "Create account"} {loading ? "Creating…" : "Create account"}
</Button> </Button>
</form> </form>
<p className="mt-4 text-sm text-neutral-600"> <p className="mt-4 text-sm text-[var(--muted)]">
Already have an account?{" "} Already have an account?{" "}
<Link href="/login" className="underline"> <Link href="/login" className="text-bronze underline">
Sign in Sign in
</Link> </Link>
</p> </p>
frontend/app/trees/[id]/page.tsx
+4 -4
View File
@@ -52,11 +52,11 @@ export default function TreeDetailPage() {
} }
} }
if (!ready) return <p className="text-neutral-500">Loading…</p>; if (!ready) return <p className="text-[var(--muted)]">Loading…</p>;
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<Link href="/trees" className="text-sm text-neutral-500 hover:underline"> <Link href="/trees" className="text-sm text-[var(--muted)] hover:underline">
← All trees ← All trees
</Link> </Link>
@@ -76,14 +76,14 @@ export default function TreeDetailPage() {
<div> <div>
<h2 className="mb-2 text-lg font-semibold">People</h2> <h2 className="mb-2 text-lg font-semibold">People</h2>
{persons.length === 0 ? ( {persons.length === 0 ? (
<p className="text-neutral-500">No people yet.</p> <p className="text-[var(--muted)]">No people yet.</p>
) : ( ) : (
<ul className="space-y-2"> <ul className="space-y-2">
{persons.map((person) => ( {persons.map((person) => (
<li key={person.id}> <li key={person.id}>
<Card> <Card>
<CardContent className="p-4"> <CardContent className="p-4">
{person.primary_name ?? <span className="text-neutral-400">Unnamed</span>} {person.primary_name ?? <span className="text-[var(--muted)]">Unnamed</span>}
</CardContent> </CardContent>
</Card> </Card>
</li> </li>
frontend/app/trees/page.tsx
+4 -4
View File
@@ -47,7 +47,7 @@ export default function TreesPage() {
router.push("/login"); router.push("/login");
} }
if (!ready) return <p className="text-neutral-500">Loading…</p>; if (!ready) return <p className="text-[var(--muted)]">Loading…</p>;
return ( return (
<div className="space-y-6"> <div className="space-y-6">
@@ -75,16 +75,16 @@ export default function TreesPage() {
</Card> </Card>
{trees.length === 0 ? ( {trees.length === 0 ? (
<p className="text-neutral-500">No trees yet — create your first one above.</p> <p className="text-[var(--muted)]">No trees yet — create your first one above.</p>
) : ( ) : (
<ul className="space-y-2"> <ul className="space-y-2">
{trees.map((tree) => ( {trees.map((tree) => (
<li key={tree.id}> <li key={tree.id}>
<Link href={`/trees/${tree.id}`}> <Link href={`/trees/${tree.id}`}>
<Card className="transition-colors hover:bg-neutral-50"> <Card className="transition-colors hover:border-bronze/50">
<CardContent className="flex items-center justify-between p-4"> <CardContent className="flex items-center justify-between p-4">
<span className="font-medium">{tree.name}</span> <span className="font-medium">{tree.name}</span>
<span className="text-xs uppercase tracking-wide text-neutral-400"> <span className="text-xs uppercase tracking-wide text-bronze">
{tree.visibility} {tree.visibility}
</span> </span>
</CardContent> </CardContent>
frontend/components/ui/button.tsx
+6 -4
View File
@@ -4,13 +4,15 @@ import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
const buttonVariants = cva( const buttonVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 disabled:pointer-events-none disabled:opacity-50", "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bronze focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50",
{ {
variants: { variants: {
variant: { variant: {
default: "bg-neutral-900 text-white hover:bg-neutral-700", // Bronze is the brand accent; paper reads cleanly on it.
outline: "border border-neutral-300 bg-transparent hover:bg-neutral-100", default: "bg-bronze text-paper hover:bg-bronze-deep",
ghost: "hover:bg-neutral-100", outline:
"border border-bronze text-bronze bg-transparent hover:bg-bronze hover:text-paper",
ghost: "text-[var(--foreground)] hover:bg-bronze/10",
}, },
size: { size: {
default: "h-10 px-4 py-2", default: "h-10 px-4 py-2",
frontend/components/ui/card.tsx
+5 -2
View File
@@ -5,7 +5,10 @@ import { cn } from "@/lib/utils";
export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) { export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
return ( return (
<div <div
className={cn("rounded-lg border border-neutral-200 bg-white/50 shadow-sm", className)} className={cn(
"rounded-lg border border-[var(--border)] bg-[var(--surface)] shadow-sm",
className,
)}
{...props} {...props}
/> />
); );
@@ -16,7 +19,7 @@ export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDiv
} }
export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) { export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
return <h3 className={cn("text-lg font-semibold", className)} {...props} />; return <h3 className={cn("font-serif text-lg font-semibold", className)} {...props} />;
} }
export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) { export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
frontend/components/ui/input.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ export const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttribute
<input <input
ref={ref} ref={ref}
className={cn( className={cn(
"flex h-10 w-full rounded-md border border-neutral-300 bg-transparent px-3 py-2 text-sm placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 disabled:opacity-50", "flex h-10 w-full rounded-md border border-[var(--border)] bg-[var(--surface)] px-3 py-2 text-sm placeholder:text-[var(--muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bronze disabled:opacity-50",
className, className,
)} )}
{...props} {...props}
frontend/public/favicon.svg
+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" role="img" aria-label="Provenance icon">
<title>Provenance icon</title>
<rect x="0" y="0" width="48" height="48" rx="8.64" fill="#A06A42"/>
<g transform="translate(16.32 14.26)"><path d="M12.47 5.77Q12.47 3.37 11.35 2.34Q10.23 1.31 7.58 1.31L6.16 1.31L6.16 10.54L7.67 10.54Q10.13 10.54 11.29 9.42Q12.47 8.3 12.47 5.77ZM6.16 11.84L6.16 18.33L9.26 18.72L9.26 19.49L1.05 19.49L1.05 18.72L3.36 18.33L3.36 1.15L0.86 0.77L0.86 0.0L8.21 0.0Q15.36 0.0 15.36 5.74Q15.36 8.73 13.55 10.29Q11.74 11.84 8.36 11.84L6.16 11.84Z" fill="#F7F3EC"/></g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 625 B

frontend/public/provenance-logo-plain.svg
+20
View File
@@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" width="450.31" height="128" viewBox="0 0 450.31 128" role="img" aria-label="Provenance">
<title>Provenance</title>
<style>.ink{fill:#1A1A17}.ink-s{stroke:#1A1A17}.br{fill:#A06A42}.br-s{stroke:#A06A42}.muted{fill:#6B6862}
@media (prefers-color-scheme:dark){.ink{fill:#F2EEE6}.ink-s{stroke:#F2EEE6}.muted{fill:#9A968E}}</style>
<circle cx="64" cy="64.0" r="30" class="br-s" fill="none" stroke-width="2"/>
<line x1="64" y1="38.0" x2="64" y2="30.0" class="br-s" stroke-width="2" stroke-linecap="round"/>
<line x1="64" y1="90.0" x2="64" y2="98.0" class="br-s" stroke-width="2" stroke-linecap="round"/>
<line x1="90" y1="64.0" x2="98" y2="64.0" class="br-s" stroke-width="2" stroke-linecap="round"/>
<line x1="38" y1="64.0" x2="30" y2="64.0" class="br-s" stroke-width="2" stroke-linecap="round"/>
<line x1="64" y1="64.0" x2="85.21" y2="42.79" class="ink-s" fill="none" stroke-width="1.5"/>
<line x1="64" y1="64.0" x2="42.79" y2="42.79" class="ink-s" fill="none" stroke-width="1.5"/>
<line x1="64" y1="64.0" x2="85.21" y2="85.21" class="ink-s" fill="none" stroke-width="1.5"/>
<line x1="64" y1="64.0" x2="42.79" y2="85.21" class="ink-s" fill="none" stroke-width="1.5"/>
<circle cx="85.21" cy="42.79" r="3.15" class="ink"/>
<circle cx="42.79" cy="42.79" r="3.15" class="ink"/>
<circle cx="85.21" cy="85.21" r="3.15" class="ink"/>
<circle cx="42.79" cy="85.21" r="3.15" class="ink"/>
<circle cx="64" cy="64.0" r="4.5" class="ink"/>
<g transform="translate(126 42.73)"><path d="M26.81 12.41Q26.81 7.25 24.4 5.04Q22.0 2.82 16.31 2.82L13.25 2.82L13.25 22.66L16.5 22.66Q21.78 22.66 24.29 20.26Q26.81 17.85 26.81 12.41ZM13.25 25.47L13.25 39.41L19.91 40.25L19.91 41.91L2.25 41.91L2.25 40.25L7.22 39.41L7.22 2.47L1.84 1.66L1.84 0.0L17.66 0.0Q33.03 0.0 33.03 12.35Q33.03 18.78 29.14 22.13Q25.25 25.47 17.97 25.47L13.25 25.47ZM56.34 11.75L56.34 19.69L55.0 19.69L53.18 16.25Q51.62 16.25 49.48 16.68Q47.34 17.1 45.78 17.78L45.78 39.72L50.81 40.5L50.81 41.91L36.87 41.91L36.87 40.5L40.59 39.72L40.59 14.72L36.87 13.94L36.87 12.53L45.43 12.53L45.72 16.19Q47.59 14.63 50.79 13.19Q54.0 11.75 55.87 11.75L56.34 11.75ZM86.47 27.07Q86.47 42.54 72.72 42.54Q66.1 42.54 62.72 38.57Q59.35 34.6 59.35 27.07Q59.35 19.63 62.72 15.69Q66.1 11.75 72.97 11.75Q79.66 11.75 83.06 15.61Q86.47 19.47 86.47 27.07ZM80.85 27.07Q80.85 20.32 78.88 17.29Q76.91 14.25 72.72 14.25Q68.63 14.25 66.8 17.16Q64.97 20.07 64.97 27.07Q64.97 34.16 66.83 37.12Q68.69 40.07 72.72 40.07Q76.85 40.07 78.85 37.01Q80.85 33.94 80.85 27.07ZM106.32 42.54L104.0 42.54L91.91 14.72L88.91 13.94L88.91 12.53L102.6 12.53L102.6 13.94L97.94 14.78L106.5 35.07L114.69 14.72L110.04 13.94L110.04 12.53L120.91 12.53L120.91 13.94L118.1 14.6L106.32 42.54ZM129.04 27.13L129.04 27.69Q129.04 32.0 129.99 34.39Q130.94 36.78 132.92 38.03Q134.91 39.28 138.13 39.28Q139.82 39.28 142.13 39.0Q144.44 38.72 145.94 38.38L145.94 40.13Q144.44 41.1 141.86 41.82Q139.29 42.54 136.6 42.54Q129.75 42.54 126.58 38.85Q123.41 35.16 123.41 27.0Q123.41 19.32 126.63 15.54Q129.85 11.75 135.82 11.75Q147.1 11.75 147.1 24.57L147.1 27.13L129.04 27.13ZM135.82 14.25Q132.57 14.25 130.83 16.88Q129.1 19.5 129.1 24.63L141.66 24.63Q141.66 19.03 140.22 16.64Q138.79 14.25 135.82 14.25ZM159.44 14.91Q161.84 13.53 164.56 12.64Q167.28 11.75 169.09 11.75Q172.9 11.75 174.84 13.97Q176.78 16.19 176.78 20.41L176.78 39.72L180.34 40.5L180.34 41.91L167.69 41.91L167.69 40.5L171.59 39.72L171.59 20.97Q171.59 18.38 170.32 16.9Q169.06 15.41 166.4 15.41Q163.59 15.41 159.5 16.32L159.5 39.72L163.47 40.5L163.47 41.91L150.78 41.91L150.78 40.5L154.31 39.72L154.31 14.72L150.78 13.94L150.78 12.53L159.15 12.53L159.44 14.91ZM195.84 11.88Q200.65 11.88 202.92 13.85Q205.19 15.82 205.19 19.88L205.19 39.72L208.84 40.5L208.84 41.91L200.78 41.91L200.19 38.97Q196.62 42.54 191.09 42.54Q183.56 42.54 183.56 33.78Q183.56 30.85 184.7 28.93Q185.84 27.0 188.34 25.99Q190.84 24.97 195.59 24.88L200.0 24.75L200.0 20.16Q200.0 17.13 198.89 15.69Q197.78 14.25 195.47 14.25Q192.34 14.25 189.75 15.72L188.69 19.38L186.94 19.38L186.94 12.97Q192.0 11.88 195.84 11.88ZM200.0 26.94L195.9 27.07Q191.72 27.22 190.23 28.69Q188.75 30.16 188.75 33.6Q188.75 39.1 193.22 39.1Q195.34 39.1 196.89 38.62Q198.44 38.13 200.0 37.38L200.0 26.94ZM219.85 14.91Q222.25 13.53 224.97 12.64Q227.69 11.75 229.5 11.75Q233.31 11.75 235.25 13.97Q237.19 16.19 237.19 20.41L237.19 39.72L240.75 40.5L240.75 41.91L228.1 41.91L228.1 40.5L232.0 39.72L232.0 20.97Q232.0 18.38 230.73 16.9Q229.47 15.41 226.81 15.41Q224.0 15.41 219.91 16.32L219.91 39.72L223.88 40.5L223.88 41.91L211.19 41.91L211.19 40.5L214.72 39.72L214.72 14.72L211.19 13.94L211.19 12.53L219.56 12.53L219.85 14.91ZM268.16 40.13Q266.63 41.25 263.94 41.9Q261.25 42.54 258.44 42.54Q244.16 42.54 244.16 27.0Q244.16 19.66 247.8 15.71Q251.44 11.75 258.22 11.75Q262.44 11.75 267.44 12.72L267.44 20.91L265.72 20.91L264.38 15.72Q261.78 14.25 258.16 14.25Q249.78 14.25 249.78 27.0Q249.78 33.63 252.33 36.46Q254.88 39.28 260.22 39.28Q264.78 39.28 268.16 38.25L268.16 40.13ZM278.25 27.13L278.25 27.69Q278.25 32.0 279.2 34.39Q280.16 36.78 282.13 38.03Q284.12 39.28 287.35 39.28Q289.04 39.28 291.35 39.0Q293.66 38.72 295.16 38.38L295.16 40.13Q293.66 41.1 291.07 41.82Q288.5 42.54 285.81 42.54Q278.97 42.54 275.8 38.85Q272.62 35.16 272.62 27.0Q272.62 19.32 275.85 15.54Q279.06 11.75 285.04 11.75Q296.31 11.75 296.31 24.57L296.31 27.13L278.25 27.13ZM285.04 14.25Q281.79 14.25 280.05 16.88Q278.31 19.5 278.31 24.63L290.88 24.63Q290.88 19.03 289.44 16.64Q288.0 14.25 285.04 14.25Z" class="ink"/></g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

frontend/public/provenance-mark.svg
+19
View File
@@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" role="img" aria-label="Provenance mark">
<title>Provenance mark</title>
<style>.ink{fill:#1A1A17}.ink-s{stroke:#1A1A17}.br{fill:#A06A42}.br-s{stroke:#A06A42}.muted{fill:#6B6862}
@media (prefers-color-scheme:dark){.ink{fill:#F2EEE6}.ink-s{stroke:#F2EEE6}.muted{fill:#9A968E}}</style>
<circle cx="48.0" cy="48.0" r="34" class="br-s" fill="none" stroke-width="2.2"/>
<line x1="48.0" y1="18.0" x2="48.0" y2="10.0" class="br-s" stroke-width="2.2" stroke-linecap="round"/>
<line x1="48.0" y1="78.0" x2="48.0" y2="86.0" class="br-s" stroke-width="2.2" stroke-linecap="round"/>
<line x1="78.0" y1="48.0" x2="86.0" y2="48.0" class="br-s" stroke-width="2.2" stroke-linecap="round"/>
<line x1="18.0" y1="48.0" x2="10.0" y2="48.0" class="br-s" stroke-width="2.2" stroke-linecap="round"/>
<line x1="48.0" y1="48.0" x2="72.04" y2="23.96" class="ink-s" fill="none" stroke-width="1.6"/>
<line x1="48.0" y1="48.0" x2="23.96" y2="23.96" class="ink-s" fill="none" stroke-width="1.6"/>
<line x1="48.0" y1="48.0" x2="72.04" y2="72.04" class="ink-s" fill="none" stroke-width="1.6"/>
<line x1="48.0" y1="48.0" x2="23.96" y2="72.04" class="ink-s" fill="none" stroke-width="1.6"/>
<circle cx="72.04" cy="23.96" r="3.57" class="ink"/>
<circle cx="23.96" cy="23.96" r="3.57" class="ink"/>
<circle cx="72.04" cy="72.04" r="3.57" class="ink"/>
<circle cx="23.96" cy="72.04" r="3.57" class="ink"/>
<circle cx="48.0" cy="48.0" r="5.1" class="ink"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB