A single page to show Claude what Sourceful looks like.
DESIGN
Tokens, type specimens and shadcn primitives skinned with the Sourceful visual system. Point an AI here and anything it builds will feel like ours.
Warm cream, near-black ink, one recurring orange.
Editorial light is the default. Grounds alternate between cream (#F5F2E1), paper (#FAFAF7), and near-black (#0A0A0A). Signal orange #E85D1F carries the accent.
One brand scale. Lower steps (50–200) are washes and soft tints, 500 is the signal, higher steps (600–950) are pressed and ink pairings. Editorial green stays a single success token, not a scale.
Local energy coordination infrastructure.
The physical rails that make distributed energy work
The Zap is a gateway that runs locally. No cloud dependency for real-time dispatch. Supports P1, Modbus-TCP, Modbus-RTU, MQTT and OCPP. Compatible with 180M EU smart meters.
<200ms · 50Hz · €2.5B · 180M meters“Edge control under 200ms” beats “lightning-fast coordination”.
Utilities and grid operators are partners, never opponents.
Numbers and examples. €2.5B, not “massive savings”.
No “revolutionary”, “game-changing”, “seamless”. Commas and periods.
Logos, photography, charts and maps. One visual grammar, many surfaces.
Every graphic element inherits the same hairlines, signal orange, and Satoshi kickers. Photos get the duotone treatment. Charts are hand-rolled SVG. Maps are Natural Earth coastlines traced on scroll.
One SVG master lives in public/assets/sourceful-squircle.svg. For light grounds, apply filter: brightness(0) to invert the white fill to ink. All other bolt-in-circle variants are deprecated, do not use them.
Private docs only — “Sourceful” without “Energy”
Photos get remapped through an inline SVG filter: luminance grayscale → gamma lift → two-colour table remap. Shadows go to deep ink, highlights to signal orange. One coherent graphic, not a tinted snapshot.
Thin strokes, tabular numerals, signal orange for the primary series, hairline greys for everything else. Every chart is plain SVG so the stroke weights stay exact at any density.
Natural Earth 50m coastlines projected to a 1000×1000 viewBox. Each country traces itself on scroll via pathLength, staggered across tiles. Signal-orange dot marks the city anchor.
Four layouts recur across every Sourceful surface. Each stays within the hairline rhythm: micro-label kicker at the top, specimen or two-column body in the middle, directory counter at the bottom.
Decks stay in the editorial system. Grounds alternate between ink (#0A0A0A) and cream (#F5F2E1), signal orange (#E85D1F) carries one or two highlight words per slide, Satoshi at display weight, JetBrains Mono for kickers and page counters. One big idea per slide. Fredrik likes a table when the argument is comparative, that's what the second specimen is for.
Everything you need, none of what you don’t.
Every primitive is stock shadcn/ui wired to the Sourceful tokens. Copy the files, keep the CSS variables and Tailwind config, and it looks native anywhere.
New market live
Gateway offline
Signal accent
Dispatch confirmed
Default
| Site | Market | Capacity | Status | Latency |
|---|---|---|---|---|
| Kungsgatan 42 | Sweden | 200 kWh | Online | 187ms |
| Hafenstraße 7 | Germany | 400 kWh | Offline | — |
| Prinsengracht 112 | Netherlands | 150 kWh | Commissioning | 212ms |
Terminal-style frame-cycle indicators. Use them on live grid tiles, Zap boot, firmware flash, or while an agent thinks — anywhere sub-second response would otherwise feel silent. Braille reads as infrastructure, ASCII as CLI.
dots10f · 80msdots28f · 80msdots310f · 80msdots414f · 80msdots517f · 80msdots624f · 80msdots724f · 80msdots829f · 80msdots98f · 80msdots107f · 80msdots118f · 100msdots1256f · 80msdots138f · 80msdots1412f · 80mssand35f · 80msbounce6f · 120msdots_circle8f · 80mswave8f · 100msscan10f · 70msrain12f · 100mspulse5f · 180mssnake16f · 80mssparkle6f · 150mscascade14f · 60mscolumns26f · 60msorbit8f · 100msbreathe17f · 100mswaverows16f · 90mscheckerboard4f · 250mshelix16f · 80msfillsweep11f · 100msdiagswipe16f · 60msdqpb4f · 100msrolling_line6f · 80mssimple_dots4f · 400mssimple_dots_scrolling6f · 200msarc6f · 100msballoon5f · 120mscircle_halves4f · 50mscircle_quarters4f · 120mspoint5f · 200mssquare_corners4f · 180mstoggle2f · 250mstriangle4f · 50msgrow_horizontal12f · 120msgrow_vertical10f · 120msnoise6f · 100msBUILD
One URL. Paste it into your prompt. Tell Claude to match tokens, type, and components. No package install, no config, no Tailwind setup on their end.
# Example prompts Create a pitch slide on the $20 Zap gateway and our 200ms edge response, and use the Sourceful design system to ensure consistency: https://design.sourceful.energy/DESIGN.md Create a device-detail dashboard for a commercial Vault showing SoC, spot price, peak shaving, and the last 24h of grid flow. Use the Sourceful design system to ensure consistency: https://design.sourceful.energy/DESIGN.md # The shape Name the thing + name the subject + point at DESIGN.md. The spec carries the look. Your sentence carries the substance, so the numbers and claims stay real.