Skip to content

Commit ce8d9da

Browse files
Guilhem-lmGuilhem-lm
authored
feat: add brand guidelines (#1107)
* add brand guidelines * Add typography section * Add colors guideline * Add Logo section * add visual identity sections * add button components * nit * Remove link to guidelines in the navigation bar * Fix download logo for chrome * Implement tailwind theme for guideline components * Add tailwind spec to guideline * Add a display example for the color palette * update text disabled in dark mode * Add secondary accent button * put all components in one page * Add disabled and selected states * add table with components * nit * Improve color guideline * improve typography guidelines * Add form guidelines * update guidelines * add dynamic colors * fix typography table * remove inverse classes * nit * rename folder * update colors page * nit form guidelines * export script for brand guidelines * nit * simplify image embedding * rename folders * nit
1 parent 35ca377 commit ce8d9da

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+4354
-2
lines changed

‎.gitignore‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,8 @@ yarn-error.log*
2525

2626
.aider*
2727
!.aider/
28-
!.aiderignore
28+
!.aiderignore
29+
30+
# Brand guidelines generated files
31+
brand-guidelines.md
32+
brand-guidelines-assets/

‎brandGuidelinesSidebars.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
2+
const sidebars = {
3+
tutorialSidebar: [
4+
{
5+
type: 'doc',
6+
id: 'index',
7+
label: 'Overview'
8+
},
9+
{
10+
type: 'category',
11+
label: 'Brand Foundation',
12+
items: [
13+
{
14+
type: 'doc',
15+
id: 'brand_foundation/dna_mission/index',
16+
label: 'DNA & Mission'
17+
},
18+
{
19+
type: 'doc',
20+
id: 'brand_foundation/buyer_persona/index',
21+
label: 'Buyer Persona'
22+
}
23+
]
24+
},
25+
{
26+
type: 'category',
27+
label: 'Voice & Communication',
28+
items: [
29+
{
30+
type: 'doc',
31+
id: 'voice_communication/tone_of_voice/index',
32+
label: 'Tone of Voice'
33+
}
34+
]
35+
},
36+
{
37+
type: 'category',
38+
label: 'Visual Identity',
39+
items: [
40+
{
41+
type: 'doc',
42+
id: 'visual_identity/logo/index',
43+
label: 'Logo'
44+
},
45+
{
46+
type: 'doc',
47+
id: 'visual_identity/color_system/index',
48+
label: 'Color System'
49+
},
50+
{
51+
type: 'doc',
52+
id: 'visual_identity/typography/index',
53+
label: 'Typography'
54+
},
55+
{
56+
type: 'doc',
57+
id: 'visual_identity/elevation/index',
58+
label: 'Elevation'
59+
}
60+
]
61+
},
62+
{
63+
type: 'category',
64+
label: 'Design System',
65+
items: [
66+
{
67+
type: 'doc',
68+
id: 'design_system/iconography/index',
69+
label: 'Iconography'
70+
},
71+
{
72+
type: 'doc',
73+
id: 'design_system/spacing_grid/index',
74+
label: 'Spacing & Grid'
75+
},
76+
{
77+
type: 'doc',
78+
id: 'design_system/components/index',
79+
label: 'Components'
80+
},
81+
{
82+
type: 'doc',
83+
id: 'design_system/layout/index',
84+
label: 'Layout'
85+
}
86+
]
87+
}
88+
]
89+
};
90+
91+
module.exports = sidebars;

‎brand_guidelines/brand_foundation/0_buyer_persona/buyer.png‎

2.31 MB
Loading

‎brand_guidelines/brand_foundation/0_buyer_persona/index.mdx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# Buyer Persona
2+
3+
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '2rem', marginBottom: '2rem' }}>
4+
<img
5+
src={require('./buyer.png').default}
6+
alt="Alex Thompson - Primary buyer persona"
7+
style={{
8+
width: '150px',
9+
height: '150px',
10+
borderRadius: '50%',
11+
objectFit: 'cover',
12+
flexShrink: 0
13+
}}
14+
/>
15+
<div>
16+
<h3 style={{ margin: '0 0 0.5rem 0' }}>Alex Thompson</h3>
17+
<p style={{ margin: '0.25rem 0'}}>Age: 35–40</p>
18+
<p style={{ margin: '0.25rem 0'}}>Location: Silicon Valley, CA</p>
19+
<p style={{ margin: '0.25rem 0'}}>
20+
Job Title: Senior Software Engineer / Tech Lead
21+
</p>
22+
<p style={{ margin: '0.25rem 0' }}>
23+
Company Type: Tech company (SaaS / Cloud / AI)
24+
</p>
25+
</div>
26+
27+
</div>
28+
29+
> "I want tools that are clear, reliable, and integrate with my workflow — without wasting time on clutter."
30+
31+
### Goals and motivation
32+
33+
- Save time and reduce cognitive load
34+
- Reliable, scalable tools for enterprise needs
35+
- Integrate smoothly with existing workflows
36+
- Professional growth & high-impact projects
37+
38+
### Challenges and pain points
39+
40+
- Cluttered or inconsistent UIs
41+
- Overloaded with information → needs clear, fast access
42+
- Skeptical of flashy marketing → prefers data-driven proof
43+
- Tools must fit developer habits → minimal onboarding
44+
45+
### UX preferences
46+
47+
- Minimalist, clean interfaces
48+
- Dark/light mode options
49+
- Predictable navigation
50+
- Functional icons over decorative elements

