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

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

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.

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

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