Litigant Portal – Powered by Free Law Project

Litigant Portal

Style Guide

Design tokens and component library for the Litigant Portal. Components use Django Cotton, Alpine.js, and Tailwind CSS.

Design Tokens

Colors

Color tokens defined in litigant_portal/app/src/main.css via Tailwind v4 @theme.

Greyscale

25

50

100

200

300

400

500

600

700

800

900

950

Primary (Coral)

25

50

100

200

300

400

500

600

700

800

900

950

Brand (Purple)

100

300

600

700

Semantic

Success

Warning

Danger

Info

Typography

Font Families

Inter (font-sans) - Body text, UI

Cooper Hewitt (font-cooper) - Headings

DM Mono (font-mono) - Code

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Text Sizes

text-xs 12px

text-sm 14px

text-md 16px

text-lg 18px

text-xl 20px

Layout

max-w-content 948px - Main content width

Atoms

Buttons

Accessible button component with multiple variants.

Link Button Disabled Link

Props

variant "primary" | "outline" | "subtle" | "dark" | "ghost" | "danger"
size "sm" | "" | "xl" | "icon" | "icon-xl"
href URL string — renders as <a> instead of <button>
disabled Boolean — uses aria-disabled for links
Show code 
<c-atoms.button variant="primary">Primary</c-atoms.button>
<c-atoms.button variant="outline" size="sm">Small Outline</c-atoms.button>
<c-atoms.button variant="danger" disabled>Disabled</c-atoms.button>

Inputs

Text input with error and success states.

Props

type "text" | "email" | "password" | etc.
error Boolean - error styling
success Boolean - success styling

Search Input

Search input with built-in icon.

Props

placeholder Placeholder text
name Form field name

Selects

Select dropdown with custom styling.

Props

name Form field name
id Element ID
error Boolean — shows error styling
disabled Boolean

Icons

Heroicons via django-heroicons.

Outline

magnifying-glass

chevron-right

bars-3

arrow-top-right-on-square

home

users

currency-dollar

shield-check

document-text

truck

check-circle

exclamation-circle

Solid

magnifying-glass

chevron-right

bars-3

arrow-top-right-on-square

home

users

currency-dollar

shield-check

document-text

truck

check-circle

exclamation-circle

Alerts

Status message alerts.

Props

variant "info" (default) | "success" | "warning" | "danger"

Badges

Status indicator badges for deadlines and tasks.

Urgent Pending Completed Info

Sizes

Small (default) Medium

Props

variant "urgent" | "pending" | "completed" | "info"
size "sm" (default) | "md"

Checkbox

Checkbox input with optional label.

Props

label Label text
checked Boolean — pre-checked state
name Form field name
id Element ID (links label to input)
disabled Boolean
required Boolean

Auto Dismiss

Wrapper that auto-hides its content after a timeout. Used by toast container for flash messages.

Note: requires the autoDismiss Alpine.js component.

Props

timeout Duration in ms before dismissing (default: 1500)

Molecules

Topic Card

Navigation card with icon.

Housing & Eviction

Landlord disputes, eviction defense

Family & Divorce

Divorce, custody, child support

Form Errors

Renders non-field errors from a Django form as a danger alert. Outputs nothing when there are no errors. Pass the form object via the :form prop.

Usage

<c-molecules.form-errors :form="form" />

Props

:form Django form instance (reads form.non_field_errors)

Form Field

Label + input + error message wrapper. Use for all text inputs in forms.

We'll never share your email

This field is required

Props

label Field label text
type "text" | "email" | "tel" | "password" | etc.
name, id Form field name and ID
help_text Optional helper text below input
:errors Error list (shows first error)

Form Field Select

Label + select + error message wrapper. Use for dropdowns in forms.

Please select an option

Props

label Field label text
name, id Form field name and ID
help_text Optional helper text below select
:errors Error list (shows first error)
slot Option elements

Deadline Card

Displays a date or deadline. Use variant="urgent" for deadlines (red background, exclamation icon) or omit for regular dates (calendar icon). Supports props mode (server-rendered) and slot mode (Alpine-driven content).

Mar 15, 2026

Answer deadline

Apr 1, 2026

Hearing date

Props

variant "urgent" | "default" (default) — controls background + icon
title Primary text (date or label). Enables props mode when set.
date Secondary text (label or date)

Slot mode

Omit title and provide content via the default slot. The molecule renders the structural wrapper (icon, background) and the slot fills the content area — useful inside Alpine x-for loops with x-text bindings.

