Overview

The design system for Literal Labs conveys a “premium-industrial” aesthetic that balances technical precision with modern, clean layouts. It visually represents the efficiency, transparency, and logical simplicity of Logic-Based Networks.

Colors

The palette is built on high-contrast foundations with vibrant accents.

• Literal Orange (#ff601e): Used for critical calls to action, navigation icons, and emphasized text. It is a warm, energetic color that stands out against the technical neutral tones.
• Surface Neutrals: An off-white/light grey foundation (#f4f5f6) is used for general backgrounds, while pure white is used in content blocks to create depth and structure.
• Deep Slate/Dark Grey: High-contrast text uses #252728 to maintain a professional, corporate-tech feel instead of absolute black.
• Semantic Accents: Cool purples (#f0edf8) and deep blues (#21599d) are used to soften AI advice bubbles and link interactions.

Typography

The typography is distinct and relies on a mix of modern and traditional typefaces.

• Primary Headings & Body (F37 Jan): Clean, modern, and legible. The wide sans-serif provides structure.
• Serif-Italic Accents (Georgia): Used to inject a humanistic, crafted feel inside technical headers (e.g., A better class of AI <span>Built for the edge</span>).
• Utility Text (Ioskeley Mono): Used for section labels and technical micro-copy. It reinforces the engineering and “logic” theme of the brand.

Layout & Spacing

The layout acts as a visible blueprint.

• Visible Grid: Explicit thin 1px borders often divide sections, columns, and feature blocks, reminiscent of architectural or engineering plans.
• Rhythm: Driven by an 8px (0.5rem) gutter-small variable.
• Whitespace: Despite rigid grid lines, generous paddings (spacer: 64px, double: 60px) ensure the UI feels airy and sophisticated.

Shapes

Shapes are grounded but friendly.

• Structured Foundations: Large containers, grid borders, and layout blocks maintain sharp edges to align with the blueprint theme.
• Interactive Softness: Buttons, inner cards, and “AI advice” elements utilize an 8px (0.5rem) border radius to soften user interactions and make the complex technology approachable.
• Buttons: Primary buttons are bright orange with white text, utilizing hover states to dim slightly into brand-hover.

Components

The system leverages stacked interfaces and distinct badges to guide the user.

• Section Titles: A tab-like orange badge using the mono font provides clear signposting for technical sections.
• CTA Stack: The primary calls-to-action utilize a layered “stack” effect, creating a feeling of stacked logic gates or neural layers.