Logos
Use the appropriate logo variant for your context. Always maintain clear space around the logo equal to the height of the icon mark.
Usage Guidelines
- Full-color logo on white or light backgrounds
- White logo on dark, navy, or photo backgrounds
- Icon variant for small spaces — social avatars, browser tabs, app icons
- Never stretch, rotate, recolor, or add effects to the logo
- PNG and WebP variants available at same paths (swap extension)
Colors
The full brand palette with Tailwind tokens. All colors are defined in the theme config.
Brand Colors
Navy
brand-navy / brand-700
Hero backgrounds, dark sections, primary brand color
Gold
brand-gold
Primary CTAs, accents, dividers, highlights
Gold Dark
brand-gold-dark
Hover states for gold buttons
Gold Light
brand-gold-light
Gold icon backgrounds, light gold surfaces
Blue
brand-blue / brand-400
Links, badges, secondary accents
Steel
brand-steel
Subtle accents, secondary text on dark
Brand Scale (Navy → Blue)
brand-25 → brand-950
Gray Scale
gray-25 → gray-950
Typography
Two typefaces — Sora for headings and display, Inter for body and UI.
Sora
font-heading · font-display
The quick brown fox
800 · ExtraBold
The quick brown fox
700 · Bold (primary heading weight)
The quick brown fox
600 · SemiBold
The quick brown fox jumps over the lazy dog
400 · Regular
Inter
font-body · font-sans
The quick brown fox jumps over the lazy dog
700 · Bold — emphasis
The quick brown fox jumps over the lazy dog
600 · SemiBold — buttons, labels
The quick brown fox jumps over the lazy dog
500 · Medium — strong body
The quick brown fox jumps over the lazy dog. Attorney Assistant solves the operational problems that prevent law firms from growing.
400 · Regular — body text
Display Scale
4.5rem / 72px
Aa
3.75rem / 60px
Aa
3rem / 48px
Aa
2.25rem / 36px
Aa
1.875rem / 30px
Aa
1.5rem / 24px
Aa
Components
Badges
.badge + .badge-{variant}
Cards
.card
.card .card-hover
Rounded-2xl, gray-200 border, shadow-xs. Hover adds lift + shadow.
Featured Icons
sm
md
lg
.featured-icon + size + variant
Dividers & Accents
.divider-gold
.divider-gold-center
.text-gradient-gold
Grain Overlay
.grain-overlay — adds noise texture via SVG filter
Scroll Reveal
.reveal (before)
.reveal.is-visible (after)
.reveal — fade up 24px
.reveal-left — slide from left 24px
.reveal-scale — scale from 0.95
Stagger: style="transition-delay: 100ms"
Icons
48 custom SVG icons in two categories. All icons are line-style and can be recolored via CSS filter or by editing the SVG fill/stroke.
Business & Finance
analityc 
bank 
bearish 
bullish 
business bag 
business document 
cahs out 
chart 
coins 
exchange 
finance guard 
fund 
group 
hand shake 
investation 
locker 
money bag 
piggy bank 
refund money 
report business 
stick chart 
target 
transfer money 
wallet Law & Legal
banking law 
book law 
business law 
certificate 
crime 
document police 
gender equality 
hammer 
international law 
law scale 
lawyer 1 
lawyer 2 
online law 
paten law 
police file 
police note 
prison 
property law 
research file 
shield 
trust 
umbrella 
withness 1 
withness 2 Usage
<img src="/icons/law and legal_shield.svg" class="w-7 h-7" />
Recolor: style="filter: brightness(0) invert(1);" for white
Sizes: w-5 h-5 (small), w-7 h-7 (standard), w-9 h-9 (large)
Wrap in .featured-icon container for backgrounds
Design Patterns
Static anchor line + rotating diagnostic statement that cycles through 3 problems and stops on the final one.
- Line 1 (static, white): "You don't have a lead problem."
- Line 2 (rotating, gold): intake → follow-up → operations
- Cadence: 2.2s display + 0.5s transition
- Stops on final statement (no loop)
Accordion timeline showing 8 time slots (7:30 AM–11:45 PM). Each row expands to show without/with comparison.
- Location: Homepage only
- First item pre-expanded
- One row open at a time
- Evening rows: muted time color, navy pip
Toggle-based before/after section on Services page. Morphs stat counters, text, and color scheme between states.
- Location: Services page only
- Background: #132d46
- Particles shift blue → gold on toggle
- Stats: 3→0 missed calls, 47→5 min intake, 12→38% conversion
Editorial publication layout with featured article spread, asymmetric editor's picks grid, and sticky tag navigation.
- Masthead: dark navy with gold rules
- Featured: 2-col asymmetric (image 1.2fr + content 1fr)
- Editor's picks: lead card spans 2 rows, side cards horizontal
- Tag nav: sticky, frosted glass
High-conversion pages at /lp/[slug]. No site nav or footer. Problem → solution → proof narrative.
- Dark hero + orbs + inline lead form
- Flow diagram, stat cards, problem list
- Side-by-side without/with comparison
- Dark proof cards with testimonials
Dark navy error page with floating orbs, gradient "404" display text, and two CTAs.
- Background: brand-950 + grain + radial mesh
- 2 orbs at 0.22 opacity, multi-stop keyframes
- btn-primary + btn-ghost-light CTAs
Brand Voice
We Are
- An operations problem-solver, not a staffing vendor
- Confident and direct — we name the problem clearly
- Co-managed — we embed in firms, not outsource from a distance
- Results-oriented — lead with outcomes, not features
- Empowering, not salesy
We Avoid
- Staffing/vendor language ("dedicated assistants," "custom combinations")
- Calling ourselves a "staffing company"
- Overly corporate or stiff language
- Jargon without explanation
- Making promises we can't back up