Phase 0 — Deliverable

Docs Style Guide & Tokens

Standardizing typography, colors, and layout components for the Wiltkey developer documentation.

Design System Tokens

These CSS variables are defined in docs.css and are extracted from the main site to ensure absolute visual parity.

Background Color

--bg-primary: #020617

The primary dark slate backdrop for maximum contrast and focus.

Cyan Accent

--accent-cyan: #06b6d4

Used for links, positive callouts, active navigation states, and primary system states.

Pink Accent

--accent-pink: #ec4899

Used for danger alerts, nukes, destructive operations, and secondary highlights.

Reusable Components

Callouts & Warning Blocks

Callouts are styled using transparent tints matched to their severity. Do not stack them consecutively.

💡 INFO CALLOUT
This is a standard information callout. Use it to highlight design rationale, implementation details, or codebase mappings.

⚠️ WARNING CALLOUT
This is a warning block. Use it to highlight critical design assumptions, potential data loss risks, or security caveats.

🛑 CRITICAL CAUTION
This is a critical caution block. Use it to highlight irreversible actions, decryption failure scenarios, or nuke sequences.

Key Files & Symbols Table

Tables present key functions, variables, classes, and source files with a sleek, low-opacity dark styling.

File Path	Symbol Name	Purpose & Mechanics
`lib/core/state.dart`	`AppState`	Singleton coordinating app-wide reactive state changes.
`lib/core/crypto/otp_service.dart`	`WiltkeyOtpService`	Manages counter-mode SHA-256 OTP pad generation and XOR crypt operations.

Code Block Containers

Code blocks feature a header showing the filename and language tag, enclosing a clean, scrollable pre-formatted container.

                        lib/core/crypto/otp_service.dart
                        DART
                    

static Future<List<int>> xorWithKeystream(
  String contactId,
  List<int> data,
  int offset,
) async {
  // Serialized execution under a file-based lock...
  final result = List<int>.filled(data.length, 0);
  for (int i = 0; i < data.length; i++) {
    result[i] = data[i] ^ keystreamBytes[i];
  }
  return result;
}

Inline SVG Diagrams

All diagrams must be drawn using direct inline SVG wrappers styled to match the dark color palette.