# LemenzoOS Design System v1.0

## Principles

1. **Security without visual noise.** The interface must feel calm, controlled and trustworthy.
2. **Blue is a signal.** Brand blue marks active, selected and primary actions; it is not a decorative fill for every surface.
3. **Dark, not pure black.** `#05070B` is the default background to preserve depth and hierarchy.
4. **Borders over heavy shadows.** Cards use subtle borders and small surface differences.
5. **Wipe and irreversible actions are red.** Red is reserved for genuine destructive or permanent outcomes.
6. **One ecosystem.** Protect, Voice, Notes, Support and Installer share the same visual grammar.

## Color tokens

- Background: `sl_color_background` (`#05070B`)
- Deep background: `sl_color_background_deep` (`#03060B`)
- Surface: `sl_color_surface`
- Elevated surface: `sl_color_surface_elevated`
- Brand: `sl_color_blue` (`#2563EB`)
- Brand light: `sl_color_blue_light` (`#3B82F6`)
- Success: `sl_color_success`
- Warning: `sl_color_warning`
- Danger: `sl_color_danger`

Never hard-code app colors where a semantic SecureLine token exists.

## Typography

- Display: product or page hero title
- Title Large: main screen title
- Title: major card title
- Heading: row and component title
- Body: explanations and primary supporting text
- Body Small: statuses and secondary descriptions
- Label: section labels in uppercase with tracking

Use the platform sans-serif family to avoid external font dependencies.

## Spacing

The system uses a 4dp base grid. Normal screen padding is 20dp. Standard card padding is 20dp. Major sections are separated by 28dp.

## Radius

- Small: 12dp
- Medium: 16dp
- Large: 20dp
- Hero/dialog: 24dp
- Pill: fully rounded

## Components

### Hero

Centered product identity with icon, title, optional description and semantic status. It should appear once at the top of a main product screen.

### Card

Default grouping surface. Use Info, Warning and Danger variants only when the semantic meaning requires them.

### Dashboard row

Displays one label/value pair. Copy affordance is permitted for identifiers and tokens.

### Protection row

Navigates to a protection detail screen. It shows title, current mode/status and a semantic badge. Configuration controls belong on the detail screen, not the home screen.

### Status badge

Permitted states: neutral, active, warning, danger and information. Keep labels brief.

### Buttons

- Primary: one principal action per screen or section
- Secondary: non-destructive alternative
- Danger: destructive or irreversible action only

## Page structure

Recommended order:

1. Hero or compact top bar
2. Primary status/dashboard
3. Main feature list
4. Supporting information
5. Destructive information/actions last

## Motion

Motion must be short and functional. Prefer 160–220ms transitions. Avoid looping cyber effects, charts or decorative scanning animations.