initial: ads-stories project with interesting theme
This commit is contained in:
Никита committed
commit
2b4d8fcc43
36 files changed
+3433
No files matched your search
@@ -0,0 +1,194 @@
|
||||
# Style.md — Figma Analysis v1.0
|
||||
|
||||
> **Статус:** Live from Figma API
|
||||
> **Источник:** https://www.figma.com/file/eK2J5cS2dSzv8kIblv8iOY
|
||||
> **Дата анализа:** 2026-07-05
|
||||
> **Файл:** like stype2
|
||||
> **Версия:** 2372687492209533567
|
||||
|
||||
---
|
||||
|
||||
## 1. CANVAS & LAYOUT
|
||||
|
||||
| Token | Value | Source |
|
||||
|-------|-------|--------|
|
||||
| `--canvas-width` | `1080px` | Stories format |
|
||||
| `--canvas-height` | `1920px` | Stories format |
|
||||
| `--canvas-ratio` | `9:16` | Stories format |
|
||||
| `--bg-canvas` | `#050508` | Derived from #000000 |
|
||||
| `--safe-top` | `280px` | WhatsApp/IG UI |
|
||||
| `--safe-bottom` | `380px` | IG/Telegram UI |
|
||||
| `--safe-content` | `Y:280-1540` | 1260px height |
|
||||
|
||||
---
|
||||
|
||||
## 2. COLORS (7 unique from Figma)
|
||||
|
||||
### Palette
|
||||
|
||||
| Token | Hex | Usage |
|
||||
|-------|-----|-------|
|
||||
| `--color-primary` | `#ffffff` | Фон, текст |
|
||||
| `--color-accent` | `#d1f800` | Жёлтый акцент |
|
||||
| `--color-bg` | `#000000` | Фон тёмный |
|
||||
| `--color-brand` | `#0566fa` | Синий (Stripe-like) |
|
||||
| `--color-surface` | `#feffff` | Поверхность |
|
||||
| `--color-text` | `#161616` | Тёмный текст |
|
||||
| `--color-muted` | `#f4f4f4` | Светлый текст |
|
||||
|
||||
### Gradients
|
||||
|
||||
| Token | Definition |
|
||||
|-------|------------|
|
||||
| `--gradient-primary` | `linear-gradient(135deg, #ffffff, #d1f800)` |
|
||||
| `--gradient-secondary` | `linear-gradient(135deg, #d1f800, #000000)` |
|
||||
| `--gradient-brand` | `linear-gradient(135deg, #0566fa, #d1f800)` |
|
||||
|
||||
### CSS Variables
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-primary: #ffffff;
|
||||
--color-accent: #d1f800;
|
||||
--color-bg: #000000;
|
||||
--color-brand: #0566fa;
|
||||
--color-surface: #feffff;
|
||||
--color-text: #161616;
|
||||
--color-muted: #f4f4f4;
|
||||
|
||||
--gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-accent));
|
||||
--gradient-secondary: linear-gradient(135deg, var(--color-accent), var(--color-bg));
|
||||
--gradient-brand: linear-gradient(135deg, var(--color-brand), var(--color-accent));
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. TYPOGRAPHY (214 instances from Figma)
|
||||
|
||||
### Fonts
|
||||
|
||||
| Font | Family | Weights | Instances |
|
||||
|------|--------|---------|-----------|
|
||||
| Inter | `Inter` | 400, 700 | 214 |
|
||||
|
||||
### Scale
|
||||
|
||||
| Element | Size | Weight | Source |
|
||||
|---------|------|--------|--------|
|
||||
| Base | 14px | 400 | Figma |
|
||||
| Small | 15px | 400 | Figma |
|
||||
| Regular | 16px | 400 | Figma |
|
||||
| Subhead | 18px | 700 | Figma |
|
||||
| Body | 20px | 400 | Figma |
|
||||
| Caption | 21px | 400 | Figma |
|
||||
| Button | 22px | 700 | Figma |
|
||||
| Heading | 24px | 700 | Figma |
|
||||
|
||||
### CSS
|
||||
|
||||
```css
|
||||
:root {
|
||||
--font-primary: 'Inter', -apple-system, sans-serif;
|
||||
--font-size-base: 16px;
|
||||
--font-size-sm: 14px;
|
||||
--font-size-lg: 18px;
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-bold: 700;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. SPACING (derived from Figma frames)
|
||||
|
||||
| Token | Value | Source |
|
||||
|-------|-------|--------|
|
||||
| `--space-1` | `4px` | Micro |
|
||||
| `--space-2` | `8px` | Inline |
|
||||
| `--space-3` | `16px` | Element gaps |
|
||||
| `--space-4` | `24px` | Section |
|
||||
| `--space-5` | `32px` | Component |
|
||||
| `--space-6` | `40px` | Card padding |
|
||||
| `--space-8` | `64px` | Scene gaps |
|
||||
|
||||
---
|
||||
|
||||
## 5. DIMENSIONS (156 frames from Figma)
|
||||
|
||||
### Unique Sizes
|
||||
|
||||
| Size | Count | Usage |
|
||||
|------|-------|-------|
|
||||
| 1920×1080 | 16 | Hero frames |
|
||||
| 184×79 | 9 | Card elements |
|
||||
| 204×58 | 7 | Button variants |
|
||||
| 204×82 | 6 | Input fields |
|
||||
| 184×58 | 4 | Icon containers |
|
||||
|
||||
### Component Sizes
|
||||
|
||||
| Component | Width | Height | Count |
|
||||
|-----------|-------|--------|-------|
|
||||
| Hero | 1920px | 1080px | 16 |
|
||||
| Card | 488px | 416px | 1 |
|
||||
| Button | 204px | 58px | 7 |
|
||||
| Input | 464px | 344px | 1 |
|
||||
| Badge | 63px | 63px | 2 |
|
||||
|
||||
---
|
||||
|
||||
## 6. COMPONENTS (0 components from Figma)
|
||||
|
||||
*Компоненты не найдены в исходном файле. Создаются из фреймов.*
|
||||
|
||||
| Component | Type | Size |
|
||||
|-----------|------|------|
|
||||
| Button | FRAME | 204×58 |
|
||||
| Input | FRAME | 464×344 |
|
||||
| Card | FRAME | 488×416 |
|
||||
| Badge | FRAME | 63×63 |
|
||||
|
||||
---
|
||||
|
||||
## 7. CSS VARIABLES (production-ready)
|
||||
|
||||
```css
|
||||
/* Auto-generated from Figma */
|
||||
:root {
|
||||
/* Colors */
|
||||
--color-primary: #ffffff;
|
||||
--color-accent: #d1f800;
|
||||
--color-bg: #000000;
|
||||
--color-brand: #0566fa;
|
||||
--color-surface: #feffff;
|
||||
--color-text: #161616;
|
||||
--color-muted: #f4f4f4;
|
||||
|
||||
/* Gradients */
|
||||
--gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-accent));
|
||||
--gradient-secondary: linear-gradient(135deg, var(--color-accent), var(--color-bg));
|
||||
--gradient-brand: linear-gradient(135deg, var(--color-brand), var(--color-accent));
|
||||
|
||||
/* Typography */
|
||||
--font-primary: 'Inter', -apple-system, sans-serif;
|
||||
--font-size-base: 16px;
|
||||
--font-size-sm: 14px;
|
||||
--font-size-lg: 18px;
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
/* Spacing */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 16px;
|
||||
--space-4: 24px;
|
||||
--space-5: 32px;
|
||||
--space-6: 40px;
|
||||
--space-8: 64px;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
*Generated from Figma • Figma to HyperFrames v1.0*
|
||||
Reference in new issue
Block a user