# Modern Tech Style — AI design spec

> Emphasizes simplicity, efficiency, and data-driven design. Common in SaaS, applications, and dashboards. Features clean layouts, modern sans-serif fonts, functional icons, possible gradients or cool color tones, and sometimes a dark mode.
>
> Style page: https://www.aiwebstyle.com/styles/modern-tech.html · Live preview: https://www.aiwebstyle.com/previews/modern-tech.html
>
> Drop this file at the root of a project and point your coding agent at it. Every value is copied from the working stylesheet, not estimated.

## 1. What this style is

Modern Tech style is the application of modern design principles to digital products, software interfaces, and technology-related websites. It prioritizes clarity, efficiency, and user experience, often with a precise, cutting-edge feel.

## 2. Tokens

### Page surface

| Token | Value | Purpose |
|---|---|---|
| `--page-bg` | `#49efed` | Page background (solid fallback) |
| `--page-bg-gradient` | `linear-gradient(to bottom, #8ff8fc, #e3fa8f)` | Page background gradient; overrides the solid unless `none` |

### Text

| Token | Value | Purpose |
|---|---|---|
| `--text-color` | `#181c22` | Body text |
| `--heading-color` | `#0b132b` | Headings |

### Links

| Token | Value | Purpose |
|---|---|---|
| `--link-color` | `#4d5bff` | Link and inline accent |
| `--link-hover-color` | `#3a4bf0` | Link hover |

### Borders

| Token | Value | Purpose |
|---|---|---|
| `--border-color` | `#000000` | Dividers and input borders |

### Cards

| Token | Value | Purpose |
|---|---|---|
| `--card-bg` | `#49ecef` | Card surface |
| `--card-border-radius` | `4px` | Card corner radius |
| `--card-shadow` | `0 3px 10px rgba(29, 35, 42, 0.08)` | Card at rest |
| `--card-hover-shadow` | `0 5px 15px rgba(29, 35, 42, 0.12)` | Card on hover |

### Header

| Token | Value | Purpose |
|---|---|---|
| `--header-bg` | `#ffffff` | Sticky header surface |
| `--header-text-color` | `var(--text-color)` | Header text and nav links |
| `--header-shadow` | `0 1px 3px rgba(29, 35, 42, 0.05)` | Header elevation (usually `none`) |

### Footer

| Token | Value | Purpose |
|---|---|---|
| `--footer-bg` | `var(--page-bg)` | Footer surface |
| `--footer-text-color` | `#6c757d` | Footer text |

### Buttons

| Token | Value | Purpose |
|---|---|---|
| `--button-bg` | `linear-gradient(to bottom, #5a6aff, #4d5bff)` | Primary button fill |
| `--button-text-color` | `white` | Primary button label |
| `--button-hover-bg` | `linear-gradient(to bottom, #4d5bff, #3a4bf0)` | Primary button hover fill |
| `--button-border` | `none` | Primary button border |
| `--button-secondary-bg` | `#e9ecef` | Secondary button fill |
| `--button-secondary-text-color` | `#495057` | Secondary button label |
| `--button-secondary-hover-bg` | `#dee2e6` | Secondary button hover fill |

### Code / prompt block

| Token | Value | Purpose |
|---|---|---|
| `--prompt-bg` | `#eef2f7` | Code / prompt block surface |
| `--prompt-text-color` | `#343a40` | Code / prompt block text |

### Type

| Token | Value | Purpose |
|---|---|---|
| `--base-font` | `var(--font-pop)` | Body font stack |
| `--heading-font` | `var(--font-pop)` | Heading font stack |

### Other tokens in this theme

| Token | Value |
|---|---|
| `--button-shadow` | `0 1px 2px rgba(77, 91, 255, 0.2)` |
| `--button-hover-shadow` | `0 2px 4px rgba(77, 91, 255, 0.2), 0 0 8px rgba(77, 91, 255, 0.3)` |
| `--button-secondary-border` | `none` |
| `--button-border-radius` | `2px` |
| `--mono-font` | `var(--font-roboto-mono)` |

## 3. Do

- Drive every color, radius and shadow from the tokens below. No literal hex values in component code.
- Reuse the `--card-*` tokens for any elevated surface (card, panel, modal, dropdown) so elevation stays consistent.
- Keep header and footer on `--header-*` / `--footer-*` even when the page background is a gradient.

## 4. Don't

- Do not blend tokens from another style in this library — one page, one token set.
- Do not invent a hover state: every interactive element has a `*-hover-*` token above.

## 5. Using this with a coding agent

Place this file at the project root as `DESIGN.md`, then instruct the agent:

> Follow `DESIGN.md` for all UI. Every color, radius and shadow comes from its token table. If you need a state that is not listed, derive it from the nearest listed token and add the new token to `DESIGN.md` instead of hard-coding a value.

If the project already has a token layer (Tailwind config, CSS custom properties, a theme file), map these tokens onto it one-to-one and keep the names unchanged.

## 6. Original prompt

```text
Design a modern tech dashboard UI for data analytics. Use a clean layout with cards, charts (bar, line), Inter or Poppins font, a cool color palette (blues, purples, greys), clear data visualization, and subtle hover effects.
```

---

*Generated from the `modern-tech` theme in `style.css`. Token values are verbatim — regenerate rather than edit by hand.*