Hallmark Cobalt: unified light palette + Ubuntu fonts
Layout: Ubuntu + Ubuntu Mono (next/font/google), light mode CSS: Hallmark Cobalt palette — cool paper bg, hairlines, electric cobalt primary, slate secondary Cards: white bg, hairline borders, muted type badges Header/tabs: Ubuntu Mono labels, Ubuntu tab buttons Removed: dark mode, Inter/JetBrains Mono, purple gradients
This commit is contained in:
ramseshk
@@ -1,7 +1,5 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
@@ -30,49 +28,61 @@
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: var(--font-jetbrains-mono), ui-monospace, monospace;
|
||||
--font-sans: var(--font-ubuntu), ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: var(--font-ubuntu-mono), ui-monospace, monospace;
|
||||
}
|
||||
|
||||
/* ═══════════ Hallmark Cobalt — Light Palette ═══════════ */
|
||||
:root {
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.0588 0.0162 269.6475);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.1059 0.0201 269.5991);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.1059 0.0201 269.5991);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.985 0 0);
|
||||
--primary-foreground: oklch(0.0588 0.0162 269.6475);
|
||||
--secondary: oklch(0.1776 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.1776 0 0);
|
||||
--muted-foreground: oklch(0.7559 0.0125 239.9659);
|
||||
--accent: oklch(0.1776 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.602 0.2378 25.3312);
|
||||
--border: oklch(1 0 0 / 0.1);
|
||||
--input: oklch(1 0 0 / 0.15);
|
||||
--ring: oklch(0.7559 0.0125 239.9659);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
}
|
||||
|
||||
* {
|
||||
border-color: var(--border);
|
||||
outline-color: var(--ring);
|
||||
--radius: 0.25rem;
|
||||
|
||||
/* Engineered cool paper — never pure white */
|
||||
--background: #f8f9fb;
|
||||
--foreground: #1a1c23;
|
||||
|
||||
/* Cards: crisp white with hairline border */
|
||||
--card: #ffffff;
|
||||
--card-foreground: #1a1c23;
|
||||
|
||||
/* Popovers / overlays */
|
||||
--popover: #ffffff;
|
||||
--popover-foreground: #1a1c23;
|
||||
|
||||
/* Primary: electric cobalt signal */
|
||||
--primary: #0ea5e9;
|
||||
--primary-foreground: #ffffff;
|
||||
|
||||
/* Secondary: slate gray */
|
||||
--secondary: #e8eaf0;
|
||||
--secondary-foreground: #4a4f5c;
|
||||
|
||||
/* Muted: subtle backgrounds */
|
||||
--muted: #f1f3f7;
|
||||
--muted-foreground: #6e7381;
|
||||
|
||||
/* Accent: navy blue */
|
||||
--accent: #1e3a5f;
|
||||
--accent-foreground: #ffffff;
|
||||
|
||||
/* Destructive: coral red */
|
||||
--destructive: #e74c3c;
|
||||
|
||||
/* Borders: engineered hairlines */
|
||||
--border: #e0e4ec;
|
||||
--input: #e0e4ec;
|
||||
--ring: #0ea5e9;
|
||||
|
||||
/* Charts — Hallmark palette */
|
||||
--chart-1: #0ea5e9;
|
||||
--chart-2: #6366f1;
|
||||
--chart-3: #f59e0b;
|
||||
--chart-4: #10b981;
|
||||
--chart-5: #ef4444;
|
||||
}
|
||||
|
||||
/* Body defaults */
|
||||
body {
|
||||
font-family: var(--font-ubuntu), ui-sans-serif, system-ui, sans-serif;
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
@@ -1,26 +1,28 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter, JetBrains_Mono } from "next/font/google";
|
||||
import { Ubuntu, Ubuntu_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const inter = Inter({
|
||||
const ubuntu = Ubuntu({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-inter",
|
||||
weight: ["300", "400", "500", "700"],
|
||||
variable: "--font-ubuntu",
|
||||
});
|
||||
|
||||
const jetbrainsMono = JetBrains_Mono({
|
||||
const ubuntuMono = Ubuntu_Mono({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-jetbrains-mono",
|
||||
weight: ["400", "700"],
|
||||
variable: "--font-ubuntu-mono",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "FTDT Quant Lab",
|
||||
description: "Professional quantitative trading dashboard — live testnet, paper mainnet, historical backtests",
|
||||
title: "Quant Dashboard",
|
||||
description: "Live testnet, paper mainnet, historical backtests",
|
||||
};
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en" className="dark">
|
||||
<body className={`${inter.variable} ${jetbrainsMono.variable} antialiased`}>
|
||||
<html lang="en">
|
||||
<body className={`${ubuntu.variable} ${ubuntuMono.variable} antialiased`}>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -307,14 +307,14 @@ export default function Dashboard() {
|
||||
<header className="sticky top-0 z-50 border-b border-[#e0e4ec] bg-[#f8f9fb]/95 backdrop-blur-sm">
|
||||
<div className="flex items-center justify-between px-6 h-12 max-w-[1440px] mx-auto">
|
||||
<div className="flex items-center gap-5">
|
||||
<span className="text-[11px] font-medium tracking-[0.04em] text-[#1a1c23]" style={{fontFamily:"JetBrains Mono, monospace"}}>
|
||||
<span className="text-[11px] font-medium tracking-[0.04em] text-[#1a1c23]" style={{fontFamily:"'Ubuntu Mono', monospace"}}>
|
||||
{tab === "live" ? "Live Testnet" : tab === "paper" ? "Paper Mainnet" : "Historical"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${liveConn ? "bg-[#0ea5e9]" : "bg-[#e5e7eb]"}`} />
|
||||
<span className="text-[9px] text-[#6e7381] font-medium tracking-[0.03em]" style={{fontFamily:"JetBrains Mono, monospace"}}>
|
||||
<span className="text-[9px] text-[#6e7381] font-medium tracking-[0.03em]" style={{fontFamily:"'Ubuntu Mono', monospace"}}>
|
||||
{liveConn ? "CONNECTED" : "OFFLINE"} · {liveData?.status ?? "···"}
|
||||
</span>
|
||||
</span>
|
||||
@@ -329,7 +329,7 @@ export default function Dashboard() {
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => setTab(t)}
|
||||
style={{fontFamily:"Inter, sans-serif"}}
|
||||
style={{fontFamily:"'Ubuntu', sans-serif"}}
|
||||
className={`relative px-4 py-2.5 text-xs font-medium tracking-[0.02em] transition-colors cursor-pointer
|
||||
${tab === t
|
||||
? "text-[#1a1c23] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-[2px] after:bg-[#0ea5e9]"
|
||||
|
||||
Reference in New Issue
Block a user