Style Guide

A reference of all the visual components and patterns available in this documentation site.

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Body text

Regular paragraph text renders in Inter at 15px with a comfortable 1.7 line height. The body text colour is a warm dark grey rather than pure black, which reduces eye strain during extended reading.

Bold text uses a weight of 600, and italic text renders with a gentle slant. You can also combine bold and italic when emphasis demands it.

Lists

Unordered list:

• Documents can contain multiple files
• Each file is converted to PDF automatically
• Signing fields can be placed on any page
  • Nested items are indented
  • And can go multiple levels deep

Ordered list:

1. Create a new document
2. Upload your files
3. Place signing fields on each page
4. Invite signatories
5. Send for signature

---

Code

Inline code

Use POST /api/documents to create a new document. The status_id field returns 1 for draft documents.

Code blocks

Every code block includes a copy button in the top-right corner. Click it to copy the contents to your clipboard.

curl -X POST https://api.docuninja.co/api/documents \
  -H "Authorization: Bearer {your-api-token}" \
  -H "Content-Type: application/json" \
  -d '{"name": "Service Agreement"}'

Code blocks with titles

Response — 201 Created

{
  "data": {
    "id": "01HQ3J4K5M6N7P8Q9R0S1T2U3V",
    "name": "Service Agreement",
    "status_id": 1,
    "description": null,
    "created_at": "2025-01-15T10:30:00.000000Z",
    "updated_at": "2025-01-15T10:30:00.000000Z"
  }
}

Syntax highlighting

Create a document

curl -X POST https://api.docuninja.co/api/documents \
  -H "Authorization: Bearer {your-api-token}" \
  -H "Content-Type: application/json" \
  -d '{"name": "Service Agreement", "description": "Annual service contract renewal"}'

Response — 200 OK

{
  "data": {
    "id": "01HQ3J4K5M6N7P8Q9R0S1T2U3V",
    "name": "Service Agreement",
    "description": "Annual service contract renewal",
    "status_id": 1,
    "created_at": "2025-01-15T10:30:00.000000Z",
    "updated_at": "2025-01-15T10:30:00.000000Z"
  }
}

Line highlighting

# Install dependencies
npm install

npm run build

# Start the dev server
npm start

---

Admonitions

Admonitions draw attention to important information. Use them sparingly for maximum impact.

Tip

tip

You can save your electronic signature in Account Settings so it's automatically suggested when you encounter a signature field.

Info

info

Documents in Completed status are immutable. Once all signatories have signed, the document and its audit log are locked and cannot be modified.

Warning

warning

Voiding a document is irreversible. All signatories will be notified and the document can no longer be signed. Consider cloning the document if you need a fresh copy.

Danger

danger

Deleting your account removes all documents, clients, and team data permanently. This action cannot be undone. Please export any data you need before proceeding.

Custom title

Pro Tip

Use blueprints to standardise your document layouts across your team. This ensures every contract, NDA, or agreement uses the same professional format.

---

Tables

Simple table

Field	Type	Required	Description
name	string	Yes	The document name
description	string	No	Internal description
expires_at	datetime	No	Expiration date in ISO 8601 format
status_id	integer	Read-only	Current document status

Comparison table

Feature	Free	Pro
Documents per month	5	Unlimited
Signers per document	2	Unlimited
Audit trail	Basic	Full
Support	Standard	Priority
Price	$0/month	$12/month

---

Links

• Internal link to another page
• External link to the app
• Link to a specific section on this page
• Link to a specific section on another page

---

Blockquotes

Documents move through a defined status workflow from Draft to Completed. Each status transition is recorded in the audit log with a timestamp and the acting user.

---

Horizontal rules

Use --- to create a visual separator between sections:

---

Images

To add images to documentation pages, place them in static/img/ and reference them:

![Alt text](/img/your-screenshot.png)

---

Tabs

cURL

curl -X GET https://api.docuninja.co/api/documents \
  -H "Authorization: Bearer {token}"

Response

{
  "data": [
    {
      "id": "01HQX7Z9ABC123DEF456GHJ8",
      "description": "Non-Disclosure Agreement",
      "status_id": 5
    }
  ],
  "meta": {
    "current_page": 1,
    "per_page": 20,
    "total": 1
  }
}

---

Details / Collapsible sections

Click to expand — full list of document statuses

Status ID	Name	Description
1	Draft	Document is being prepared
2	Pending Approval	Awaiting internal review
3	Approved	Approved, ready to send
4	Rejected	Rejected during review
5	Sent	Sent to signatories
6	Completed	All parties have signed
7	Expired	Past the expiration date
8	Voided	Manually cancelled