Интранетус

# Интранетус — Style Reference
> Whiteboard doodle productivity

**Theme:** light

The Интранетус design system presents a clean, brightly lit interface centered around a vivid blue accent. This blue is used sparingly but impactfully to highlight interactive elements and convey primary actions. Typography is a mix of modern sans-serifs and a more traditional serif for headings, creating a subtle tension between straightforward utility and classic legibility. Component surfaces are generally crisp white, relying on ample negative space and minimal borders rather than heavy shadows for definition.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas | `#ffffff` | `--color-canvas` | Page backgrounds, card surfaces, UI containers |
| Ink Black | `#000000` | `--color-ink-black` | Primary text, strong borders, icons, and some background fills on specific elements like navigation |
| Deep Graphite | `#2c3038` | `--color-deep-graphite` | Secondary background surfaces for UI elements, providing subtle differentiation |
| Medium Gray | `#555555` | `--color-medium-gray` | Secondary text color and some borders, offering visual relief from pure black |
| Light Gray | `#b3b3b3` | `--color-light-gray` | Medium-contrast borders, control outlines, and structural separators. Do not promote it to the primary CTA color |
| Shadow Tint | `#96989c` | `--color-shadow-tint` | Base tint for subtle shadows, suggesting depth without strong opacity |
| Action Blue | `#0089ff` | `--color-action-blue` | Primary actionable elements like links, button backgrounds, and active state indicators |
| Muted Blue Wash | `#b3dcff` | `--color-muted-blue-wash` | Subtle borders for interactive elements, providing a soft blue outline |
| Vivid Violet | `#384bec` | `--color-vivid-violet` | Violet outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color |

## Tokens — Typography

### ALSArtemiusSans — Body text, navigation, helper text, and various UI elements. Its widespread use makes it the primary workhorse font, maintaining legibility and a contemporary feel. · `--font-alsartemiussans`
- **Substitute:** Inter
- **Weights:** 400, 700
- **Sizes:** 13px, 14px, 15px, 16px, 18px, 21px
- **Line height:** 1.00, 1.20, 1.40, 1.50, 2.67
- **Letter spacing:** 0.200em
- **OpenType features:** `"kern", "liga" 0`
- **Role:** Body text, navigation, helper text, and various UI elements. Its widespread use makes it the primary workhorse font, maintaining legibility and a contemporary feel.

### ALSArtemiusSerif — Headings and prominent display text. The serif face adds a touch of classic authority and visual distinction to section titles. · `--font-alsartemiusserif`
- **Substitute:** Merriweather
- **Weights:** 400, 700
- **Sizes:** 16px, 21px, 28px, 40px, 48px
- **Line height:** 1.20, 1.30
- **Letter spacing:** normal
- **OpenType features:** `"kern", "liga" 0`
- **Role:** Headings and prominent display text. The serif face adds a touch of classic authority and visual distinction to section titles.

### ALS-logo — Used for specific brand elements and unique text styles, contributing to the brand's distinctive visual identity. · `--font-als-logo`
- **Substitute:** Arial
- **Weights:** 400
- **Sizes:** 18px, 25px
- **Line height:** 1.00
- **Letter spacing:** normal
- **OpenType features:** `"kern", "liga" 0; "ss15"; "ss14"; "ss12"`
- **Role:** Used for specific brand elements and unique text styles, contributing to the brand's distinctive visual identity.

### Artemius Sans Neue — Supplementary text, icons, and less prominent UI labels. Used to provide visual contrast and hierarchy without adding another full font family. · `--font-artemius-sans-neue`
- **Substitute:** Inter
- **Weights:** 400
- **Sizes:** 16px, 18px
- **Line height:** 1.00, 1.20
- **Letter spacing:** normal
- **OpenType features:** `"kern", "liga" 0`
- **Role:** Supplementary text, icons, and less prominent UI labels. Used to provide visual contrast and hierarchy without adding another full font family.

### als_hauss — Large, impactful headings for hero sections, demanding attention with its significant size and medium weight. · `--font-alshauss`
- **Substitute:** Montserrat
- **Weights:** 500
- **Sizes:** 64px
- **Line height:** 1.20
- **Letter spacing:** normal
- **OpenType features:** `"kern", "liga" 0`
- **Role:** Large, impactful headings for hero sections, demanding attention with its significant size and medium weight.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 13px | 1.4 | 0.26px | `--text-caption` |
| body | 16px | 1.4 | 0.32px | `--text-body` |
| subheading | 18px | 1.2 | 0.36px | `--text-subheading` |
| heading-sm | 21px | 1.2 | 0.42px | `--text-heading-sm` |
| heading | 28px | 1.2 | 0.56px | `--text-heading` |
| heading-lg | 40px | 1.2 | 0.8px | `--text-heading-lg` |
| display | 64px | 1.2 | 1.28px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 64 | 64px | `--spacing-64` |
| 68 | 68px | `--spacing-68` |
| 120 | 120px | `--spacing-120` |
| 160 | 160px | `--spacing-160` |
| 216 | 216px | `--spacing-216` |

