Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Doctrine
Legal TechDoctrine embodies legal-tech precision through its striking emerald green signature and sophisticated serif-sans typographic contrast. The clean, document-focused layout with generous whitespace evokes the authority and clarity expected in professional legal environments.
Design Identity
Signature Color
Doctrine Green
#07bc0c
Legal authority and progressive jurisprudence - a fresh take on traditional legal gravitas
Visual Identity
The distinctive emerald circular badge logo paired with clean, document-like layouts and the sophisticated contrast between Tiempos Fine serif headlines and Inter/Rubik body text creates an unmistakable legal-tech aesthetic.
Component Style
Minimal components with subtle 6px rounded corners and soft shadows (0px 4px 12px rgba(0,0,0,.1)). Everything feels paper-clean with 14px internal padding - reminiscent of well-formatted legal documents with digital precision.
Spacing Philosophy
Document-inspired breathing room with clean margins and consistent 14px padding throughout. The layout prioritizes readability and scanning, much like legal briefs where information hierarchy is critical.
Design Principles
- Border radius consistently 6px for subtle softness
- Typography uses three-family system: Tiempos Fine for headlines, Inter for UI, Rubik for body
- Shadows are minimal and functional: 0px 4px 12px rgba(0,0,0,.1)
- Button font weight always 700 for clear action hierarchy
- Base font size anchored at 14px across components
Target Audience
Legal professionals and law students who need efficient access to French jurisprudence and legal documentation
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 14px | 400 | 21px | |
| h1 | 64px | 600 | 83.2px | |
| h2 | 42px | 500 | 54.6px | |
| h3 | 28px | 600 | 33.6px | |
| p | 14px | 400 | 21px | |
| a | 14px | 400 | 21px | |
| button | 14px | 700 | 17.5px | |
| input | 13.3333px | 400 | normal | |
| header | 14px | 400 | 21px | |
| footer | 14px | 400 | 21px |
Color Palette
#ffffff#121212#3498db#07bc0c#f1c40f#757575#616161#e0e0e0#bb86fc
