Skip to content

Commit 82c2bb6

Browse files
tunahanceliktunahancelik
committed
Initial project setup
0 parents  commit 82c2bb6

26 files changed

Lines changed: 8073 additions & 0 deletions

‎.github/workflows/deploy.yml‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
name: Deploy Next.js site to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: ["main"]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: "pages"
15+
cancel-in-progress: false
16+
17+
jobs:
18+
build:
19+
runs-on: ubuntu-latest
20+
steps:
21+
- name: Checkout
22+
uses: actions/checkout@v4
23+
24+
- name: Setup Node
25+
uses: actions/setup-node@v4
26+
with:
27+
node-version: "20"
28+
cache: npm
29+
30+
- name: Restore cache
31+
uses: actions/cache@v4
32+
with:
33+
path: |
34+
.next/cache
35+
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
36+
restore-keys: |
37+
${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
38+
39+
- name: Install dependencies
40+
run: npm ci
41+
42+
- name: Build with Next.js
43+
run: npm run build
44+
45+
- name: Upload artifact
46+
uses: actions/upload-pages-artifact@v3
47+
with:
48+
path: ./out
49+
50+
deploy:
51+
environment:
52+
name: github-pages
53+
url: ${{ steps.deployment.outputs.page_url }}
54+
runs-on: ubuntu-latest
55+
needs: build
56+
steps:
57+
- name: Deploy to GitHub Pages
58+
id: deployment
59+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
node_modules
2+
.next
3+
out
4+
.DS_Store
5+
*.log
6+
.env*
7+
!.env.example

‎DESIGN.md‎

Lines changed: 315 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,315 @@
1+
# Opennote — Style Reference
2+
> ink on parchment
3+
4+
**Theme:** light
5+
6+
Opennote employs a minimalist, paper-like aesthetic featuring a high-contrast typographical hierarchy set against a soft, near-white canvas. Subtle border treatments and distinct, functional button styles define interactive elements. Color is used sparingly, primarily for accent and to distinguish action states, creating moments of focus within an otherwise calm and content-centric design.
7+
8+
## Tokens — Colors
9+
10+
| Name | Value | Token | Role |
11+
|------|-------|-------|------|
12+
| Parchment | `#fffdf8` | `--color-parchment` | Page backgrounds, card surfaces, UI canvases — creates a soft, inviting backdrop |
13+
| Ink Black | `#0a0a0a` | `--color-ink-black` | Primary text, headings, icons – provides strong contrast against light backgrounds |
14+
| Slate Gray | `#474747` | `--color-slate-gray` | Secondary text, muted descriptions, helper text, subtle icon detailing |
15+
| Ash Gray | `#8c8c8c` | `--color-ash-gray` | Tertiary text, sub-labels, subtle dividers, less emphasized information |
16+
| Whisper Border | `#e5e5e5` | `--color-whisper-border` | Subtle borders, dividers, outlines for ghost buttons and input fields — defines structure without visual weight |
17+
| Ghost Border | `#d1d1d1` | `--color-ghost-border` | Hairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color |
18+
| Burnt Umber | `#512906` | `--color-burnt-umber` | Primary call-to-action buttons, key interactive elements – a deep, warm accent that signifies action and focus |
19+
| Blue Violet | `#242d64` | `--color-blue-violet` | Decorative text accents, highlights for specific content blocks |
20+
| Forest Green | `#0c3b1a` | `--color-forest-green` | Decorative text accents, highlights for specific content blocks |
21+
| Crimson Blush | `#5e0831` | `--color-crimson-blush` | Decorative text accents, highlights for specific content blocks |
22+
| Goldenrod | `#ffc934` | `--color-goldenrod` | Decorative highlights, background accents on certain content blocks — a bright, joyful punctuation |
23+
24+
## Tokens — Typography
25+
26+
### IowanOld — Headings and prominent display text — a traditional serif that lends a considered, thoughtful tone. · `--font-iowanold`
27+
- **Substitute:** Iowan Old Style
28+
- **Weights:** 400, 500
29+
- **Sizes:** 16px, 20px, 32px, 42px, 48px
30+
- **Line height:** 1.08, 1.10, 1.12, 1.20, 1.50
31+
- **Role:** Headings and prominent display text — a traditional serif that lends a considered, thoughtful tone.
32+
33+
### SuisseIntl — Body text, navigation, buttons, and all functional UI elements — a clean, neutral sans-serif that ensures clarity and legibility. · `--font-suisseintl`
34+
- **Substitute:** Inter
35+
- **Weights:** 400
36+
- **Sizes:** 14px, 16px
37+
- **Line height:** 1.00, 1.43, 1.50
38+
- **Role:** Body text, navigation, buttons, and all functional UI elements — a clean, neutral sans-serif that ensures clarity and legibility.
39+
40+
### Type Scale
41+
42+
| Role | Size | Line Height | Letter Spacing | Token |
43+
|------|------|-------------|----------------|-------|
44+
| body-sm | 14px | 1.43 | — | `--text-body-sm` |
45+
| body | 16px | 1.5 | — | `--text-body` |
46+
| subheading | 20px | 1.5 | — | `--text-subheading` |
47+
| heading-sm | 32px | 1.2 | — | `--text-heading-sm` |
48+
| heading | 42px | 1.12 | — | `--text-heading` |
49+
| display | 48px | 1.08 | — | `--text-display` |
50+
51+
## Tokens — Spacing & Shapes
52+
53+
**Base unit:** 8px
54+
55+
**Density:** comfortable
56+
57+
### Spacing Scale
58+
59+
| Name | Value | Token |
60+
|------|-------|-------|
61+
| 8 | 8px | `--spacing-8` |
62+
| 16 | 16px | `--spacing-16` |
63+
| 24 | 24px | `--spacing-24` |
64+
| 32 | 32px | `--spacing-32` |
65+
| 40 | 40px | `--spacing-40` |
66+
| 48 | 48px | `--spacing-48` |
67+
| 56 | 56px | `--spacing-56` |
68+
| 64 | 64px | `--spacing-64` |
69+
| 80 | 80px | `--spacing-80` |
70+
| 96 | 96px | `--spacing-96` |
71+
| 120 | 120px | `--spacing-120` |
72+
| 128 | 128px | `--spacing-128` |
73+
| 160 | 160px | `--spacing-160` |
74+
75+
### Border Radius
76+
77+
| Element | Value |
78+
|---------|-------|
79+
| cards | 10px |
80+
| buttons | 10px |
81+
| general | 10px |
82+
83+
### Layout
84+
85+
- **Page max-width:** 1200px
86+
- **Section gap:** 40-80px
87+
- **Card padding:** 16px
88+
- **Element gap:** 12px
89+
90+
## Components
91+
92+
### Primary Filled Button
93+
**Role:** Main call to action, drawing immediate attention.
94+
95+
Background: Burnt Umber (#512906). Text: Ink Black (#0a0a0a). Padding: 16px vertical, 24px horizontal. Border radius: 10px.
96+
97+
### Secondary Outlined Button
98+
**Role:** Alternative actions, less emphasized than the primary.
99+
100+
Background: transparent. Text: Ink Black (#0a0a0a). Border: 1px Ghost Border (#d1d1d1) solid. Padding: 15px vertical, 23px horizontal. Border radius: 10px.
101+
102+
### Ghost Navigation Link
103+
**Role:** Main navigation items, in-text links.
104+
105+
Background: transparent. Text: Ink Black (#0a0a0a). Underline: 1px Whisper Border (#e5e5e5) solid, 8px offset. No padding or radius.
106+
107+
## Do's and Don'ts
108+
109+
### Do
110+
- Prioritize IowanOld for all headings and display text to deliver a traditional, thoughtful voice.
111+
- Use SuisseIntl for all body text, button labels, and navigation to maintain readability and a clean feel.
112+
- Apply Parchment (#fffdf8) as the dominant background color across all pages and main content areas.
113+
- Use Burnt Umber (#512906) exclusively for primary action buttons to clearly signpost key interactions.
114+
- Employ Ink Black (#0a0a0a) for all primary text and critical UI elements to ensure high contrast and legibility.
115+
- Define UI boundaries and elements with subtle Whisper Border (#e5e5e5) 1px solid borders, avoiding heavy lines.
116+
- Maintain a consistent 10px border-radius for all interactive components and cards to soften edges uniformly.
117+
118+
### Don't
119+
- Do not introduce new serif fonts beyond IowanOld, as it would dilute the typographic identity.
120+
- Avoid using highly saturated colors for background elements; reserve saturation for functional accents and brand highlights.
121+
- Do not use heavy shadows or gradients on interactive elements; prefer solid color fills and subtle borders.
122+
- Do not deviate from the Parchment (#fffdf8) background color for core content sections; alternative backgrounds should be used sparingly and only for distinct sections.
123+
- Avoid excessive use of colors like Blue Violet, Forest Green, or Crimson Blush in body text; reserve them for decorative accent blocks or specific highlighted elements.
124+
- Do not use less than 12px padding around clickable elements; maintain a comfortable tap/click target.
125+
- Avoid text colors with insufficient contrast against the background; always prioritize Ink Black or Slate Gray for readability.
126+
127+
## Surfaces
128+
129+
| Level | Name | Value | Purpose |
130+
|-------|------|-------|---------|
131+
| 0 | Parchment Base | `#fffdf8` | Primary page background, expansive canvas for content. |
132+
| 1 | Subtle Card | `#f9f9f9` | Slightly elevated card surfaces, subtly distinguished from the base. |
133+
| 2 | Accent Block | `#fef5de` | Backgrounds for highlighted content sections or decorative areas, introducing a warm tint. |
134+
| 3 | Editor Canvas | `#fafaf7` | Workspace background for the editor surface — slightly cooler than parchment, gridded. |
135+
136+
## Editor Surface
137+
138+
The editor (`EDITOR.md`) is a separate surface that lives inside the same brand. It uses a calm gridded canvas (`#fafaf7` + 24px dot grid `#ececea`) instead of parchment, and floats parchment-toned chrome (toolbars, panels) above it. Burnt Umber is reserved for the active tool state and selection ring; all other accent colors come from the user's content. See `EDITOR.md` for layout, tools, motion, and icon mapping.
139+
140+
### Editor tokens (additions)
141+
142+
```css
143+
--canvas-bg: #fafaf7;
144+
--canvas-grid: #ececea;
145+
--toolbar-bg: #fffdf8;
146+
--toolbar-shadow: 0 4px 16px rgba(10, 10, 10, 0.04);
147+
--object-shadow: 0 8px 24px rgba(10, 10, 10, 0.06);
148+
--tool-active: #512906;
149+
--tool-active-fg: #fffdf8;
150+
--tool-hover: #f4f1ea;
151+
--ease-calm: cubic-bezier(0.32, 0.72, 0, 1);
152+
```
153+
154+
## Imagery
155+
156+
The visual language is characterized by simple, outlined, hand-drawn style illustrations that are whimsical and often depict figures interacting with abstract concepts or tools. These illustrations are mono-color, typically in black outline, with occasional small colored fills like Goldenrod (#ffc934) or muted pastels. They are contained within the white space, serving as explanatory and decorative elements rather than full-bleed imagery. Icons are minimal, outlined, and monochromatic, matching the linear illustration style. Product screenshots are absent, focusing instead on symbolic representation. Imagery is sparse, ensuring the UI remains text-dominant.
157+
158+
## Layout
159+
160+
The site uses a max-width contained layout, typically centered, allowing ample whitespace on either side. The hero section often features a centered headline with an illustration above, sometimes on a slightly tinted background. Sections mostly follow a vertical rhythm with consistent spacing, lacking strong visual dividers between them, creating a seamless flow. Content frequently alternates between centered stacks of text and visual elements, and occasionally two-column layouts with text and iconography. Navigation is a sticky top-bar, minimal and text-based, with a 'Get started free' button. The overall density is spacious, favoring clear separation and readability over information compactness.
161+
162+
## Agent Prompt Guide
163+
164+
**Quick Color Reference:**
165+
text: #0a0a0a
166+
background: #fffdf8
167+
border: #e5e5e5
168+
accent: #242d64
169+
primary action: #512906 (filled action)
170+
171+
**3-5 Example Component Prompts:**
172+
1. Create a page header: transparent background. Left-aligned logo. Right-aligned navigation links: SuisseIntl 16px, Ink Black (#0a0a0a), on hover text-decoration-color: Ink Black (#0a0a0a). Right-most Secondary Outlined Button 'Get started free' (Background: transparent, Text: Ink Black (#0a0a0a), Border: 1px Ghost Border (#d1d1d1) solid, 15px vertical 23px horizontal padding, 10px radius).
173+
2. Create a Primary Action Button: #512906 background, #8c8c8c text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.
174+
3. Build a feature card: Parchment background (#fffdf8). 10px border-radius. Padding: 16px. Border: 1px Whisper Border (#e5e5e5) solid. Headline: IowanOld 32px heading-sm, Ink Black (#0a0a0a). Body text: SuisseIntl 16px body, Slate Gray (#474747).
175+
4. Create a callout box with an accent background: Background: Goldenrod (#ffc934). IowanOld 20px subheading text, Ink Black (#0a0a0a). SuisseIntl 16px body text, Slate Gray (#474747).
176+
177+
## Similar Brands
178+
179+
- **Notion** — Clean, light UI with powerful text editing features and emphasis on typographic clarity.
180+
- **Roam Research** — Minimalist aesthetic focused on note-taking, content display, and subtle UI elements.
181+
- **Readwise Reader** — Content-focused design with a crisp, high-contrast text presentation and a restrained use of color.
182+
- **Craft.do** — Intuitive, clean interface for document creation, emphasizing typography and a calm visual environment.
183+
184+
## Quick Start
185+
186+
### CSS Custom Properties
187+
188+
```css
189+
:root {
190+
/* Colors */
191+
--color-parchment: #fffdf8;
192+
--color-ink-black: #0a0a0a;
193+
--color-slate-gray: #474747;
194+
--color-ash-gray: #8c8c8c;
195+
--color-whisper-border: #e5e5e5;
196+
--color-ghost-border: #d1d1d1;
197+
--color-burnt-umber: #512906;
198+
--color-blue-violet: #242d64;
199+
--color-forest-green: #0c3b1a;
200+
--color-crimson-blush: #5e0831;
201+
--color-goldenrod: #ffc934;
202+
203+
/* Typography — Font Families */
204+
--font-iowanold: 'IowanOld', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
205+
--font-suisseintl: 'SuisseIntl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
206+
207+
/* Typography — Scale */
208+
--text-body-sm: 14px;
209+
--leading-body-sm: 1.43;
210+
--text-body: 16px;
211+
--leading-body: 1.5;
212+
--text-subheading: 20px;
213+
--leading-subheading: 1.5;
214+
--text-heading-sm: 32px;
215+
--leading-heading-sm: 1.2;
216+
--text-heading: 42px;
217+
--leading-heading: 1.12;
218+
--text-display: 48px;
219+
--leading-display: 1.08;
220+
221+
/* Typography — Weights */
222+
--font-weight-regular: 400;
223+
--font-weight-medium: 500;
224+
225+
/* Spacing */
226+
--spacing-unit: 8px;
227+
--spacing-8: 8px;
228+
--spacing-16: 16px;
229+
--spacing-24: 24px;
230+
--spacing-32: 32px;
231+
--spacing-40: 40px;
232+
--spacing-48: 48px;
233+
--spacing-56: 56px;
234+
--spacing-64: 64px;
235+
--spacing-80: 80px;
236+
--spacing-96: 96px;
237+
--spacing-120: 120px;
238+
--spacing-128: 128px;
239+
--spacing-160: 160px;
240+
241+
/* Layout */
242+
--page-max-width: 1200px;
243+
--section-gap: 40-80px;
244+
--card-padding: 16px;
245+
--element-gap: 12px;
246+
247+
/* Border Radius */
248+
--radius-lg: 10px;
249+
250+
/* Named Radii */
251+
--radius-cards: 10px;
252+
--radius-buttons: 10px;
253+
--radius-general: 10px;
254+
255+
/* Surfaces */
256+
--surface-parchment-base: #fffdf8;
257+
--surface-subtle-card: #f9f9f9;
258+
--surface-accent-block: #fef5de;
259+
}
260+
```
261+
262+
### Tailwind v4
263+
264+
```css
265+
@theme {
266+
/* Colors */
267+
--color-parchment: #fffdf8;
268+
--color-ink-black: #0a0a0a;
269+
--color-slate-gray: #474747;
270+
--color-ash-gray: #8c8c8c;
271+
--color-whisper-border: #e5e5e5;
272+
--color-ghost-border: #d1d1d1;
273+
--color-burnt-umber: #512906;
274+
--color-blue-violet: #242d64;
275+
--color-forest-green: #0c3b1a;
276+
--color-crimson-blush: #5e0831;
277+
--color-goldenrod: #ffc934;
278+
279+
/* Typography */
280+
--font-iowanold: 'IowanOld', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
281+
--font-suisseintl: 'SuisseIntl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
282+
283+
/* Typography — Scale */
284+
--text-body-sm: 14px;
285+
--leading-body-sm: 1.43;
286+
--text-body: 16px;
287+
--leading-body: 1.5;
288+
--text-subheading: 20px;
289+
--leading-subheading: 1.5;
290+
--text-heading-sm: 32px;
291+
--leading-heading-sm: 1.2;
292+
--text-heading: 42px;
293+
--leading-heading: 1.12;
294+
--text-display: 48px;
295+
--leading-display: 1.08;
296+
297+
/* Spacing */
298+
--spacing-8: 8px;
299+
--spacing-16: 16px;
300+
--spacing-24: 24px;
301+
--spacing-32: 32px;
302+
--spacing-40: 40px;
303+
--spacing-48: 48px;
304+
--spacing-56: 56px;
305+
--spacing-64: 64px;
306+
--spacing-80: 80px;
307+
--spacing-96: 96px;
308+
--spacing-120: 120px;
309+
--spacing-128: 128px;
310+
--spacing-160: 160px;
311+
312+
/* Border Radius */
313+
--radius-lg: 10px;
314+
}
315+
```

0 commit comments

Comments
 (0)