diff --git a/design-system/font-test.html b/design-system/font-test.html new file mode 100644 index 0000000..13b5830 --- /dev/null +++ b/design-system/font-test.html @@ -0,0 +1,20 @@ + + + + Font Test + + + + +

Font Loading Test

+
JetBrains Mono: $ clavitor deploy
+
Fira Code: $ clavitor deploy
+
System Mono: $ clavitor deploy
+ + \ No newline at end of file diff --git a/design-system/server.go b/design-system/server.go new file mode 100644 index 0000000..b76587f --- /dev/null +++ b/design-system/server.go @@ -0,0 +1,21 @@ +package main + +import ( + "log" + "net/http" +) + +func main() { + fs := http.FileServer(http.Dir(".")) + + // Wrap to add no-cache headers + handler := http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { + w.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate") + w.Header().Set("Pragma", "no-cache") + w.Header().Set("Expires", "0") + fs.ServeHTTP(w, r) + }) + + log.Println("Serving on http://192.168.1.16:8888") + log.Fatal(http.ListenAndServe("0.0.0.0:8888", handler)) +} \ No newline at end of file diff --git a/design-system/styleguide-coral.html b/design-system/styleguide-coral.html new file mode 100644 index 0000000..3a0ee9d --- /dev/null +++ b/design-system/styleguide-coral.html @@ -0,0 +1,225 @@ + + + + + + Clavitor — Deep Coral + General Sans + + + + + + +
+ +
+
+
+
+

Clavitor

+

Deep Coral + General Sans

+
+
+

CLAVITOR

+

+ Warm energy, structured, distinct. +

+
+ +
+
Brand Colors — DEEP CORAL
+
+
Black Square
--brand-black
#0A0A0A
+
Deep Coral
--brand-accent
#EA580C
+
Coral Light
--brand-accent-light
#F97316
+
Coral Dark
--brand-accent-dark
#C2410C
+
+
+ +
+
Typography — GENERAL SANS
+
+
wordmarkCLAVITOR
+
72pxHeading 72
+
56pxHeading 56
+
40pxHeading 40
+
16pxBody 16 — The quick brown fox jumps over the lazy dog
+
+
+ +
+
Buttons — CORAL ACCENT
+
+ + + + +
+
+ +
+
Alerts
+
+
+ Info: Warm energy flowing. Coral background. +
+
+ Error: Something needs attention. +
+
+
+ +
+
Code — JETBRAINS MONO
+
+ $ clavitor deploy
+ Deploying with warm energy... +
+
+ +
+ + \ No newline at end of file diff --git a/design-system/styleguide-green.html b/design-system/styleguide-green.html new file mode 100644 index 0000000..6b865fb --- /dev/null +++ b/design-system/styleguide-green.html @@ -0,0 +1,225 @@ + + + + + + Clavitor — Forest Green + Satoshi + + + + + + +
+ +
+
+
+
+

Clavitor

+

Forest Green + Satoshi

+
+
+

CLAVITOR

+

+ Trust, growth, vault is alive. Modern tech feel. +

+
+ +
+
Brand Colors — FOREST GREEN
+
+
Black Square
--brand-black
#0A0A0A
+
Forest Green
--brand-accent
#15803D
+
Green Light
--brand-accent-light
#16A34A
+
Green Dark
--brand-accent-dark
#166534
+
+
+ +
+
Typography — SATOSHI
+
+
wordmarkCLAVITOR
+
72pxHeading 72
+
56pxHeading 56
+
40pxHeading 40
+
16pxBody 16 — The quick brown fox jumps over the lazy dog
+
+
+ +
+
Buttons — GREEN ACCENT
+
+ + + + +
+
+ +
+
Alerts
+
+
+ Info: Vault is secure and growing. Green background. +
+
+ Error: Something went wrong. Check logs. +
+
+
+ +
+
Code — JETBRAINS MONO
+
+ $ clavitor status
+ Vault: alive and growing... +
+
+ +
+ + \ No newline at end of file diff --git a/design-system/styleguide-teal.html b/design-system/styleguide-teal.html new file mode 100644 index 0000000..ae8d116 --- /dev/null +++ b/design-system/styleguide-teal.html @@ -0,0 +1,225 @@ + + + + + + Clavitor — Deep Teal + Space Grotesk + + + + + + +
+ +
+
+
+
+

Clavitor

+

Deep Teal + Space Grotesk

+
+
+

CLAVITOR

+

+ Infrastructure that flows. Technical, cool, distinctive geometry. +

+
+ +
+
Brand Colors — DEEP TEAL
+
+
Black Square
--brand-black
#0A0A0A
+
Deep Teal
--brand-accent
#0D9488
+
Teal Light
--brand-accent-light
#14B8A6
+
Teal Dark
--brand-accent-dark
#0F766E
+
+
+ +
+
Typography — SPACE GROTESK
+
+
wordmarkCLAVITOR
+
72pxHeading 72
+
56pxHeading 56
+
40pxHeading 40
+
16pxBody 16 — The quick brown fox jumps over the lazy dog
+
+
+ +
+
Buttons — TEAL ACCENT
+
+ + + + +
+
+ +
+
Alerts
+
+
+ Info: Infrastructure connected. Teal background. +
+
+ Error: Connection failed. Check configuration. +
+
+
+ +
+
Code — JETBRAINS MONO
+
+ $ clavitor deploy
+ Connected to teal infrastructure... +
+
+ +
+ + \ No newline at end of file diff --git a/design-system/styleguide.html b/design-system/styleguide.html index a1f3696..5b210e8 100644 --- a/design-system/styleguide.html +++ b/design-system/styleguide.html @@ -6,22 +6,22 @@ Clavitor Design System — v0.1 - + + @@ -213,13 +208,13 @@

Clavitor

-

Design System v0.1

+

Design System v0.1 — Violet + Figtree + JetBrains Mono

CLAVITOR

- A black box vault for AI infrastructure. One file. No dependencies. - Copy the CSS variables and classes you need. + A black box vault for AI infrastructure. Tokens, components, layouts. + Based on vault1984.com patterns.

@@ -228,58 +223,34 @@
Brand Colors
Black Square
--brand-black
#0A0A0A
-
Accent
--brand-accent
#B45309
-
Accent Light
--brand-accent-light
#D97706
-
Accent Dark
--brand-accent-dark
#92400E
+
Violet
--brand-accent
#7C3AED
+
Violet Light
--brand-accent-light
#8B5CF6
+
Violet Dark
--brand-accent-dark
#6D28D9
-
Typography — Plus Jakarta Sans
+
Typography — Figtree
wordmarkCLAVITOR
-
48pxHeading 48
-
36pxHeading 36
-
24pxHeading 24
-
18pxBody large 18
-
16pxBody 16 — The quick brown fox jumps
-
14pxSmall 14 — The quick brown fox jumps
-
12pxTiny 12 — The quick brown fox
-
-
- - -
-
Spacing Scale (4px base)
-
-
4px
-
8px
-
16px
-
24px
-
32px
-
48px
-
64px
+
72pxHeading 72
+
56pxHeading 56
+
40pxHeading 40
+
16pxBody 16 — The quick brown fox jumps over the lazy dog
Buttons
-

Variants

- +
-

Sizes

-
- - - -
@@ -290,118 +261,80 @@ -
- - - We'll never share your email. -
Please enter a valid email address.
-
- - +
+ + + +
+
Layout Patterns (from vault1984.com)
+ +

2-Column Equal (Hero/Feature)

+
+
+

Heading Left

+

Description text goes here. This is the left column of a two-column layout pattern used for hero sections and feature comparisons.

+
+ MCP + REST API + CLI +
+
+
+

$ clavitor status
Vault: secure

+
+
+ +

3-Column Features

+
+
+

Feature One

+

Description of the first feature with details.

+
+
+

Feature Two

+

Description of the second feature with details.

+
+
+

Feature Three

+

Description of the third feature with details.

+
+
+ +

4-Column Stats

+
+
+
1
+
Binary
+
+
+
1
+
SQLite
+
+
+
5
+
MCP Tools
+
+
+
0
+
Dependencies
- +
-
Cards
-
-
-
-
Credential Entry
-

Last modified 2 hours ago

-
-

Password for production database. Private fields encrypted with your biometric.

-
- Private - Database -
-
-
-
-
API Key
-

Never expires

-
-

Production API key for CI/CD pipelines. Rotate every 90 days.

-
- Active - API -
-
-
-
- - -
-
Badges
-
- Default - Primary - Accent - Success - Warning - Error -
-
- - -
-
Alerts
-
-
- Info: Your vault is end-to-end encrypted. We cannot access your data. -
-
- Success: Credential rotated successfully. API key updated. -
-
- Error: Failed to connect to vault. Check your network connection. -
-
-
- - -
-
Tables
- - - - - - - - - -
NameTypeStatusLast Used
Production DBPasswordActive2 min ago
AWS API KeyAPI KeyExpiring1 hour ago
GitHub SSHSSH KeyActive3 days ago
-
- - -
-
Code / Terminal
+
Code — JetBrains Mono
- $ clavitor search github
- Found 3 credentials:
- • github-personal (SSH key)
- • github-work (Token)
- • github-actions (API key) -
-

Inline code looks like --brand-accent or get_credential()

-
- - -
-
Form Elements
-
- - -
-
+ $ clavitor deploy production
+ Deploying to production... 0x7f3a9b2c
+ Credentials: github-token, aws-key
+

Inline code: --brand-accent or get_credential()