Action Item

Checkbox-style action item with priority coloring. Supports props mode (server-rendered) and slot mode (Alpine-driven).

File an Appearance

Submit to the clerk's office

Due May 1, 2026

Gather income documents

Pay stubs, tax returns

Review lease agreement

Submit initial paperwork

Props

title Action item title. Enables props mode when set.
priority "urgent" | "normal" (default) — controls background + circle color
description Optional description text
deadline Optional deadline text (shown with clock icon)
href Optional link URL (renders title as link)
completed "true" | "false" (default) — shows green checkmark

Slot mode

Omit title and provide content via the default slot. Pass x-bind:class through attrs for dynamic wrapper styling in Alpine x-for loops.

Auth Status

Centered status page pattern used across auth flows — icon, heading, description, and CTA slot.

Check your email

We've sent a password reset link to your email address.

Back to sign in

Password reset complete

Your password has been changed successfully.

Sign in

Invalid reset link

This password reset link is invalid or has expired.

Request new reset link

Props

icon Heroicon name (outline by default)
icon_style "solid" for filled icon; empty = outline (default)
icon_class Color class for the icon (e.g. "text-green-500")
heading Status heading text
description Descriptive paragraph below the heading
slot CTA area — button, link, or form

Timeline Event Card

Collapsible timeline entry for the activity panel.

Document uploaded Upload

Eviction notice processed

Mar 31, 2:30 PM

Case facts updated Update

Added court date and parties

Mar 31, 2:35 PM

Props

title Event title
content Expandable detail text
icon Heroicon name (default: "clock")
type_label Badge text (e.g., "Upload", "Update")
formatted_time Displayed timestamp

Toast Container

Renders Django flash messages as auto-dismissing toast overlays. Included in base.html.

Composes c-atoms.auto-dismiss and c-atoms.alert. No props — reads messages from template context.

Search Result

Search result card with title, content preview, category badge, and optional link.

Tenant Rights Overview

Legal Rights

Understanding your rights as a tenant when facing eviction proceedings.

Props

title Result title
content Preview text (truncated to 2 lines)
category Category badge text
url Link URL — shows external icon when set

User Menu

Header user menu — shows sign-in link for anonymous users, dropdown with profile/logout for authenticated users. Used inside c-organisms.header.

No props — reads user from template context. Requires the userMenu Alpine.js component.

Organisms

Hero

Hero section with search.

Topic Grid

Responsive grid of topic cards.

Housing & Eviction

Landlord disputes, eviction defense, tenant rights

Family & Divorce

Divorce, custody, child support, domestic issues

Small Claims

Disputes under $10,000, debt collection defense

Consumer Rights

Scams, unfair business practices, contracts

Adult Name Change

Petition, publication, and records cascade

Traffic & Fines

Tickets, license issues, court fines

Case Sidebar

Sidebar displaying case info, deadlines, and action items.

Props

case_type Type of case (e.g., "Eviction")
county County name
slot Sidebar sections content

Fallback Resources

"What if my issue isn't here?" — resource links box and two accordions for self-help content. Shown when no topic matches the user's situation.

What if my issue isn't here?

Legal aid referral Pro bono / Bar Association referral Civil / Appeals division Jurisdiction resource 1 Jurisdiction resource 2
How to represent yourself in court

Self-representation guidance will appear here.

Next steps in your case

Guidance on next steps will appear here.

Auth CTA

Account sign-up prompt with benefit bullets and Create Account / Sign In buttons. Hidden for authenticated users on the live site.

Sign in or create an account

  • Save your answers
  • Return to paperwork you started
  • E-file your documents with the court
  • Access case history and files
Create Account Sign In

Auth Layout

Full-page centered layout used by all auth templates — background, logo link, white card, and optional footer.

Card content goes here via the default slot.

Footer content via the named footer slot.

Props

slot Card body content (default slot)
footer Named slot — below-card text; wrapper div omitted when empty
class Additional classes on the outer container

Activity Panel

Right-side timeline panel for session events (uploads, summaries, fact updates). Accepts slot content.

Topic Detail

Topic landing page layout with back nav, icon, title, legal disclaimer, and CTA to chat.

Props

title Topic heading
subtitle Topic description
icon Heroicon name
slug Topic slug — used for chat link (?topic=slug)

Chat Window

Complete chat interface with message list, typing indicator, input form, and fallback search. Requires the chat Alpine.js component.

Props

session_id Chat session UUID
chat_enabled "true" (default) | "false" — shows fallback search when disabled