.si = super intelligence
Steal any site’s design system.
Super Intelligence reads the live page and hands your AI agent the real colors, type, spacing and stack.
Try wares.gg, techwalrus.com or adagap.comFree. No sign-up.
- DESIGN.md
- tokens.json
- tokens.css
- tailwind.config.js
a real result, not a mockup
Show, don’t guess.
wares.gg
Light theme on #ffffff, one #00786a accent; type set in System UI at 17px body; 8px corners; flat (no shadows).
colors
- background#ffffff
- text#17181c17.7:1
- muted#5b606b6.3:1
- accent#00786a5.4:1
- on-accent#ffffff5.4:1
- border#5b606b6.3:1
- #dcf6e6
type scale
- Steal the look3xl · 28/1.2 · 650
- Design system2xl · 21/1.2 · 650
- Real values, not guessesxl · 19/1.55 · 400
- Hand it to your AIlg · 18/1.55 · 400
- Super Intelligence reads the pagebase · 17/1.55 · 400
fonts
- System UI
spacing
radius
- 8px
stack
- ServerNginx
- SecurityHSTS
- PerformancePriority Hints
- OtherOpen Graph
- OtherPWA
# Design system: wares.gg > Extracted from https://wares.gg by [stole.si](https://www.stole.si) on 2026-10-10. Every value was measured from the live page's computed styles in a real browser. Use it for inspiration and consistency, not to clone the site: do not copy logos, images, text or trademarks. **At a glance:** Light theme on #ffffff, one #00786a accent; type set in System UI at 17px body; 8px corners; flat (no shadows). ## How to use this file (for AI coding agents) - Treat the tokens below as the source of truth for color, type, spacing, corner radius and shadow. - Reference tokens by name (CSS variables from `tokens.css`, or the Tailwind theme in `tailwind.config.js`) instead of hard-coding values. - Need a value that is not listed? Use the nearest token. Do not invent new colors, font sizes or spacing steps. - Use `--color-text` on `--color-background` for body copy and `--color-muted` only for secondary text. Keep text contrast at 4.5:1 or more. - Use `--color-accent` sparingly: primary actions, links and key highlights. - Build original layouts, copy and imagery. This file describes a visual style, not a page to reproduce. ## Colors | Token | Value | Use | Contrast | |---|---|---|---| | `--color-background` | `#ffffff` | Page background | — | | `--color-text` | `#17181c` | Body text and headings | 17.74:1 on background | | `--color-muted` | `#5b606b` | Secondary text, captions and metadata | 6.31:1 on background | | `--color-accent` | `#00786a` | Primary buttons, links and highlights | 5.39:1 on background | | `--color-on-accent` | `#ffffff` | Text and icons on the accent color | 5.39:1 on accent | | `--color-border` | `#5b606b` | Borders, dividers and input outlines | 6.31:1 on background | Other recurring colors: | Token | Value | Share of use | |---|---|---| | `--color-neutral-50b` | `#dcf6e6` | 2.7% | ## Typography | Token | Family | Source | Weights | CSS stack | |---|---|---|---|---| | `--font-body` | System UI | system | 400, 600, 650 | `system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Arial", sans-serif` | Type scale (1rem = 16px):
techwalrus.com
Dark theme on #262626, one #ff5511 accent; type set in Source Sans 3, Barlow Semi Condensed for headings at 21px body; 4px spacing grid; 6px corners; soft shadows.
colors
- background#262626
- text#ffffff15.1:1
- muted#a0a0a05.8:1
- accent#ff55114.7:1
- on-accent#0000006.6:1
- border#0a0a0a1.3:1
- #66bbff
type scale
- Steal the lookxl · 30/1.3 · 600
- Design systemlg · 24/1.26 · 600
- Real values, not guessesbase · 21/1.63 · 400
- Hand it to your AIsm · 20/1.24 · 400
- Super Intelligence reads the pagexs · 17/normal · 700
fonts
- Source Sans 3
- Barlow Semi Condensed
spacing · 4px grid
radius
- 6px
- pill
stack
- LibraryFancyBox 5.0.36
- LibraryjQuery
- ServerNginx
- CDNjsDelivr
- AnalyticsStatcounter
- SecurityHSTS
- PerformancePriority Hints
- OtherOpen Graph
- OtherRSS
# Design system: techwalrus.com > Extracted from https://techwalrus.com by [stole.si](https://www.stole.si) on 2026-10-10. Every value was measured from the live page's computed styles in a real browser. Use it for inspiration and consistency, not to clone the site: do not copy logos, images, text or trademarks. **At a glance:** Dark theme on #262626, one #ff5511 accent; type set in Source Sans 3, Barlow Semi Condensed for headings at 21px body; 4px spacing grid; 6px corners; soft shadows. ## How to use this file (for AI coding agents) - Treat the tokens below as the source of truth for color, type, spacing, corner radius and shadow. - Reference tokens by name (CSS variables from `tokens.css`, or the Tailwind theme in `tailwind.config.js`) instead of hard-coding values. - Need a value that is not listed? Use the nearest token. Do not invent new colors, font sizes or spacing steps. - Use `--color-text` on `--color-background` for body copy and `--color-muted` only for secondary text. Keep text contrast at 4.5:1 or more. - Use `--color-accent` sparingly: primary actions, links and key highlights. - Build original layouts, copy and imagery. This file describes a visual style, not a page to reproduce. - This is a dark theme. Keep surfaces dark and avoid pure white backgrounds. ## Colors | Token | Value | Use | Contrast | |---|---|---|---| | `--color-background` | `#262626` | Page background | — | | `--color-text` | `#ffffff` | Body text and headings | 15.13:1 on background | | `--color-muted` | `#a0a0a0` | Secondary text, captions and metadata | 5.79:1 on background | | `--color-accent` | `#ff5511` | Primary buttons, links and highlights | 4.73:1 on background | | `--color-on-accent` | `#000000` | Text and icons on the accent color | 6.56:1 on accent | | `--color-border` | `#0a0a0a` | Borders, dividers and input outlines | 1.31:1 on background | Other recurring colors: | Token | Value | Share of use | |---|---|---| | `--color-blue-250` | `#66bbff` | 6.1% | ## Typography | Token | Family | Source | Weights | CSS stack | |---|---|---|---|---| | `--font-body` | Source Sans 3 | web font | 400, 600, 700 | `"Source Sans 3", sans-serif` | | `--font-display` | Barlow Semi Condensed | web font | 500, 600, 700 | `"Barlow Semi Condensed", sans-serif` |
adagap.com
Dark theme on #153e96, one #ffcf33 accent; type set in Sora at 19px body; square corners; flat (no shadows).
colors
- background#153e96
- text#f2f5ff8.9:1
- accent#ffcf336.6:1
- on-accent#0b0b0f13.3:1
- #103383
- #ffe08a
type scale
- Steal the look2xl · 40/1.04 · 800
- Design systemxl · 22/1.45 · 400
- Real values, not guesseslg · 20/1.5 · 400
- Hand it to your AIbase · 19/1.58 · 400
- Super Intelligence reads the pagesm · 18/1.35 · 400
fonts
- Sora
spacing
radius
- 0px
- pill
stack
- ServerNginx
- SecurityHSTS
- OtherOpen Graph
# Design system: adagap.com > Extracted from https://adagap.com by [stole.si](https://www.stole.si) on 2026-10-10. Every value was measured from the live page's computed styles in a real browser. Use it for inspiration and consistency, not to clone the site: do not copy logos, images, text or trademarks. **At a glance:** Dark theme on #153e96, one #ffcf33 accent; type set in Sora at 19px body; square corners; flat (no shadows). ## How to use this file (for AI coding agents) - Treat the tokens below as the source of truth for color, type, spacing, corner radius and shadow. - Reference tokens by name (CSS variables from `tokens.css`, or the Tailwind theme in `tailwind.config.js`) instead of hard-coding values. - Need a value that is not listed? Use the nearest token. Do not invent new colors, font sizes or spacing steps. - Use `--color-text` on `--color-background` for body copy and `--color-muted` only for secondary text. Keep text contrast at 4.5:1 or more. - Use `--color-accent` sparingly: primary actions, links and key highlights. - Build original layouts, copy and imagery. This file describes a visual style, not a page to reproduce. - This is a dark theme. Keep surfaces dark and avoid pure white backgrounds. ## Colors | Token | Value | Use | Contrast | |---|---|---|---| | `--color-background` | `#153e96` | Page background | — | | `--color-text` | `#f2f5ff` | Body text and headings | 8.92:1 on background | | `--color-accent` | `#ffcf33` | Primary buttons, links and highlights | 6.58:1 on background | | `--color-on-accent` | `#0b0b0f` | Text and icons on the accent color | 13.31:1 on accent | Other recurring colors: | Token | Value | Share of use | |---|---|---| | `--color-blue-650` | `#103383` | 17.7% | | `--color-yellow-100` | `#ffe08a` | 2.5% | ## Typography | Token | Family | Source | Weights | CSS stack | |---|---|---|---|---| | `--font-body` | Sora | web font | 400, 600, 700, 800 | `"Sora", system-ui, sans-serif` | Web fonts are not included. Use the same family only if its license allows it; otherwise pick a similar font and keep the fallback stack.
how it works
Three steps. One page load.
stole.si opens the page once in a real browser and measures what visitors actually see, not just what the CSS files declare.
- 01
Paste a URL
Any public page. A homepage, a pricing page, a docs page.
- 02
Extract
Computed styles from every visible element, clustered into roles, scales and components. Fonts are checked against what actually loaded.
- 03
Hand to your AI
Drop DESIGN.md into your repo. Your agent builds with real values instead of guessing.
exports
Files your agent can read.
Every scan gets a shareable link and four downloads. No account, no paywall.
DESIGN.md
The whole system in plain Markdown, with usage rules written for AI coding agents: roles, contrast, type scale, spacing, components and stack.
tokens.json
W3C Design Tokens format. Import it into Style Dictionary, Tokens Studio or your own pipeline.
tokens.css
A
:rootblock of CSS variables, ready to paste into any stylesheet.tailwind.config.js
Colors, fonts, type scale, spacing, radius, shadows and screens as a Tailwind theme.
then tell your agent
Read DESIGN.md and build the pricing page with those tokens. Don’t invent new colors.
Works with Claude Code, Cursor, Codex, Copilot and anything else that reads files.