Skip to content
This repository was archived by the owner on Mar 26, 2026. It is now read-only.

Commit f45dedf

Browse files
memenoboxdevmemenoboxdev
authored
Merge pull request #13 from No-Box-Dev/feat/add-products-and-docs
Add Products component, logbook, and style guide
2 parents 8cc955b + f77f8e0 commit f45dedf

4 files changed

Lines changed: 539 additions & 0 deletions

File tree

‎LOGBOOK.md‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# No Box Dev Website Logbook
2+
3+
Development log for the No Box Dev website project.
4+
5+
---
6+
7+
## 2026-03-03
8+
9+
### Next.js Migration
10+
- Website migrated from static HTML/CSS/JS to Next.js (v16.1.6)
11+
- New component-based architecture with CSS Modules
12+
- Deploy workflow added via GitHub Actions
13+
- Custom fonts (Aeonik, Arbeit) in `/public/fonts/`
14+
15+
### Homepage Copy Updates
16+
- Hero headline: "We build products that understand people" (was "We design products")
17+
- Tagline: "Where psychology meets beautiful engineering" (was "behavioral science")
18+
- Philosophy statement reformatted onto separate lines for emphasis
19+
- CTA section: title changed to "Let's Talk", tagline updated to "Working on something exciting and need support? We build human-centered digital products. Drop us a line."
20+
21+
### Mouse Glow Effect
22+
- Increased glow opacity (~2-3x) for better visibility on both dark and light sections
23+
24+
### Our Products Section (NEW)
25+
- Added new "Our Products" / "Built by NoBoxDev" section before Contact
26+
- Feature grid layout (3 columns, responsive)
27+
- Light-muted background (matching Case Studies section)
28+
- Products listed: Blindspot, Boundless, GitPulse
29+
- **Note: These applications are NOT public yet — do not link to live URLs or repos**
30+
31+
### Products (Internal Reference)
32+
| Product | Description | Status |
33+
|---------|-------------|--------|
34+
| Blindspot | Bug reporting tool with AI-powered screenshot analysis (widget + API + dashboard) | Active, not public |
35+
| Boundless | Smart learning platform for remote families | Active, not public |
36+
| GitPulse | AI-powered project management dashboard for GitHub organisations | Active, not public |
37+
38+
---
39+
40+
## 2026-01-07
41+
42+
### AI Section - Complete Redesign
43+
44+
**Background & Layout:**
45+
- Changed background from light purple gradient to solid purple (#B49AF7)
46+
- Updated cards from 3-column to 2-column grid layout
47+
- Cards now have transparent background with white border stroke
48+
- Added hover effect: cards turn white with purple text on hover
49+
50+
**Content Updates:**
51+
- Consolidated two philosophy blocks into one
52+
- Single subtitle: "Workflow Support, Not Blind Automation"
53+
- Three paragraphs stacked vertically with increased text size (16px body, 20px title)
54+
- Closing sentence "Good AI does not try to impress. It helps users move forward." styled italic and thin
55+
- Updated all 6 card texts to be more concise:
56+
1. Plug & Play AI
57+
2. Custom AI Solutions
58+
3. Data-Driven Intelligence
59+
4. Decision and Support Insight
60+
5. Workflow Automation
61+
6. Scalable AI Architecture
62+
63+
### How We Work Section
64+
65+
- Changed from scroll-triggered effect to hover effect
66+
- Hover now shows peach fill with white text
67+
- Removed scroll-based JavaScript
68+
69+
### Style Guide
70+
71+
- Created STYLE_GUIDE.md with complete design system
72+
- Updated color naming: #FE795D = "Peach", #B49AF7 = "Purple"
73+
- Updated CSS variable --color-secondary to #B49AF7
74+
- Consolidated hardcoded purple values to use CSS variable
75+
76+
### References
77+
78+
- Added new reference images in `/references/AI/` folder:
79+
- HoneyBook Web 737.png
80+
- Hims Web 174.png
81+
- Hims Web 127.png
82+
83+
---

‎STYLE_GUIDE.md‎

Lines changed: 300 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,300 @@
1+
# No Box Dev Design Style Guide
2+
3+
This document contains the official design system for the No Box Dev website.
4+
5+
---
6+
7+
## Colors
8+
9+
### Primary Colors
10+
| Name | Variable | Hex | Usage |
11+
|------|----------|-----|-------|
12+
| Peach | `--color-primary` | `#FE795D` | Primary brand color, buttons, links, accents |
13+
| Peach Dark | `--color-primary-dark` | `#e56a50` | Hover states for peach elements |
14+
| Purple | `--color-secondary` | `#B49AF7` | Secondary accent, AI section, CTAs |
15+
16+
### Neutral Colors
17+
| Name | Variable | Hex | Usage |
18+
|------|----------|-----|-------|
19+
| Dark | `--color-dark` | `#201E1D` | Primary text, headings |
20+
| Charcoal | `--color-charcoal` | `#333333` | Secondary dark elements |
21+
| Text Light | `--color-text-light` | `#666666` | Body text, descriptions |
22+
| Light Grey | `--color-light-grey` | `#F5F5F5` | Section backgrounds |
23+
| White | `--color-white` | `#FFFFFF` | Backgrounds, text on dark |
24+
25+
### Special Colors
26+
| Name | Hex | Usage |
27+
|------|-----|-------|
28+
| AI Purple | `#8B5CF6` | AI section highlights, accents |
29+
| Card Background | `#F0F0F0` | Service cards |
30+
| Card Hover | `#E8E8E8` | Service cards on hover |
31+
32+
---
33+
34+
## Typography
35+
36+
### Font Families
37+
38+
**Display Font (Headings)**
39+
```css
40+
font-family: 'Aeonik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
41+
```
42+
- Files: `Aeonik-regular.ttf`, `Aeonik bold italic.ttf`
43+
- Weights: 400 (regular), 700 (bold italic)
44+
45+
**Body Font**
46+
```css
47+
font-family: 'Arbeit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
48+
```
49+
- Files: `Arbeit-Regular.otf`, `Arbeit-Bold.otf`, `Arbeit-LightItalic.otf`
50+
- Weights: 300 (light italic), 400 (regular), 700 (bold)
51+
52+
### Type Scale
53+
| Element | Size | Font | Weight |
54+
|---------|------|------|--------|
55+
| H1 | 56px | Aeonik | 400 |
56+
| H2 | 40px | Aeonik | 400 |
57+
| H3 | 20px | Aeonik | 400 |
58+
| H4 | 18px | Aeonik | 400 |
59+
| Body | 16px | Arbeit | 400 |
60+
| Small | 14px | Arbeit | 400 |
61+
| Label | 12px | Arbeit | 500 (uppercase) |
62+
63+
### Line Heights
64+
- Headings: `1.1`
65+
- Body text: `1.7`
66+
- Card descriptions: `1.6`
67+
68+
---
69+
70+
## Spacing
71+
72+
| Variable | Value | Usage |
73+
|----------|-------|-------|
74+
| `--spacing-xs` | 0.5rem (8px) | Tiny gaps |
75+
| `--spacing-sm` | 1rem (16px) | Small gaps, paragraph margins |
76+
| `--spacing-md` | 1.5rem (24px) | Medium gaps, card padding |
77+
| `--spacing-lg` | 2rem (32px) | Section gaps |
78+
| `--spacing-xl` | 3rem (48px) | Large gaps |
79+
| `--spacing-xxl` | 5rem (80px) | Section padding |
80+
81+
---
82+
83+
## Border Radius
84+
85+
| Variable | Value | Usage |
86+
|----------|-------|-------|
87+
| `--radius-sm` | 4px | Buttons, small elements |
88+
| `--radius-md` | 8px | Cards, form inputs |
89+
| `--radius-lg` | 16px | Service cards, AI cards |
90+
| `--radius-full` | 9999px | Pills, circular elements |
91+
92+
---
93+
94+
## Shadows
95+
96+
```css
97+
--shadow-sm: 0 1px 2px rgba(32, 30, 29, 0.05);
98+
--shadow-md: 0 4px 6px rgba(32, 30, 29, 0.07);
99+
--shadow-lg: 0 10px 25px rgba(32, 30, 29, 0.1);
100+
--shadow-xl: 0 20px 50px rgba(32, 30, 29, 0.15);
101+
```
102+
103+
### Hover Shadow (Cards)
104+
```css
105+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
106+
```
107+
108+
### AI Card Hover Shadow
109+
```css
110+
box-shadow: 0 12px 40px rgba(139, 92, 246, 0.15);
111+
```
112+
113+
---
114+
115+
## Transitions
116+
117+
| Variable | Value | Usage |
118+
|----------|-------|-------|
119+
| `--transition-fast` | 150ms ease | Hover states, quick feedback |
120+
| `--transition-base` | 250ms ease | Standard animations |
121+
| `--transition-slow` | 400ms ease | Complex animations |
122+
123+
---
124+
125+
## Breakpoints
126+
127+
| Size | Max Width | Layout Changes |
128+
|------|-----------|----------------|
129+
| Desktop | > 1024px | 4-column grids |
130+
| Tablet | 1024px | 2-column grids |
131+
| Mobile | 768px | 1-column grids, mobile nav |
132+
| Small | 480px | Reduced font sizes |
133+
134+
---
135+
136+
## Layout
137+
138+
### Container
139+
```css
140+
max-width: 1200px;
141+
padding: 0 1.5rem;
142+
margin: 0 auto;
143+
```
144+
145+
---
146+
147+
## Buttons
148+
149+
### Primary (Peach)
150+
```css
151+
.btn-peach {
152+
background-color: #FE795D;
153+
color: #FFFFFF;
154+
padding: 10px 28px;
155+
border-radius: 4px;
156+
font-size: 16px;
157+
font-weight: 400;
158+
}
159+
```
160+
161+
### Outline (White)
162+
```css
163+
.btn-outline-white {
164+
background-color: transparent;
165+
color: #FFFFFF;
166+
border: 2px solid #FFFFFF;
167+
padding: 10px 28px;
168+
}
169+
```
170+
171+
### Button Hover Effect
172+
```css
173+
transform: translateY(-2px);
174+
```
175+
176+
---
177+
178+
## Gradients
179+
180+
### AI Section Background
181+
```css
182+
background: linear-gradient(135deg,
183+
#E8E0F0 0%,
184+
#D4C4E8 30%,
185+
#C9B8E0 50%,
186+
#B8A8D8 70%,
187+
#E0D8F0 100%
188+
);
189+
```
190+
191+
---
192+
193+
## Card Styles
194+
195+
### Service Card
196+
```css
197+
background-color: #F0F0F0;
198+
border-radius: 16px;
199+
padding: 32px;
200+
```
201+
202+
### Case Study Card
203+
```css
204+
background-color: #FFFFFF;
205+
border-radius: 8px;
206+
overflow: hidden;
207+
```
208+
209+
### AI Card
210+
```css
211+
background: rgba(255, 255, 255, 0.7);
212+
backdrop-filter: blur(10px);
213+
border-radius: 16px;
214+
padding: 3rem;
215+
border: 1px solid rgba(255, 255, 255, 0.5);
216+
```
217+
218+
---
219+
220+
## Overlay Styles
221+
222+
### Hero Overlay
223+
```css
224+
background: rgba(0, 0, 0, 0.5);
225+
```
226+
227+
### Contact Overlay
228+
```css
229+
background: rgba(0, 0, 0, 0.4);
230+
```
231+
232+
---
233+
234+
## Section Backgrounds
235+
236+
| Section | Background |
237+
|---------|------------|
238+
| Services | White (`#FFFFFF`) |
239+
| AI | Purple gradient |
240+
| Case Studies | Light grey (`#F5F5F5`) |
241+
| Collaboration CTA | Purple (`#B49AF7`) |
242+
| How We Work | White (`#FFFFFF`) |
243+
| Contact | Image with dark overlay |
244+
| Footer | Peach (`#FE795D`) |
245+
246+
---
247+
248+
## Quick Reference: CSS Variables
249+
250+
```css
251+
:root {
252+
/* Colors */
253+
--color-primary: #FE795D;
254+
--color-primary-dark: #e56a50;
255+
--color-secondary: #B49AF7;
256+
--color-dark: #201E1D;
257+
--color-charcoal: #333333;
258+
--color-light-grey: #F5F5F5;
259+
--color-white: #FFFFFF;
260+
--color-text: #201E1D;
261+
--color-text-light: #666666;
262+
263+
/* Fonts */
264+
--font-display: 'Aeonik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
265+
--font-body: 'Arbeit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
266+
267+
/* Spacing */
268+
--spacing-xs: 0.5rem;
269+
--spacing-sm: 1rem;
270+
--spacing-md: 1.5rem;
271+
--spacing-lg: 2rem;
272+
--spacing-xl: 3rem;
273+
--spacing-xxl: 5rem;
274+
275+
/* Layout */
276+
--container-max: 1200px;
277+
--container-padding: 1.5rem;
278+
279+
/* Radii */
280+
--radius-sm: 4px;
281+
--radius-md: 8px;
282+
--radius-lg: 16px;
283+
--radius-full: 9999px;
284+
285+
/* Transitions */
286+
--transition-fast: 150ms ease;
287+
--transition-base: 250ms ease;
288+
--transition-slow: 400ms ease;
289+
290+
/* Shadows */
291+
--shadow-sm: 0 1px 2px rgba(32, 30, 29, 0.05);
292+
--shadow-md: 0 4px 6px rgba(32, 30, 29, 0.07);
293+
--shadow-lg: 0 10px 25px rgba(32, 30, 29, 0.1);
294+
--shadow-xl: 0 20px 50px rgba(32, 30, 29, 0.15);
295+
}
296+
```
297+
298+
---
299+
300+
*Last updated: January 2026*

0 commit comments

Comments
 (0)