‎brand_guidelines/brand_foundation/1_dna_mission/index.mdx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# DNA & Mission
2+
3+
_This section is ready for your brand DNA and mission content._
4+
5+
## Core values
6+
7+
We are a company built on **hard work**, **excellence**, and **honesty**. No fluff, no gimmicks — just powerful tools that let teams focus on what matters. We believe in solving real problems with precision, not spinning around limitations or unnecessary complexity. Our ethos is simple: build smart, work hard, ship excellent results.
8+
9+
## Mission
10+
11+
We provide a powerful job orchestrator designed for enterprise teams. Our platform comes with built-in editors that let you create scripts, flows, and apps — and deploy them seamlessly — without worrying about dependencies, scalability, or hidden constraints.
12+
Unlike typical no-code tools that hit limits quickly, our solution is code-first: fully flexible, fully capable. Every “brick” is code, meaning your workflows, automations, and internal apps are limitless, robust, and future-proof.
13+
14+
Mission Statement:
15+
16+
- To empower companies to focus on what their tools do, not how they work.
17+
18+
Value Proposition:
19+
20+
- Efficiency: remove implementation headaches
21+
- Scalability: no limits, enterprise-ready
22+
- Control: full code power, minimal friction
23+
24+
## What defines us
25+
26+
| We are... | We are not... |
27+
| -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
28+
| ✓ Built on hard work and excellence — Every line of code, every feature, every decision reflects our commitment to quality | ✗ Marketing-heavy with flashy promises — We don't oversell capabilities or hide limitations behind buzzwords |
29+
| ✓ Honest and transparent — We tell you exactly what our tools can do, when they'll be ready, and how they'll help | ✗ Focused on vanity features — We won't add complexity just to have more bullet points on a feature list |
30+
| ✓ Problem solvers with precision — We identify real pain points and engineer elegant solutions that actually work | ✗ Compromise-makers on core functionality — We'd rather ship fewer features that work perfectly than many that work poorly |
31+
| ✓ Focused on what matters — We build tools that let teams concentrate on their core objectives, not fight with software | ✗ Trend-chasers — We adopt new technologies when they solve real problems, not because they're popular |
32+
| ✓ Performance-driven — Our tools are fast, reliable, and built to scale with your growing needs | ✗ Quick-fix merchants — We don't promise overnight transformations or magic solutions |
33+
| ✓ Developer-first thinkers — We understand technical workflows and build for the people who live in code | ✗ Feature-factory oriented — We won't ship half-baked features just to meet arbitrary deadlines |
34+
| ✓ Straightforward communicators — Clear documentation, honest timelines, and direct feedback | ✗ Hiding behind complexity — If something is hard to use, we fix the tool, not write longer documentation |
35+
| ✓ Continuously improving — We iterate based on real usage, not trends or assumptions | ✗ Satisfied with "good enough" — We push for excellence even when the current version works fine |

‎brand_guidelines/brand_foundation/index.mdx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Brand Foundation
2+
3+
This section covers the fundamental elements that define your brand identity and target audience.
4+
5+
## Overview
6+
7+
The brand foundation includes:
8+
- DNA & Mission: Core values, mission statement, and brand personality
9+
- Buyer Persona: Target user profiles and their characteristics
10+
11+
Use the navigation on the left to explore each subsection and add your specific brand foundation content.

