> ## Documentation Index
> Fetch the complete documentation index at: https://helloluciallc.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Logo System
The Eval Labs logo should be used simply and consistently: small, sharp, quiet, and paired with clear body copy.
The asset guidance on this page remains a brand reference. Sections describing
`publish.css`, Obsidian layout behavior, or Obsidian tuning knobs are historical
and are not current Mintlify implementation instructions. Current presentation
is owned by the repository's MDX and `style.css`.
***
## Primary logo asset
Current primary asset:
```text theme={"dark"}
assets/binary-eval-logo.png
```
Use this asset for the docs homepage identity block and any Canon references to the Eval Labs mark.
***
## Homepage Logo/Text Table
This is the working Markdown pattern for the homepage logo/text unit:
```md theme={"dark"}
| | |
|---|---|
| 
Eval Labs Logo. | Eval Labs serves as the definitive proprietary AI audit-layer, engineered to govern and validate the hyper-complex outputs of Lucia’s cognitive core. |
```
Do not add image sizing inside the Markdown embed.
Correct:
```md theme={"dark"}
```
Avoid inside tables:
```md theme={"dark"}
```
The normal pipe character can interfere with Markdown table parsing.
***
## What the homepage block should look like
```text theme={"dark"}
purple rail on the left
small logo on the left
caption under logo
body text on the right
table borders invisible
mobile content safely inset from the rail
```
***
## Logo/Text Table tuning knobs
These live near the bottom of `publish.css` in the block labeled:
```css theme={"dark"}
Eval Labs — Logo/Text Table Tuning Knobs
```
### Logo size
```css theme={"dark"}
--eval-logo-row-logo-width: 120px;
```
Controls the visible logo size.
Increase for a larger logo.
Decrease for a smaller logo.
***
### Left column width
```css theme={"dark"}
--eval-logo-row-left-column: 190px;
```
Controls the full space reserved for the logo/caption column.
Increase if the logo area feels cramped.
Decrease if the right-side text feels too far away.
***
### Distance from purple rail
```css theme={"dark"}
--eval-logo-row-left-padding: 2rem;
```
Controls how far the logo sits away from the purple vertical rail.
Increase if the logo feels too close to the rail.
Decrease if the block feels too indented.
***
### Gap between logo and text
```css theme={"dark"}
--eval-logo-row-gap: 2rem;
```
Controls the horizontal gap between the left logo/caption and right-side text.
Increase if the text feels crowded.
Decrease if the text feels disconnected.
***
### Text vertical alignment
```css theme={"dark"}
--eval-logo-row-copy-top: 16px;
```
This is the main alignment knob.
Increase to move the right-side text down.
Decrease to move the right-side text up.
Most fine-tuning should happen here.
***
### Logo-to-caption spacing
```css theme={"dark"}
--eval-logo-row-caption-gap: 0.75rem;
```
Controls the space between the logo and the italic caption.
***
### Right-side text size
```css theme={"dark"}
--eval-logo-row-copy-size: 16px;
```
Controls the right-side body copy size.
Keep this near normal body text size.
***
### Right-side line height
```css theme={"dark"}
--eval-logo-row-copy-line-height: 1.62;
```
Controls the line spacing of the right-side text.
Increase for airier reading.
Decrease for tighter text.
***
## Mobile tuning knob
This lives in the block labeled:
```css theme={"dark"}
Eval Labs — Mobile Logo/Text Table Rail Safety
```
```css theme={"dark"}
--eval-logo-row-mobile-inset: 34px;
```
Controls how far stacked mobile content sits away from the purple rail.
Increase if mobile text gets too close to the rail.
Decrease only if the mobile block feels too indented.
***
## Do
* Use the logo small
* Keep the background transparent
* Pair it with clear body copy
* Preserve the purple rail treatment on the homepage block
* Keep captions short and factual
***
## Do not
* Stretch the logo
* Add heavy borders around the logo
* Put the logo inside a card unless intentionally designing a new component
* Use the mark as decoration between unrelated sections
* Oversize the logo into a hero graphic unless a new design is explicitly approved