Brand Guidelines

Design system and UI components for ModernAmusement Development

Typography

Our typography system uses a monospace-inspired aesthetic for headings and clean sans-serif for body text.

Headings

H1 - Page Title

Welcome to My Portfolio

H2 - Section Title

Featured Projects

H3 - Subsection

Latest Posts

H4 - Minor Heading

Contents

Paragraphs

Large

Cyber IT Security agency based in Bielefeld, NRW, Germany. Specializing in TypeScript, Go, Python backend, React, and Next.js.

Medium (default)

I build performant, accessible web applications and mobile apps. My journey in development started when I built my first website in college.

Small

Thoughts on development, design, and everything in between.

Lists

Unordered List
  • JavaScript / TypeScript
  • React / Next.js
  • Python / Node.js
Navigation List
  • Blog
  • Projects
  • About
  • Contact

Code

npm install next
const greeting = 'Hello World';
function sayHello() {
  console.log(greeting);
}

Colors

Our color palette features a vibrant orange accent with alternative accent colors for specific use cases.

Backgroundvar(--bg)#0a0a0a / #f4f4f5
Textvar(--text)#ffffff / #1a1a1a
Primary Orangevar(--accent)#ff6600
Neon Green Accent#4BFF00Alt accent color
Error Red#ef4444Error states
Mutedvar(--muted)#888 / #666
Primary Bordervar(--border)#ff6600
Card Backgroundvar(--card-bg)#18181b / #f4f4f5
Primary Orangevar(--accent)#ff6600
Pink#FF9CEAAccent option

Buttons

Buttons are used for primary actions. Use sparingly to maintain emphasis.

Primary
Secondary
Ghost
Sizes
Loading State

Form Elements

Input fields for user data collection. Always include labels for accessibility.

Text Input
Textarea
With Error
Invalid email address

Cards

Cards display grouped content. Used for blog posts, projects, and featured items.

Project Card

German Police Shootings

Interactive timeline analyzing police shootings in Germany from 2000-2024.

Data AnalysisD3.js
Blog Post Card
March 15, 2024

Building Accessible Web Apps

A deep dive into ARIA attributes and keyboard navigation.

AccessibilityReact

Icons

SF Symbol-inspired icons for navigation and file system visualization.

Folder
File
Person
Paperplane
Chevron
Chevron Expanded

Loading States

Loading indicators for async operations and content placeholders.

Spinner
Skeleton
Card Skeleton

Borders & Dividers

Primary orange borders for separation and structure — in both light and dark mode.

Default Border
Accent Border
Hover State
Dividers

Tags & Badges

Small labels for categorization and metadata.

JavaScriptReactTypeScriptNext.jsActive TagClickable Tag

Layout Sections

Common page layouts and content arrangements.

Content Grid
Card 1
Card 2
Card 3
Two Column Layout

Left Column

Primary content area with detailed information.

Right Column

Secondary content or navigation.

Terminal Frame
~/portfolioOnline

Featured Projects

Hero Section
TS • Go • Python • Kali • Nmap • Wireshark • Burp Suite

Welcome to My Portfolio

Founder & Cyber IT Security Engineer

  • ModernAmusement Development
  • Shady Nathan Tawfik
  • Data Science | Machine Learning | AI

~/brand/term-ui

Term UI - 114 components + 40 themes

The termcn-inspired family, natively ported: Alliance No.2, weight 400, square corners, theme variables, zero extra dependencies. The command palette lives at cmd-K.

AspectRatio
16 / 9
Banner
maintenance window tonight 22:00
BigText
Big text
Box
Box content
Breadcrumb
Center
centered
ChatMessage
user
hello
agent
hi
ChatThread
status?
deployed
Checkbox
CheckboxGroup
Clipboard
Clock
--:--:--
Columns
col 1
col 2
Confirm
controlled overlay - render with open + message
ConversationHistory
session 1 - recon12.10.
session 2 - fixes13.10.
DataGrid
assetstatus
originexposed
wafbypassed
DatePicker
date
Definition
CVE
Common Vulnerabilities and Exposures
KEV
Known Exploited Vulnerabilities
Dialog
controlled overlay - render with open + footer
DiffView
--- old
+++ new
-removed line
+added line
 context
Digits
42.0
DirectoryTree
▾src/
▾src/app/
·src/app/page.tsx
▾src/components/
·src/components/Header.tsx
▾public/
▾public/fonts/
·public/fonts/AllianceNo2-Regular.woff2
DitherAreaChart
   ▒ █ 
 █ █▒██
