Common Ui Design

Name: Common Ui Design
Author: HoangNguyen0403

ASecurity

Assumptions: the SaaS product is named “Orbit,” targets operations teams, and needs a responsive single-page landing page. The chosen aesthetic is retro-futuristic: deep navy, electric lime, distinctive typography, and an orbital command-surface visual that users will remember. ```html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Orbit — Your business, in motion</title> <style> @import url("htt...

549 stars

0 votes

0 copies

0 views

Added 9/5/2026

developmentgoshellapiperformance

Works with

api

Security Analysis

A100/100

Scanned 9/5/2026

Install to Claude Code

$npx -y skills add HoangNguyen0403/agent-skills-standard --skill common-ui-design --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Common Ui Design?

Add the live security badge to your README — it updates automatically with every re-scan.

Security grade badge for Common Ui Design

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/hoangnguyen0403-common-ui-design-c01f78fc/badge)](https://www.skillsdirectory.com/skills/hoangnguyen0403-common-ui-design-c01f78fc)

More formats (shields.io, HTML) on the badges page.

Files

eval-1.baseline.md

Assumptions: the SaaS product is named “Orbit,” targets operations teams, and needs a responsive single-page landing page. The chosen aesthetic is retro-futuristic: deep navy, electric lime, distinctive typography, and an orbital command-surface visual that users will remember.

```html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Orbit — Your business, in motion</title>

  <style>
    @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

    :root {
      --color-primary: #08111f;
      --color-accent: #c8ff5a;
      --color-surface: #101d30;
      --color-text: #f3f7ff;
      --color-muted: #91a0b6;
      --color-line: rgba(255, 255, 255, 0.12);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      color: var(--color-text);
      background:
        radial-gradient(circle at 82% 12%, rgba(200, 255, 90, .16), transparent 26rem),
        radial-gradient(circle at 8% 75%, rgba(77, 125, 255, .16), transparent 30rem),
        var(--color-primary);
      font-family: "DM Sans", sans-serif;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .07;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    }

    .shell {
      width: min(1160px, calc(100% - 40px));
      margin: auto;
    }

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 28px 0;
    }

    .brand {
      color: var(--color-text);
      font: 700 1.4rem "Space Grotesk", sans-serif;
      letter-spacing: -.06em;
    }

    .brand span { color: var(--color-accent); }

    nav a {
      color: var(--color-muted);
      text-decoration: none;
      margin-left: 28px;
      font-size: .9rem;
    }

    nav a:hover { color: var(--color-text); }

    .hero {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 70px;
      align-items: center;
      min-height: 690px;
      padding: 70px 0 110px;
    }

    .eyebrow {
      color: var(--color-accent);
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    h1, h2, h3 {
      font-family: "Space Grotesk", sans-serif;
      letter-spacing: -.065em;
    }

    h1 {
      max-width: 680px;
      margin: 20px 0;
      font-size: clamp(3.5rem, 7vw, 6.8rem);
      line-height: .92;
    }

    .hero-copy {
      max-width: 510px;
      color: var(--color-muted);
      font-size: 1.1rem;
      line-height: 1.7;
    }

    .actions {
      display: flex;
      gap: 14px;
      margin-top: 34px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 14px 21px;
      border-radius: 999px;
      color: var(--color-primary);
      background: var(--color-accent);
      font-weight: 700;
      text-decoration: none;
      transition: transform .2s, box-shadow .2s;
    }

    .button:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 35px rgba(200, 255, 90, .22);
    }

    .button.secondary {
      color: var(--color-text);
      background: transparent;
      border: 1px solid var(--color-line);
    }

    .dashboard {
      position: relative;
      padding: 22px;
      border: 1px solid var(--color-line);
      border-radius: 28px;
      background: rgba(16, 29, 48, .7);
      box-shadow: 0 35px 90px rgba(0, 0, 0, .35);
      transform: rotate(2deg);
    }

    .dashboard::after {
      content: "";
      position: absolute;
      inset: 13% -10% -13% 12%;
      z-index: -1;
      border: 1px solid rgba(200, 255, 90, .22);
      border-radius: 50%;
      transform: rotate(-18deg);
    }

    .dash-top {
      display: flex;
      justify-content: space-between;
      color: var(--color-muted);
      font-size: .8rem;
    }

    .status { color: var(--color-accent); }

    .metric {
      margin: 35px 0 26px;
      padding: 25px;
      border-radius: 18px;
      background: rgba(255, 255, 255, .055);
    }

    .metric small { color: var(--color-muted); }
    .metric strong {
      display: block;
      margin-top: 8px;
      font: 700 3.5rem "Space Grotesk", sans-serif;
    }

    .chart {
      display: flex;
      align-items: end;
      gap: 8px;
      height: 130px;
      padding-top: 20px;
    }

    .bar {
      flex: 1;
      height: var(--height);
      border-radius: 5px 5px 0 0;
      background: linear-gradient(var(--color-accent), #5b7b31);
    }

    .insight {
      margin-top: 20px;
      padding: 16px;
      border-left: 3px solid var(--color-accent);
      color: var(--color-muted);
      background: rgba(200, 255, 90, .06);
      line-height: 1.5;
    }

    .features {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      padding-bottom: 110px;
    }

    .card {
      padding: 28px;
      border: 1px solid var(--color-line);
      border-radius: 18px;
      background: rgba(255, 255, 255, .035);
    }

    .card h3 { font-size: 1.3rem; }
    .card p { color: var(--color-muted); line-height: 1.65; }

    .reveal {
      opacity: 0;
      transform: translateY(22px);
      animation: reveal .7s ease forwards;
    }

    .delay-1 { animation-delay: .12s; }
    .delay-2 { animation-delay: .24s; }
    .delay-3 { animation-delay: .36s; }

    @keyframes reveal {
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 800px) {
      nav a { display: none; }
      .hero { grid-template-columns: 1fr; gap: 42px; padding-top: 40px; }
      .dashboard { transform: none; }
      .features { grid-template-columns: 1fr; }
    }
  </style>
</head>

<body>
  <div class="shell">
    <nav class="reveal">
      <div class="brand">orbit<span>•</span></div>
      <div>
        <a href="#features">Platform</a>
        <a href="#pricing">Pricing</a>
        <a href="#login">Log in</a>
      </div>
    </nav>

    <main>
      <section class="hero">
        <div>
          <div class="eyebrow reveal">The operating system for momentum</div>
          <h1 class="reveal delay-1">Move the work forward.</h1>
          <p class="hero-copy reveal delay-2">
            Orbit brings projects, people, and performance into one clear command surface
            so your team can spend less time coordinating and more time creating.
          </p>
          <div class="actions reveal delay-3">
            <a class="button" href="#start">Start free</a>
            <a class="button secondary" href="#demo">Watch demo ↗</a>
          </div>
        </div>

        <div class="dashboard reveal delay-2" aria-label="Orbit analytics preview">
          <div class="dash-top">
            <span>Workspace / Q3 launch</span>
            <span class="status">● Live</span>
          </div>

          <div class="metric">
            <small>Team momentum</small>
            <strong>84.6%</strong>
            <div class="chart">
              <i class="bar" style="--height: 35%"></i>
              <i class="bar" style="--height: 52%"></i>
              <i class="bar" style="--height: 42%"></i>
              <i class="bar" style="--height: 68%"></i>
              <i class="bar" style="--height: 61%"></i>
              <i class="bar" style="--height: 82%"></i>
              <i class="bar" style="--height: 100%"></i>
            </div>
          </div>

          <div class="insight">
            <strong>Next best action</strong><br />
            Unblock the design review to keep launch velocity above target.
          </div>
        </div>
      </section>

      <section class="features" id="features">
        <article class="card reveal">
          <div class="eyebrow">01 / Clarity</div>
          <h3>See the whole orbit.</h3>
          <p>Turn scattered updates into one live view of priorities, ownership, and progress.</p>
        </article>

        <article class="card reveal delay-1">
          <div class="eyebrow">02 / Velocity</div>
          <h3>Remove the drag.</h3>
          <p>Automate handoffs and surface blockers before they become expensive delays.</p>
        </article>

        <article class="card reveal delay-2">
          <div class="eyebrow">03 / Signal</div>
          <h3>Make better calls.</h3>
          <p>Use real-time performance signals to focus your team on the work that matters.</p>
        </article>
      </section>
    </main>
  </div>
</body>
</html>
```

Common Ui Design

Works with

Security Analysis

Attribution

Comments (0)