@mohitkhetrapal/field-notes

A small, opinionated React kit for research-heavy case study documentation. Cream + red, Clash Display + DM Sans. Built for portfolio sites where every case study needs to feel like the same hand wrote it.

Install

npm install @mohitkhetrapal/field-notes
# or
pnpm add @mohitkhetrapal/field-notes

Peer deps: react >=18, react-dom >=18.

Setup

Import the fonts and theme CSS once, at the top of your app's entry CSS (e.g. src/styles/index.css):

@import "@mohitkhetrapal/field-notes/fonts";
@import "@mohitkhetrapal/field-notes/styles";

Then wrap any page that uses the kit in <FieldNotesPage> so cascading typography applies:

import { FieldNotesPage, ResearchTemplate } from "@mohitkhetrapal/field-notes";

export default function App() {
  return (
    <FieldNotesPage>
      <ResearchTemplate />
    </FieldNotesPage>
  );
}

What's in the box

Layout: FieldNotesPage, Section, Divider, FullBleed Text & UI: Tag, PrimaryButton, GhostButton, LinkArrow, Card, Callout Visual content: Figure, TwoUp, PhotoGrid, DiagramFrame, Stat Templates: ResearchTemplate Tokens: tokens (TS mirror of CSS custom properties)

All design tokens are exposed as CSS custom properties prefixed --fn-*:

--fn-cream  #F4EEE0   page background
--fn-paper  #ECE4D1   secondary surface (callout fills)
--fn-rule   #D9CFB8   hairlines, borders
--fn-ink    #171717   text, headings
--fn-muted  #6B6357   captions, metadata
--fn-red    #E1361A   the single accent

Two font tokens: --fn-font-display (Clash Display) and --fn-font-body (DM Sans, -3% letter-spacing).

Guidelines

This kit ships with a strict spec at guidelines/Guidelines.md. Read it before generating or editing any page — it's the source of truth for what the kit allows and forbids. The spec is also designed to be handed to an AI assistant as the rules for generating consistent case studies.

// access from your tooling
import guidelines from "@mohitkhetrapal/field-notes/guidelines";
import setup from "@mohitkhetrapal/field-notes/setup";

Philosophy

One principle: restraint. Six colors, two fonts, two display sizes. Square corners, no shadows, no gradients. If it's not in the kit, it doesn't exist.

License

MIT