Skip to content
DesignMunkDesignMunk Submit a site

Uare

uare.ai
The Only AI Built By You and For You
AI Technology Next.js Tailwind Webflow Homepage Plus Jakarta Sans Source Serif 4
Share Visit site
uare.ai DESKTOP · 1440
Uare

AI Breakdown

Design export

---
version: alpha
name: Uare
description: The Only AI Built By You and For You
colors:
  primary: "#ffffff"
  secondary: "#7c7c7c"
  tertiary: "#272d1b"
  neutral: "#121212"
  border: "#374151"
  brand-silverback: "#cbcbcb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Source Serif 4
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.025em
  headline-md:
    fontFamily: Source Serif 4
    fontSize: 35px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -0.026em
  headline-sm:
    fontFamily: Source Serif 4
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.19
    letterSpacing: -0.017em
  headline-xs:
    fontFamily: Plus Jakarta Sans
    fontSize: 19px
    fontWeight: 500
    lineHeight: 1.21
  body-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.63
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 6px
  sm: 14px
  md: 24px
  lg: 40px
  xl: 68px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#f0f1ed"
    rounded: "{rounded.full}"
    padding: 12px 24px
    height: 45px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 12px 24px
    height: 45px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Uare: "Artificial" Struck Out over a Painted Hero

## Overview

Uare's UI aims for human, trustworthy, and calm. The system is dark-mode first with high-contrast text, serif authority for headlines, and a utilitarian sans for interface copy. Spacing is generous and consistent, producing roomy sections punctuated by compact, pill-shaped CTAs. When tokens don't prescribe a case, favor clarity, readable contrast, and minimal ornamentation.

## Colors

