Etched — Design Reference
machined silicon on bare concrete
Source: https://www.etched.com
Theme: light
Category: Infrastructure
Mood: light, minimal, monochrome, technical, precise, photographic
Captured: 2026-10-25
Overview
A stark, gallery-quiet monochrome site that treats hardware like museum objects. A flat warm-grey ground (#ededed) carries huge studio photographs of black, cable-wrapped server racks with copper peeking through. Everything else stays out of the way: black type, hairline vertical guide rails, a single black CTA. What makes it distinctive is the restraint. There is no colour, no radius, no shadow, and the only voice change is a monospaced typewriter register for metadata and calls to action.
It's built on Söhne at weight 400 throughout, with tight negative tracking on display sizes (-0.02 to -0.03em) and a fixed 1.32 line-height for headings. Body copy is 17px at 1.6. Söhne Mono at 14px handles the announcement bar, addresses and the uppercase, widely tracked GET ACCESS button. Layout sits in a ~1044px column framed by 1px #d9d9d9 vertical rules. Long-form copy runs in a narrow right-hand column beside a sticky product photo. Team portraits sit on #d9d9d9 tiles, and the footer ends in an oversized 65px wordmark-style statement.
Tokens — Colors
| Name |
Value |
Token |
Role |
| Concrete Mist |
#ededed |
--color-background |
Page ground everywhere: hero, content, mobile menu overlay and footer |
| Server Room Grey |
#d9d9d9 |
--color-muted |
Portrait tiles behind team photos, investor logo grid cells, and the 1px vertical guide rails/dividers |
| Anodised Black |
#000000 |
--color-foreground |
All text, the solid GET ACCESS button fill, the logo block and the hamburger/close strokes |
| Paper White |
#ffffff |
--color-primary-foreground |
Label on black buttons and announcement-bar text over the dark hero photo |
| Graphite Haze |
#8a8a8a |
--color-muted-foreground |
Secondary 'Learn more ↗' link in the announcement bar and the faint logo wall; seen in screenshots, not measured |
| Copper Cold Plate |
#c08a6a |
--color-accent |
Only warmth on the site, and it lives in the photography (copper cold plates); never used as a UI fill |
Semantic roles
| Role |
Value |
| background |
#ededed |
| surface |
#ededed |
| surface raised |
#d9d9d9 |
| border |
#d9d9d9 |
| text |
#000000 |
| text muted |
#8a8a8a |
| primary |
#000000 |
| primary text |
#ffffff |
| accent |
#000000 |
Tokens — Typography
- Display: Sohne (400) — fallbacks: Inter, Helvetica Neue, Arial, sans-serif. Display sizes always weight 400 with negative tracking (~-0.02em, -0.03em at 65px) and line-height 1.32. Never bold.
- Body: Sohne (400, 500) — fallbacks: Inter, Helvetica Neue, Arial, sans-serif. 17px/1.6 for long-form, 14px/1.4 for captions and team bios. 500 is used only for inline .
- Mono: Sohne Mono (400) — fallbacks: IBM Plex Mono, JetBrains Mono, ui-monospace, monospace. Metadata voice for the announcement bar, HQ address and links at 14px with -0.28px tracking. The CTA label is uppercase with +1.68px (0.12em) tracking.
| Role |
Size |
Line height |
Weight |
Letter spacing |
Family |
| Display (footer statement) |
65px |
1.32 |
400 |
-1.95px |
display |
| H1 hero title |
52px |
1.32 |
400 |
-1.04px |
display |
| Section CTA headline |
41px |
1.32 |
400 |
-0.82px |
display |
| H2 |
27px |
1.32 |
400 |
-0.54px |
display |
| H3 |
21px |
1.32 |
400 |
-0.42px |
display |
| Body |
17px |
1.6 |
400 |
normal |
body |
| Nav link |
16px |
1.2 |
400 |
-0.32px |
body |
| Small / caption |
14px |
1.4 |
400 |
normal |
body |
| Mono meta |
14px |
1.4 |
400 |
-0.28px |
mono |
| Mono CTA label |
14px |
0.85 |
400 |
1.68px |
mono |
Tokens — Spacing & Layout
- Base unit: 4px
- Density: spacious
- Container max width: 1044px
- Section gap: 80px
- Card padding: 0 0 16px
- Scale: 2px, 4px, 8px, 12px, 16px, 20px, 24px, 40px, 60px, 80px, 90px, 110px
Tokens — Radius
| Element |
Value |
| Buttons |
0px |
| Team portrait tiles |
0px |
| Logo grid cells |
0px |
| Logo mark |
0px |
Tokens — Shadows
| Name |
Value |
Usage |
| None |
none |
No elevation anywhere. Depth comes from photography and the #d9d9d9 tile tone only. |
| Hero top scrim |
linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%) |
Dark fade behind the fixed announcement bar and nav where they sit over the hero photo (inferred from screenshot). |
Components
Primary CTA (Get Access) (button)
| Property |
Value |
| background |
#000000 |
| color |
#ffffff |
| border |
none |
| radius |
0px |
| padding |
20px 40px |
| font size |
14px |
| font weight |
400 |
| shadow |
none |
| hover |
label arrow nudges right; fill stays black |
Sohne Mono, uppercase, letter-spacing 1.68px, line-height 0.85, trailing →. Full-width on mobile.
Text link / ghost action (link)
| Property |
Value |
| background |
transparent |
| color |
#000000 |
| border |
none |
| radius |
0px |
| padding |
0 |
| font size |
16px |
| font weight |
400 |
| shadow |
none |
| hover |
underline or opacity 0.6 |
Used for nav items (Join Us, Progress) and inline 'join us' links. Section CTAs like 'Build the future of inference →' are this recipe at 41px.
Announcement bar (badge)
| Property |
Value |
| background |
transparent over dark hero |
| color |
#ffffff |
| border |
none |
| radius |
0px |
| padding |
10px 24px |
| font size |
14px |
| font weight |
400 |
| shadow |
none |
| hover |
'Learn more ↗' brightens from grey to white |
Centred Sohne Mono line with -0.28px tracking. Wraps to two centred lines on mobile and sits above the nav.
Top nav (nav)
| Property |
Value |
| background |
transparent |
| color |
#ffffff over hero / #000000 on ground |
| border |
none |
| radius |
0px |
| padding |
16px 24px |
| font size |
16px |
| font weight |
400 |
| shadow |
none |
| hover |
opacity 0.7 |
Square solid logo block left, two plain text links right. No pill and no background bar.
Team portrait card (card)
| Property |
Value |
| background |
#d9d9d9 |
| color |
#000000 |
| border |
none |
| radius |
0px |
| padding |
0 0 16px |
| font size |
14px |
| font weight |
400 |
| shadow |
none |
| hover |
none |
Square grey studio portrait, then the name at 21px, then the title and a 3-line bio at 14px/1.4. Four-column grid with ~12px gaps.
Investor logo grid (other)
| Property |
Value |
| background |
#d9d9d9 |
| color |
#8a8a8a |
| border |
1px solid #ededed |
| radius |
0px |
| padding |
24px |
| font size |
14px |
| font weight |
400 |
| shadow |
none |
| hover |
none |
Six-column grid of monochrome grey wordmarks on one grey slab, followed by a five-column text list of angel investors (name plus company).
Guide rails (other)
| Property |
Value |
| background |
transparent |
| color |
#d9d9d9 |
| border |
1px solid #d9d9d9 (left/right) |
| radius |
0px |
| padding |
0 |
| font size |
— |
| font weight |
— |
| shadow |
none |
| hover |
none |
Full-height vertical hairlines frame the content column and the page edges, plus horizontal rules between sections, like a technical drawing sheet.
Layout
Centred ~1044px column framed by full-height 1px #d9d9d9 vertical rails at the page edges and the column edges. The hero is a full-bleed, top-anchored product photo that fades into the ground, with a centred 52px title. The main content is two columns: a sticky rack photo on the left and a narrow (~440px) long-form text column on the right with 27px H2 and 21px H3 subheads. Below that come a 4-column team grid, a centred 41px link-style CTA, a 6-column logo slab, a 5-column angel list, a line-art chip/board illustration, and a footer with mono links, the 65px statement on the left, and the HQ address plus black CTA on the right. Sections are separated by 80–110px of air and hairline rules.
Imagery
High-key studio photography of matte-black hardware (racks, braided cable looms, copper cold plates) shot straight-on or from below and cut out against the grey ground. Team photos are uniform grey-backdrop portraits in black tees. A fine black line-art PCB/chip illustration sits above the footer. There are no icons except arrows (→ ↗) and no gradients except the dark scrim under the nav.
Motion
Minimal and mechanical. Expect a sticky product image while text scrolls, a nav that inverts colour as it leaves the dark hero, a simple full-screen menu fade on mobile, and arrow nudges on CTAs. No bouncy easing and no parallax gimmicks.
Responsive
On phones the announcement bar wraps to two centred mono lines above the nav. The nav collapses to the square logo on the left and a two-line hamburger on the right. Opening it reveals a full-screen #ededed overlay with a thin X close icon, plus Join Us and Progress stacked and centred at roughly 60px Sohne. 'Etched is faster' sits lower down, followed by a full-width black GET ACCESS → button and the mono HQ address. The hero photo stays full-width and top-cropped, and the 52px title wraps to two centred lines. The two-column text/photo block stacks with the rack image first. Team and logo grids drop columns, and side guide rails tighten to the viewport edges.
Do
- Keep the whole UI strictly #000000 on #ededed. Let the photography carry any warmth.
- Set every heading in Sohne 400 with ~-0.02em tracking and 1.32 line-height. Size creates hierarchy, not weight.
- Use Sohne Mono for metadata, addresses and button labels. Make CTA labels uppercase with 0.12em tracking.
- Make the primary CTA a flat, square, black rectangle with a trailing →.
- Frame the content with 1px #d9d9d9 vertical guide rails, like a technical drawing.
- Present hardware as large cut-out studio photos on the flat grey ground, centred and generously spaced.
Don't
- Don't round anything. Buttons, tiles and images are all 0px radius.
- Don't add drop shadows, glows or card borders for elevation.
- Don't introduce a brand accent colour or coloured links. Underline or arrows only.
- Don't bold headings. Weight 500 is reserved for inline emphasis.
- Don't use pure white #ffffff as a page surface. The ground is always #ededed.
- Don't use icon sets or illustrations beyond arrows and fine line-art hardware drawings.
Agent prompt
Build a stark monochrome hardware-company page. Use a flat #ededed background, all text #000000, and #d9d9d9 for portrait tiles, logo slabs and 1px vertical guide rails framing a centred 1044px column. Type is Sohne (fallback Inter) at weight 400 only: 65/52/41/27/21px headings at line-height 1.32 with tracking ≈-0.02em (-0.03em at 65px); body 17px/1.6; captions 14px/1.4. Use Sohne Mono (fallback IBM Plex Mono) 14px with -0.28px tracking for the announcement bar, addresses and metadata. The sole CTA is a flat black rectangle with 0 radius and no shadow, labelled in white uppercase mono with 1.68px tracking and a trailing → ('GET ACCESS →'), full-width on mobile. Secondary actions are plain text links with arrows (→ ↗). No colour accents, gradients (except a dark scrim under the nav over the hero), shadows or rounded corners. The hero is a full-bleed, top-anchored studio photo of black cable-wrapped server racks with a centred 52px title below. Follow with a two-column section (sticky rack photo left, narrow long-form text right), a 4-column grey-tile team grid, and a 6-column grey investor logo slab. End with a footer pairing a huge 65px statement with mono links and a black CTA. Spacing is airy: 80–110px between sections, 4px base, 12px grid gaps. The mobile menu is a full-screen #ededed overlay with huge centred links and a thin X.
CSS custom properties
/* Etched — CSS custom properties. Generated from style.json */
:root {
/* Palette */
--color-background: #ededed; /* Page ground everywhere: hero, content, mobile menu overlay and footer */
--color-muted: #d9d9d9; /* Portrait tiles behind team photos, investor logo grid cells, and the 1px vertical guide rails/dividers */
--color-foreground: #000000; /* All text, the solid GET ACCESS button fill, the logo block and the hamburger/close strokes */
--color-primary-foreground: #ffffff; /* Label on black buttons and announcement-bar text over the dark hero photo */
--color-muted-foreground: #8a8a8a; /* Secondary 'Learn more ↗' link in the announcement bar and the faint logo wall; seen in screenshots, not measured */
--color-accent: #c08a6a; /* Only warmth on the site, and it lives in the photography (copper cold plates); never used as a UI fill */
/* Semantic roles */
--background: #ededed;
--surface: #ededed;
--surface-raised: #d9d9d9;
--border: #d9d9d9;
--text: #000000;
--text-muted: #8a8a8a;
--primary: #000000;
--primary-text: #ffffff;
--accent: #000000;
/* Typography */
--font-display: Sohne, Inter, 'Helvetica Neue', Arial, sans-serif;
--font-body: Sohne, Inter, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'Sohne Mono', 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
--text-display-footer-statement: 65px;
--text-display-footer-statement--line-height: 1.32;
--text-display-footer-statement--letter-spacing: -1.95px;
--text-display-footer-statement--font-weight: 400;
--text-h1-hero-title: 52px;
--text-h1-hero-title--line-height: 1.32;
--text-h1-hero-title--letter-spacing: -1.04px;
--text-h1-hero-title--font-weight: 400;
--text-section-cta-headline: 41px;
--text-section-cta-headline--line-height: 1.32;
--text-section-cta-headline--letter-spacing: -0.82px;
--text-section-cta-headline--font-weight: 400;
--text-h2: 27px;
--text-h2--line-height: 1.32;
--text-h2--letter-spacing: -0.54px;
--text-h2--font-weight: 400;
--text-h3: 21px;
--text-h3--line-height: 1.32;
--text-h3--letter-spacing: -0.42px;
--text-h3--font-weight: 400;
--text-body: 17px;
--text-body--line-height: 1.6;
--text-body--letter-spacing: normal;
--text-body--font-weight: 400;
--text-nav-link: 16px;
--text-nav-link--line-height: 1.2;
--text-nav-link--letter-spacing: -0.32px;
--text-nav-link--font-weight: 400;
--text-small-caption: 14px;
--text-small-caption--line-height: 1.4;
--text-small-caption--letter-spacing: normal;
--text-small-caption--font-weight: 400;
--text-mono-meta: 14px;
--text-mono-meta--line-height: 1.4;
--text-mono-meta--letter-spacing: -0.28px;
--text-mono-meta--font-weight: 400;
--text-mono-cta-label: 14px;
--text-mono-cta-label--line-height: 0.85;
--text-mono-cta-label--letter-spacing: 1.68px;
--text-mono-cta-label--font-weight: 400;
/* Spacing */
--space-1: 2px;
--space-2: 4px;
--space-3: 8px;
--space-4: 12px;
--space-5: 16px;
--space-6: 20px;
--space-7: 24px;
--space-8: 40px;
--space-9: 60px;
--space-10: 80px;
--space-11: 90px;
--space-12: 110px;
--container: 1044px;
--section-gap: 80px;
/* Radius */
--radius-buttons: 0px;
--radius-team-portrait-tiles: 0px;
--radius-logo-grid-cells: 0px;
--radius-logo-mark: 0px;
/* Shadows */
--shadow-none: none;
--shadow-hero-top-scrim: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
}
Tailwind v4 theme
/* Etched — Tailwind CSS v4 theme. Import after tailwindcss: @import "tailwindcss"; then paste this block. */
@theme {
--color-background: #ededed;
--color-muted: #d9d9d9;
--color-foreground: #000000;
--color-primary-foreground: #ffffff;
--color-muted-foreground: #8a8a8a;
--color-accent: #c08a6a;
--color-background: #ededed;
--color-surface: #ededed;
--color-surface-raised: #d9d9d9;
--color-border: #d9d9d9;
--color-text: #000000;
--color-text-muted: #8a8a8a;
--color-primary: #000000;
--color-primary-text: #ffffff;
--color-accent: #000000;
--font-display: Sohne, Inter, 'Helvetica Neue', Arial, sans-serif;
--font-body: Sohne, Inter, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'Sohne Mono', 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
--text-display-footer-statement: 65px;
--text-display-footer-statement--line-height: 1.32;
--text-display-footer-statement--letter-spacing: -1.95px;
--text-display-footer-statement--font-weight: 400;
--text-h1-hero-title: 52px;
--text-h1-hero-title--line-height: 1.32;
--text-h1-hero-title--letter-spacing: -1.04px;
--text-h1-hero-title--font-weight: 400;
--text-section-cta-headline: 41px;
--text-section-cta-headline--line-height: 1.32;
--text-section-cta-headline--letter-spacing: -0.82px;
--text-section-cta-headline--font-weight: 400;
--text-h2: 27px;
--text-h2--line-height: 1.32;
--text-h2--letter-spacing: -0.54px;
--text-h2--font-weight: 400;
--text-h3: 21px;
--text-h3--line-height: 1.32;
--text-h3--letter-spacing: -0.42px;
--text-h3--font-weight: 400;
--text-body: 17px;
--text-body--line-height: 1.6;
--text-body--letter-spacing: normal;
--text-body--font-weight: 400;
--text-nav-link: 16px;
--text-nav-link--line-height: 1.2;
--text-nav-link--letter-spacing: -0.32px;
--text-nav-link--font-weight: 400;
--text-small-caption: 14px;
--text-small-caption--line-height: 1.4;
--text-small-caption--letter-spacing: normal;
--text-small-caption--font-weight: 400;
--text-mono-meta: 14px;
--text-mono-meta--line-height: 1.4;
--text-mono-meta--letter-spacing: -0.28px;
--text-mono-meta--font-weight: 400;
--text-mono-cta-label: 14px;
--text-mono-cta-label--line-height: 0.85;
--text-mono-cta-label--letter-spacing: 1.68px;
--text-mono-cta-label--font-weight: 400;
--radius-buttons: 0px;
--radius-team-portrait-tiles: 0px;
--radius-logo-grid-cells: 0px;
--radius-logo-mark: 0px;
--shadow-none: none;
--shadow-hero-top-scrim: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
--container-site: 1044px;
}
Theme tokens — light + dark
The shadcn-named layer DevDojo Sites speaks (bg-background, text-foreground, bg-primary, rounded-medium…). Paste into site.css after @import "tailwindcss" to restyle any site in this look.
/* Etched — DevDojo theme tokens (light + dark). Generated from style.json. */
/* Drop into site.css after @import "tailwindcss": bg-background, text-foreground, bg-primary, border-border, rounded-medium… all read these. Dark mode: estimated — the site has no dark scheme, so the .dark half is a plausible twin of its palette. */
@custom-variant dark (&:where(.dark, .dark *));
:root {
color-scheme: light;
--background: #ededed;
--foreground: #000000;
--card: #d9d9d9;
--card-foreground: #000000;
--popover: #ededed; /* estimated */
--popover-foreground: #000000;
--primary: #000000;
--primary-foreground: #ffffff;
--secondary: #d9d9d9;
--secondary-foreground: #000000;
--muted: #d9d9d9;
--muted-foreground: #6b6b6b; /* estimated */
--accent: #d9d9d9; /* estimated */
--accent-foreground: #000000;
--destructive: #b42318; /* estimated */
--destructive-foreground: #ffffff; /* estimated */
--border: #d9d9d9;
--input: #d9d9d9; /* estimated */
--ring: #000000; /* estimated */
--radius-small: 0px;
--radius-medium: 0px;
--radius-large: 0px;
--radius: var(--radius-medium);
--font-display: Sohne, Inter, 'Helvetica Neue', Arial, sans-serif;
--font-body: Sohne, Inter, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'Sohne Mono', 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
}
.dark {
color-scheme: dark;
/* estimated from the light palette */
--background: #000000;
--foreground: #ededed;
--card: #141414;
--card-foreground: #ededed;
--popover: #0a0a0a;
--popover-foreground: #ededed;
--primary: #ededed;
--primary-foreground: #000000;
--secondary: #1f1f1f;
--secondary-foreground: #ededed;
--muted: #1f1f1f;
--muted-foreground: #8a8a8a;
--accent: #1f1f1f;
--accent-foreground: #ededed;
--destructive: #e5484d;
--destructive-foreground: #ffffff;
--border: rgba(237,237,237,0.14);
--input: rgba(237,237,237,0.18);
--ring: #ededed;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--radius-small: var(--radius-small);
--radius-medium: var(--radius-medium);
--radius-large: var(--radius-large);
--font-display: var(--font-display);
--font-body: var(--font-body);
--font-mono: var(--font-mono);
}
Etched — Style Reference
machined silicon on bare concrete
Theme: light · Mood: light, minimal, monochrome, technical, precise, photographic
A stark, gallery-quiet monochrome site that treats hardware like museum objects. A flat warm-grey ground (#ededed) carries huge studio photographs of black, cable-wrapped server racks with copper peeking through. Everything else stays out of the way: black type, hairline vertical guide rails, a single black CTA. What makes it distinctive is the restraint. There is no colour, no radius, no shadow, and the only voice change is a monospaced typewriter register for metadata and calls to action.
Tokens — Colors
| Name |
Value |
Token |
Role |
| Concrete Mist |
#ededed |
--background |
Page ground everywhere: hero, content, mobile menu overlay and footer |
| Server Room Grey |
#d9d9d9 |
--muted |
Portrait tiles behind team photos, investor logo grid cells, and the 1px vertical guide rails/dividers |
| Anodised Black |
#000000 |
--foreground |
All text, the solid GET ACCESS button fill, the logo block and the hamburger/close strokes |
| Paper White |
#ffffff |
--primary-foreground |
Label on black buttons and announcement-bar text over the dark hero photo |
| Graphite Haze |
#8a8a8a |
--muted-foreground |
Secondary 'Learn more ↗' link in the announcement bar and the faint logo wall; seen in screenshots, not measured |
| Copper Cold Plate |
#c08a6a |
--accent |
Only warmth on the site, and it lives in the photography (copper cold plates); never used as a UI fill |
Tokens — Typography
- Display: Sohne (Inter, Helvetica Neue, Arial, sans-serif) — weights 400
- Body: Sohne (Inter, Helvetica Neue, Arial, sans-serif) — weights 400/500
- Mono: Sohne Mono (IBM Plex Mono, JetBrains Mono, ui-monospace, monospace) — weights 400
Tokens — Radius
| Element |
Value |
| Buttons |
0px |
| Team portrait tiles |
0px |
| Logo grid cells |
0px |
| Logo mark |
0px |
Do
- Keep the whole UI strictly #000000 on #ededed. Let the photography carry any warmth.
- Set every heading in Sohne 400 with ~-0.02em tracking and 1.32 line-height. Size creates hierarchy, not weight.
- Use Sohne Mono for metadata, addresses and button labels. Make CTA labels uppercase with 0.12em tracking.
- Make the primary CTA a flat, square, black rectangle with a trailing →.
- Frame the content with 1px #d9d9d9 vertical guide rails, like a technical drawing.
- Present hardware as large cut-out studio photos on the flat grey ground, centred and generously spaced.
Don't
- Don't round anything. Buttons, tiles and images are all 0px radius.
- Don't add drop shadows, glows or card borders for elevation.
- Don't introduce a brand accent colour or coloured links. Underline or arrows only.
- Don't bold headings. Weight 500 is reserved for inline emphasis.
- Don't use pure white #ffffff as a page surface. The ground is always #ededed.
- Don't use icon sets or illustrations beyond arrows and fine line-art hardware drawings.
{
"$name": "Etched",
"$source": "https://www.etched.com",
"$theme": "light",
"$generated": "inspiration library",
"color": {
"background": {
"$type": "color",
"$value": "#ededed",
"$description": "Page ground everywhere: hero, content, mobile menu overlay and footer"
},
"muted": {
"$type": "color",
"$value": "#d9d9d9",
"$description": "Portrait tiles behind team photos, investor logo grid cells, and the 1px vertical guide rails/dividers"
},
"foreground": {
"$type": "color",
"$value": "#000000",
"$description": "All text, the solid GET ACCESS button fill, the logo block and the hamburger/close strokes"
},
"primary-foreground": {
"$type": "color",
"$value": "#ffffff",
"$description": "Label on black buttons and announcement-bar text over the dark hero photo"
},
"muted-foreground": {
"$type": "color",
"$value": "#8a8a8a",
"$description": "Secondary 'Learn more ↗' link in the announcement bar and the faint logo wall; seen in screenshots, not measured"
},
"accent": {
"$type": "color",
"$value": "#c08a6a",
"$description": "Only warmth on the site, and it lives in the photography (copper cold plates); never used as a UI fill"
}
},
"role": {
"background": {
"$type": "color",
"$value": "#ededed"
},
"surface": {
"$type": "color",
"$value": "#ededed"
},
"surface_raised": {
"$type": "color",
"$value": "#d9d9d9"
},
"border": {
"$type": "color",
"$value": "#d9d9d9"
},
"text": {
"$type": "color",
"$value": "#000000"
},
"text_muted": {
"$type": "color",
"$value": "#8a8a8a"
},
"primary": {
"$type": "color",
"$value": "#000000"
},
"primary_text": {
"$type": "color",
"$value": "#ffffff"
},
"accent": {
"$type": "color",
"$value": "#000000"
}
},
"fontFamily": {
"display": {
"$type": "fontFamily",
"$value": [
"Sohne",
"Inter",
"Helvetica Neue",
"Arial",
"sans-serif"
],
"$description": "Display sizes always weight 400 with negative tracking (~-0.02em, -0.03em at 65px) and line-height 1.32. Never bold."
},
"body": {
"$type": "fontFamily",
"$value": [
"Sohne",
"Inter",
"Helvetica Neue",
"Arial",
"sans-serif"
],
"$description": "17px/1.6 for long-form, 14px/1.4 for captions and team bios. 500 is used only for inline <strong>."
},
"mono": {
"$type": "fontFamily",
"$value": [
"Sohne Mono",
"IBM Plex Mono",
"JetBrains Mono",
"ui-monospace",
"monospace"
],
"$description": "Metadata voice for the announcement bar, HQ address and links at 14px with -0.28px tracking. The CTA label is uppercase with +1.68px (0.12em) tracking."
}
},
"typography": {
"display-footer-statement": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "65px",
"lineHeight": "1.32",
"fontWeight": 400,
"letterSpacing": "-1.95px"
}
},
"h1-hero-title": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "52px",
"lineHeight": "1.32",
"fontWeight": 400,
"letterSpacing": "-1.04px"
}
},
"section-cta-headline": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "41px",
"lineHeight": "1.32",
"fontWeight": 400,
"letterSpacing": "-0.82px"
}
},
"h2": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "27px",
"lineHeight": "1.32",
"fontWeight": 400,
"letterSpacing": "-0.54px"
}
},
"h3": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.display}",
"fontSize": "21px",
"lineHeight": "1.32",
"fontWeight": 400,
"letterSpacing": "-0.42px"
}
},
"body": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "17px",
"lineHeight": "1.6",
"fontWeight": 400,
"letterSpacing": "normal"
}
},
"nav-link": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "16px",
"lineHeight": "1.2",
"fontWeight": 400,
"letterSpacing": "-0.32px"
}
},
"small-caption": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.body}",
"fontSize": "14px",
"lineHeight": "1.4",
"fontWeight": 400,
"letterSpacing": "normal"
}
},
"mono-meta": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.mono}",
"fontSize": "14px",
"lineHeight": "1.4",
"fontWeight": 400,
"letterSpacing": "-0.28px"
}
},
"mono-cta-label": {
"$type": "typography",
"$value": {
"fontFamily": "{fontFamily.mono}",
"fontSize": "14px",
"lineHeight": "0.85",
"fontWeight": 400,
"letterSpacing": "1.68px"
}
}
},
"spacing": {
"1": {
"$type": "dimension",
"$value": "2px"
},
"2": {
"$type": "dimension",
"$value": "4px"
},
"3": {
"$type": "dimension",
"$value": "8px"
},
"4": {
"$type": "dimension",
"$value": "12px"
},
"5": {
"$type": "dimension",
"$value": "16px"
},
"6": {
"$type": "dimension",
"$value": "20px"
},
"7": {
"$type": "dimension",
"$value": "24px"
},
"8": {
"$type": "dimension",
"$value": "40px"
},
"9": {
"$type": "dimension",
"$value": "60px"
},
"10": {
"$type": "dimension",
"$value": "80px"
},
"11": {
"$type": "dimension",
"$value": "90px"
},
"12": {
"$type": "dimension",
"$value": "110px"
}
},
"radius": {
"buttons": {
"$type": "dimension",
"$value": "0px"
},
"team-portrait-tiles": {
"$type": "dimension",
"$value": "0px"
},
"logo-grid-cells": {
"$type": "dimension",
"$value": "0px"
},
"logo-mark": {
"$type": "dimension",
"$value": "0px"
}
},
"shadow": {
"none": {
"$type": "shadow",
"$value": "none",
"$description": "No elevation anywhere. Depth comes from photography and the #d9d9d9 tile tone only."
},
"hero-top-scrim": {
"$type": "shadow",
"$value": "linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%)",
"$description": "Dark fade behind the fixed announcement bar and nav where they sit over the hero photo (inferred from screenshot)."
}
},
"component": {
"primary-cta-get-access": {
"kind": "button",
"background": "#000000",
"color": "#ffffff",
"border": "none",
"radius": "0px",
"padding": "20px 40px",
"font_size": "14px",
"font_weight": 400,
"shadow": "none",
"hover": "label arrow nudges right; fill stays black",
"notes": "Sohne Mono, uppercase, letter-spacing 1.68px, line-height 0.85, trailing →. Full-width on mobile."
},
"text-link-ghost-action": {
"kind": "link",
"background": "transparent",
"color": "#000000",
"border": "none",
"radius": "0px",
"padding": "0",
"font_size": "16px",
"font_weight": 400,
"shadow": "none",
"hover": "underline or opacity 0.6",
"notes": "Used for nav items (Join Us, Progress) and inline 'join us' links. Section CTAs like 'Build the future of inference →' are this recipe at 41px."
},
"announcement-bar": {
"kind": "badge",
"background": "transparent over dark hero",
"color": "#ffffff",
"border": "none",
"radius": "0px",
"padding": "10px 24px",
"font_size": "14px",
"font_weight": 400,
"shadow": "none",
"hover": "'Learn more ↗' brightens from grey to white",
"notes": "Centred Sohne Mono line with -0.28px tracking. Wraps to two centred lines on mobile and sits above the nav."
},
"top-nav": {
"kind": "nav",
"background": "transparent",
"color": "#ffffff over hero / #000000 on ground",
"border": "none",
"radius": "0px",
"padding": "16px 24px",
"font_size": "16px",
"font_weight": 400,
"shadow": "none",
"hover": "opacity 0.7",
"notes": "Square solid logo block left, two plain text links right. No pill and no background bar."
},
"team-portrait-card": {
"kind": "card",
"background": "#d9d9d9",
"color": "#000000",
"border": "none",
"radius": "0px",
"padding": "0 0 16px",
"font_size": "14px",
"font_weight": 400,
"shadow": "none",
"hover": "none",
"notes": "Square grey studio portrait, then the name at 21px, then the title and a 3-line bio at 14px/1.4. Four-column grid with ~12px gaps."
},
"investor-logo-grid": {
"kind": "other",
"background": "#d9d9d9",
"color": "#8a8a8a",
"border": "1px solid #ededed",
"radius": "0px",
"padding": "24px",
"font_size": "14px",
"font_weight": 400,
"shadow": "none",
"hover": "none",
"notes": "Six-column grid of monochrome grey wordmarks on one grey slab, followed by a five-column text list of angel investors (name plus company)."
},
"guide-rails": {
"kind": "other",
"background": "transparent",
"color": "#d9d9d9",
"border": "1px solid #d9d9d9 (left/right)",
"radius": "0px",
"padding": "0",
"font_size": "—",
"font_weight": "—",
"shadow": "none",
"hover": "none",
"notes": "Full-height vertical hairlines frame the content column and the page edges, plus horizontal rules between sections, like a technical drawing sheet."
}
}
}
New