▒██████
DitherBarChart
mon▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░8
tue▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓14
wed▓▓▓▓▓▓▓░░░░░░░░░░░░░5
DitherLineChart
   ●  ●
 ●   ● 
  ●    
●   ●
DitherPieChart
pass██████████████████████72%
fail█████18%
skip███10%
DitherRadarChart
speed██████████████····80
size████████··········45
a11y████████████████··90
Drawer
controlled overlay - render with open + side
EmailInput
EmbeddedTerminal
~/code/term[EOF]
$ curl -sI example.com
HTTP/2 200
server: nginx
ErrorBoundary
everything fine
ErrorRetry
worker offlinecannot reach 127.0.0.1:8788
FilePicker
Form
FormField
Gauge
62%
GitStatus
M src/app/page.tsx
??new-file.ts
A added.tsx
GradientText
gradient text
Grid
a
b
c
HeatMap
HelpScreen
navigation
⌘Kcommand palette
escclose overlay
Image
graphic
InfoBox
[i]evidence hash verified
KeyboardShortcuts
⌘Kcommand palette
⌘/help
LineChart
Link
external link
List
  1. 1. first
  2. 2. second
  3. 3. third
Log
09:17service started
09:18retrying
09:19connection refused
LoginFlow
MaskedInput
Menu
Modal
controlled overlay - render with open + onClose from a client parent
ModelSelector
model
MultiProgress
cpu███████░░░░░░░░░42%
mem████████████░░░░78%
MultiSelect
services
NotificationCenter
notifications
cron: X auto-post disabled09:17
deploy ready08:02
NumberInput
Pagination
Panel
panel
panel body
PasswordInput
PathInput
~/
PieChart
Popover
popover
hidden details
ProgressCircle
71%
RadioGroup
ScrollView
line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10
line 11
line 12
SearchInput
>
Select
SetupFlow
✓install
✓configure
▸verify
·deploy
Sidebar
Spacer
A
B
Spinner
SplashScreen
modern amusement
Stack
one
two
StatusMessage
all systems nominal
rate limit near
Stopwatch
00:00
StreamingText
generating response
TabbedContent
all clear
Table
sevcount
high3
medium20
Tabs
stdout ...
Tag
tag
TagInput
reconstealth
TerminalText
$ npm run build
compiled successfully
$ vercel --prod
TextArea
TextInput
ThinkingBlock
thinking
reasoning steps would be shown here
TimePicker
time
Timer
02:05
Toast
backup complete
worker restarted
Toggle
TokenUsage
input████████████░░░░░░64%
cached████████████████░░91%
ToolApproval
Tool approval required
delete 12 rows from orders
ToolCall
codedrift_searchok
{ query: "auth" }
4 matches
Tooltip
hover me
Tree
▾project
▾src
·app
·components
·package.json
TreeSelect
UsageMonitor
requests830/1000
codes96/100
VirtualList
11asset-11.json
12asset-12.json
13asset-13.json
14asset-14.json
15asset-15.json
16asset-16.json
[+24 more]
WelcomeScreen

welcome

pick a workspace to begin

Wizard
✓scope
▸recon
·plan
step content
TermBadge
okwarnerrorpending
TermBarChart
ban████████████████████████40
rate███████░░░░░░░░░░░░░░░░░12
watch██████████████░░░░░░░░░░24
TermBulletList
  • evidence hashed
  • chain verified
  • report exported
TermCopyButton
TermDivider
section
TermHeading

~/demo

Section heading

TermJson
order{3}
provider: "fivesim"
status: "received"
codes[1]
0: 982976
TermKV
provider5SIM
balance4.82 USD
TermKbd
⌘Kesc
TermNotice
noticeinfo message
TermProgress
TermSkeleton
TermSparkline
▁▃▂▅▆▅█▇
TermStatusDot

Theme palettes - 40

Aaamoled
Aaaura
Aaayu
Aacarbonfox
Aacatppuccin
Aacatppuccin-frappe
Aacatppuccin-macchiato
Aacobalt2
Aacursor
Aadefault
Aadracula
Aaeverforest
Aaflexoki
Aagithub
Aagruvbox
Aahigh-contrast
Aahigh-contrast-light
Aakanagawa
Aalucent-orng
Aamaterial
Aamatrix
Aamercury
Aamonokai
Aanightowl
Aanord
Aaoc-2
Aaone-dark
Aaonedarkpro
Aaopencode
Aaorng
Aaosaka-jade
Aapalenight
Aarosepine
Aashadesofpurple
Aasolarized
Aasynthwave84
Aatokyo-night
Aavercel
Aavesper
Aazenburn

Brand Guidelines v1.0 • ModernAmusement Development