270 lines
14 KiB
Markdown
270 lines
14 KiB
Markdown
<!-- Generated from CLAUDE.md by .design-sync/make-ds-styles.mjs. Edit CLAUDE.md, not this file. -->
|
||
|
||
# CipherCell
|
||
|
||
**Company.** CipherCell, Passau (Innstr. 43). A security engineering company that grew out of Open RAN
|
||
security research and works with the University of Passau, the xG-ALOE alliance and the xG-Incubator,
|
||
with funding from the Federal Ministry of Research, Technology and Space. Eight people: two founders
|
||
(Dr. Felix Klement, CEO; Dr. Florian Frank, CTO), engineers, business development, working students.
|
||
|
||
**What they sell.** Security engineering for software, mainly: the software behind complex
|
||
infrastructure. Four stages: threat analysis and
|
||
risk assessment (automated, in CI/CD), security engineering (zero trust, key management, secure APIs),
|
||
security verification (independent review, hardening, testing) and monitoring and lifecycle.
|
||
Sectors: Open RAN and private 5G, critical network infrastructure, cloud-native systems.
|
||
|
||
**Audience.** Operators of private 5G and Open RAN networks, integrators, industrial and clinical
|
||
operators of critical networks, public research partners. Technical buyers who distrust marketing.
|
||
|
||
**Purpose of the site.** Establish CipherCell as an institution rather than a startup: state what
|
||
they do in plain sentences, show the method, publish their thinking (Insights), and make contact easy.
|
||
Bilingual EN/DE. Never invent proof points: every claim on the site traces to the current site,
|
||
the founders' published writing or the funding badge.
|
||
|
||
**Implementation.** Astro, plain CSS custom properties, self-hosted Inter Tight. Copy lives in
|
||
`src/i18n/ui.ts`, tokens in `src/styles/tokens.css`. See `README.md`.
|
||
|
||
---
|
||
|
||
# Design Brief: European Deep-Tech Minimalism
|
||
|
||
This file is the binding design foundation for this project. If a decision isn't covered here, decide in the spirit of this brief, not by the usual SaaS default.
|
||
|
||
---
|
||
|
||
## 1. Attitude
|
||
|
||
The site should look like an institution, not a startup. Composed, serious, understated. The impression comes from restraint: large surfaces, few elements, big typography, documentary photography.
|
||
|
||
Three rules that override everything else:
|
||
|
||
1. **Typography is the primary design tool.** Not color, not icons, not illustration.
|
||
2. **White space is content.** If a section feels too empty, it's probably right.
|
||
3. **No element without a job.** Borders, rules, labels and numbering may only appear when they carry information.
|
||
|
||
Reference points for the look: Arcos, Helsing, Anduril, Palantir, and the Swiss poster tradition they draw on. Not: Stripe, Linear clones, Vercel templates, standard YC landing pages.
|
||
|
||
---
|
||
|
||
## 2. Color
|
||
|
||
The foundation is a **warm paper tone**, never pure white. Contrast comes from exactly three states: paper, night, image.
|
||
|
||
```css
|
||
:root {
|
||
--paper: #E9E5DF; /* base surface for the entire site */
|
||
--paper-deep: #DFDAD1; /* offset surfaces, used sparingly */
|
||
--ink: #1A1A18; /* body copy and headlines, warm-broken black */
|
||
--ink-muted: #57564F; /* secondary text, metadata */
|
||
--night: #0E100F; /* dark sections, image overlays */
|
||
--line: rgb(26 26 24 / 0.14); /* hairlines */
|
||
}
|
||
```
|
||
|
||
Why warm black: on warm paper, pure black reads cold and foreign. `--ink` shares the warmth of the ground it sits on.
|
||
|
||
**Accent color: none by default.** Links and buttons work through underline, weight and surface, not color. If a signal tone is unavoidable (a live status dot, an alarm state in product UI), define exactly one and use it at most twice per page. Always build and look at the colorless version first.
|
||
|
||
Dark sections are allowed but rare: the hero and at most one other. The move from paper to night and back is a dramatic device and loses its effect through repetition.
|
||
|
||
---
|
||
|
||
## 3. Typography
|
||
|
||
One typeface family for the whole site: a **neo-grotesque** with tight counters and little personality in the details.
|
||
|
||
- Licensed (preferred if there's budget): Suisse Int'l, ABC Diatype, Söhne, Helvetica Now Display
|
||
- Free: **Inter Tight** (default recommendation), Instrument Sans, Archivo, Geist
|
||
|
||
No serif. No second family for display. No monospace for labels.
|
||
|
||
Fonts are self-hosted `.woff2` only, with `font-display: swap`, variable font where available.
|
||
|
||
### Scale
|
||
|
||
Fluid scale using `clamp()`. The display size may be genuinely large — it's the one place where the page raises its voice.
|
||
|
||
```css
|
||
:root {
|
||
--step-display: clamp(2.75rem, 1.2rem + 6.2vw, 7rem);
|
||
--step-h2: clamp(1.9rem, 1.1rem + 2.6vw, 3.25rem);
|
||
--step-h3: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
|
||
--step-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
|
||
--step-small: 0.875rem;
|
||
}
|
||
```
|
||
|
||
### Rules
|
||
|
||
| Level | Weight | Tracking | Line height |
|
||
|---|---|---|---|
|
||
| Display | 400–500 | `-0.03em` | 1.02 |
|
||
| H2 | 400–500 | `-0.02em` | 1.08 |
|
||
| H3 | 500 | `-0.01em` | 1.2 |
|
||
| Body | 400 | 0 | 1.55 |
|
||
| Small / meta | 400–500 | 0 | 1.4 |
|
||
|
||
- The larger the size, the tighter the tracking. Never the reverse.
|
||
- Body measure of 68 characters maximum (`max-width: 34em`).
|
||
- Line breaks in headlines are set by hand (`<br>` or `text-wrap: balance`), not left to the browser. A headline is a composed object.
|
||
- Everything flush left. Centered text only where there is a reason you can name.
|
||
- **No all-caps label above headings.** If a section needs an eyebrow, set it in sentence case, in `--ink-muted`, at the same size as small text.
|
||
|
||
---
|
||
|
||
## 4. Layout
|
||
|
||
```
|
||
max-width: 1440px, centered
|
||
Page margins: clamp(1.25rem, 5vw, 5rem)
|
||
Grid: 12 columns, gap clamp(1rem, 2vw, 2rem)
|
||
Section spacing: clamp(6rem, 12vw, 11rem) top and bottom
|
||
```
|
||
|
||
Text blocks sit **asymmetrically**: headline across 7–8 columns, supporting body copy across 4–5, often offset against each other. Full width is reserved for images and the display headline.
|
||
|
||
Radii: `0`, at most `2px`. No rounded cards.
|
||
Shadows: none. Separation comes from hairlines (`1px solid var(--line)`) or from a change of surface.
|
||
|
||
Home page wireframe:
|
||
|
||
```
|
||
┌──────────────────────────────────────────────┐
|
||
│ Wordmark Navigation Contact │ ← slim, hairline below
|
||
├──────────────────────────────────────────────┤
|
||
│ │
|
||
│ [Full-bleed darkened image / video] │
|
||
│ │
|
||
│ Large display headline, │ ← white on image, lower left
|
||
│ two lines. │
|
||
│ │
|
||
├──────────────────────────────────────────────┤
|
||
│ │
|
||
│ Manifesto headline. Two paragraphs │ ← paper, generous air
|
||
│ Second line. of body copy │
|
||
│ [Link] │
|
||
├──────────────────────────────────────────────┤
|
||
│ [Image] │ System / product headline │ ← 50/50, image bleeds off
|
||
│ │ Explanation, link │
|
||
├──────────────────────────────────────────────┤
|
||
│ Sectors │
|
||
│ ┌──────────┬──────────┬──────────┐ │ ← tabs or 3 columns,
|
||
│ │ Image │ Image │ Image │ │ divided by hairlines
|
||
│ │ Title │ Title │ Title │ │
|
||
│ │ Sentence │ Sentence │ Sentence │ │
|
||
│ └──────────┴──────────┴──────────┘ │
|
||
├──────────────────────────────────────────────┤
|
||
│ Proof row: three claims, type and rules only │
|
||
├──────────────────────────────────────────────┤
|
||
│ Quote, set large [Portrait] │
|
||
├──────────────────────────────────────────────┤
|
||
│ Insights: 3 posts, image + category + title │
|
||
├──────────────────────────────────────────────┤
|
||
│ Footer: mission sentence, 4 link columns │
|
||
└──────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 5. Imagery
|
||
|
||
- Documentary, not staged. Aerial views, industrial sites, street scenes, people at work, reflections in glass.
|
||
- Desaturated and darkened. Overlay: `linear-gradient(to top, rgb(14 16 15 / 0.75), rgb(14 16 15 / 0.2))`.
|
||
- No stock-photo look, no smiling teams against white, no 3D renders, no generic icon sets.
|
||
- Products appear as **technical line drawings**: single-color stroke in `--ink`, even stroke width, like a spec sheet. Inline SVG.
|
||
- AVIF with WebP fallback, `<picture>`, `loading="lazy"` except in the hero, explicit `width`/`height` to prevent layout shift.
|
||
- Every image gets descriptive alt text in the voice of the site ("An aerial view of pipework at an industrial plant"), not "Image 1".
|
||
|
||
---
|
||
|
||
## 6. Motion
|
||
|
||
One orchestrated moment on home page load: the hero image settles in from a slight scale, the headline fades in line by line. After that, stillness.
|
||
|
||
Banned, because generic:
|
||
- Fade-and-slide-up on every section as it scrolls into view
|
||
- Hover lift with shadow on every card
|
||
- Parallax
|
||
- Counting-up numbers
|
||
|
||
Allowed: state changes that answer a user action — navigation opening, a tab switching, an accordion expanding. Duration 180–320 ms, `cubic-bezier(0.2, 0, 0, 1)`.
|
||
|
||
`@media (prefers-reduced-motion: reduce)` turns all of it off. No exceptions.
|
||
|
||
---
|
||
|
||
## 7. Language
|
||
|
||
Copy carries the style as much as the layout does. Rules:
|
||
|
||
- Short declarative sentences, with a full stop. "Safety is made, not given."
|
||
- Contrast pairs as a structural device: "Verifiable, not asserted."
|
||
- Sentence case, no exclamation marks, no rhetorical questions.
|
||
- Concrete nouns over categories: "One signal, and a person answers." not "Innovative solutions for your security."
|
||
- Banned: seamless, revolutionary, holistic, next-level, end-to-end, "At X, we believe that…", "In today's fast-moving world".
|
||
- Buttons name the action: "Explore technology", not "Learn more". No "→" inside button text.
|
||
- Headlines may state a claim, but never advertise.
|
||
|
||
---
|
||
|
||
## 8. Anti-patterns
|
||
|
||
These destroy the style immediately. Don't build them, not even "just in one place":
|
||
|
||
- Gradients as decoration, glassmorphism, blurred blobs
|
||
- Identical rounded cards with soft shadows for every kind of content
|
||
- Colored or filled icon sets, emoji
|
||
- An all-caps eyebrow above every heading
|
||
- Meta lines joined with middle dots ("Analysis · 5 min · 2026")
|
||
- Monospace for small text and labels
|
||
- A single word in the headline picked out in color
|
||
- 01 / 02 / 03 numbering where the content isn't a sequence
|
||
- A "Trusted by" logo bar with greyed-out logos
|
||
- Cookie-banner styling that breaks with everything else
|
||
|
||
---
|
||
|
||
## 9. Technical
|
||
|
||
Proposal, unless something else is already fixed:
|
||
|
||
- **Astro** as the framework, islands only where interactivity is genuinely needed (navigation, tabs). Static HTML as the default.
|
||
- **Tailwind v4** with the tokens above in `@theme`, or plain CSS with custom properties. No UI library, no component kit.
|
||
- Content collections for news and insights, Markdown as the source.
|
||
- Bilingual EN/DE via `/` and `/de` routes, language switch in the footer.
|
||
- Self-hosted fonts, no third-party font loading.
|
||
- Target: Lighthouse ≥ 95 across all four categories, LCP under 2.0 s, CLS 0.
|
||
|
||
---
|
||
|
||
## 10. How to work
|
||
|
||
Keep to this order:
|
||
|
||
1. **Tokens first.** Create `src/styles/tokens.css` with color, type scale and spacing scale, and commit it before any component exists. Hard-coded hex values or `px` spacing inside components are a defect and get reverted.
|
||
2. **Primitives next.** Container, grid, section, prose. All spacing comes from the scale.
|
||
3. **One section at a time**, each with real content. No lorem ipsum — write real copy following section 7, even if it will be replaced later.
|
||
4. **Look at it and criticize it.** After each section, take screenshots at 1440 px and 390 px. Check against the anti-patterns in section 8 and state what you're changing.
|
||
5. **Remove one thing.** Before a section counts as done: which element carries the least? Cut it.
|
||
|
||
### Definition of done, per section
|
||
|
||
- [ ] Tokens only, no magic numbers
|
||
- [ ] Checked at 390 px, 768 px, 1440 px and 1920 px
|
||
- [ ] Visible focus ring on every interactive element, full keyboard operation
|
||
- [ ] Contrast at least 4.5:1 for body text, 3:1 for large text
|
||
- [ ] Semantic HTML, one `<h1>` per page, no skipped heading levels
|
||
- [ ] `prefers-reduced-motion` respected
|
||
- [ ] Images with alt text, dimensions and a modern format
|
||
- [ ] Checked against section 8
|
||
|
||
### When to ask
|
||
|
||
Ask rather than guess when: the company and its industry aren't established, no real photography exists, or a section needs content only the client has (certifications, quotes, figures). Never invent proof points, certifications or testimonials.
|
||
|
||
---
|
||
|
||
## Usage
|
||
|
||
Save this file as `CLAUDE.md` in the project root. Claude Code picks it up automatically as project context. Add a short section at the top covering the specific company, its audience and the purpose of the site — without that, the design stays generic.
|