Brand Guidelines
Brand identity and communication guidelines for Velist.
Etymology
Velist = Velocity + List
A collection of high-speed tools for building modern applications.
| Part | Meaning | Significance |
|---|---|---|
| Ve | Velocity | Speed — powered by Bun runtime |
| li | List / Linear | Structured & predictable code organization |
| st | Svelte + TypeScript | Core technologies |
Secondary Meaning: Ve also represents Vertical slicing architecture — the core philosophy of the framework.
Core Values
V — Vertical (Slice over Layer)
E — Expressive (Type-safe by default)
L — Lean (Minimal abstraction)
I — Intuitive (Developer experience)
S — Swift (Bun-powered speed)
T — TypeScript (End-to-end types)Fundamental Principles
- Features First, Boilerplate Never — Start from features, not layered templates
- One Folder, One Feature — Every feature is self-contained and complete
- Inline by Design — Tailwind directly in components, no unnecessary abstractions
- Type Safety End-to-End — From database schema to UI props
Brand Persona
| Aspect | Description |
|---|---|
| Personality | Practical, confident, welcoming |
| Voice | Clear, concise, professional yet casual |
| Attitude | "This is the right way" without being condescending |
| Energy | Fast, modern, efficient |
Tone of Voice
✅ Do:
- "Build features, not folder structures"
- "Type-safe from day one"
- "Everything you need, nothing you don't"
❌ Don't:
- "Revolutionary paradigm-shifting framework" (too marketing)
- "You must use this pattern" (too forceful)
- "The best framework ever" (too much claim)
Color Palette
Primary Colors
| Token | Hex | Usage |
|---|---|---|
| Primary | #6366F1 | Logo, primary buttons, links |
| Primary Dark | #4F46E5 | Hover states, depth |
| Accent | #14B8A6 | Type safety indicators, success states |
| Energy | #F97316 | CTAs, Bun speed highlights |
| Background | #0B0F19 | Dark mode background (obsidian) |
| Surface | #151B2B | Cards, panels |
| Text Primary | #F1F5F9 | Headings |
| Text Secondary | #94A3B8 | Body text |
Gradients
/* Primary Gradient - Hero sections */
--gradient-primary: linear-gradient(135deg, #6366F1 0%, #14B8A6 100%);
/* Energy Gradient - CTAs */
--gradient-energy: linear-gradient(135deg, #F97316 0%, #FDBA74 100%);
/* Feature Slice - Vertical representation */
--gradient-slice: linear-gradient(180deg, #6366F1 0%, #4F46E5 50%, #3730A3 100%);Typography
| Usage | Font | Weight |
|---|---|---|
| Headings | Inter / Geist | 600-700 |
| Body | Inter / Geist | 400-500 |
| Code | JetBrains Mono / Fira Code | 400 |
Taglines
Primary Taglines
| Tagline | Use Case |
|---|---|
| "Features first. Boilerplate never." | Default, most contexts |
| "Stack vertically. Ship horizontally." | Conferences, keynotes |
| "Fullstack, sliced right." | Social media, short form |
Secondary Taglines
| Tagline | Context |
|---|---|
| "From feature to production. Fast." | Performance marketing |
| "Where features live together." | Community building |
| "Type-safe from database to UI." | Technical audience |
| "One folder = One feature" | Documentation |
Positioning Statement
For: Fullstack TypeScript developers frustrated with excessive boilerplate and confusing architecture.
Who need: A fast way to build production-ready applications without thinking about folder structure or wiring between layers.
Velist is: A feature framework combining Elysia + Inertia + Svelte + Kysely with vertical slice architecture.
That provides: End-to-end type safety, minimal abstraction, and intuitive developer experience.
Unlike: Boilerplate projects that just collect technologies without architectural opinions.
We: Provide a proven feature-first philosophy with complete tooling and consistent patterns.
Brand Story
Legacy frameworks force you to think in layers—controllers here, models there, views somewhere else. But applications aren't built in layers; they're built in features.
Velist inverts the pyramid. Every feature is self-contained, type-safe, and production-ready. No more jumping between folders. No more wondering where to put code. Just build.
Powered by Bun. Typed by TypeScript. Rendered by Svelte. Connected by Inertia. Organized by vertical slices.
This is how modern teams actually build software.
Communication Style
Vocabulary Guidelines
| Don't Say | Say Instead |
|---|---|
| "Boilerplate" | "Starting point" / "Foundation" |
| "Architecture pattern" | "How features should live" |
| "No components" | "Inline by design" |
| "Fullstack framework" | "Feature framework" |
| "Best practice" | "Recommended pattern" |
| "You should" | "We recommend" / "Consider" |
Code-First Communication
- Show real code, not abstract diagrams
- Minimal working examples, not lengthy theory
- Helpful and actionable error messages
Quick Reference
One-Liner
Velist is a features-first fullstack framework combining Elysia, Inertia, Svelte, and Kysely with vertical slice architecture.
Elevator Pitch (30 seconds)
"Velist solves the 'where should I put this code' problem. Instead of organizing by technical layers—controllers, models, views—you organize by features. Each feature is a self-contained folder with its own API, business logic, database queries, and UI components. Everything is type-safe from database to browser. And because it runs on Bun, it's blazing fast."
Three Words
Vertical. Typed. Fast.