- Primary (#ffffff): Bright foreground on dark surfaces and primary text.
- Secondary (#7c7c7c): Muted body/supporting text and subdued icons.
- Tertiary (#272d1b): Accent for primary CTAs and emphasized elements.
- Neutral (#121212): Core background in dark mode.
- Border (#374151): Dividers, strokes, and interactive outlines.
- brand-silverback (#cbcbcb): Subtle badges, pressed states, and neutral logos.
- surface ({colors.neutral}): Application surface; same as #121212.
- on-surface ({colors.primary}): Text and icons placed on surface backgrounds.

## Typography

- Headlines (lg 48px/1.1, md 35px/1.08, sm 26px/1.19, weight 500) use Source Serif 4. This Google font is freely available; load from Google Fonts. Suitable substitutes if unavailable: Spectral, Merriweather, or Georgia.
- Headline-XS (19px/1.21, 500) bridges headings and UI labels using Plus Jakarta Sans.
- Body (14px/1.63, 400) uses Plus Jakarta Sans for legibility at small sizes. This is a Google font; substitutes: Inter, Manrope, or Work Sans.
- Tracking: headlines include slight negative letter-spacing at large sizes (-0.025em to -0.026em) to tighten the serif texture.

## Layout

- Spacing scale: 6, 14, 24, 40, 68px. Use 14px for tight gaps, 24px for default in-component spacing, 40px for section padding, and 68px for major section separators.
- Grid: generous section blocks with clear gutters; cards and feature rows align to consistent 24px inner padding.
- Typography rhythm: pair 48/35/26px headings with 14px body for strong hierarchy. Preserve at least 24px between heading and following body group.

## Elevation & Depth

- Use measured shadows to layer dark surfaces: sm rgba(0,0,0,0.15) 0 4px 16px; md rgba(16,16,15,0.18) 0 8px 40px; lg oklab(0 0 0 / 0.05) 0 0 0 1px, rgba(20,22,12,0.3) 0 12px 28px -12px.
- When shadows are disabled (xl/inner: none), rely on Border #374151 for 1px delineation and tonal contrast between surface and on-surface.

## Shapes

- Radii: sm = 8px for cards and inputs. full = 9999px for pills (buttons, tags, segmented controls).
- Links and inline actions may be square (0px) per button-link, reinforcing that only CTAs receive pill emphasis.

## Components

Buttons
- Primary Button: background #272d1b, text #f0f1ed, 45px height, 12×24 padding, full radius. Preferred for key conversions.
- Secondary Button: text #ffffff, 45px height, 12×24 padding, full radius. Use on image or dark surfaces when a lighter-weight action is needed.
- Link Button: text #ffffff, 0px radius. Use for inline navigations.

Card
- Background #121212, text #ffffff, radius 8px, padding 16px. Apply sm or md shadow for lift.

### Hero Banner
- Use headline-lg (48px) in Source Serif 4 over media, on-surface text (#ffffff). Primary CTA uses the pill spec above; include optional subheading in Plus Jakarta Sans 14px.

### Featured Press Strip
- Row of grayscale logos on Neutral (#121212) with a 1px top border (#374151). Spacing: 24px gutters; optional "Featured" tag can be a small pill (full radius) using secondary text.

### Build–Chat–Discover Toggle
- Three-option segmented control using full-radius pills. Active state may use Tertiary (#272d1b) background; inactive use transparent with Border (#374151) stroke and secondary text.

### Voice Capture Card
- Implements the Card spec. Include label (19px/500), timer and state messages in 14px body. Primary action follows the pill spec; use md shadow for prominence.

### Seven-Dimensions Input Grid
- Icon + label tiles in a responsive grid. Each tile is a Card (8px radius, 16px padding) with 24px gaps; labels in 14px body.

### Trust & Compliance Panel
- Section with three badges (Encrypted / Isolated / Pen-tested). Use Border (#374151) dividers between items; CTA "View our Trust Center" as button-link.

### Verified Individuals Carousel
- Horizontal list of profile cards: headline-sm (26px) title, 14px description, and a button-link. Card padding 16px; lg shadow for hover.

### Footer Columns
- Columns for Product, Company, Legal. 24px column gutters; top border #374151; links as button-link style (no radius).

## Do's and Don'ts

- Do set all major headings in Source Serif 4 at 48/35/26px with the provided negative tracking.
- Do use full-radius pills for primary CTAs at 45px height and 12×24 padding.
- Do separate dark surfaces with a 1px #374151 border when shadows are off.
- Don't mix corner radii within a component; choose 8px (cards) or full (pills).
- Don't drop below 14px body size; readability is a priority in dark mode.
- Don't introduce un-tokened accent colors; use #272d1b for emphasis.

## Agent Prompt Guide

Quick color reference
- Text: #ffffff
- Background: #121212
- Border: #374151
- Accent: #272d1b

1) Build the hero
"Create a full-width hero on a #121212 surface with a centered media background. H1 set in Source Serif 4 at 48px, weight 500, line-height 1.1, letter-spacing -0.025em, color #ffffff. Subhead in Plus Jakarta Sans 14px/1.63, color #7c7c7c. Add a primary CTA pill at 45px tall with 12px 24px padding, background #272d1b, text #f0f1ed, radius 9999px. Include an optional secondary link button in #ffffff."

2) Voice capture card
"Place a 640px-wide card on #121212 with padding 16px, radius 8px, shadow rgba(0,0,0,0.15) 0 4px 16px. Title in Plus Jakarta Sans 19px/500 #ffffff. Body in Plus Jakarta Sans 14px/1.63 #7c7c7c. Primary record button uses the pill spec (45px, 12×24, #272d1b on #121212). Add a 1px #374151 divider above footer actions."

3) Trust badges row
"Create a three-item row on #121212 with equal columns, each with an icon, a label in Plus Jakarta Sans 14px/1.63 #ffffff, and a caption in #7c7c7c. Use 24px gaps. Surround the row with a 1px #374151 border and 8px radius. Add a button-link 'View our Trust Center' in #ffffff."

4) Build–Chat–Discover segmented control
"Render a segmented control with three options inside a 8px-radius container on #121212. Each option is a pill (radius 9999px). Active: background #272d1b, text #f0f1ed. Inactive: transparent with 1px #374151 stroke and text #7c7c7c. Labels in Plus Jakarta Sans 14px/500. Spacing between pills: 14px."

5) Verified individuals grid
"Output a responsive grid of 2–4 cards per row. Each card: background #121212, radius 8px, padding 16px, shadow oklab(0 0 0 / 0.05) 0 0 0 1px, rgba(20,22,12,0.3) 0 12px 28px -12px on hover. Title in Source Serif 4 26px/1.19 #ffffff; description in Plus Jakarta Sans 14px/1.63 #7c7c7c; 'How I use my AI' as a #ffffff link button."

## Similar Brands

- Anthropic: similarly sober typography and trust-forward language; Uare skews more human with illustration and serif warmth.
- OpenAI: dark UI and restrained palette; Uare uses a stronger serif voice and more personable storytelling.
- Character.AI: social, persona-led framing; Uare is more privacy- and ownership-centric with clearer trust details.
- Replika: focuses on companionship; Uare positions itself as professional and monetizable, with verification and compliance surfaced.

More like this

Browse AI →
adapt.com
Adapt About AI
Adapt About
A minimal header with announcement bar and dual CTAs leads into a centered, punchy mission headline, followed by a friendly collage of…
About · 1 hour ago
openlayer.com
Openlayer About AI
Openlayer About
A high-contrast hero dominates with a black card, elegant serif headline, and a single purple CTA, establishing a clear hierarchy and sleek…
About · 2 hours ago
overmindlab.ai
Overmind AI
Overmind
The AI engineering copilot for agent optimisation and model training.
Homepage · 14 hours ago
customer.io
Customer.io AI
Customer.io
Supercharge your messaging with compounding customer engagement
Homepage · 15 hours ago