78 lines
2.5 KiB
Markdown
78 lines
2.5 KiB
Markdown
# Style System
|
|
|
|
## Core Look
|
|
|
|
High-end editorial PPT design with Japanese hand-drawn illustration. The deck should feel like a quiet Japanese lifestyle magazine page: human, calm, textured, imperfect, and refined.
|
|
|
|
## Canvas
|
|
|
|
- Aspect ratio: 16:9
|
|
- Default SVG viewBox: `0 0 1280 720`
|
|
- Background: `#F8F6F2`
|
|
- Safe margin: 80 px minimum
|
|
- Preferred content width: 980-1080 px
|
|
- Texture: subtle grain, sparse speckles, faint paper fibers
|
|
|
|
## Palette
|
|
|
|
- Warm White: `#F8F6F2`
|
|
- Ink Black: `#2B2B2B`
|
|
- Soft Gray: `#BDBDBD`
|
|
- Muted Indigo: `#6C7A89`
|
|
- Pale Wash: `#EAE7E1`
|
|
|
|
Use ink black at softened opacity when possible. Muted indigo is a quiet accent only. Pale wash is for very soft background fills.
|
|
|
|
## Typography
|
|
|
|
Use clean Japanese-style sans-serif typography.
|
|
|
|
- Preferred fonts: `Noto Sans JP`, `Yu Gothic`, `Yu Gothic UI`, `Hiragino Sans`, `Microsoft JhengHei`, `Microsoft YaHei`, `Arial`, sans-serif.
|
|
- Cover title: 52-68 px, 300-500 weight.
|
|
- Slide title: 34-46 px, 300-500 weight.
|
|
- Section label: 11-13 px, 400-500 weight.
|
|
- Body: 18-23 px, 300-400 weight.
|
|
- Caption and annotation: 12-15 px, 300-400 weight.
|
|
- Line height: 1.35-1.65.
|
|
- Letter spacing: 0.02em max; keep it subtle.
|
|
|
|
Avoid heavy bold headings. Use space, alignment, and line breaks for hierarchy.
|
|
|
|
## Layout Rules
|
|
|
|
- Use asymmetric editorial composition.
|
|
- Do not center text and illustration together.
|
|
- Let one side breathe.
|
|
- Keep illustration and text in a quiet conversation.
|
|
- Use thin dividers and tiny annotations rather than framed cards.
|
|
- Leave generous margins around hand-drawn visuals.
|
|
|
|
## Illustration Rules
|
|
|
|
Illustrations should look hand-drawn, not like polished vector icons.
|
|
|
|
- Subjects: daily life, workspace, creative process, human-centered ideas, quiet abstract concepts.
|
|
- Line style: thin, uneven, organic, slightly imperfect.
|
|
- Fill style: very light watercolor wash.
|
|
- Details: sparse annotations, small arrows, tiny labels.
|
|
- Texture: paper grain and pencil softness are welcome.
|
|
- Composition: delicate visual cluster, not full-canvas busy scene.
|
|
|
|
## Graphic Elements
|
|
|
|
- Hand-drawn lines
|
|
- Small note marks
|
|
- Minimal dividers
|
|
- Soft wash blocks
|
|
- Gentle irregular strokes
|
|
|
|
Avoid sharp geometric tech elements, bright dashboards, neon accents, 3D objects, and glossy UI cards.
|
|
|
|
## Data And Diagrams
|
|
|
|
If data or systems must be shown, translate them into soft editorial diagrams:
|
|
|
|
- Use hand-drawn arrows and imperfect connector lines.
|
|
- Use small annotations instead of dense labels.
|
|
- Use pale wash areas for grouping.
|
|
- Keep chart density low.
|