Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Oyster
HR TechBased on the design tokens, Oyster appears to use a bold orange primary color (#ff5c35) paired with sophisticated typography mixing Freigeist Con for headlines and Work Sans for body text. The brand seems to favor minimal effects (no shadows) with subtle border radius values, suggesting a clean but approachable aesthetic.
Design Identity
Signature Color
Oyster Orange
#ff5c35
energetic confidence and approachable professionalism
Visual Identity
Cannot determine without visible screenshot - would need to see actual layout and composition
Component Style
Subtle 3px border radius on buttons with no shadows or heavy effects. Light gray input backgrounds (#f5f8fa) with minimal 10px padding suggest clean, understated form elements.
Spacing Philosophy
Moderate spacing with 40px background padding and 10px input padding suggests balanced, not overly generous whitespace usage.
Design Principles
- Border radius stays minimal at 3px maximum
- No shadows or text effects used
- Typography mixing: Freigeist Con for headlines, Work Sans for UI
- Orange accent color (#ff5c35) for primary actions
- Subtle gray backgrounds (#f5f8fa) for form elements
Target Audience
Cannot determine accurately without seeing visual context and content
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 17px | 400 | 25.5px | |
| h1 | 80px | 700 | 84px | |
| h2 | 36px | 400 | 45px | |
| h3 | 24px | 700 | 30px | |
| p | 13px | 400 | 19.5px | |
| a | 17px | 400 | 25.5px | |
| button | 17px | 400 | 25.5px | |
| input | 17px | 400 | normal | |
| nav | 15px | 400 | 22.5px | |
| header | 17px | 400 | 25.5px |
Color Palette
#ffffff#ff5c35#212d3a#018184#959494#d9d9d9#e51520#253342#516383#f5f8fa
