73 lines
2.5 KiB
Markdown
73 lines
2.5 KiB
Markdown
# Style System
|
|
|
|
## Core Look
|
|
|
|
High-end editorial PPT design, futuristic tech magazine style. The deck should feel precise, current, and composed: white canvas, clean grid, bold hierarchy, and data-inspired structure.
|
|
|
|
## Canvas
|
|
|
|
- Aspect ratio: 16:9
|
|
- Default SVG viewBox: `0 0 1280 720`
|
|
- Background: `#FFFFFF`
|
|
- Safe margin: 72 px minimum
|
|
- Preferred content width: 1040-1120 px
|
|
- Grid: 12 columns, 24 px gutters, subtle horizontal and vertical guides
|
|
|
|
## Palette
|
|
|
|
- Background: `#FFFFFF`
|
|
- Primary text: `#2B2B2B`
|
|
- Accent: `#2F6BFF`
|
|
- Secondary text: `#6B6B6B`
|
|
- Grid and dividers: `#E6EAF2`
|
|
- Pale module fill: `#F7F9FC`
|
|
|
|
Use electric blue for emphasis, chart highlights, section markers, and key data. Keep it below 10 percent of the slide area.
|
|
|
|
## Typography
|
|
|
|
Use modern sans-serif typography.
|
|
|
|
- Preferred fonts: `Inter`, `Arial`, `Microsoft JhengHei`, `Microsoft YaHei`, sans-serif.
|
|
- Cover title: 56-76 px, 700-800 weight.
|
|
- Slide title: 36-48 px, 700-800 weight.
|
|
- Section label: 11-13 px, uppercase, 600-700 weight.
|
|
- Body: 18-24 px, 400-500 weight.
|
|
- Caption: 12-15 px, 400-500 weight.
|
|
- Line height: 1.08 for large titles, 1.35-1.55 for body text.
|
|
- Letter spacing: 0.
|
|
|
|
Keep headings bold and controlled. Avoid decorative fonts.
|
|
|
|
## Layout Rules
|
|
|
|
- Use asymmetry: one dominant block, one supporting cluster.
|
|
- Leave one side of the slide visibly quieter.
|
|
- Align text and modules to a clear grid.
|
|
- Use thin lines to imply structure instead of enclosing every element.
|
|
- Prefer open modules over heavy cards.
|
|
- Avoid dense bullet lists; convert content into labeled blocks, steps, timelines, or comparison modules.
|
|
|
|
## Geometry
|
|
|
|
- Line weight: 1-2 px.
|
|
- Corners: 0-4 px.
|
|
- Dividers: thin, precise, low-contrast.
|
|
- Shapes: rectangles, brackets, ticks, coordinate marks, axis lines.
|
|
- Do not use soft shadows, glow, blur, radial gradients, or 3D forms.
|
|
|
|
## Data And Diagrams
|
|
|
|
- Charts should be flat, sparse, and editorial.
|
|
- Use blue only for the selected signal.
|
|
- Use graphite and pale grid lines for context.
|
|
- Label directly when possible.
|
|
- Prefer diagram clarity over decorative complexity.
|
|
|
|
## Imagery
|
|
|
|
When images are needed, crop them asymmetrically or edge-aligned. Favor product UI, system diagrams, architecture screenshots, hardware details, or abstract technical photography. Avoid warm lifestyle stock imagery unless the source topic requires it.
|
|
|
|
## Icon Style
|
|
|
|
Use thin outline icons only. Icons must be secondary to typography and data. Keep icon strokes consistent with the grid line language.
|