‎brand_guidelines/design_system/0_components/index.mdx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
title: Components
3+
description: Component library usage rules and guidelines for Windmill developers
4+
---
5+
6+
import ButtonShowcase from '@site/src/components/guidelines/ButtonThemeToggle';
7+
8+
# Components
9+
10+
## Core Rules
11+
12+
### 1. Always Use the Component Library
13+
14+
**Never create custom components.** Use only the provided components from Windmill's library. If you need functionality that doesn't exist, request it from the design system team.
15+
16+
### 2. No Style Hacking
17+
18+
**Do not override component styles.** Components provide props for all supported variants and configurations. If you need a different appearance, use the appropriate prop variant.
19+
20+
```jsx
21+
// ✅ Correct - use provided variants
22+
<Button variant="primary" size="large">Submit</Button>
23+
24+
// ❌ Wrong - don't add custom styles
25+
<Button class="bg-red-500 px-8">Submit</Button>
26+
```
27+
28+
### 3. Check Guidelines First
29+
30+
**Always consult these component guidelines** before implementing. Each component section specifies:
31+
32+
- When to use each variant
33+
- Proper implementation patterns
34+
- Accessibility requirements
35+
- Common mistakes to avoid
36+
37+
## Quick Reference
38+
39+
### Before You Code
40+
41+
1. Check if a component exists for your use case
42+
2. Read the component's specific guidelines
43+
3. Use only the documented props and variants
44+
4. Test accessibility with keyboard navigation
45+
46+
## Buttons
47+
48+
Windmill uses **4 button types** with clear hierarchy. Each button type comes in 3 variants (text, icon+text, icon-only) and supports multiple states including hover, active, disabled, and selected (default and subtle only).
49+
50+
<ButtonShowcase />
51+
52+
**Button Hierarchy:**
53+
54+
- **Accent Secondary** (Highest Priority): Main conversion CTAs on landing pages - "Sign up", "Get started", "Download"
55+
- **Accent** (High Priority): Most important action per view - "Save", "Submit", "Create" (only one per screen)
56+
- **Default** (Standard Priority): Secondary actions and most UI interactions - "Cancel", "Edit", "Delete"
57+
- **Subtle** (Low Priority): Tertiary actions in dense interfaces - toolbars, button groups
58+
59+
**Button States:**
60+
61+
- **Default**: Standard button appearance
62+
- **Hover**: Interactive feedback when cursor hovers over button
63+
- **Active/Pressed**: Visual feedback when button is clicked or pressed
64+
- **Disabled**: Non-interactive state for unavailable actions
65+
- **Selected**: Active selection state (available only for Default and Subtle variants)
66+
67+
**Usage Rules:**
68+
69+
- ✅ Use appropriate hierarchy, provide tooltips for icon-only buttons, test all states including disabled and selected
70+
- ❌ Don't use multiple Accent buttons per view, use Accent Secondary outside marketing, create custom styles, or use selected state on Accent variants
71+
72+
## Implementation Notes
73+
74+
When implementing any component:
75+
76+
1. **Follow the design system**: Use only the components and variants documented here
77+
2. **Accessibility first**: All components include built-in accessibility features
78+
3. **Test thoroughly**: Verify functionality across different states and themes
79+
4. **Ask questions**: When in doubt, consult the design system team before creating custom solutions

‎brand_guidelines/design_system/1_iconography/index.mdx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
title: Iconography
3+
description: Icon library and usage guidelines for Windmill interfaces
4+
---
5+
6+
# Iconography
7+
8+
We use the **[Lucide icon library](https://lucide.dev/)** to ensure a consistent, modern, and lightweight visual language. Icons are line-only, aligning with our clean and technical aesthetic.
9+
10+
## Do's and Don'ts
11+
12+
### ✅ Do
13+
14+
- Use Lucide icons consistently throughout the interface
15+
- Maintain the original 2px stroke width and style
16+
- Use semantic colors from our color system
17+
- Pair icons with text labels when possible
18+
- Use standard sizes (16px, 20px, 24px, 32px)
19+
- Ensure sufficient contrast for accessibility
20+
21+
### ❌ Don't
22+
23+
- Mix different icon libraries or styles
24+
- Modify the stroke width or visual style
25+
- Use icons as pure decoration without function
26+
- Use icons alone for complex or uncommon actions
27+
- Scale icons to arbitrary sizes
28+
- Create custom icons unless absolutely necessary
29+
30+
Icons should enhance usability and clarity, not complicate the interface. When in doubt, prioritize clear text labels over icons alone.

0 commit comments

Comments
 (0)