Skip to content

Commit 3276b5a

Browse files
lovasoalovasoa
committed
Add a visual identity page to the website
1 parent f2c8164 commit 3276b5a

File tree

3 files changed

+304
-0
lines changed

3 files changed

+304
-0
lines changed

‎examples/official-site/sqlpage/templates/color_swatch.handlebars‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<div class="color-swatch-container" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
2+
{{#each_row}}
3+
<div class="color-swatch-card" style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 1.5rem; backdrop-filter: blur(10px);">
4+
<div class="color-preview" style="width: 100%; height: 120px; border-radius: 8px; margin-bottom: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); background: {{#if hex}}{{hex}}{{else}}var(--{{css_var}}){{/if}};">
5+
</div>
6+
<div class="color-info">
7+
<h4 style="color: #ffffff; font-size: 1.1rem; margin-bottom: 0.5rem; font-weight: 600;">{{name}}</h4>
8+
{{#if hex}}
9+
<div style="font-family: monospace; font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 0.25rem;">{{hex}}</div>
10+
{{/if}}
11+
{{#if css_var}}
12+
<div style="font-family: monospace; font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 0.25rem;">{{css_var}}</div>
13+
{{/if}}
14+
{{#if description}}
15+
<p style="font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); margin-top: 0.5rem; line-height: 1.4;">{{description}}</p>
16+
{{/if}}
17+
</div>
18+
</div>
19+
{{/each_row}}
20+
</div>

‎examples/official-site/sqlpage/templates/typography_sample.handlebars‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div style="display: flex; flex-direction: column; gap: 2rem; margin: 2rem 0;">
2+
{{#each_row}}
3+
<div class="typography-sample" style="padding: 2rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;">
4+
{{#if title}}
5+
<div style="font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem;">{{title}}</div>
6+
{{/if}}
7+
<div style="font-family: {{font_family}}; font-size: {{font_size}}; font-weight: {{font_weight}}; line-height: {{line_height}}; color: {{text_color}}; letter-spacing: {{letter_spacing}}; margin-bottom: 1rem;">
8+
{{sample_text}}
9+
</div>
10+
{{#if description}}
11+
<div style="font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); line-height: 1.5;">{{description}}</div>
12+
{{/if}}
13+
{{#if usage}}
14+
<div style="font-size: 0.8rem; color: rgba(255, 255, 255, 0.5); margin-top: 0.5rem; font-style: italic;">Use for: {{usage}}</div>
15+
{{/if}}
16+
</div>
17+
{{/each_row}}
18+
</div>

‎examples/official-site/visual-identity.sql‎

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,266 @@
1+
select 'http_header' as component,
2+
'public, max-age=600, stale-while-revalidate=3600, stale-if-error=86400' as "Cache-Control";
3+
4+
select 'dynamic' as component, json_patch(json_extract(properties, '$[0]'), json_object(
5+
'title', 'Visual Identity - SQLPage',
6+
'css', '/assets/highlightjs-and-tabler-theme.css',
7+
'theme', 'dark'
8+
)) as properties
9+
FROM example WHERE component = 'shell' LIMIT 1;
10+
11+
select 'text' as component, 'Visual Identity Guide' as title, '
12+
This guide defines the visual identity of SQLPage for consistent brand representation.
13+
' as contents_md;
14+
15+
select 'text' as component, 'Personality' as title, '
16+
**Playful yet professional**: Approachable, innovative, confident, energetic, reliable, creative.
17+
' as contents_md;
18+
19+
select 'text' as component, 'Logo' as title, '
20+
Primary logo: `/assets/icon.webp`
21+
22+
**Usage**:
23+
- Minimum size: 48px height
24+
- Clear space: 50% of logo height
25+
- Do not distort, rotate, or modify
26+
- Works on dark and light backgrounds
27+
' as contents_md;
28+
29+
select 'html' as component, '
30+
<div style="display: flex; justify-content: center; align-items: center; padding: 2rem 0;">
31+
<img src="/assets/icon.webp" alt="SQLPage Logo" style="max-width: 200px; height: auto;" />
32+
</div>
33+
' as html;
34+
35+
select 'button' as component;
36+
select
37+
'Download Logo' as title,
38+
'/assets/icon.webp' as link,
39+
'icon.webp' as download,
40+
'blue' as color,
41+
'download' as icon;
42+
43+
select 'text' as component, 'Colors' as title, '
44+
Color palette extracted directly from the logo and design system.
45+
' as contents_md;
46+
47+
select 'color_swatch' as component;
48+
select
49+
'Primary Cyan' as name,
50+
'#37E5EF' as hex,
51+
'Main logo color - bright cyan' as description;
52+
select
53+
'Teal Accent' as name,
54+
'#2A9FAF' as hex,
55+
'Secondary teal from logo' as description;
56+
select
57+
'Dark Navy' as name,
58+
'#090D19' as hex,
59+
'Logo background - dark navy' as description;
60+
select
61+
'Medium Blue' as name,
62+
'#27314C' as hex,
63+
'Medium blue from logo' as description;
64+
select
65+
'Blue Gray' as name,
66+
'#304960' as hex,
67+
'Blue-gray from logo' as description;
68+
select
69+
'Neutral Gray' as name,
70+
'#4B4E5C' as hex,
71+
'Neutral gray from logo' as description;
72+
select
73+
'Light Gray' as name,
74+
'#9FA4AE' as hex,
75+
'Light gray from logo' as description;
76+
select
77+
'Primary Background' as name,
78+
'#0a0f1a' as hex,
79+
'Dark theme foundation' as description;
80+
select
81+
'Primary Text' as name,
82+
'#f7f7f7' as hex,
83+
'Main text color' as description;
84+
select
85+
'White' as name,
86+
'#ffffff' as hex,
87+
'Headings and emphasis' as description;
88+
89+
select 'text' as component, 'Gradient' as title, '
90+
Primary gradient flows from primary cyan (#37E5EF) to teal accent (#2A9FAF).
91+
92+
Use for buttons, highlights, and important elements.
93+
' as contents_md;
94+
95+
select 'text' as component, 'Typography' as title, '
96+
**Primary Font**: Inter
97+
98+
Use Inter for all digital materials, websites, and presentations. Inter is a modern, highly legible sans-serif typeface designed specifically for user interfaces.
99+
100+
**Font Source**: [Google Fonts - Inter](https://fonts.google.com/specimen/Inter)
101+
102+
**Fallback Font Stack**: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
103+
104+
If Inter is not available, use the fallback stack in order.
105+
' as contents_md;
106+
107+
select 'typography_sample' as component;
108+
select
109+
'Page Title' as title,
110+
'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif' as font_family,
111+
'64px' as font_size,
112+
'800' as font_weight,
113+
'1.1' as line_height,
114+
'#ffffff' as text_color,
115+
'-1px' as letter_spacing,
116+
'SQLPage Visual Identity' as sample_text,
117+
'Hero sections, main page titles, presentation title slides' as usage,
118+
'Bold, impactful text for maximum visual hierarchy' as description;
119+
120+
select 'typography_sample' as component;
121+
select
122+
'Section Heading' as title,
123+
'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif' as font_family,
124+
'56px' as font_size,
125+
'700' as font_weight,
126+
'1.2' as line_height,
127+
'#ffffff' as text_color,
128+
'normal' as letter_spacing,
129+
'Section Title' as sample_text,
130+
'Major section breaks, chapter headings, presentation section slides' as usage,
131+
'Strong but slightly less prominent than page titles' as description;
132+
133+
select 'typography_sample' as component;
134+
select
135+
'Subsection Heading' as title,
136+
'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif' as font_family,
137+
'40px' as font_size,
138+
'600' as font_weight,
139+
'1.3' as line_height,
140+
'#ffffff' as text_color,
141+
'normal' as letter_spacing,
142+
'Subsection Heading' as sample_text,
143+
'Card titles, subsection headers, content slide titles' as usage,
144+
'Clear hierarchy for organizing content' as description;
145+
146+
select 'typography_sample' as component;
147+
select
148+
'Body Text' as title,
149+
'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif' as font_family,
150+
'16px' as font_size,
151+
'400' as font_weight,
152+
'1.6' as line_height,
153+
'#f7f7f7' as text_color,
154+
'normal' as letter_spacing,
155+
'This is body text used for paragraphs, descriptions, and main content. It should be comfortable to read with adequate spacing between lines.' as sample_text,
156+
'Paragraphs, descriptions, main content, presentation body text' as usage,
157+
'Standard reading size with comfortable line spacing' as description;
158+
159+
select 'typography_sample' as component;
160+
select
161+
'Small Text' as title,
162+
'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif' as font_family,
163+
'14px' as font_size,
164+
'400' as font_weight,
165+
'1.5' as line_height,
166+
'#999999' as text_color,
167+
'normal' as letter_spacing,
168+
'Small text for captions and secondary information' as sample_text,
169+
'Captions, metadata, footnotes, fine print' as usage,
170+
'Supporting information that should not compete with main content' as description;
171+
172+
select 'text' as component, 'Spacing' as title, '
173+
**Base unit**: 8 pixels
174+
175+
**Spacing scale**:
176+
- Extra small: 8 pixels
177+
- Small: 16 pixels
178+
- Medium: 24 pixels
179+
- Large: 32 pixels
180+
- Extra large: 48 pixels
181+
- XXL: 64 pixels
182+
183+
**Container**: Maximum width 1000 pixels, padding 40 pixels
184+
' as contents_md;
185+
186+
select 'text' as component, 'Dark Environments' as title, '
187+
For digital displays, presentations, and screens.
188+
' as contents_md;
189+
190+
select 'text' as component, 'Background Colors' as title, '
191+
- **Primary background**: #0a0f1a (deep navy blue)
192+
- **Secondary background**: #0f1426 (slightly lighter navy)
193+
- Use gradients with primary cyan (#37E5EF) and teal (#2A9FAF) for visual interest
194+
' as contents_md;
195+
196+
select 'text' as component, 'Text Colors' as title, '
197+
- **Primary text**: #f7f7f7 (almost white) - for main content
198+
- **Secondary text**: #999999 (medium gray) - for supporting information
199+
- **Headings**: #ffffff (pure white) - for maximum emphasis
200+
- **Links**: #7db3e8 (bright blue) - for interactive elements
201+
' as contents_md;
202+
203+
select 'text' as component, 'Contrast Guidelines' as title, '
204+
- All text must meet WCAG AA contrast requirements (minimum 4.5:1 for normal text, 3:1 for large text)
205+
- Primary text (#f7f7f7) on primary background (#0a0f1a) meets accessibility standards
206+
- Use white (#ffffff) only for headings and emphasis
207+
- Test all color combinations before finalizing designs
208+
' as contents_md;
209+
210+
select 'text' as component, 'Light Environments' as title, '
211+
For print materials, light-themed websites, and bright displays.
212+
' as contents_md;
213+
214+
select 'text' as component, 'Background Colors' as title, '
215+
- **Primary background**: #ffffff (white) or #f8f9fa (off-white)
216+
- **Secondary background**: #f1f3f5 (light gray)
217+
- Use subtle gradients or solid light colors
218+
- Avoid pure white backgrounds in print to reduce glare
219+
' as contents_md;
220+
221+
select 'text' as component, 'Text Colors' as title, '
222+
- **Primary text**: #1a1a1a (near black) or #212529 (dark gray) - for main content
223+
- **Secondary text**: #6c757d (medium gray) - for supporting information
224+
- **Headings**: #000000 (black) or #0a0f1a (dark navy) - for emphasis
225+
- **Links**: #2A9FAF (teal) or #37E5EF (cyan) - maintain brand colors
226+
' as contents_md;
227+
228+
select 'text' as component, 'Logo Usage in Light Environments' as title, '
229+
- Logo works on both light and dark backgrounds
230+
- On light backgrounds, ensure sufficient contrast
231+
- Consider using a darker version or adding a subtle shadow if needed
232+
- Test logo visibility on various light backgrounds
233+
' as contents_md;
234+
235+
select 'text' as component, 'Print Guidelines' as title, '
236+
- Use CMYK color mode for print materials
237+
- Convert hex colors to CMYK equivalents
238+
- Primary cyan (#37E5EF) prints as: C: 76%, M: 0%, Y: 0%, K: 6%
239+
- Teal accent (#2A9FAF) prints as: C: 76%, M: 9%, Y: 0%, K: 31%
240+
- Test print samples to ensure color accuracy
241+
- Use off-white paper (#f8f9fa equivalent) to reduce eye strain
242+
- Minimum font size for print: 10 points (13 pixels)
243+
- Ensure all text meets print contrast requirements
244+
' as contents_md;
245+
246+
select 'text' as component, 'Presentations' as title, '
247+
**Background**: Dark theme #0a0f1a with gradient overlays
248+
249+
**Typography**:
250+
- Title slide: Large bold text with gradient effect
251+
- Body: Minimum readable size for your audience
252+
- Code: Monospace font, minimum readable size
253+
254+
**Logo**:
255+
- Title slide: Large, centered
256+
- Content slides: Small, bottom-right corner
257+
258+
**Colors**: Use brand cyan/teal gradients (#37E5EF to #2A9FAF) for highlights. Maintain high contrast for readability.
259+
' as contents_md;
260+
261+
select 'text' as component, 'Resources' as title, '
262+
- Logo: `/assets/icon.webp`
263+
- CSS Theme: `/assets/highlightjs-and-tabler-theme.css`
264+
- [Components Documentation](/component.sql)
265+
- [GitHub Discussions](https://github.com/sqlpage/SQLPage/discussions)
266+
' as contents_md;

0 commit comments

Comments
 (0)