### Border Radius

| Element | Value |
|---------|-------|
| misc | 20px |
| badges | 12px |
| buttons | 25px |
| default | 4px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| xl | `rgba(44, 48, 56, 0.5) 0px 30px 140px -50px` | `--shadow-xl` |
| xl-2 | `rgba(44, 48, 56, 0.5) 0px 30px 80px -30px` | `--shadow-xl-2` |

### Layout

- **Section gap:** 28px
- **Card padding:** 0px
- **Element gap:** 10px

## Components

### Navigation Link
**Role:** Primary navigation element

Text in ALSArtemiusSans, often weight 400 or 700. Interactive elements with a border-bottom of 1px solid Action Blue (#0089ff) on hover or active state, and a color change to Action Blue. Default links are Ink Black (#000000).

### Primary Action Button
**Role:** Call to action button

Filled button with a background of Action Blue (#0089ff) and text color of Canvas (#ffffff). Border-radius of 25px for a pill-like shape. Padding: 10px-11px horizontal, 7px-8px vertical.

### Ghost Action Button
**Role:** Secondary or tertiary action button

Transparent background with a border of 1px solid Action Blue (#0089ff) and text in Action Blue (#0089ff). Rounded corners apply at 25px radius. Often used for less prominent actions.

### Info Badge
**Role:** Categorization or status indicator

Transparent background with Ink Black (#000000) text and a border-radius of 12px. Padding can vary, but typically has generous vertical padding (e.g., 52px top).

### Card Surface
**Role:** Content container

Utilizes Canvas (#ffffff) as the background. Default card surfaces have no border, shadow, or padding, appearing as a clean, flat plane. Used to contain sections of content.

## Do's and Don'ts

### Do
- Prioritize Canvas (#ffffff) and Ink Black (#000000) for most UI elements, reserving Action Blue (#0089ff) for interactive states and primary calls to action.
- Apply a 25px border-radius to all primary buttons for a consistent pill-shape.
- Use ALSArtemiusSans for body text, UI labels, and navigation, maintaining an overall functional aesthetic.
- Employ ALSArtemiusSerif for main headings (28px and larger) to add gravitas and visual interest.
- Maintain comfortable spacing with a base unit of 4px; target 10px for element gaps and 28px for section gaps.
- Utilize mild shadows like rgba(44, 48, 56, 0.5) 0px 30px 140px -50px for subtle elevation, primarily on interactive elements or images.
- Use the Muted Blue Wash (#b3dcff) for subtle interactive element borders that require a softer visual cue than solid Action Blue.

### Don't
- Avoid using multiple chromatic colors in close proximity; the design relies on a single vivid blue for accent.
- Do not introduce strong, opaque shadows; leverage the subtle, diffuse shadows provided (rgba(44, 48, 56, 0.5) 0px 30px 140px -50px).
- Refrain from heavy background gradients or patterns; the system values clean, solid surfaces.
- Do not deviate significantly from the established typefaces; ALSArtemiusSans and ALSArtemiusSerif define the typographic voice.
- Avoid excessive use of borders; many elements are defined by negative space and clear backgrounds.
- Do not use dark backgrounds for main content areas; the system is firmly established as a light theme with bright Canvas (#ffffff) surfaces.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#ffffff` | Base page background and default content container. |
| 1 | Deep Graphite | `#2c3038` | Secondary background for specific UI regions or interactive elements, providing moderate contrast with the Canvas. |

## Elevation

- **Interactive Link/Button:** `rgba(44, 48, 56, 0.5) 0px 30px 140px -50px`
- **Image:** `rgba(44, 48, 56, 0.5) 0px 30px 80px -30px`

## Imagery

The visual language is characterized by abstract, colorful, and often whimsical illustrations resembling whiteboard doodles or children's drawings. These graphics feature organic, freeform shapes, saturated colors (neons like lime green, hot pink, vivid yellow), and playful scribbled elements. Imagery is primarily decorative rather than product-focused, serving to imbue the interface with a lighthearted, creative atmosphere. Icons are minimalist, often outlined in black, with a medium stroke weight. Density is low, with illustrations occupying ample white space, ensuring the UI remains text-dominant.

## Layout

The page primarily uses a max-width contained layout, with content centered. The hero section often features a large, whimsical illustration above the fold, with a prominent headline (display-sized) centered. Section rhythm is consistent, with generous vertical spacing between content blocks and an overall airy feel. Content is typically arranged in either a single-column centered stack or alternating text-and-image patterns. No explicit grid usage for card layouts is prominent, but rather distinct content blocks. Navigation consists of a top bar that appears fixed, featuring text links and simple icons.

## Agent Prompt Guide

Quick Color Reference: 
text: #000000
background: #ffffff
border: #000000
accent: #0089ff
primary action: #0089ff (outlined action border)

Example Component Prompts:
1. Create an Outlined Primary Action: Transparent background, #0089ff border and text, 9999px radius, compact pill padding. Use it for the main CTA instead of a filled button.
2. Design a navigation link: text Ink Black (#000000), font ALSArtemiusSans weight 400, on hover, a 1px solid Action Blue (#0089ff) border-bottom and text Action Blue (#0089ff).
3. Generate a heading for a section: text Ink Black (#000000), font ALSArtemiusSerif weight 700, size 48px, line-height 1.2.
4. Produce an info badge: transparent background, text Ink Black (#000000), border-radius 12px, 52px top padding.
5. Create a simple content card: background Canvas (#ffffff), no border, no shadow, 0px padding.

## Similar Brands

- **Figma** — White canvas aesthetic, minimal borders, and a reliance on color for interactive emphasis, coupled with a clean sans-serif typography.
- **Linear** — High contrast between text and background, focus on functional typography, and subtle use of a single accent color for interaction and status.
- **Notion** — Dominantly white interface, use of varied text sizes for hierarchy, and a calm, spacious layout promoting focus on content.
- **Mailchimp** — Whimsical, colorful illustrations used to soften a functional interface, and a clear, readable sans-serif for main text.
- **Miro** — Whiteboard-like canvas, with playful graphic elements and a primary focus on clean UI for creative collaboration.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas: #ffffff;
  --color-ink-black: #000000;
  --color-deep-graphite: #2c3038;
  --color-medium-gray: #555555;
  --color-light-gray: #b3b3b3;
  --color-shadow-tint: #96989c;
  --color-action-blue: #0089ff;
  --color-muted-blue-wash: #b3dcff;
  --color-vivid-violet: #384bec;

  /* Typography — Font Families */
  --font-alsartemiussans: 'ALSArtemiusSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-alsartemiusserif: 'ALSArtemiusSerif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-als-logo: 'ALS-logo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-artemius-sans-neue: 'Artemius Sans Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-alshauss: 'als_hauss', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.4;
  --tracking-caption: 0.26px;
  --text-body: 16px;
  --leading-body: 1.4;
  --tracking-body: 0.32px;
  --text-subheading: 18px;
  --leading-subheading: 1.2;
  --tracking-subheading: 0.36px;
  --text-heading-sm: 21px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: 0.42px;
  --text-heading: 28px;
  --leading-heading: 1.2;
  --tracking-heading: 0.56px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: 0.8px;
  --text-display: 64px;
  --leading-display: 1.2;
  --tracking-display: 1.28px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-68: 68px;
  --spacing-120: 120px;
  --spacing-160: 160px;
  --spacing-216: 216px;

  /* Layout */
  --section-gap: 28px;
  --card-padding: 0px;
  --element-gap: 10px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-xl: 12px;
  --radius-2xl: 20px;
  --radius-3xl: 25px;
  --radius-full: 100px;

  /* Named Radii */
  --radius-misc: 20px;
  --radius-badges: 12px;
  --radius-buttons: 25px;
  --radius-default: 4px;

  /* Shadows */
  --shadow-xl: rgba(44, 48, 56, 0.5) 0px 30px 140px -50px;
  --shadow-xl-2: rgba(44, 48, 56, 0.5) 0px 30px 80px -30px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-deep-graphite: #2c3038;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-canvas: #ffffff;
  --color-ink-black: #000000;
  --color-deep-graphite: #2c3038;
  --color-medium-gray: #555555;
  --color-light-gray: #b3b3b3;
  --color-shadow-tint: #96989c;
  --color-action-blue: #0089ff;
  --color-muted-blue-wash: #b3dcff;
  --color-vivid-violet: #384bec;

  /* Typography */
  --font-alsartemiussans: 'ALSArtemiusSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-alsartemiusserif: 'ALSArtemiusSerif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-als-logo: 'ALS-logo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-artemius-sans-neue: 'Artemius Sans Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-alshauss: 'als_hauss', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.4;
  --tracking-caption: 0.26px;
  --text-body: 16px;
  --leading-body: 1.4;
  --tracking-body: 0.32px;
  --text-subheading: 18px;
  --leading-subheading: 1.2;
  --tracking-subheading: 0.36px;
  --text-heading-sm: 21px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: 0.42px;
  --text-heading: 28px;
  --leading-heading: 1.2;
  --tracking-heading: 0.56px;
  --text-heading-lg: 40px;
  --leading-heading-lg: 1.2;
  --tracking-heading-lg: 0.8px;
  --text-display: 64px;
  --leading-display: 1.2;
  --tracking-display: 1.28px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-68: 68px;
  --spacing-120: 120px;
  --spacing-160: 160px;
  --spacing-216: 216px;

  /* Border Radius */
  --radius-md: 4px;
  --radius-xl: 12px;
  --radius-2xl: 20px;
  --radius-3xl: 25px;
  --radius-full: 100px;

  /* Shadows */
  --shadow-xl: rgba(44, 48, 56, 0.5) 0px 30px 140px -50px;
  --shadow-xl-2: rgba(44, 48, 56, 0.5) 0px 30px 80px -30px;
}
```